PS網(wǎng)頁(yè)設(shè)計(jì)教程VII——在Photoshop中設(shè)計(jì)卡通店面布局

本系列的教程來(lái)源于網(wǎng)上的PS教程，都是國(guó)外的，全英文的。本人嘗試翻譯這些優(yōu)秀的教程。因?yàn)榉g能力有限，翻譯的細(xì)節(jié)上還有待推敲，希望廣大網(wǎng)友不吝賜教。

約定：

1、本文的軟件是Photoshop CS5版本

2、原教程的截圖是英文的，本人在重新制作的基礎(chǔ)上，重新截了中文版的圖

3、原文中有些操作沒(méi)有給出參數(shù)。本人在反復(fù)測(cè)試的情況下測(cè)定了一些參數(shù)，以紅色的文字顯示。有些錯(cuò)誤的參數(shù)，直接以紅色文字顯示正確的參數(shù)

例如：（90，22，231，77），表示矩形的左上角的坐標(biāo)是（90，22），寬231，高77

例如：（90，22），表示矩形的左上角的坐標(biāo)是（90，22），矩形的其他兩個(gè)參數(shù)教程里已經(jīng)指定

4、在教程的最后會(huì)附上本人的心得。有些是對(duì)教程中的一些步驟的優(yōu)化等。

1. Firstly download the grid system, unzip the archive file you downloaded, go to the "templates" folder and then go to the Photoshop folder. Choose the 12 Grid file. The psd file will come with a premade grid guide to help you arrange the website. To activate the guides, go to View > Show > Guides.

Will need to make the canvas bigger, go to Image > Canvas Size and put in the new width and height below:

1、首先下載網(wǎng)格系統(tǒng)，解壓你下載的文件，到templates文件夾，到Photoshop子文件夾。選擇12 Grid文件。該P(yáng)SD文件預(yù)制了網(wǎng)格參考線幫助你對(duì)齊網(wǎng)頁(yè)布局。激活參考線，點(diǎn)擊：視圖 > 顯示 > 參考線

我們需要使畫(huà)布變大，點(diǎn)擊：圖像 > 畫(huà)布大小，按照下圖設(shè)置新的寬度與高度。

由于本翻譯教程不使用網(wǎng)格系統(tǒng)。故此步改為新建文檔，文檔大?。?200px*1480px，如下圖所示：

2. To unlock the background layer click on the layer and press the lock icon to unlock.

2、雙擊背景圖層上的鎖定圖標(biāo)，去解鎖背景圖層

3. Using the Rectangle Tool draw a rectangle shape like below using the blue lines as a guide. Press ctrl+t to make the shape transformable and drag each top corner to in while holding down the alt key. Double click on the layer to bring up Blending Options and put in the settings below:

3、用矩形工具畫(huà)一個(gè)矩形（132，200，936，135），和下圖一樣參照藍(lán)色的參考線。按Ctrl+T進(jìn)入變形模式，然后按住Alt鍵按下圖拖動(dòng)頂部的兩個(gè)控制點(diǎn)（應(yīng)該是Ctrl+T后，右鍵選擇透視，拖動(dòng)左上角控制點(diǎn)向內(nèi)側(cè)移動(dòng)70px）。雙擊該圖層打開(kāi)圖層混合選項(xiàng)，按照下圖設(shè)置樣式。命名該圖層為roof

漸變疊加的顏色： #7e1416，#ee2a28

4. Using the circle draw a shape like below while holding down the shift key. Double click into Blending Options and make a stroke of 1px. Duplicate the circle by dragging it to the new layer icon. Make the circles alternate from dark red to white. If the circles don't fit hold down the ctrl key and select all the circle layers and drag them all to the new folder icon. On the folder press ctrl+t and drag a bottom corner across while holding down the shift key.

