Web設(shè)計(jì)基礎(chǔ)教程-第5章----網(wǎng)頁(yè)按鈕與圖標(biāo)的設(shè)計(jì)與制作課件

1、Web美工基礎(chǔ)教程第5章 網(wǎng)頁(yè)按鈕與圖標(biāo)的設(shè)計(jì)與制作目錄1 水晶設(shè)計(jì)風(fēng)格與扁平設(shè)計(jì)風(fēng)格2制作水晶風(fēng)格按鈕3 制作扁平風(fēng)格按鈕4 網(wǎng)站Logo的設(shè)計(jì)與制作5 像素小圖標(biāo)的設(shè)計(jì)與制作第5章 按鈕和圖標(biāo)是網(wǎng)站中常用的組件，可以影響網(wǎng)站的可用性和用戶(hù)體驗(yàn)。好的按鈕和圖標(biāo)不僅讓網(wǎng)站看起來(lái)生動(dòng)有趣，而且會(huì)增加網(wǎng)站的吸引力。本章將以案例的形式講解幾種常用按鈕和圖標(biāo)的設(shè)計(jì)和制作。常用的按鈕風(fēng)格有哪些呢？5.1 水晶設(shè)計(jì)風(fēng)格與扁平設(shè)計(jì)風(fēng)格 水晶設(shè)計(jì)很常用到的就是高光、陰影、漸變等效果體現(xiàn)出一種水晶質(zhì)感。其所使用的顏色也比較鮮明艷麗，給用戶(hù)的視覺(jué)沖擊及吸引力很強(qiáng)。 那什么是扁平化設(shè)計(jì)呢？所謂扁平化設(shè)計(jì)，就是在進(jìn)行

2、設(shè)計(jì)的過(guò)程中，去除所有具有三維突出效果的風(fēng)格和屬性。也就是說(shuō)，去除掉下落式陰影、梯度變化、表面質(zhì)地差別，以及所有具有三維效果的設(shè)計(jì)效果。扁平化設(shè)計(jì)在如今更備受設(shè)計(jì)師們的青睞，是因?yàn)橥ㄟ^(guò)這種風(fēng)格可以讓設(shè)計(jì)更具有現(xiàn)代感，另外可以強(qiáng)有力的突出設(shè)計(jì)中最為重要的內(nèi)容：內(nèi)容和信息。其實(shí)那些具有三維效果的屬性，本身都是某段時(shí)間的流行風(fēng)格，所以去除掉了這些信息，就能讓設(shè)計(jì)不那么容易過(guò)時(shí)。更何況還能突出內(nèi)容本身。所以這種設(shè)計(jì)風(fēng)格還是有很多好處的。5.1 水晶設(shè)計(jì)風(fēng)格與扁平設(shè)計(jì)風(fēng)格扁平化設(shè)計(jì)的特點(diǎn)是十分鮮明的，扁平化設(shè)計(jì)風(fēng)格具有五個(gè)特點(diǎn)： 拒絕特效 扁平化設(shè)計(jì)概念最核心的地方就是放棄一切裝飾效果，諸如陰影、透視、

3、紋理、漸變等等能做出 3D 效果的元素一概不用。所有的元素的邊界都干凈俐落，沒(méi)有任何羽化、漸變或者陰影。因?yàn)檫@種設(shè)計(jì)有著鮮明的視覺(jué)效果，它所使用的元素之間有清晰的層次和布局，這使得用戶(hù)能直觀的了解每個(gè)元素的作用以及交互方式。如今從網(wǎng)頁(yè)到手機(jī)應(yīng)用無(wú)不在使用扁平化的設(shè)計(jì)風(fēng)格，尤其在手機(jī)上，因?yàn)槠聊坏南拗?，使得這一風(fēng)格在用戶(hù)體驗(yàn)上更有優(yōu)勢(shì)，更少的按鈕和選項(xiàng)使得界面干凈整齊，使用起來(lái)格外簡(jiǎn)單。 界面元素 扁平化設(shè)計(jì)通常采用許多簡(jiǎn)單的用戶(hù)界面元素，諸如按鈕或者圖標(biāo)之類(lèi)。這些用戶(hù)界面元素方便用戶(hù)點(diǎn)擊，這能極大的減少用戶(hù)學(xué)習(xí)新交互方式的成本，因?yàn)橛脩?hù)憑經(jīng)驗(yàn)就能大概知道每個(gè)按鈕的作用。此外，扁平化除了簡(jiǎn)單的形

