Photoshop制作一個(gè)糖果店網(wǎng)站模板教程

在本PS教程中我將教你如何建立一個(gè)充滿生機(jī)和豐富多彩的糖果了一個(gè)獨(dú)特和創(chuàng)造性的背景和頭店的網(wǎng)頁(yè)設(shè)計(jì)。一如往常的PSD文件可以下載本教程。 如果您有任何問題，請(qǐng)?jiān)谠u(píng)論。

最終結(jié)果

教程資源

• 風(fēng)車筆刷
• 心形標(biāo)志
• 圖標(biāo)包
• 字體包

教程開始

1。 打開Photoshop和創(chuàng)建一個(gè)新文檔的尺寸1200 × 1000。

制作背景

2. 第一個(gè)方面，我們將開始的是背景。 使用您的油漆桶工具（G）的填充＃FD6E8A你的背景層。

3. 我們希望創(chuàng)造一個(gè)圓點(diǎn)圖案，我們可以添加到我們的背景。 要做到這一點(diǎn)，我們需要?jiǎng)?chuàng)建一個(gè)新文檔的尺寸45 × 53。

4. 創(chuàng)建一個(gè)新的透明層和刪除你的背景層。接下來添加橢圓工具按以下方式兩個(gè)圓圈。我用橢圓選取框。

5. 轉(zhuǎn)到“編輯”>定義圖案“，然后插入您的圓點(diǎn)圖案名稱的名稱。 然后可以關(guān)閉了這個(gè)文件，并返回到您的模板，我們將使用我們的新創(chuàng)建的格局。

6. 在你的圖層調(diào)色板創(chuàng)建一個(gè)新的空白圖層，并將其命名點(diǎn)。 使用您的圖案郵票（S）和發(fā)現(xiàn)在下拉菜單中的圓點(diǎn)刷。 然后繼續(xù)用大刷子刷軟，直到你有結(jié)果類似于以下內(nèi)容：

7.然后，降低你的點(diǎn)層的不透明度約2％。 這將保持在非常微妙的背景。

8. 現(xiàn)在使用橢圓工具，創(chuàng)建一個(gè)圓圈，像下面的樣子：

9. 然后，我們要用我們的鋼筆工具（P）來創(chuàng)建一個(gè)看起來像下面的頂部形狀：

10. 做完上一步，選擇這兩個(gè)層，然后右鍵單擊并選擇合并到一個(gè)層，把一層他們。降低你的層不透明度19％左右。然后，我們要重復(fù)兩次CTRL+ j，這一層 以下列方式移動(dòng)你的形狀。讓你的第二個(gè)副本24％不透明度，然后讓你的第三個(gè)42％。

11. 最后，我們將增加觸摸到我們的背景是，增加了風(fēng)車效果。 我們將使用從刷一刷這個(gè)包 。隨后設(shè)置顏色＃FD6E8A前景，放置在它下面的方式。我不透明度降低至約22％。

標(biāo)志

12. 為標(biāo)志，我準(zhǔn)備了“ 糖心圖標(biāo)“。就是下面的效果。

13. 把字添加下面的混合選項(xiàng)：

14. 在字體上加入陰影：

15. 使用您的圓角矩形工具（U）與10px半徑，和一個(gè)＃BC3D56前景，使一個(gè)矩形，它類似于以下內(nèi)容：

16. 我們要突出我們的圓角矩形。為此，點(diǎn)擊圓角矩形圖層調(diào)色板，然后轉(zhuǎn)到“選擇>修改”>漸變“，并在對(duì)話框中輸入1。 填寫您的選擇與＃FFFFFF上一個(gè)新層，然后合同一改再進(jìn)入“編輯”>清除“。你將留下一個(gè)白線，看起來像這樣：

17. 改變混合模式為柔光在這一層，然后降低透明度為38％。現(xiàn)在添加到您的下列混合選項(xiàng)突出層：

18. 添加一些文本，以象征意義，它的顏色＃FDDCE3鏈接，你就會(huì)有一些看起來像這樣：