用橢圓工具按住Shift鍵按下圖去畫(huà)一個(gè)圓。雙擊打開(kāi)圖層樣式，添加描邊1px。拖動(dòng)該圖層到創(chuàng)建新圖層的圖標(biāo)上去復(fù)制該圖層多次。保證這些圓深紅和白交替出現(xiàn)。如果這些圓沒(méi)有出現(xiàn)在合適的位置，按住Ctrl鍵去全選這些圓，拖動(dòng)他們到新建組的圖標(biāo)上，在組上按Ctrl+T，按住Shift鍵，拖動(dòng)一個(gè)底部的控制點(diǎn)到合適的位置

參考原圖，一共12個(gè)圓，計(jì)算得知，每個(gè)圓的直徑就是78px，按照下面的操作，完成12個(gè)半圓的操作

先在左側(cè)位置用橢圓工具創(chuàng)建一個(gè)圓（132，296，78，78），顏色用深紅： #7e1416

雙擊該圖層添加如下的樣式

Ctrl+J復(fù)制該圖層，Ctrl+T自由變形，移動(dòng)新圖層到原圖層右側(cè)的156px處

按Ctrl+Shift+Alt+T復(fù)制新圖層并移動(dòng)到合適的位置（自動(dòng)移到原圖層右側(cè)的156px處）

重復(fù)剛才的操作，直到6個(gè)深紅色的圓都被創(chuàng)建好

用同樣的方法，創(chuàng)建6個(gè)白色的圓

將這些圓合并到一個(gè)新組，命名為circles，點(diǎn)擊：圖層 > 圖層蒙版 > 顯示全部

如下圖，用矩形選擇框創(chuàng)建一個(gè)矩形選區(qū)

按Delete鍵，不顯示矩形選擇框里的內(nèi)容，按Ctrl+D取消選擇，把roof圖層移到circles組的上方

5. Go to the background layer and double click into Blending Options > Gradient Overlay and put in the colours below:

5、回到背景層雙擊打開(kāi)圖層樣式窗口添加漸變疊加樣式，樣式按下圖設(shè)置

顏色疊加的顏色： #09a0df，#80ddff

6. With the rectangle tool draw a top part on the 'roof' using the same Gradient Overlay colours as the red roof. Using the font Bebe Neue write out the menu, then double click into Blending Options > Drop Shadow and put in the settings below:

6、用矩形工具在roof的上方創(chuàng)建一個(gè)矩形（202，142，796，58），添加和roof圖層一樣的漸變疊加的樣式。（直接復(fù)制roof圖層樣式，然后在本圖層粘貼，包括了描邊樣式）

在矩形上添加一些菜單文字，字體：Bebe Neue （找不到該字體，用Arial Rounded MT Bold代替，字體顏色：白色）。雙擊文字圖層按照下圖添加投影的圖層樣式：

字體的相關(guān)設(shè)置如下：

調(diào)整各個(gè)菜單的位置，結(jié)果如下：

7. Using the rectangle tool draw a search box, double clock into Blending Options & put in the settings below. Next Go into Custom Shape tool and select the magnifying glass icon, holding down the shift key (so the shape stays perfect) draw the icon.

7、用矩形工具畫(huà)一個(gè)搜索框（770，152，210，36），雙擊圖層添加圖層樣式，按照下圖設(shè)置樣式。接下來(lái)選擇自定義形狀工具，選擇放大鏡圖標(biāo)，按住Shift鍵（能保留完好的形狀）畫(huà)該圖標(biāo)

在搜索框中添加文本Type in here and Press Enter，設(shè)置如下的格式，字體顏色： #6d6d6d

最終如下：

8. Next using the rectangle tool draw the page background, double click into Blending Options > Gradient overlay and put in the colours I have below, then put a dark grey 1px stroke.

8、用矩形工具畫(huà)一個(gè)頁(yè)面的背景（132，335，936，1070），雙擊打開(kāi)圖層樣式，按下圖設(shè)置漸變疊加和添加1px的深灰色的描邊

漸變疊加的顏色： #4b3226，#2b1915

描邊的顏色： #343434

9. Again with the rectangle tool draw a white 'window', double click into Blending Options and put in the settings below.

9、再用矩形工具畫(huà)窗戶（168，335，864，274），雙擊打開(kāi)圖層樣式，按下圖設(shè)置樣式