4、狀之外，還包括大膽的配色。但是需要注5.1 水晶設(shè)計(jì)風(fēng)格與扁平設(shè)計(jì)風(fēng)格意的是，扁平化設(shè)計(jì)不是說(shuō)簡(jiǎn)單的搞些形狀和顏色搭配起來(lái)就行，它和其他設(shè)計(jì)風(fēng)格一樣，是由許多的概念與方法組成的。 優(yōu)化排版 由于扁平化設(shè)計(jì)的使用特別簡(jiǎn)單的元素，排版就成了很重要的一環(huán)，排版好壞直接影響視覺(jué)效果，甚至可能間接影響用戶(hù)體驗(yàn)。字體是排版中很重要的一部分，和其他元素相輔相成。 慣用明亮配色 扁平化設(shè)計(jì)中，配色貌似是最重要的一環(huán)，扁平化設(shè)計(jì)通常采用比其他風(fēng)格更明亮、炫麗的顏色。同時(shí)，扁平化設(shè)計(jì)中的配色還意味著更多的色調(diào)。比如，其他設(shè)計(jì)最多只包含兩三種主要顏色，但是扁平化設(shè)計(jì)中會(huì)平均使用六到八種。5.1 水晶設(shè)計(jì)風(fēng)格與扁平設(shè)

5、計(jì)風(fēng)格 最簡(jiǎn)方案 盡量簡(jiǎn)化設(shè)計(jì)方案，避免不必要的元素在設(shè)計(jì)中出現(xiàn)。簡(jiǎn)單的顏色和字體就足夠了，如果還想添加點(diǎn)什么，盡量選擇簡(jiǎn)單的圖案。扁平化設(shè)計(jì)尤其對(duì)一些做零售的網(wǎng)站幫助巨大，它能很有效的把商品組織起來(lái)，以簡(jiǎn)單但合理方式排列。5.2 實(shí)例1：制作水晶風(fēng)格按鈕 按鈕也是網(wǎng)站的必備元素之一，一般用于實(shí)現(xiàn)提交功能，例如當(dāng)用戶(hù)輸入了關(guān)鍵字后會(huì)點(diǎn)擊“搜索”按鈕，網(wǎng)頁(yè)中將出現(xiàn)搜索結(jié)果。它的結(jié)果應(yīng)放在第一位，所以其設(shè)計(jì)以簡(jiǎn)單明了為首要條件。本案例將介紹制作水晶風(fēng)格按鈕的方法，其效果如圖所示。水晶風(fēng)格按鈕效果圖5.2 實(shí)例1：制作水晶風(fēng)格按鈕 【Step1】啟動(dòng)Photoshop CS6，選擇【文件】/【新建】

6、命令，在打開(kāi)的“新建”對(duì)話(huà)框中輸入文件的名稱(chēng)為“實(shí)例1：制作水晶風(fēng)格按鈕”，寬度300像素，高度200像素，分辨率為72像素/英寸，顏色模式為RGB顏色，背景內(nèi)容為默認(rèn)白色。 新建文件5.2 實(shí)例1：制作水晶風(fēng)格按鈕 【Step2】圓角矩形工具 ，在畫(huà)布中單擊鼠標(biāo)彈出創(chuàng)建圓角矩形窗口，設(shè)置寬度為250像素，高度100像素，半徑5像素。如圖所示。創(chuàng)建圓角矩形 【Step3】【Ctrl+J】組合鍵復(fù)制”圓角矩形1”圖層，選擇”圓角矩形1副本”圖層，【Ctrl+T】組合鍵自由轉(zhuǎn)換縮小矩形框，W：95%，H：90%。如圖所示?？s小矩形框5.2 實(shí)例1：制作水晶風(fēng)格按鈕 【Step4】鼠標(biāo)雙擊”圓角矩形

