Photoshop制作一個糖果店網(wǎng)站模板教程(3)
在本PS教程中我將教你如何建立一個充滿生機和豐富多彩的糖果了一個獨特和創(chuàng)造性的背景和頭店的網(wǎng)頁設(shè)計。一如往常的PSD文件可以下載本教程。 如果您有任何問題,請在評論。
最終結(jié)果
教程資源
- 風(fēng)車筆刷
- 心形標(biāo)志
- 圖標(biāo)包
- 字體包
教程開始
1。 打開Photoshop和創(chuàng)建一個新文檔的尺寸1200 × 1000。
制作背景
2. 第一個方面,我們將開始的是背景。 使用您的油漆桶工具(G)的填充#FD6E8A你的背景層。
3. 我們希望創(chuàng)造一個圓點圖案,我們可以添加到我們的背景。 要做到這一點,我們需要創(chuàng)建一個新文檔的尺寸45 × 53。
4. 創(chuàng)建一個新的透明層和刪除你的背景層。接下來添加橢圓工具按以下方式兩個圓圈。我用橢圓選取框。
5. 轉(zhuǎn)到“編輯”>定義圖案“,然后插入您的圓點圖案名稱的名稱。 然后可以關(guān)閉了這個文件,并返回到您的模板,我們將使用我們的新創(chuàng)建的格局。
6. 在你的圖層調(diào)色板創(chuàng)建一個新的空白圖層,并將其命名點。 使用您的圖案郵票(S)和發(fā)現(xiàn)在下拉菜單中的圓點刷。 然后繼續(xù)用大刷子刷軟,直到你有結(jié)果類似于以下內(nèi)容:
7.然后,降低你的點層的不透明度約2%。 這將保持在非常微妙的背景。
8. 現(xiàn)在使用橢圓工具,創(chuàng)建一個圓圈,像下面的樣子:
9. 然后,我們要用我們的鋼筆工具(P)來創(chuàng)建一個看起來像下面的頂部形狀:
10. 做完上一步,選擇這兩個層,然后右鍵單擊并選擇合并到一個層,把一層他們。降低你的層不透明度19%左右。然后,我們要重復(fù)兩次CTRL+ j,這一層 以下列方式移動你的形狀。讓你的第二個副本24%不透明度,然后讓你的第三個42%。
11. 最后,我們將增加觸摸到我們的背景是,增加了風(fēng)車效果。 我們將使用從刷一刷這個包 。隨后設(shè)置顏色#FD6E8A前景,放置在它下面的方式。我不透明度降低至約22%。
標(biāo)志
12. 為標(biāo)志,我準(zhǔn)備了“ 糖心圖標(biāo)“。就是下面的效果。
13. 把字添加下面的混合選項:
14. 在字體上加入陰影:
15. 使用您的圓角矩形工具(U)與10px半徑,和一個#BC3D56前景,使一個矩形,它類似于以下內(nèi)容:
16. 我們要突出我們的圓角矩形。為此,點擊圓角矩形圖層調(diào)色板,然后轉(zhuǎn)到“選擇>修改”>漸變“,并在對話框中輸入1。 填寫您的選擇與#FFFFFF上一個新層,然后合同一改再進入“編輯”>清除“。你將留下一個白線,看起來像這樣:
17. 改變混合模式為柔光在這一層,然后降低透明度為38%,F(xiàn)在添加到您的下列混合選項突出層:
18. 添加一些文本,以象征意義,它的顏色#FDDCE3鏈接,你就會有一些看起來像這樣:
19. 現(xiàn)在我們需要創(chuàng)建一個搜索欄。 用你的鋼筆工具,創(chuàng)建一個形狀像一個下面的#72A0E5前景。
20. 使用CTRL+ J來重復(fù)你的形狀,然后進入“編輯>變換>水平翻轉(zhuǎn)和對齊下面的方式。選擇這兩個層次,然后右擊。 選擇合并圖層從下拉菜單:
21. 現(xiàn)在添加下面混合選項到搜索框:
22. 所有這一切都為搜索框左邊是添加一個輸入字段與你的圓角矩形工具與5px半徑。然后我用從NIXUS圖標(biāo)包一個放大鏡圖標(biāo)。
23. 我們的頭部最后一個方面是我們的主網(wǎng)站導(dǎo)航。使用您喜歡的矩形工具,畫出一個矩形。 我們的第一個鏈接“糖果”是#FFFFFF,而其它的鏈接是#FDDCE3。
24. 下面我將著重表現(xiàn)點開的鏈接,我們使用的是一個矩形,顏色不重要,突出是重點:
25. 現(xiàn)在,在您的標(biāo)簽層,添加以下混合選項給它一個很好的漸變。
26. 要添加一些額外的細節(jié),我們的標(biāo)簽,我們要在頂部切出一個小的塊。 使用您的多邊形套索工具(L)的,作出選擇類似于以下命令,然后選擇“選擇>逆時針旋轉(zhuǎn)”。 然后擊中層圖層蒙板圖標(biāo)調(diào)色板選項卡上選擇與你的層。
27. 最后一步是要增加一個像我們周圍的白色邊緣。我們將其設(shè)置為柔光,不透明度,然后降低到約62%。
28. 現(xiàn)在為頭部的背景做個風(fēng)車效果類似以下所示:
29. 現(xiàn)在添加下面層混合選項到您:
30. 為了實現(xiàn)我們的糖果包裝線,我們要創(chuàng)建一個模式。因此,為了這樣做,我們要創(chuàng)建一個新文件的尺寸600 × 600。創(chuàng)建一個新層,并刪除你的背景層,使您留下了一個透明的文件。然后添加以下方式(我做我的背景一束黑色的矩形,以便可以看到更好的,但你的將是透明的):
31. 然后進入“編輯”>定義模式“,并將其命名條紋。關(guān)閉了您的條紋文件,然后返回到您的模板了。CTRL+點擊您的糖果背景使之成為選擇,然后用你的模式郵票工具來刷上一層上方的新創(chuàng)建的模式:
32. 改變混合模式為疊加,不透明度和降低至28%和已完成的頭會如下所示:
內(nèi)容區(qū)
33. 內(nèi)容方面將主要依賴于圖像和文本的位置,并保持事情簡單。 我們將有一個白色的背景,并使用我們的正文文本的顏色#28140D,為標(biāo)題#AF3F55,和#我們聯(lián)系5987CB。
頁腳
34.最后一步是添加一個腳注。使用您的圓角半徑均為15px與矩形工具,使一個形狀像在你的內(nèi)容層以下所示:
35. 現(xiàn)在添加下面混合選項到新創(chuàng)建的圓角矩形層:
36. 我接著使用相同的糖果效果來增加條紋的頁腳。我改變了混合模式柔光,不透明度,降低至15%的時間。
37. 這一切都在現(xiàn)在是添加一些文本和頁腳中的任何圖標(biāo)和您的最終結(jié)果將類似于以下內(nèi)容:
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- Photoshop繪制好看的老式wordpress主題
- Photoshop制作禮品店網(wǎng)站模板
- Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁模板
- PS教程:制作非常不錯的wordpress博客網(wǎng)站模板
- Photoshop CS5制作放射狀光線網(wǎng)頁廣告板
- PS教程:繪制清新的色彩生動的網(wǎng)頁布局
- photoshop網(wǎng)頁應(yīng)用實例:制作蘋果導(dǎo)航欄
- ps設(shè)計制作居家風(fēng)格美食Blog網(wǎng)頁特效
- PhotoShop設(shè)計制作懷舊風(fēng)格網(wǎng)頁的詳細教程