Photoshop設(shè)計(jì)簡(jiǎn)潔大方干凈的網(wǎng)頁(yè)界面設(shè)計(jì)教程

1、Photoshop設(shè)計(jì)簡(jiǎn)潔大方干凈的網(wǎng)頁(yè)界面設(shè)計(jì)教程作者：情非得已 來(lái)源：優(yōu)設(shè) 更新時(shí)間：2013-3-18分享到 HYPERLINK http:/www.poluo/jzxy/201303/200521.html o 累計(jì)分享9次 9今天，我將介紹如何創(chuàng)建一個(gè)干凈的網(wǎng)絡(luò)布局、一個(gè)漂亮的背景。開門見山，咱直接切入正題吧，菇?jīng)鰩浉鐐冇信d趣的話，可以打開PS跟著做喲。開始設(shè)置的文件打開一個(gè)新的文檔：外形尺寸12001640像素，分辨率為72像素/英寸。我們要?jiǎng)?chuàng)建基本的背景層。簡(jiǎn)單的在草稿上勾畫出大概的布局與結(jié)構(gòu)，可以看出頁(yè)面最終的雛形，不過(guò)在設(shè)計(jì)過(guò)程中，我們可能會(huì)添加新的元素。草稿上可以看出，我們

2、將創(chuàng)建5個(gè)分欄，在這里我們將添加的內(nèi)容。添加的第一層，這將是我們的背景，顏色#ededed。在頁(yè)面頂部繪制一個(gè)矩形命名為top1(使用矩形柵格化的圖層(顏色#ededed)，并添加雜色(濾鏡雜色添加雜色0.5 0.8;高斯分布和單色)。再次繪制矩形，顏色#cddcec)，柵格化的形狀和添加雜色(濾鏡雜色添加雜色0.5 0.8;高斯分布和單色)。添加一個(gè)漸變疊加(柔光，54%，從黑到白的90%，角度和縮放75%)。接下來(lái)添加矩形(U)，在中間新建一個(gè)矩形(顏色為#608bb6，高度400像素左右)，設(shè)置混合模式為顏色加深，并填充為75%，然后添加一個(gè)白色的描邊1像素(圖層樣式)。最后的底部頁(yè)腳添

3、加一個(gè)矩形形狀，使用相同的工具和色彩，但現(xiàn)在設(shè)置混合線性光，不透明度為70%。下面的最終結(jié)果。步驟2 背景給我們的背景添加紋理。添加一個(gè)新層(CTR + SHIFT + N)，使用選框工具在畫布頂部添加一個(gè)1像素的白線。(仔細(xì)看下圖頂部有條白線)現(xiàn)在打開一個(gè)新的文檔121像素，背景層解鎖并隱藏它。放大到3200%(最大)，添加一個(gè)新圖層，使用矩形選框工具添加兩個(gè)11像素的正方形，填充顏色為#FFF和其他#000，如下圖所示。然后選擇菜單編輯定義圖案。我們制作了一個(gè)新的圖案效果即將使用(這也是一個(gè)制作樣式圖案方法哦)回到我們的主要文件。創(chuàng)建一個(gè)新的圖層，用矩形選框工具繪制一個(gè)整個(gè)畫布那么大的選區(qū)

4、，填充前景色，設(shè)置填充為0%，然后添加圖層樣式里的圖案疊加?，F(xiàn)在是時(shí)候繪制云了!您可以拉出5條輔助線(如圖，方法,菜單視圖新建參考線分別輸入位置84px 186px 600px的- 1014px 1118px)，以劃分工作區(qū)，然后使用橢圓工具添加一些形狀(如圖)，然后把這幾個(gè)形狀圖層都選中并編組。復(fù)制這個(gè)組并將復(fù)制出來(lái)的組轉(zhuǎn)化為智能對(duì)象(點(diǎn)組然后右鍵即可看到)，添加雜色。現(xiàn)在，你必須使用一個(gè)圖層蒙版隱藏超出部分的云(認(rèn)真看下面的方法)：Ctrl +單擊“圖層top1”那個(gè)圖層縮覽圖(在“圖層”面板中)，出現(xiàn)選區(qū)，然后單擊選擇已經(jīng)添加雜色那個(gè)云的圖層，關(guān)鍵的一步，單擊添加矢量蒙版。img/jzx