7、1副本”圖層彈出圖層樣式窗口，或者點(diǎn)擊圖層樣式圖標(biāo) ，勾選漸變疊加。做適當(dāng)?shù)呐渲萌鐖D所示，其中漸變的前景色為R：27、G：50、B：0，背景色為R：136、G：255、B：0。 添加漸變疊加樣式 【Step5】選擇”圓角矩形1副本”圖層為其添加內(nèi)陰影樣式，參數(shù)如圖所示。添加內(nèi)陰影樣式5.2 實(shí)例1：制作水晶風(fēng)格按鈕 【Step6】選擇”圓角矩形1副本”圖層為其添加外發(fā)光樣式，參數(shù)如圖所示。其中前景色為R：20、G：87、B：10。效果圖如圖所示。添加外發(fā)光樣式橢圓工具屬性設(shè)置添加樣式效果圖 【Step7】選擇橢圓工具 ，填充為白色，不描邊，在畫(huà)布中拖拽出如圖形狀并設(shè)置不透明度為50%，如圖所示

8、。橢圓工具拖曳出的形狀5.2 實(shí)例1：制作水晶風(fēng)格按鈕 【Step8】選中”圓角矩形1副本”圖層，在路徑窗口中選中“圓角矩形1副本形狀路徑”右鍵“建立選區(qū)”，如圖所示。建立選區(qū)添加圖層蒙版圖 【Step9】新建圖層，產(chǎn)生新的圖層名為“圖層1”，為該圖層添加圖層蒙版，然后按【Ctrl】鍵并鼠標(biāo)點(diǎn)擊”圖層1”的蒙版圖層，再次載入選區(qū)，如圖所示。選區(qū)效果圖添加圖層蒙版效果圖5.2 實(shí)例1：制作水晶風(fēng)格按鈕 【Step10】在菜單欄中選擇【編輯】/【描邊】，彈出描邊窗口，設(shè)置參數(shù)如圖所示。描邊參數(shù)漸變效果圖 【Step11】選擇漸變工具 ，選擇“黑、白漸變”模式，選中圖層1的蒙版圖層，鼠標(biāo)由上到下的在

9、選區(qū)中拖拽，效果圖如圖所示。5.2 實(shí)例1：制作水晶風(fēng)格按鈕 【Step12】選中所有圖層，【Ctrl+G】組合鍵組合圖層，組名命名為水晶按鈕，并【Ctrl+J】組合鍵復(fù)制組，命名為倒影，如圖所示?！綜trl+T】組合鍵自由變換調(diào)整圖片垂直旋轉(zhuǎn)，如圖所示。圖層選項(xiàng)卡漸變后效果圖垂直旋轉(zhuǎn)效果圖 【Step13】給倒影圖層添加蒙版 ，利用漸變工具 （黑、白漸變模式），并調(diào)整不透明度為30%。效果如圖所示。5.2 實(shí)例1：制作水晶風(fēng)格按鈕 【Step14】選擇橫排文字工具 ，單擊畫(huà)布，出現(xiàn)閃動(dòng)的豎線(xiàn)后，在選項(xiàng)欄中設(shè)置“字體”為Arial，“字體樣式”為Bold，“字體大小”為32點(diǎn)、“文本顏色”為灰

