photoshop如何做網(wǎng)站揭密
來源:未知
作者:學(xué)photoshop
學(xué)習(xí):4229人次
1.規(guī)劃:不管是喬客,還是用動(dòng)易、風(fēng)訊,我們都應(yīng)該考慮兩個(gè)問題:
a、版面要分出頭、中、底三個(gè)部分。
b、中間部分要考慮兩種情況,一是兩欄(喬客左窄右寬,動(dòng)易左寬右窄),二是一欄,兩種情況顯示不能變形。有些朋友想每個(gè)板塊的頭部不一樣,這也是可以的,你可以在程序代碼中做文章,那是編程的問題,按下不表。
如果我看到別人的版面想拿下來,那就做個(gè)截圖,建立一個(gè)photoshop文件,把截圖放在最底層,作為最初的草圖。
2、制作。
a、即使不用別人的版面,最好也還是找一個(gè)同類系統(tǒng)的網(wǎng)站截一個(gè)圖,放在最底層。拉三根垂直輔助線:左邊線,中間虛線位置,右邊線。
b、建立頭、中、底三個(gè)圖層組。有些人用photoshop不喜歡建立圖層組,這不是好習(xí)慣,一個(gè)版面,少則幾十層,多則上百層,不分開圖層組管理就很亂,影響工作效率,更影響多人合作。
c、制作的時(shí)候最好盡量把文字內(nèi)容也放上去,可以更接近實(shí)際效果,等切圖的時(shí)候隱藏這些圖層。
d、標(biāo)題樣式。一個(gè)版面除了頭、底要特別制作外,中間部分應(yīng)該考慮制作三種標(biāo)題樣式:左欄、右欄、通欄,也可以統(tǒng)一風(fēng)格。還要考慮表頭背景、一些常用到的邊框等。我自己把許多喜歡的邊框樣式用js作了一個(gè)樣式包,隨時(shí)調(diào)用,而標(biāo)題樣式我是使用flash來做的一個(gè)樣式,使用不同的參數(shù)調(diào)用,就可以有不同的樣式和顏色,改版的時(shí)候就改一個(gè)js文件和flash文件,做版面的時(shí)候會節(jié)省一些時(shí)間。
e、常用的按鈕樣式。常用的按鈕其實(shí)不用在版面制作的時(shí)候做的,可以找回原來的按鈕圖片一個(gè)一個(gè)修改。
f、特殊字體的使用。不管是鏈接還是內(nèi)容,我都主張盡量使用樣式表來控制字體樣式,但有些地方要用到不常用的字體,為了使所有的瀏覽者都能看到自己的設(shè)計(jì)原意,就要把文字制作成圖片,這一類的圖片要適當(dāng)使用,因?yàn)槭褂昧藞D片,對搜索引擎的訪問是無益的。
g、像素圖。盡量使用像素處理,例如一些邊框、小圖標(biāo),會使圖片的字節(jié)數(shù)大大減少,顯示快,容易透明處理。
a、版面要分出頭、中、底三個(gè)部分。
b、中間部分要考慮兩種情況,一是兩欄(喬客左窄右寬,動(dòng)易左寬右窄),二是一欄,兩種情況顯示不能變形。有些朋友想每個(gè)板塊的頭部不一樣,這也是可以的,你可以在程序代碼中做文章,那是編程的問題,按下不表。
如果我看到別人的版面想拿下來,那就做個(gè)截圖,建立一個(gè)photoshop文件,把截圖放在最底層,作為最初的草圖。
2、制作。
a、即使不用別人的版面,最好也還是找一個(gè)同類系統(tǒng)的網(wǎng)站截一個(gè)圖,放在最底層。拉三根垂直輔助線:左邊線,中間虛線位置,右邊線。
b、建立頭、中、底三個(gè)圖層組。有些人用photoshop不喜歡建立圖層組,這不是好習(xí)慣,一個(gè)版面,少則幾十層,多則上百層,不分開圖層組管理就很亂,影響工作效率,更影響多人合作。
c、制作的時(shí)候最好盡量把文字內(nèi)容也放上去,可以更接近實(shí)際效果,等切圖的時(shí)候隱藏這些圖層。
d、標(biāo)題樣式。一個(gè)版面除了頭、底要特別制作外,中間部分應(yīng)該考慮制作三種標(biāo)題樣式:左欄、右欄、通欄,也可以統(tǒng)一風(fēng)格。還要考慮表頭背景、一些常用到的邊框等。我自己把許多喜歡的邊框樣式用js作了一個(gè)樣式包,隨時(shí)調(diào)用,而標(biāo)題樣式我是使用flash來做的一個(gè)樣式,使用不同的參數(shù)調(diào)用,就可以有不同的樣式和顏色,改版的時(shí)候就改一個(gè)js文件和flash文件,做版面的時(shí)候會節(jié)省一些時(shí)間。
e、常用的按鈕樣式。常用的按鈕其實(shí)不用在版面制作的時(shí)候做的,可以找回原來的按鈕圖片一個(gè)一個(gè)修改。
f、特殊字體的使用。不管是鏈接還是內(nèi)容,我都主張盡量使用樣式表來控制字體樣式,但有些地方要用到不常用的字體,為了使所有的瀏覽者都能看到自己的設(shè)計(jì)原意,就要把文字制作成圖片,這一類的圖片要適當(dāng)使用,因?yàn)槭褂昧藞D片,對搜索引擎的訪問是無益的。
g、像素圖。盡量使用像素處理,例如一些邊框、小圖標(biāo),會使圖片的字節(jié)數(shù)大大減少,顯示快,容易透明處理。
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- 學(xué)photoshop
學(xué)習(xí) · 提示
- 發(fā)評論 | 交作業(yè) -
最新評論
5831718252011-01-02 12:13
頂一個(gè)啊,謝謝樓主分享。。
回復(fù)
pd2582858132010-09-05 01:42
看看怎么樣啊 本文來自:ps教程論壇(bbs.16xx8.com)詳細(xì)出處參考:http://bbs.16xx8.com/thread-78977-1-1.html
相關(guān)教程
推薦教程
- Photoshop教程:像素化細(xì)節(jié)設(shè)計(jì)技巧
- Photoshop精細(xì)制作Vista風(fēng)格網(wǎng)站導(dǎo)航條
- 陰影效果,教你制作各類陰影教程
- Photoshop制作網(wǎng)頁搜索條
- banner教程,用ps制作960*90的廣告圖片
- PS教程:設(shè)計(jì)導(dǎo)航鼠標(biāo)懸停狀態(tài)小效果
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- 用ps制作豎列導(dǎo)航
- Photoshop設(shè)計(jì)網(wǎng)站用的藍(lán)色導(dǎo)航圖框
- Photoshop制作網(wǎng)站導(dǎo)航圖
關(guān)注大神微博加入>>
網(wǎng)友求助,請回答!