導航:首頁 > 萬維百科 > ps網頁設計圖psd

ps網頁設計圖psd

發布時間:2021-01-19 14:35:36

1、用ps做了一個網頁效果圖,現在要用dw設計,psd里的各個素材怎麼導出來?

生ps做的網站效果圖要通過ps的切片工具將你需要的素材,按照一定的尺寸切出來保存為網頁而所用的圖片素材然後在使用代碼進行網頁的構建才可以

2、PSD製作網頁圖的規定尺寸是多少

網頁設計在初始要界定出網頁的尺寸大小.就像繪畫給出一塊畫版來.這樣才能方便設計.

網頁的尺寸受限於兩個因素:一個是顯示器屏幕.顯示器現在種類很多,以17寸為主流, 正在朝19寸及寬屏的方向發展.但目前也有為數不少的15寸顯示器.另一個是瀏覽器軟體,就是我們常用的IE,遨遊,Friefox等.

高度:

高度是可以向下延展的,所以一般對高度不限制. 對於一屏來說,一般沒有一個固定值,因為每個人的瀏覽器的工具欄不同,我見過有的瀏覽器工具欄被插件佔了半個屏幕,所以高度沒有確切值。

寬度:

1、在IE6.0下,寬度為顯示器解析度減21,比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無論你的網頁多高都會有右側的滾動條框。

2、在Firefox下,寬度的分率辨減19。比如1024的寬度-19就變成1005

3、在Opear下,寬度的分率辨減23。比如1024的寬度-23就變成1001

註:Firefox或Opear在內容少於瀏覽器高度時不顯示右側滾動條。

所以如果是1024的解析度,你的網頁不如設成1000安全一點。設成900兩側空白更大,視覺上更舒服一點.也方便做一些浮動層的設計.

如果是800的解析度一般都設成770。但也有設成760的.

這些需要明白並且牢記,不然很可能做出來不符合瀏覽器要求,不過一般我們都回設定的再稍微小一點,應為有些瀏覽器加了插件或者其他的東西寬度會有變化所以 800的解析度一般設定760左右,1024的設定990左右.

網頁設計標准尺寸:

1、800*600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。

2、1024*768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612-615之間.就不會出現水平滾動條和垂直滾動條。

3、在ps裡面做網頁可以在800*600狀態下顯示全屏,頁面的下方又不會出現滑動條,尺寸為740*560左右

4、在PS里做的圖到了網上就不一樣了,顏色等等方面,因為WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色范圍很廣,所以自然會有失色的現象.

頁面標准按800*600解析度製作,實際尺寸為778*434px

頁面長度原則上不超過3屏,寬度不超過1屏

每個標准頁面為A4幅面大小,即8.5X11英寸

全尺寸banner為468*60px,半尺寸banner為234*60px,小banner為88*31px

另外120*90,120*60也是小圖標的標准尺寸

每個非首頁靜態頁面含圖片位元組不超過60K,全尺寸banner不超過14K

標准網頁廣告尺寸規格

一、120*120,這種廣告規格適用於產品或新聞照片展示。

二、120*60,這種廣告規格主要用於做LOGO使用。

三、120*90,主要應用於產品演示或大型LOGO。

四、125*125,這種規格適於表現照片效果的圖像廣告。

五、234*60,這種規格適用於框架或左右形式主頁的廣告鏈接。

六、392*72,主要用於有較多圖片展示的廣告條,用於頁眉或頁腳。

七、468*60,應用最為廣泛的廣告條尺寸,用於頁眉或頁腳。

八、88*31,主要用於網頁鏈接,或網站小型LOGO。

廣告形式 像素大小 最大尺寸 備注

BUTTON 120*60(必須用gif) 7K

215*50(必須用gif) 7K

通欄 760*100 25K 靜態圖片或減少運動效果

430*50 15K

超級通欄 760*100 to 760*200 共40K 靜態圖片或減少運動效果

巨幅廣告 336*280 35K

585*120

豎邊廣告 130*300 25K

全屏廣告 800*600 40K 必須為靜態圖片,FLASH格式

圖文混排 各頻道不同 15K

彈出窗口 400*300(盡量用gif) 40K

BANNER 468*60(盡量用gif) 18K

懸停按鈕 80*80(必須用gif) 7K

流媒體 300*200(可做不規則形狀但尺寸不能超過300*200) 30K 播放時間 小於5秒60幀(1秒/12幀)

網頁中的廣告尺寸

1.首頁右上,尺寸120*60

2.首頁頂部通欄,尺寸468*60

3.首頁頂部通欄,尺寸760*60

4.首頁中部通欄,尺寸580*60

5.內頁頂部通欄,尺寸468*60

6.內頁頂部通欄,尺寸760*60

7.內頁左上,尺寸150*60或300*300

8.下載地址頁面,尺寸560*60或468*60

9.內頁底部通欄,尺寸760*60

10.左漂浮,尺寸80*80或100*100

11.右漂浮,尺寸80*80或100*100

希望對你有幫助

3、用PS做一個網頁設計圖

挺簡單的,現在fireworks中做下PSD圖,然後在DW中處理一下就行了

我也有現成的,加些分留個郵箱可以發給你。。。。

網站分為好多類型,像個人主頁、門戶、論壇等,你可以選擇其中的一個來做。。如果你是新手的話,那就做個個人主頁吧,比較自由,做成什麼樣的都可以。。。。
如果你的程序搞的比較好的話,那就做個論壇吧、

4、根據psd網頁設計稿製作網頁怎麼製作?