19. 現(xiàn)在我們需要?jiǎng)?chuàng)建一個(gè)搜索欄。 用你的鋼筆工具，創(chuàng)建一個(gè)形狀像一個(gè)下面的＃72A0E5前景。

20. 使用CTRL+ J來重復(fù)你的形狀，然后進(jìn)入“編輯>變換>水平翻轉(zhuǎn)和對(duì)齊下面的方式。選擇這兩個(gè)層次，然后右擊。 選擇合并圖層從下拉菜單：

21. 現(xiàn)在添加下面混合選項(xiàng)到搜索框：

22. 所有這一切都為搜索框左邊是添加一個(gè)輸入字段與你的圓角矩形工具與5px半徑。然后我用從NIXUS圖標(biāo)包一個(gè)放大鏡圖標(biāo)。

23. 我們的頭部最后一個(gè)方面是我們的主網(wǎng)站導(dǎo)航。使用您喜歡的矩形工具，畫出一個(gè)矩形。 我們的第一個(gè)鏈接“糖果”是＃FFFFFF，而其它的鏈接是＃FDDCE3。

24. 下面我將著重表現(xiàn)點(diǎn)開的鏈接，我們使用的是一個(gè)矩形，顏色不重要，突出是重點(diǎn)：

25. 現(xiàn)在，在您的標(biāo)簽層，添加以下混合選項(xiàng)給它一個(gè)很好的漸變。

26. 要添加一些額外的細(xì)節(jié)，我們的標(biāo)簽，我們要在頂部切出一個(gè)小的塊。 使用您的多邊形套索工具（L）的，作出選擇類似于以下命令，然后選擇“選擇>逆時(shí)針旋轉(zhuǎn)”。 然后擊中層圖層蒙板圖標(biāo)調(diào)色板選項(xiàng)卡上選擇與你的層。

27. 最后一步是要增加一個(gè)像我們周圍的白色邊緣。我們將其設(shè)置為柔光，不透明度，然后降低到約62％。

28. 現(xiàn)在為頭部的背景做個(gè)風(fēng)車效果類似以下所示：

29. 現(xiàn)在添加下面層混合選項(xiàng)到您：

30. 為了實(shí)現(xiàn)我們的糖果包裝線，我們要?jiǎng)?chuàng)建一個(gè)模式。因此，為了這樣做，我們要?jiǎng)?chuàng)建一個(gè)新文件的尺寸600 × 600。創(chuàng)建一個(gè)新層，并刪除你的背景層，使您留下了一個(gè)透明的文件。然后添加以下方式（我做我的背景一束黑色的矩形，以便可以看到更好的，但你的將是透明的）：

31. 然后進(jìn)入“編輯”>定義模式“，并將其命名條紋。關(guān)閉了您的條紋文件，然后返回到您的模板了。CTRL+點(diǎn)擊您的糖果背景使之成為選擇，然后用你的模式郵票工具來刷上一層上方的新創(chuàng)建的模式：

32. 改變混合模式為疊加，不透明度和降低至28％和已完成的頭會(huì)如下所示：

內(nèi)容區(qū)

33. 內(nèi)容方面將主要依賴于圖像和文本的位置，并保持事情簡(jiǎn)單。 我們將有一個(gè)白色的背景，并使用我們的正文文本的顏色＃28140D，為標(biāo)題＃AF3F55，和＃我們聯(lián)系5987CB。

頁(yè)腳

34.最后一步是添加一個(gè)腳注。使用您的圓角半徑均為15px與矩形工具，使一個(gè)形狀像在你的內(nèi)容層以下所示：

35. 現(xiàn)在添加下面混合選項(xiàng)到新創(chuàng)建的圓角矩形層：

36. 我接著使用相同的糖果效果來增加條紋的頁(yè)腳。我改變了混合模式柔光，不透明度，降低至15％的時(shí)間。

37. 這一切都在現(xiàn)在是添加一些文本和頁(yè)腳中的任何圖標(biāo)和您的最終結(jié)果將類似于以下內(nèi)容：