5、y/UploadFiles_333/201303/20130318212842461.jpg/imgimg/jzxy/UploadFiles_333/201303/20130318212842461.jpg/imgimg/jzxy/UploadFiles_333/201303/20130318212842461.jpg/imgimg/jzxy/UploadFiles_333/201303/20130318212842461.jpg/imgimg/jzxy/UploadFiles_333/201303/20130318212842461.jpg/img然后應(yīng)用下面的樣式。內(nèi)陰影：混合模式選擇疊加

6、，白色，透明度55%，全局光角度120，距離5大小0。出現(xiàn)云的白色投影?，F(xiàn)在，我們畫個(gè)漂亮的云彩陰影。復(fù)制云那圖層，先清除圖層樣式，調(diào)整位置向右側(cè)下移低于原來(lái)的層，設(shè)置填充為0%，再添加下面的樣式。漸變疊加，線性，混合模式正常，角度90。如果成功出現(xiàn)了，那么使用相同的方式來(lái)繪制他的云。第3步 頂部配飾繪制添加logo。使用鋼筆工具(顏色#79a7db)，勾畫出下面的圖形，使用直線工具繪制兩個(gè)白色線段。然后添加圖層樣式。投影，混合模式為正片疊底，透明度46%，取消全局光，調(diào)整角度為140，距離7px大小0。描邊，白色大小3px，位置內(nèi)部，透明度55%，混合模式正常。確定然后為兩條白線也應(yīng)用相同的

7、陰影。添加文字(找個(gè)類似的字體吧)圖中使用 Ballpark 字體，然后添加陰影和漸變疊加。圖層樣式如下圖。我們要使用縮放，鋼筆工具，橢圓工具，圓角矩形工具繪制一個(gè)賣萌，簡(jiǎn)單的機(jī)器人。這里不多描述如何繪制這個(gè)機(jī)器人了，看圖吧。把繪制成功的機(jī)器人群組，ctrl+鼠標(biāo)點(diǎn)擊云層的縮略圖，再選中機(jī)器人的t添加一個(gè)圖層蒙版，目的是把他藏到云后面，蒙版的方式上面介紹過(guò)，重溫下吧?，F(xiàn)在我們就來(lái)畫鳥和徽章。我們使用鋼筆工具，畫筆工具和橫排文字工具。如何，有詳細(xì)的繪制過(guò)程。用自己的方式繪制出來(lái)也可以哦。第4步 第一個(gè)分欄繪制首先，創(chuàng)建一個(gè)區(qū)域框，我們將添加團(tuán)隊(duì)成員的信息。使用矩形工具繪制一個(gè)480425白色矩形

8、，上下添加兩個(gè)灰線(這里可以使用剪切蒙版，不會(huì)的同學(xué)把尺寸對(duì)齊就好了)，并添加一段文字 圖中字體為Delicious。為文字和白色矩形添加圖層樣式如圖混合模式為正片疊底，透明度4%黑色，取消全局光角度42，距離3px，大小0px。接著來(lái)，在輔助線的幫助下，添加照片和資料，自己找圖占位吧。下面是每個(gè)字體的樣式，尺寸，顏色還記得上面我們繪制過(guò)相同的箭頭了么。同樣的方式，再繪制一個(gè)。用矩形工具，然后再輔助線的幫助下，創(chuàng)建一個(gè)矩形的形狀圖層arrow，添加錨點(diǎn)工具和直接選擇工具。為他添加陰影。復(fù)制這個(gè)圖層得到arrow副本，這里你可以隱藏圖層arrow，設(shè)置顏色為#000，不透明度為5%。ctrl+t

9、然后右鍵選擇變形徑，稍作調(diào)整，得到以下圖形。好了，現(xiàn)在顯示剛才隱藏的圖層arrow，并提到副本那層上面。使用橫排文字工具來(lái)創(chuàng)建一個(gè)“”字符串，你可以柵欄化和變形得到下面的效果，還添加了柔軟的陰影。(憑感覺吧)最后添加文本(有點(diǎn)小投影哦)?，F(xiàn)在創(chuàng)建三個(gè)街區(qū)，該工作室提供的服務(wù)的描述。在本節(jié)中，我們使用真棒圖標(biāo)集，創(chuàng)造了由灰粉阿巴斯為WeGraphics，WAPP卷。2和WAPP卷。記?。涸谶@種情況下，導(dǎo)游是真正有用的，以填補(bǔ)圖標(biāo)和文字部分。添加三個(gè)“點(diǎn)”(一個(gè)不錯(cuò)的陰影)，提高1px的白色陰影的文字，如下圖所示。我們創(chuàng)建也是一個(gè)不錯(cuò)的菜單，只需在下面的白框，它應(yīng)該是在這一點(diǎn)上，清楚如何實(shí)現(xiàn)這個(gè)菜

10、單。我們?cè)黾恿艘粍傄蝗醿?nèi)陰影“箭頭”。第5步 中間帶中間的元素，我們的設(shè)計(jì)是一個(gè)內(nèi)容豐富的信息圖表中引入的一大功能區(qū)，其中包含一個(gè)口號(hào)。為了實(shí)現(xiàn)這一功能區(qū)，我們將創(chuàng)建5個(gè)自定義形狀使用鋼筆工具，像往常一樣，(我再次提醒的是，如果你是一個(gè)初學(xué)者，你可以閱讀入門：Photoshop的鋼筆工具，以了解更多有關(guān)如何使用這工具)。一起來(lái)看看究竟是什么樣的形狀，我們需要繪制(注：主要形狀和#798ea4為較深的形狀)，我們將使用#497287。怎么樣的風(fēng)格呢?好了，我們申請(qǐng)的“前端形狀相同的風(fēng)格，”你可以看到下面(的模式，我們要使用，是從舊紙上WeGraphics 模式)。對(duì)于兩個(gè)小三角形，應(yīng)用以下樣式：

11、啟動(dòng)子添加的口號(hào)。第6步 信息圖表需要合成的我們的fictionary設(shè)計(jì)工作室的創(chuàng)作過(guò)程中加入少許的信息圖表新生兒從的想法。下面你可以看到大結(jié)局的結(jié)果(明顯的，它只是一個(gè)簡(jiǎn)單的例子，如何發(fā)展背后的一個(gè)項(xiàng)目，你可以描述一個(gè)創(chuàng)造性的過(guò)程)。開始設(shè)計(jì)的兩個(gè)圓(按住Shift鍵畫一個(gè)完美的圓周，顏色為#3d3d3d)。設(shè)置，左側(cè)的形狀，填充為0%;合適的形狀，設(shè)置混合模式為亮光，填充為35%。添加樣式，如下所示(為圖案疊加為左側(cè)的形狀的形狀，除了它是相同的)。需要注意的是左邊的圓圈中使用自定義的模式，我們可以采取的步驟2相同的技術(shù)來(lái)創(chuàng)建此模式。使用橢圓工具(白色的小圓圈一次，然后把它復(fù)制到再次使用)

12、和線工具(重量：3px的，顏色為#FFFFFF)設(shè)計(jì)圖在左側(cè)。集團(tuán)所有創(chuàng)建的形狀和線條，重復(fù)的組，將其轉(zhuǎn)換為智能對(duì)象，然后柵格化了。現(xiàn)在，您可以將樣式添加到該層。使用鋼筆工具繪制一些標(biāo)簽(使用鮮艷的色彩：#d82f4c，#edcd59，4d85a2#598b3b)，然后將它命名使用橫排文字工具，您可以申請(qǐng)一個(gè)的軟降shadwo到，標(biāo)簽和文字。在正確的圈等三個(gè)圓圈，設(shè)置填充為20%，添加文字(你可以申請(qǐng)一個(gè)軟陰影的字符串)，如圖所示?，F(xiàn)在，我們要隱藏超出部分的“設(shè)計(jì)”與“發(fā)展”界。正如已經(jīng)看到的，我們將使用圖層蒙版。按Ctrl +單擊在“圖層”調(diào)板中的“創(chuàng)意”圓的形狀，然后去選擇修改擴(kuò)展的值設(shè)置為3個(gè)像素。按Ctrl + Shift + I反選，然后將圖層蒙版的形狀命名為“設(shè)計(jì)”。重復(fù)上述操作，創(chuàng)建一個(gè)新的選擇和擴(kuò)大它所示。您可以使用Ctrl + Shift +點(diǎn)擊，當(dāng)你需要添加矢量蒙版縮覽圖從兩個(gè)或兩個(gè)以上的選擇，通過(guò)點(diǎn)擊“設(shè)計(jì)”和“創(chuàng)意”的形狀，在這種情況下，我們創(chuàng)建了選擇。按Ctrl + Shift + I反選，然后將圖層蒙版的形狀命名為“發(fā)展”。應(yīng)用軟陰影的三個(gè)圓圈，得到以下