【 PS創意設計 】Photoshop設計簡潔大方的網頁界面 - PS筆刷工廠PS筆刷工廠

Photoshop設計簡潔大方的網頁界面

這一次的教學是屬於PS教程領域中的設計教程的相關教學。

文章出處是來自優設的PS教程類文章，寫教學的作者是情非得已，感謝情非得已提供設計教程的實作教學。

教學大綱:

今天，我將介紹如何創建一個乾淨的網絡布局、一個漂亮的背景。開門見山，咱直接切入正題吧，菇涼帥哥們有興趣的話，可以打開PS跟着做喲。

設計教程教學開始

今天，我將介紹如何創建一個乾淨的網絡布局、一個漂亮的背景。開門見山，咱直接切入正題吧，菇涼帥哥們有興趣的話，可以打開PS跟着做喲。

開始設置的文件

打開一個新的文檔：外形尺寸1200×1640像素，分辨率為72像素/英寸。

我們要創建基本的背景層。簡單的在草稿上勾畫出大概的布局與結構，可以看出頁面最終的雛形，不過

在設計過程中，我們可能會添加新的元素。

草稿上可以看出，我們將創建5個分欄，在這裡我們將添加的內容。

添加的第一層，這將是我們的背景，顏色#ededed。

在頁面頂部繪製一個矩形命名為top1(使用矩形柵格化的圖層(顏色#ededed)，並添加雜色(濾鏡>雜色>添加雜色0.5 – 0.8;高斯分佈和單色)。再次繪製矩形，顏色#cddcec)，柵格化的形狀和添加雜色(濾鏡>雜色>添加雜色0.5 – 0.8;高斯分佈和單色)。添加一個漸變疊加(柔光，54%，從黑到白的90%，角度和縮放75%)。

接下來添加矩形(U)，在中間新建一個矩形(顏色為#608bb6，高度400像素左右)，設置混合模式為顏色加深，並填充為75%，然後添加一個白色的描邊1像素(圖層樣式)。

最後的底部頁腳添加一個矩形形狀，使用相同的工具和色彩，但現在設置混合線性光，不透明度為70%。

下面的最終結果。

步驟2 – 背景

給我們的背景添加紋理。

添加一個新層(CTR + SHIFT + N)，使用選框工具在畫布頂部添加一個1像素的白線。(仔細看下圖頂部有條白線)

現在打開一個新的文檔12×1像素，背景層解鎖並隱藏它。放大到3200%(最大)，添加一個新圖層，使用矩形選框工具添加兩個1×1像素的正方形，填充顏色為#FFF和其他#000，如下圖所示。然後選擇菜單>編輯>定義圖案。

我們製作了一個新的圖案效果即將使用(這也是一個製作樣式圖案方法哦)

回到我們的主要文件。創建一個新的圖層，用矩形選框工具繪製一個整個畫布那麼大的選區，填充前景色，設置填充為0%，然後添加圖層樣式里的圖案疊加。

現在是時候繪製雲了!

您可以拉出5條輔助線(如圖，方法,菜單>視圖>新建參考線分別輸入位置84px – 186px – 600px的- 1014px – 1118px)，以劃分工作區，然後使用橢圓工具添加一些形狀(如圖)，然後把這幾個形狀圖層都選中並編組。

複製這個組

並將複製出來的組轉化為智能對象(點組然後右鍵即可看到)，添加雜色。

現在，你必須使用一個圖層蒙版隱藏超出部分的雲(認真看下面的方法)：Ctrl +單擊“圖層top1”那個圖層縮覽圖(在“圖層”面板中)，出現選區，然後單擊選擇已經添加雜色那個雲的圖層，關鍵的一步，單擊添加矢量蒙版。

[img]http://www.uisdc.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107/QQ/WinTemp/RichOle/%[email protected][{WBM5L_1MA1$~9J5.jpg[/img]

[img]http://www.uisdc.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107/QQ/WinTemp/RichOle/%[email protected][{WBM5L_1MA1$~9J5.jpg[/img]

[img]http://www.uisdc.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107/QQ/WinTemp/RichOle/%[email protected][{WBM5L_1MA1$~9J5.jpg[/img]

[img]http://www.uisdc.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107/QQ/WinTemp/RichOle/%[email protected][{WBM5L_1MA1$~9J5.jpg[/img]

[img]http://www.uisdc.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107/QQ/WinTemp/RichOle/%[email protected][{WBM5L_1MA1$~9J5.jpg[/img]

然後應用下面的樣式。內陰影：混合模式選擇疊加，白色，透明度55%，全局光角度120°，距離5大小0。

出現雲的白色投影。

現在，我們畫個漂亮的雲彩陰影。複製雲那圖層，先清除圖層樣式，調整位置向右側下移低於原來的層，設置填充為0%，再添加下面的樣式。

漸變疊加，線性，混合模式正常，角度90°。

如果成功出現了，那麼使用相同的方式來繪製他的雲。

第3步 – 頂部配飾繪製

添加logo。使用鋼筆工具(顏色#79a7db)，勾畫出下面的圖形，使用直線工具繪製兩個白色線段。然後添加圖層樣式。

投影，混合模式為正片疊底，透明度46%，取消全局光，調整角度為140°，距離7px大小0。描邊，白色大小3px，位置內部，透明度55%，混合模式正常。確定

然後為兩條白線也應用相同的陰影。

添加文字(找個類似的字體吧)圖中使用 Ballpark 字體，然後添加陰影和漸變疊加。圖層樣式如下圖。

我們要使用縮放，鋼筆工具，橢圓工具，圓角矩形工具繪製一個賣萌，簡單的機器人。這裡不多描述如何繪製這個機器人了，看圖吧。

把繪製成功的機器人群組，ctrl+鼠標點擊雲層的縮略圖，再選中機器人的t添加一個圖層蒙版，目的是把他藏到雲後面，蒙版的方式上面介紹過，重溫下吧。

現在我們就來畫鳥和徽章。我們使用鋼筆工具，畫筆工具和橫排文字工具。如何，有詳細的繪製過程。

用自己的方式繪製出來也可以哦。

第4步 – 第一個分欄繪製

首先，創建一個區域框，我們將添加團隊成員的信息。使用矩形工具繪製一個480×425白色矩形，上下添加兩個灰線(這裡可以使用剪切蒙版，不會的同學把尺寸對齊就好了)，並添加一段文字 圖中字體為Delicious。為文字和白色矩形添加圖層樣式如圖

混合模式為正片疊底，透明度4%黑色，取消全局光角度42°，距離3px，大小0px。

接着來，在輔助線的幫助下，添加照片和資料，自己找圖佔位吧。

下面是每個字體的樣式，尺寸，顏色

還記得上面我們繪製過相同的箭頭了么。同樣的方式，再繪製一個。用矩形工具，然後再輔助線的幫助下，創建一個矩形的形狀圖層arrow，添加錨點工具和直接選擇工具。

為他添加陰影。複製這個圖層得到arrow副本，這裡你可以隱藏圖層arrow，設置顏色為#000，不透明度為5%。ctrl+t然後右鍵選擇變形徑，稍作調整，得到以下圖形。

好了，現在顯示剛才隱藏的圖層arrow，並提到副本那層上面。

使用橫排文字工具來創建一個“——–”字符串，你可以柵欄化和變形得到下面的效果，還添加了柔軟的陰影。(憑感覺吧)

最後添加文本(有點小投影哦)。

現在創建三個街區，該工作室提供的服務的描述。在本節中，我們使用真棒圖標集，創造了由灰粉阿巴斯為WeGraphics，WAPP卷。2和WAPP卷。

記住：在這種情況下，導遊是真正有用的，以填補圖標和文字部分。

添加三個“點”(一個不錯的陰影)，提高1px的白色陰影的文字，如下圖所示。

我們創建也是一個不錯的菜單，只需在下面的白框，它應該是在這一點上，清楚如何實現這個菜單。我們增加了一剛一柔內陰影“箭頭”。

第5步 – 中間帶

中間的元素，我們的設計是一個內容豐富的信息圖表中引入的一大功能區，其中包含一個口號。為了實現這一功能區，我們將創建5個自定義形狀使用鋼筆工具，像往常一樣，(我再次提醒的是，如果你是一個初學者，你可以閱讀入門：Photoshop的鋼筆工具，以了解更多有關如何使用這工具)。一起來看看究竟是什麼樣的形狀，我們需要繪製(註：主要形狀和#798ea4為較深的形狀)，我們將使用#497287。

怎麼樣的風格呢?好了，我們申請的“前端形狀相同的風格，”你可以看到下面(的模式，我們要使用，是從舊紙上WeGraphics 模式)。

對於兩個小三角形，應用以下樣式：

啟動子添加的口號。

第6步 – 信息圖表

需要合成的我們的fictionary設計工作室的創作過程中加入少許的信息圖表新生兒從的想法。下面你可以看到大結局的結果(明顯的，它只是一個簡單的例子，如何發展背後的一個項目，你可以描述一個創造性的過程)。

開始設計的兩個圓(按住Shift鍵畫一個完美的圓周，顏色為#3d3d3d)。設置，左側的形狀，填充為0%;合適的形狀，設置混合模式為亮光，填充為35%。添加樣式，如下所示(為圖案疊加為左側的形狀的形狀，除了它是相同的)。

需要注意的是左邊的圓圈中使用自定義的模式，我們可以採取的步驟2相同的技術來創建此模式。

使用橢圓工具(白色的小圓圈一次，然後把它複製到再次使用)和線工具(重量：3px的，顏色為#FFFFFF)設計圖在左側。集團所有創建的形狀和線條，重複的組，將其轉換為智能對象，然後柵格化了。現在，您可以將樣式添加到該層。

使用鋼筆工具繪製一些標籤(使用鮮艷的色彩：#d82f4c，#edcd59，4d85a2#598b3b)，然後將它命名使用橫排文字工具，您可以申請一個的軟降shadwo到，標籤和文字。

在正確的圈等三個圓圈，設置填充為20%，添加文字(你可以申請一個軟陰影的字符串)，如圖所示。

現在，我們要隱藏超出部分的“設計”與“發展”界。正如已經看到的，我們將使用圖層蒙版。

按Ctrl +單擊在“圖層”調板中的“創意”圓的形狀，然後去選擇>修改>擴展的值設置為3個像素。

按Ctrl + Shift + I反選，然後將圖層蒙版的形狀命名為“設計”。

重複上述操作，創建一個新的選擇和擴大它所示。您可以使用Ctrl + Shift +點擊，當你需要添加矢量蒙版縮覽圖從兩個或兩個以上的選擇，通過點擊“設計”和“創意”的形狀，在這種情況下，我們創建了選擇。

按Ctrl + Shift + I反選，然後將圖層蒙版的形狀命名為“發展”。

應用軟陰影的三個圓圈，得到以下結果。

繪製一個新的循環。

設置填充為0%，並添加一個白色的行程(尺寸3PX)。

轉換為智能對象，柵格化，並添加陰影(相同的陰影圖“第三步”)。最後，完成增加其他線路和標籤，在下面的圖片所示的信息圖表。

第7步 – 底部

您可以複製本教程中的第4步使用相同的方式。

第8步 – 版權

添加底部版權文字。

ok!所有步驟都已經結束，希望本教程可以幫助你了解布置頁面的方式，你可以在設計網絡布局，提高自己的技能中運用這些方法。

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: Photoshop設計簡潔大方的網頁界面