10. Next for the slider I've got some ice cream images, I've shrunk the images down (using the ctrl+t method we used earlier). To make the white background of the images transparent I've put all the ice cream images into a folder and set the Blending Mode to Multiply.

10、接下來(lái)在左邊將用到一些冰激淋圖片，縮小這些圖片（用之前的Ctrl+T的方法）。為了使白色背景看起來(lái)象透明的，我將這些圖片歸并一組，然后設(shè)置組的混合選項(xiàng)為正片疊底

11. For the slider I've used the font Heartbreaker, I've rotated the text by pressing ctrl+t and rotating the edges. I've gotten an Hand Drawn , copied & pasted it into the canvas and have changed the size & rotated it using the ctrl+t method & changed the colour by double clicking into Blending Options > Color Overlay.

11、另一邊我用Heartbreaker字體（用Pristina字體替代，具體的設(shè)置如下圖）添加一些文本，按Ctrl+T，旋轉(zhuǎn)文字。我獲得一些手繪圖案，拷貝到畫(huà)布上，用Ctrl+T調(diào)整大小，旋轉(zhuǎn)角度，雙擊打開(kāi)圖層樣式窗口，設(shè)置顏色疊加樣式去更改顏色

文字的格式設(shè)置如下圖

由于圖案比較簡(jiǎn)單，直接自己手繪了。先新建圖層，然后在新圖層上用畫(huà)筆工具手繪，仔細(xì)點(diǎn)就可以了

12. Now draw a box with the rounded rectangle tool, double click into Blending Options and put in the settings below & rotate the box. Using the circle tool draw a black circle & with the line tool draw 2 lines for strings. Place the blue sign layers into a folder.

12、用圓角矩形畫(huà)一個(gè)方塊（寬80px，高60px），雙擊打開(kāi)圖層樣式窗口按照下圖設(shè)置樣式，旋轉(zhuǎn)該方塊，用橢圓工具畫(huà)一個(gè)小黑圓，用直線工具畫(huà)兩條直線。把這些藍(lán)色符號(hào)的層歸并到一個(gè)組

漸變疊加的顏色： #3789cd，#2f6ba3，#3789cd

方塊旋轉(zhuǎn)的角度建議是159度，因?yàn)橹霸O(shè)置的漸變疊加的角度是111度，通過(guò)計(jì)算可知159度是漸變的方向和方塊的方向一致

13. Duplicate the blue sign folder by dragging them to the new layer icon. Go into the Custom Shape tool and choose the arrow, draw a white arrow on each blue sign.

13、復(fù)制藍(lán)色符號(hào)的文件夾，拖動(dòng)到新建圖層的圖標(biāo)上。用自定義形狀工具，選擇箭頭，在每一個(gè)藍(lán)色的符號(hào)上添加一個(gè)箭頭

14. Next draw a 'title' box using the rectangle tool, double click into Blending Options and put in the same red gradient as the 'roof' & put in a 1px dark grey stroke. Next draw a white box with a 1px stroke. Holding down the ctrl key select the 2 shapes you created and duplicate them 4 more times. Place each of them where you want. To make a box larger press ctrl+t and stretch out the box.

14、接下來(lái)用矩形工具畫(huà)標(biāo)題方塊（168，630，264，45），雙擊打開(kāi)圖層樣式窗口，添加和roof圖層一樣的漸變疊加，并添加1px的深灰色（#343434）的描邊，接下來(lái)畫(huà)一個(gè)白色的方塊（168，675，264，195），1px的描邊。

按住Ctrl鍵選擇兩個(gè)圖層，復(fù)制四次。移動(dòng)每個(gè)方塊到合適的位置。然后用Ctrl+T更改一個(gè)方塊的大小

如下圖，五個(gè)標(biāo)題方塊的位置分別是（168，630），（468，630），（768，630），（168，900），（768，900）

左下角的大方塊的寬度為564px，大方塊中白色方塊的高度為416

15. I've put in the headings with the font Bebe Neue, and written out the content in Arial font. I've gotten the icons from the Danish Royalty Free Icon set.