PS自動切圖,注意:PSD里每個圖層名稱你要清晰並修改清楚,一些共同的部分,比如背景顏色,字體,超鏈接顏色等等統一寫在css里

確定用html 還是html5語言來寫這個網頁

確定這PSD從頭到尾的排版設計,好規劃自己<div>分層劃分以及css的編寫。

總體還是先規劃好,搭建框架,再細寫代碼。

5、誰有PS的網頁設計啊要PSd格式的,要有過程的,

已發,希望能給你幫助!

6、網頁製作中如何使用PSD模版

其實標準的網製作完成的工作實際是:psd to html,一般情況下,我們會拿到美工的psd,這時候不同的人會有不同的做法:

1.打開fireworks將圖片切割導出為html。

2.直接在dreamweaver之類的工具去拖拉布局,導入相關的圖片,flash資源。

3.先在ps中完成切圖後,在文本編輯器中看著效果圖一步步的製作。

以上是大多被採用的方法,但都不好:

第一種方法最為不好,這樣的代碼根本不具維護性和可讀性。

第二種方法也不好,代碼難免會有冗餘,做出來的東西基本需要排查一遍。

第三種方法也不好,因為你需要看效果圖一點點的拼,也就是說寫html標簽的時候,你在不斷的假設這塊要怎麼去顯示。

正確的做法是:

1.拿到psd後,先不要做別的,直接在文本編輯器中將網頁的框架寫出來,不要假設這塊將來css要去怎麼渲染,完全自然化的標簽,不加任何的css。

2.寫完之後在各個瀏覽器運行之後確保大體定位都沒有問題。

3.書寫總體css,這里的css只負責大塊的定位及樣式。

4.切出需要的圖片資源,在寫好的框架中一點點的去構造,不斷的調試,最終為成品。

5.最後,為自己的代碼添加註釋,在css,html中都要合適的為自己的代碼添加註釋。

要想做出能靈活切換皮膚,讓css主導表現,還有很多要注意的地方,但大體的流程就是這樣的,當然我們一開始不能直接就做到先寫html,但起碼要有這個意識,循序漸進。。。

謝謝熱心會員"linxz"提供實際經驗,我貼上來供大家參考:
PSD出網站從兩個大點考慮
一、一個獨立的頁面
1、分析這個頁面,先在腦袋中或者草稿紙上描繪大概的結構
2、根據設計稿的的情況,分析背景圖的分布、ICO圖的分布等
3、切割相應的圖片,導出、合並圖片
4、在編輯器中寫整體結構XHTML代碼,包括頁面中出現的所有元素的結構
5、編寫CSS樣式中的整體以及模塊代碼
6、細節調整
7、收工,瀏覽器驗證是否正確

二、由多個頁面組成的小站點或者大站點
1、瀏覽所有設計稿,統一規劃站點模塊、圖片、文件分布
2、開始第一點的操作,但規劃站點的內容分布很重要

整體考慮點:
圖片的合並,減少請求量
結構的合理性,語義化
樣式的簡潔,便於後期維護
多為後期的維護以及程序開發著想,如何簡單實現效果

7、網上下了一些網頁設計的圖標素材都是像這種psd圖片的,我要怎麼用啊,摳圖摳下來嗎 - -

你好,一般像素材圖片,特別是PSD的,都是有圖層的,所以你可以用PS軟體打開,裡面會有圖層顯示,每個按鈕都是有圖層的,你只需選擇你要的某個按鈕的圖層,拖到你的設計文件裡面使用即可。如果只是一張JPG圖,全部合了層的,你才需要摳圖,當然效果都一樣。只是這個素材有圖層的話更方便。更多設計方面的專業文章請瀏覽唯美客設計網站!

8、PS網頁製作的作業不會。。用Adobe photoshop,求高手支招!還要用psd源文件,具體要求下圖~求大神幫幫忙~~

作業還是自己做的好啊

9、如何用photoshop進行網頁製作

HTML+CSS+JS,這是廣義上的網頁三元素,HTML負責骨骼,CSS負責血肉,JS負責行為動作。其中瀏覽器中表現的畫面約等於(html+css),但僅僅擁有他們是表現不出設計師們大腦中天馬行空,不拘一格的想像力的,因此才引入了PSD作為設計稿。
這就好比,你完全自己DIY一個高達,你需要先有一副高達圖片(PSD),再通過圖片中的表現自己搭建支撐的骨架(HTML),再用各式噴漆、馬克筆(CSS)去勾畫、完善細節。

那麼回到問題上來,怎麼用PS做網頁?假定adobe體系中,PS永遠只能設計網頁,而Dreamweaver才能製作網頁,但是依然要你自己根據設計去解構設計然後劃分網頁骨架,具體到html上就是根據不同的頁面表現來寫Div標簽,製作Button按鈕,用CSS控制他們的大小和位置以及表現。更進一步的話,大部分前端會手寫html和css代碼,因為DW有各式包括啟動速度,冗餘代碼之類的問題。

至於響應式,這又是基於成型的html以後另一個話題了,但還是html+css,只不過通過UA檢測來適應不同終端的不同展現。

10、網頁設計中很多PSD模版,該怎麼使用PS做好了後然後是不是要用CSS+DIV布局

說話沒明白,好像有點不通順,還不很多靜態的圖片用flash做過了什麼意思,版ps做好的就是切圖啊權,切完圖用dreamweaver進行布局,可以用表格布局也可以用div+css布局,psd模版只是一個效果圖,是網頁布局的參考依據,能按照那個效果圖來做,最終的還是要布局到靜態頁面裡面

與ps網頁設計圖psd相關的知識