photoshop如何設(shè)計(jì)綠色的時(shí)尚Web網(wǎng)站(5)

作者佚名　  出處:UCD博客
  




在此網(wǎng)頁(yè)設(shè)計(jì)教程，您將了解如何創(chuàng)建一個(gè)美麗，綠色，時(shí)尚的布局在photoshop。您將了解到流行的設(shè)計(jì)技術(shù)，如建立一個(gè)三維帶和具有專業(yè)外觀的顏色gradient效應(yīng)。
最后結(jié)果
查看預(yù)覽正是我們要共同創(chuàng)造。不要忘記點(diǎn)擊圖片看全尺寸版本的網(wǎng)頁(yè)布局。



設(shè)置photoshop的文件
1、在photoshop創(chuàng)建一個(gè)新的文件，文件“快捷鍵（按Ctrl+N），大小為980px的830px。



2、標(biāo)尺（按Ctrl+R）沿著邊緣拉4條輔助線。







,                                            創(chuàng)建布局的背景

3、選擇圓角矩形工具“快捷鍵（u）”，設(shè)置半徑為10px、顏色為＃E0E0AC，并沿著輔助線創(chuàng)建一個(gè)圓角矩形。



4、選擇“ 畫布大�。ò碅lt+Ctrl+C）來設(shè)置畫布大小。



5、再次選擇畫布大�。ò碅lt+Ctrl+C），使用的設(shè)置畫布大小。





,                                            6、選擇背景圖層，設(shè)置前景顏色為＃6C821C，并填寫在使用油漆桶工具（按g）。



7、創(chuàng)建一個(gè)新的圖層，選擇漸變工具（按G）從黑色到白色拉漸變。設(shè)置不透明為10％



8、加“圖層蒙版”，選擇漸變工具（按G）從黑色到透明�？纯聪旅娴膱D片，以供參考。





,                                            9、右鍵單擊圖層層，然后選擇轉(zhuǎn)換為智能對(duì)象。然后選擇濾鏡 “噪音 ”添加噪音和使用的設(shè)置下面的圖片。



10、創(chuàng)建一個(gè)新層，選擇畫筆工具（B組），選擇一個(gè)白色的軟刷，設(shè)置直徑300px，并在頂部畫一條白線。設(shè)置不透明度為50％。

11、創(chuàng)建一個(gè)新圖層，設(shè)置前景顏色為黑色和背景顏色為白色（D），然后選擇濾鏡“渲染”云,右鍵單擊該層，選擇轉(zhuǎn)換為智能對(duì)象。

12、選著濾鏡 “模糊”動(dòng)感模糊設(shè)置下面的圖片。

13、然后進(jìn)入過濾鏡“銳化”
14、添加圖層蒙版。
15、選擇漸變工具（G）黑色到透明底部到頂部的文件。
16、選擇混合模式，設(shè)置不透明為40％。



設(shè)置的背景內(nèi)容
17、雙擊“背景”層，打開圖層樣式窗口的設(shè)置和使用的下列圖像外發(fā)光圖層樣式。






,                                            18、創(chuàng)建一個(gè)新層，設(shè)置前景顏色為＃2A2009，選擇畫筆工具（b）從工具面板中，選擇一個(gè)筆刷直徑的25px。
19、右鍵單擊該層，選擇轉(zhuǎn)換為智能對(duì)象。
20、然后進(jìn)入“編輯 自由變換到（Ctrl+T）和伸展的圓圈，像我在下面的數(shù)字。



21、選擇濾鏡“模糊”高斯模糊進(jìn)行設(shè)置，然后設(shè)置混合模式的這一層不透明為30％。






,                                            創(chuàng)建導(dǎo)航欄

22、現(xiàn)在，我們要?jiǎng)?chuàng)建的導(dǎo)航欄。選擇矩形工具（u）和設(shè)置顏色為＃D8D8A5。
23、創(chuàng)建一個(gè)長(zhǎng)方形的高度60px在頂部的大圓角矩形。
注：打開信息面板（F8鍵），這樣你就可以看到您的矩形的高度。



24、使用裁剪工具。右鍵單擊“導(dǎo)航欄”層，然后進(jìn)行裁剪。您可能注意到，因?yàn)閷?dǎo)航欄頂部不是圓角。 要糾正此，我們將使用裁剪面具。 右鍵單擊“導(dǎo)航欄”層，然后選擇創(chuàng)建裁剪面具 。雙擊“導(dǎo)航欄”層，打開圖層樣式窗口進(jìn)行設(shè)置斜面浮雕、漸變疊加。









,                                            25、現(xiàn)在我們要?jiǎng)?chuàng)建一個(gè)背景，current page buttom按鈕。選擇矩形工具（u），設(shè)置顏色為＃A6A43F，并創(chuàng)建一個(gè)小矩形的高度60px，層的不透明為15％。然后右鍵單擊在此層，并選擇裁剪



選擇頭4層，按住Ctrl鍵，然后點(diǎn)擊他們?cè)趫D層面板，然后按Ctrl+G。名為“bg & navigation bar”。