10、色（RGB:205、205、205），在畫(huà)布中，輸入英文字符“submit”，如圖所示。最終效果圖5.3 實(shí)例2：制作扁平風(fēng)格按鈕 本案例將帶領(lǐng)大家繪制一款與水晶風(fēng)格不同的扁平風(fēng)格按鈕，其效果如下圖所示。通過(guò)本案例的學(xué)習(xí)，讀者能夠掌握?qǐng)A角矩形工具、文字工具、圖層樣式、圖層蒙版、等工具的使用，了解到扁平風(fēng)格與水晶風(fēng)格按鈕的區(qū)別。扁平風(fēng)格按鈕效果圖5.3 實(shí)例2：制作扁平風(fēng)格按鈕 【Step1】啟動(dòng)Photoshop CS6，選擇【文件】/【新建】命令，在打開(kāi)的“新建”對(duì)話(huà)框中輸入文件的名稱(chēng)為“實(shí)例2：制作扁平風(fēng)格按鈕”，寬度300像素，高度200像素，分辨率為72像素/英寸，顏色模式為RGB顏色

11、，背景內(nèi)容為默認(rèn)白色。如圖所示。新建文件5.3 實(shí)例2：制作扁平風(fēng)格按鈕 【Step2】【Ctrl+J】組合鍵復(fù)制背景圖層，設(shè)置前景色為灰色（RGB: 238、238、238），按【Ctrl+Delete】組合鍵為畫(huà)布填充背景色。創(chuàng)建圓角矩形 【Step3】設(shè)置前景色為綠色（RGB: 129、229、156），選擇圓角矩形工具【U】（【Shift+U】組合鍵可轉(zhuǎn)換形狀工具），在畫(huà)布中點(diǎn)擊彈出“創(chuàng)建圓角矩形”參數(shù)框，設(shè)置寬度230px，高度80像素，半徑為40px。如圖所示。5.3 實(shí)例2：制作扁平風(fēng)格按鈕 【Step4】在畫(huà)布中點(diǎn)擊出現(xiàn)一個(gè)圓角矩形形狀作為按鈕的基本形狀，拖到畫(huà)布合適的位置，如