15、在每個(gè)方塊書(shū)寫(xiě)標(biāo)題，用字體Bebe Neue；書(shū)寫(xiě)內(nèi)容，用字體Arial。我從Danish Royalty Free Icon上獲得了一些免費(fèi)的圖標(biāo)

直接復(fù)制roof圖層上的文字圖層，移到合適的位置，修改標(biāo)題文字。Danish Royalty Free Icon的鏈接已經(jīng)失效，改從其他地方獲得圖標(biāo)

16. Using the rectangle shape tool draw out some boxes for the contact form using the colour below. Double click into Blending Options > Stroke and put a 1px dark grey stroke. Draw a button with the rounded rectangle tool & put in the same gradient and stroke as the red title box.

16、用矩形工具在contact表單里畫(huà)一些方塊，顏色如后所示（#ebebeb）。雙擊打開(kāi)圖層樣式窗口，添加1px的深色（#343434）描邊。用圓角矩形工具添加一個(gè)按鈕，給按鈕添加和標(biāo)題欄一樣的漸變疊加和描邊樣式

17, Next holding down the shift key draw 2 boxed with the rectangle tool like below, one white & small and the second large. On the larger box double click into Blending Options and put in the settings below:

17、接下來(lái)用矩形工具按住Shift鍵畫(huà)兩個(gè)正方形，如下圖所示，一個(gè)白色小點(diǎn)的，和一個(gè)白色大點(diǎn)的。在大點(diǎn)的正方形上雙擊打開(kāi)圖層樣式，按下圖設(shè)置樣式

為了醒目，小的白色正方形顏色改成紅色

Write out the example post title & post description.

書(shū)寫(xiě)博客的標(biāo)題和說(shuō)明，標(biāo)題的字體和標(biāo)題欄里的字體一樣，顏色為紅色，說(shuō)明文字的字體和其他欄目里的字體一樣

18. Next copy & paste an example image, right click and Create Clipping Mask (this will crop the image to the size of the white square).

18、接下來(lái)復(fù)制粘貼一個(gè)示意圖片，右鍵創(chuàng)建一個(gè)剪貼蒙版（這會(huì)使你的圖片限制在白色正方形中，本示例為了醒目，已經(jīng)改成紅色）

19. Duplicate the send button you created earlier and place it as a button under the post, change the 'send' to 'continue reading'.

19、復(fù)制你之前創(chuàng)建的第二個(gè)按鈕，把按鈕移到說(shuō)明文字的下方，把send改成continue reading

20. Next I've gotten some icy pole social icons and placed them on top of the layout.

20、接下來(lái)，下載一些icy pole social icons，把它移到布局的合適位置

21. Next write out the title of your website, I've used the font Heartbreaker. Double click on the title into Blending Options and put in the settings below:

21、接下來(lái)添加網(wǎng)站的標(biāo)題，字體：Heartbreaker，雙擊文字圖層打開(kāi)圖層樣式，按下圖設(shè)置樣式：

Go into the Custom Shape Tool & choose this snow flake symbol & while holding down the shift key draw some snow flakes.

切換到自定義形狀工具，選擇雪花形狀，按住Shift鍵，添加一些雪花

22. Lastly write out some Copyright details for the footer.

22、最后在頁(yè)腳添加一些版權(quán)信息

Final Result

最終結(jié)果

后記：

夏日里的清涼。由于該教程是參照960布局系統(tǒng)完成的，有些局部的尺寸比較隨意。在翻譯的時(shí)候，計(jì)算這些尺寸費(fèi)了一番功夫。

對(duì)設(shè)計(jì)師來(lái)說(shuō)，天生對(duì)尺寸有很好的把握，就是鼠標(biāo)拖拖，尺寸也能拿捏的到位。

對(duì)編碼者來(lái)說(shuō)，初期學(xué)習(xí)階段，還是要仔細(xì)計(jì)算各部分的尺寸為好。等將來(lái)做的多了，感覺(jué)到位了，再隨意點(diǎn)也不遲。

更多PS網(wǎng)頁(yè)設(shè)計(jì)教程VII——在Photoshop中設(shè)計(jì)卡通店面布局相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com