26、選擇文字工具（T）新增的文案，導(dǎo)航菜單使用顏色為＃A6A43F。我使用的是 LT65字體，如果您沒有這個(gè)字體，可使用任何其他的字體，你想要的。






,27、現(xiàn)在，創(chuàng)建一個(gè)新的photoshop文件，新建文件“ （按Ctrl+n），尺寸5px的5px，背景為透明，層的前景顏色為＃2A2009，選擇鉛筆工具（b），選擇一個(gè)筆刷的直徑1px。然后進(jìn)入“編輯 定義圖案，命名，然后單擊確定。關(guān)閉該文件。




創(chuàng)建“特色項(xiàng)目”區(qū)
28、選擇矩形工具（u）建立一個(gè)長(zhǎng)方形的高度330px使用任何你想要的顏色。




29、雙擊層，打開圖層樣式窗口進(jìn)行設(shè)置。




30、選擇圓角矩形工具（u），設(shè)置半徑為8px，設(shè)置顏色為＃A6A43F，并創(chuàng)建一個(gè)圓角矩形的寬度為940px和高度240px，層的不透明性這層至50％






,                                            31、選擇矩形工具（ü），設(shè)置顏色為＃A6A43F，并創(chuàng)建一個(gè)矩形的尺寸610px的220px。這將是背景，精選項(xiàng)目形象。



32、插入您想要的任何圖像文件到您使用移動(dòng)工具（五）（我用的屏幕截圖Envato網(wǎng)站）。
33、把上圖中長(zhǎng)方形你創(chuàng)建在上一步中，右鍵單擊層上的圖片并選擇創(chuàng)建裁剪面具。




34、選擇文字工具（T）和添加一些文字






,                                            創(chuàng)建鼓動(dòng)性按鈕
35、現(xiàn)在，我們要建立兩個(gè)按鈕底部的精選項(xiàng)目部分。選擇圓角矩形工具（ü），設(shè)置半徑為8px和顏色＃A6A42F，創(chuàng)造一個(gè)小圓角矩形。命名此層“按鈕1”。




36、我們希望頂端和按鈕有關(guān)聯(lián)。要做到這一點(diǎn)：
A. 選中節(jié)點(diǎn)
B. 選擇直接選擇工具（A）和點(diǎn)擊的道路上，你看到周圍的按鈕，現(xiàn)在你應(yīng)該看到兩個(gè)定位點(diǎn)在每一個(gè)角落。
C. 選擇轉(zhuǎn)換點(diǎn)工具（它是根據(jù)鋼筆工具），然后按一下四個(gè)定位點(diǎn)上方的按鈕。
D. 選擇直接選擇工具（一）再次按住Shift鍵并創(chuàng)建您連續(xù)彎道。






,                                            37、層不透明為30％。
38、然后添加一些文本使用的文字，工具（T）顏色＃EAEAB7。
39、您還可以添加一個(gè)圖標(biāo)。我用一個(gè)圖標(biāo)從功能圖標(biāo)。




41、創(chuàng)建一個(gè)按鈕后，同上述步驟，使用不同的圖標(biāo)和文字。








創(chuàng)建三維帶
42、選擇矩形工具（u）和建立一個(gè)長(zhǎng)方形的高度130px使用顏色＃A6A43F。






,                                            43、選擇圓角矩形工具（ü），設(shè)置半徑為10px，在左側(cè)創(chuàng)建一個(gè)圓角矩形。



44、點(diǎn)擊載體工具的圓角矩形，然后選擇圓角矩形工具（ü），點(diǎn)擊減去從形狀領(lǐng)域按鈕圖示從選項(xiàng)，看看以下的圖片，以供參考。






,                                            45、創(chuàng)建一個(gè)新層，右鍵單擊它并選擇創(chuàng)建裁剪面具。
46、然后選擇漸變工具（G）白色到透明。




47、層的混合模式的這一層覆蓋，不透明至30％。
48、選擇圓角矩形工具（ü），設(shè)置顏色為＃878533，并創(chuàng)建一個(gè)圓角矩形。
49、然后選擇矩形工具（ü），點(diǎn)擊“從形狀區(qū)域減去”按鈕的選項(xiàng)欄。
50、然后雙擊在此層，打開圖層樣式窗口的設(shè)置。




51、重復(fù)上述步驟。






,                                            52、選擇圓角矩形工具（ü），設(shè)置半徑為8px，顏色為＃E1E0C1，并創(chuàng)造四個(gè)圓形矩形的層面220px的110px。
53、層的不透明性這些層面的50％。



54、選擇工具（T）的從圖層面板，并添加一些文字在底部的布局。您也可以使用一些圖示。




55、使用文字工具（T）及顏色＃E0E0AC寫的名稱，您的網(wǎng)站在上方的文件。
56、雙擊這一層的設(shè)置如圖。




57、然后，使用文字工具（T）的再次寫標(biāo)語(yǔ)。
58、使得所有的東西都完成后，您可以添加4個(gè)圖像文件，將它們放在你的彩帶內(nèi)。




恭喜，我們就大功告成了！