12、圖所示。繪制圓角矩形形狀設(shè)置內(nèi)陰影 【Step5】選中“圓角矩形1”圖層，單擊“添加圖層樣式”按鈕 ，彈出圖層樣式選擇框，選擇“內(nèi)陰影”，設(shè)置混合模式為正片疊底，顏色為綠色（RGB: 0、176、91），不透明度為75%，角度為90度，距離2像素、阻塞0%、大小13像素。如圖所示。內(nèi)陰影效果圖5.3 實(shí)例2：制作扁平風(fēng)格按鈕 【Step6】繼續(xù)添加“外發(fā)光”樣式，混合模式為“正?！保煌该鞫日{(diào)整為60%，顏色為綠色（RGB：129 、229 、156）。如圖所示。設(shè)置外發(fā)光外發(fā)光效果圖5.3 實(shí)例2：制作扁平風(fēng)格按鈕 【Step7】為了層次感更強(qiáng)烈，選擇“圓角矩形工具” ，在畫(huà)布中繪制，產(chǎn)生新

13、的圖層“圓角矩形2“，參數(shù)如圖所示。 創(chuàng)建圓角矩形參數(shù) 【Step8】同時(shí)選中“圓角矩形1”圖層和“圓角矩形2”圖層，對(duì)兩個(gè)圖層做垂直居中對(duì)齊 和水平居中對(duì)齊 操作 。5.3 實(shí)例2：制作扁平風(fēng)格按鈕 【Step9】調(diào)整“圓角矩形2”圖層的位置，將其放到“圓角矩形1”圖層的下面。再選中“圓角矩形2”，單擊“添加圖層樣式”按鈕 ，彈出圖層樣式選擇框，選擇“漸變疊加”項(xiàng)，設(shè)置漸變的前景色為淺綠（RGB：222、255、 255），背景色為綠色（RGB：173、232 、191），縮放150%。如圖所示。漸變顏色參數(shù)編輯漸變疊加設(shè)置5.3 實(shí)例2：制作扁平風(fēng)格按鈕 【Step10】層次感效果如圖所示

14、。層次感效果圖創(chuàng)建圓角矩形大小設(shè)置 【Step11】選擇“圓角矩形工具” ，新建一個(gè)圓角矩形圖層，產(chǎn)生新的圖層“圓角矩形3“，參數(shù)如圖所示。調(diào)整“圓角矩形3”圖層到合適的位置，如圖所示。調(diào)整到合適的位置5.3 實(shí)例2：制作扁平風(fēng)格按鈕 【Step12】為”圓角矩形3”圖層設(shè)置樣式，單擊“添加圖層樣式”按鈕 ，彈出圖層樣式選擇框，選擇“漸變疊加”項(xiàng)，設(shè)置漸變的前景色為灰色（RGB：231、231、 231），背景色為白色（RGB：255、255 、255），縮放150%。如圖所示。漸變編輯器前、背景色設(shè)置漸變疊加樣式參數(shù)設(shè)置5.3 實(shí)例2：制作扁平風(fēng)格按鈕 【Step13】繼續(xù)為”圓角矩形3”圖

15、層添加“投影”樣式，正片疊底，顏色為綠色（RGB: 103 、195、182），不透明度56%，角度為90度，距離0像素，大小8像素。如圖所示。投影樣式參數(shù)設(shè)置投影樣式效果圖5.3 實(shí)例2：制作扁平風(fēng)格按鈕 【Step14】 【Ctrl+J】組合鍵復(fù)制“圓角矩形3”圖層，得到“圓角矩形3副本”圖層?！綜trl+T】組合鍵執(zhí)行“自由變化”操作，接著右擊，在彈出的快捷菜單中選擇“縮放”命令，按【Shift+Alt】等比例縮小，如圖所示。等比例縮放漸變疊加設(shè)置 【Step15】 【Enter】鍵確認(rèn)”自由變化”形狀。繼續(xù)為“圓角矩形3副本 ”圖層添加“漸變疊加”樣式，漸變的前景色為灰色（RBG: 2

16、31、238、 239），背景色為白色（RGB:255、255、255）。如圖所示。5.3 實(shí)例2：制作扁平風(fēng)格按鈕 【Step16】 【Shift+Ctrl+Alt+N】組合鍵新建一個(gè)圖層，設(shè)置前景色為白色（RGB:255、255、255），選擇“橢圓工具” ，按【Shift】鍵在畫(huà)布中繪制出一個(gè)正圓。如圖所示。繪制凹陷小圓5.3 實(shí)例2：制作扁平風(fēng)格按鈕 【Step17】為制造凹陷小圓的效果，為”橢圓1”圖層設(shè)置樣式，單擊“添加圖層樣式”按鈕 ，彈出圖層樣式選擇框，選擇“漸變疊加”項(xiàng)，設(shè)置漸變的前景色為白色（RGB：255、255、 255），背景色為灰色（RGB：103 、195、182

17、），縮放150%。如圖所示。橢圓設(shè)置漸變疊加樣式漸變疊加樣式效果圖5.3 實(shí)例2：制作扁平風(fēng)格按鈕 【Step18】選擇“橫排文字工具” ，單擊畫(huà)布，出現(xiàn)閃動(dòng)的豎線(xiàn)后，在選項(xiàng)欄中設(shè)置“字體”為Arial，“字體樣式”為Regular，“字體大小”為24點(diǎn)、“文本顏色”為灰色（RGB:205、205、205），如圖所示。在畫(huà)布中，輸入英文字符“Simple Switch”，如圖所示。輸入英文字符“橫排文字工具”選項(xiàng)欄5.3 實(shí)例2：制作扁平風(fēng)格按鈕 【Step19】菜單欄中選擇【窗口】/【字符】選項(xiàng)，在彈出的字符設(shè)置窗口中，調(diào)整英文字符字符的間距為50，如圖所示。調(diào)整字符間距效果圖字符間距設(shè)置5

18、.4 實(shí)例3：網(wǎng)站Logo的設(shè)計(jì)與制作 LOGO是網(wǎng)站形象的重要體現(xiàn)，即是網(wǎng)站的名片。對(duì)于一個(gè)追求精美的網(wǎng)站，Logo更是它的靈魂所在，即所謂的“點(diǎn)睛”之處。 Logo能使受眾便于選擇，一個(gè)好的Logo往往會(huì)反映網(wǎng)站及制作者的某些信息，特別是對(duì)一個(gè)商業(yè)網(wǎng)站來(lái)話(huà)，我們可以從中基本了解到這個(gè)網(wǎng)站的類(lèi)型，或者內(nèi)容。在一個(gè)布滿(mǎn)各種Logo的鏈接頁(yè)面中，這一點(diǎn)會(huì)突出的表現(xiàn)出來(lái)。在本實(shí)例中，將以繪制健身俱樂(lè)部網(wǎng)站Logo為例，其最終效果如下圖所示。網(wǎng)站logo效果圖5.4 實(shí)例3：網(wǎng)站Logo的設(shè)計(jì)與制作 【Step1】啟動(dòng)Photoshop CS6，選擇【文件】/【新建】命令，在打開(kāi)的“新建”對(duì)話(huà)框中輸

19、入文件的名稱(chēng)為“實(shí)例3：網(wǎng)站Logo的設(shè)計(jì)與制作”。新建文件 【Step2】設(shè)置文件的“寬度”為500像素，“高度”為500像素，“分辨率”為72像素/英寸，顏色模式為RGB顏色，背景顏色默認(rèn)為白色。點(diǎn)擊“確定”按鈕，新建一個(gè)空白圖像文件，如圖所示。5.4 實(shí)例3：網(wǎng)站Logo的設(shè)計(jì)與制作 【Step3】選擇橢圓工具 ，在屬性欄中將圓的填充色設(shè)為黑色（RGB：0,0,0），描邊為黑色（RGB：0,0,0），描邊粗細(xì)為3點(diǎn)，如圖所示。橢圓工具屬性設(shè)置 【Step4】按【Shift+Ctrl+Alt+N】組合鍵新建圖層，按【Shift+Alt】組合鍵在畫(huà)布中拖出一個(gè)正圓形狀，如圖所示。橢圓圖層5.

20、4 實(shí)例3：網(wǎng)站Logo的設(shè)計(jì)與制作 【Step5】再次選擇橢圓工具，在屬性欄中將圓的填充色設(shè)為黑色（RGB：0,0,0），描邊為白色（RGB：255,255,255），描邊粗細(xì)為5點(diǎn)，如圖所示。橢圓工具屬性設(shè)置 【Step6】按【Shift+Ctrl+Alt+N】組合鍵新建圖層，按【Shift+Alt】組合鍵在畫(huà)布中拖出一個(gè)正圓形狀，效果如圖所示。效果圖5.4 實(shí)例3：網(wǎng)站Logo的設(shè)計(jì)與制作 【Step7】選擇”橢圓2”圖層，按【Ctrl+J】組合鍵復(fù)制得到“橢圓 2 副本”圖層。 按【Ctrl+T】組合鍵進(jìn)行自由變換，按【Shift+Alt】組合鍵以圓心為中心縮小，如圖所示。自由變換效果

21、圖描邊樣式設(shè)置 【Step8】按【Enter】鍵確認(rèn)圖形形狀，選擇“橢圓 2 副本”圖層為其添加圖層樣式 ，選擇描邊，如圖所示。5.4 實(shí)例3：網(wǎng)站Logo的設(shè)計(jì)與制作 【Step9】選擇橢圓工具，在屬性欄中將圓的填充色設(shè)為黑色（RGB：0,0,0），描邊為白色（RGB：255,255,255），描邊粗細(xì)為1.5點(diǎn)，如圖所示。橢圓工具屬性設(shè)置 【Step10】按【Shift+Ctrl+Alt+N】組合鍵新建圖層，按【Shift+Alt】組合鍵在畫(huà)布中適當(dāng)位置拖出一個(gè)正圓形狀，如圖所示。正圓形狀效果圖5.4 實(shí)例3：網(wǎng)站Logo的設(shè)計(jì)與制作 【Step11】選擇橢圓工具，在屬性欄中將圓的填充色設(shè)

22、為黑色（RGB：0,0,0），描邊為白色（RGB：255,255,255），描邊粗細(xì)為1.5點(diǎn)，如圖所示。效果圖 【Step12】【Shift+Ctrl+Alt+N】組合鍵新建圖層，選擇橢圓工具，在屬性欄中將圓的填充色設(shè)為黑色（RGB：0,0,0），描邊為黑色（RGB：0,0,0），描邊粗細(xì)為1.5點(diǎn)，如圖所示。橢圓工具屬性設(shè)置5.4 實(shí)例3：網(wǎng)站Logo的設(shè)計(jì)與制作 【Step13】在“橢圓2副本”圖層合適的位置拖拽出小正圓，并按【Alt】鍵在圖層中復(fù)制出一圈小圓，如圖所示。小正圓 【Step14】【step14】按【Ctrl+G】組合鍵將小圓的所有圖層合并到一個(gè)組里，并命名為“小圓”。5.

23、4 實(shí)例3：網(wǎng)站Logo的設(shè)計(jì)與制作 【Step15】 【Shift+Ctrl+Alt+N】組合鍵新建圖層，選擇圓角矩形工具 ，在屬性欄中將圓的填充色設(shè)為白色，描邊為黑色，描邊粗細(xì)為0.2點(diǎn)，半徑為3像素，如圖所示。圓角矩形工具屬性設(shè)置 【Step16】利用圓角矩形工具 在畫(huà)布圓的正中心繪制出啞鈴形狀，如圖所示。啞鈴形狀5.4 實(shí)例3：網(wǎng)站Logo的設(shè)計(jì)與制作 【Step17】按【Ctrl+G】組合鍵將組成啞鈴形狀的所有圖層合并到一個(gè)組里，并命名為“啞鈴形狀”。橢圓工具屬性設(shè)置 【Step18】 【Shift+Ctrl+Alt+N】組合鍵新建圖層，選擇橢圓工具 ，在屬性欄中選擇路徑，如圖所示。

24、將鼠標(biāo)指針置于畫(huà)布中心位置，按住【Shift+Alt】組合鍵不放，繪制正圓路徑，大小和位置如圖所示。繪制路徑圓5.4 實(shí)例3：網(wǎng)站Logo的設(shè)計(jì)與制作 【Step19】 選擇“橫排文字工具” ，將鼠標(biāo)指針置于左側(cè)正圓路徑上，閃爍光標(biāo)時(shí)即可輸入文字，建立路徑文字的起點(diǎn)，輸入文字“Powerhouse Gym”，選擇“路徑選擇工具” 將文字調(diào)整到合適位置，如圖所示。文字圖層1 【Step20】復(fù)制“Powerhouse Gym”圖層，選擇“橫排文字工具”，將鼠標(biāo)指針置于左側(cè)正圓路徑上，閃爍光標(biāo)時(shí)在輸入文字“Reach your potential”，選擇“路徑選擇工具” 將文字調(diào)整到合適位置，如圖

25、所示。文字圖層25.4 實(shí)例3：網(wǎng)站Logo的設(shè)計(jì)與制作 【Step21】 【Shift+Ctrl+Alt+N】組合鍵新建圖層，選擇多邊形工具 ，在屬性欄中選擇形狀，填充為白色，描邊為黑色，邊設(shè)置為5，如圖所示。多邊形工具屬性設(shè)置 【Step22】在圖中繪制五角星并將其拖放到合適的位置，效果如圖所示。五角星繪制5.4 實(shí)例3：網(wǎng)站Logo的設(shè)計(jì)與制作 【Step23】為了使該Logo能與網(wǎng)頁(yè)上其它圖像元素完美融合，則需要將圖片的背景改成透明背景。選中背景圖層，【Delete】鍵刪除背景圖層，效果如圖所示。透明背景 【Step24】在菜單欄中選擇【文件】/【存儲(chǔ)為】，選擇將圖片保存為png格式的

26、，如圖所示。文件保存為png格式5.5 實(shí)例4：像素小圖標(biāo)的設(shè)計(jì)與制作 圖標(biāo)是網(wǎng)頁(yè)中的常見(jiàn)元素，主要功能是表意，也包含裝飾及品牌傳遞的作用。其中存儲(chǔ)為gif、png等位圖格式的圖標(biāo)，稱(chēng)為像素圖標(biāo)，大小通常為16px、24px、32px等。本例將以繪制一個(gè)像素風(fēng)格的人物為例，效果圖如下。像素小圖標(biāo)效果圖5.5 實(shí)例4：像素小圖標(biāo)的設(shè)計(jì)與制作 【Step1】啟動(dòng)Photoshop CS6，選擇【文件】/【新建】命令，在打開(kāi)的“新建”對(duì)話(huà)框中輸入文件的名稱(chēng)為“實(shí)例4：像素小圖標(biāo)的設(shè)計(jì)與制作”，寬度100像素，高度100像素，分辨率為72像素/英寸，顏色模式為RGB顏色，背景內(nèi)容為背景色（灰色RGB:

27、238、238、238）。如圖所示。新建文件5.5 實(shí)例4：像素小圖標(biāo)的設(shè)計(jì)與制作 【Step2】選【step2】菜單欄中選擇【編輯】/【首選項(xiàng)】，網(wǎng)格線(xiàn)間隔為1像素。如圖所示。 【Step3】選擇“縮放工具” ，放大畫(huà)布300%。再在菜單欄中選擇【視圖】/【顯示】中的網(wǎng)格。如圖所示。設(shè)置網(wǎng)格線(xiàn)間隔網(wǎng)格線(xiàn)5.5 實(shí)例4：像素小圖標(biāo)的設(shè)計(jì)與制作 【Step4】【Shift+Ctrl+Alt+N】組合鍵新建圖層，修改圖層名為“腿部和身體軀干部分”。選擇“鉛筆工具” ，大小1px。設(shè)置前景色為肉粉色（RGB：252、193、147），繪制寬2像素、高9像素的腿部，身體軀干部分寬5像素、高9像素。如圖

28、所示。 【Step5】 【Shift+Ctrl+Alt+N】新建圖層，修改圖層名為“腳部和肩部”，繼續(xù)選擇“鉛筆工具” ，大小1px，繪制出腳部（寬3像素、高1像素）和肩膀部分（在軀干的兩邊分別添加1像素的寬度）。如圖所示。腿部和身體軀干部分繪制腳部和肩部5.5 實(shí)例4：像素小圖標(biāo)的設(shè)計(jì)與制作 【Step6】 【Shift+Ctrl+Alt+N】新建圖層，修改圖層名為“頸部和頭部”。繼續(xù)選擇“鉛筆工具” ，大小1px，繪制出頸部（寬3像素、高1像素）和頭部（寬5像素、高5像素）。如圖所示 。 【Step7】 【Shift+Ctrl+Alt+N】新建圖層，修改圖層名為“眼睛”。開(kāi)始設(shè)置面部特征，選擇“鉛筆工具”，大小1px，設(shè)置前景色為灰色（RGB：192、153、1