二維碼 購物車
部落窩在線教育歡迎您!

PS繪制扁平化風(fēng)格的海盜圖標(biāo)

?

作者:平面設(shè)計小丸子來源:部落窩教育發(fā)布時間:2017-12-13 16:06:25點擊:2829

分享到:
0
收藏    收藏人氣:0人
版權(quán)說明: 網(wǎng)絡(luò)作品,轉(zhuǎn)載請注明原作者和出處。
編按:
提起海盜你會想起什么?藍(lán)色的大海,數(shù)不清的寶藏,漂亮的舵,還有烈酒。本教程詳教我們使用Photoshop的形狀工具繪制一套以海盜為主題的圖標(biāo)。整篇都是干貨,內(nèi)容淺顯易懂,適合UI設(shè)計初學(xué)者。


先看看效果圖:



你準(zhǔn)備在Adobe Photoshop中制作一套奇特的海盜圖標(biāo)嗎?提升顏色!在本教程中,我們將使用Adobe Photoshop的基本形狀以及各種方便的功能和特性,使海盜圖標(biāo)成為時尚的平面風(fēng)格!您可以決定是否使它們變得干凈利落,或者使用生銹的垃圾刷來增加質(zhì)感。 
Adobe Photoshop有其優(yōu)點和一些非??岬墓δ埽蛊矫鎴D標(biāo)。在本教程結(jié)束時,您不僅可以制作海盜圖標(biāo),還可以將這些技術(shù)應(yīng)用于您需要的任何其他類型的平面圖標(biāo)或平面插圖。更重要的是,為圖標(biāo)添加紋理將使它們看起來復(fù)雜,增加一定的復(fù)古外觀,這是時髦的。 

步驟1
首先,讓我們做一個新的文檔的3800 X 3800像素大小。為了能夠使用任何圖標(biāo)作為單獨的對象,我將使用大尺寸,所以我想確保圖像足夠大。
使用油漆桶工具(G)填充深藍(lán)色的背景。
采取圓角矩形工具(U),并為圖標(biāo)基地1024 x 1024像素的形狀。打開“ 屬性”面板(“ 窗口”>“屬性”), 從這里我們可以調(diào)整我們的形狀和顏色以及 矩形的圓角半徑的大小。
應(yīng)該提到的是,當(dāng)我們創(chuàng)建任何基本形狀(橢圓,矩形,多邊形等)時,它在圖層面板上的圖層上會有一個特殊的標(biāo)記,這意味著我們的形狀在我們柵格化之前保持向量 。這意味著我們的形狀可以被改變,重新著色和放大和縮小,而不會造成質(zhì)量損失,這很酷。但是,我們不能使用畫筆著色這種形狀,所以請記住這一點。



第2步
讓我們開始從390 x 550像素的 圓角矩形制作瓶子  。我們將始終使用“ 屬性” 面板,因此您始終可以在屏幕截圖中查看每個形狀的設(shè)置。至于瓶子,我們將設(shè)置取樣器半徑的的頂部 邊角130像素和底部角落60像素,我們將設(shè)置填充形狀,以明亮的綠松石色。
現(xiàn)在,讓我們選擇直接選擇工具(A)并選擇左下角的錨點。按向右箭頭鍵幾次將點向右移動(您可以按住Shift鍵的同時按下箭頭鍵加快進(jìn)程)。
對另一邊做同樣的事情,使瓶子的底部變窄。



第3步
讓我們用朗姆酒填充我們的瓶子!復(fù)制瓶子層(Control-J),按下Control-T進(jìn)行自由變換 ,并使副本變小,從而創(chuàng)建瓶子的玻璃邊緣。
使用矩形工具(U)在瓶子的頂部形成一個狹長的矩形。選擇矩形和朗姆酒的形狀,右鍵單擊  并減去前面的形狀,使我們的瓶子一部分空。



步驟4
讓我們從一個115×190像素的綠松石矩形形成一個瓶頸。選擇所有創(chuàng)建的形狀,并使用 頂部的對齊面板來對齊  形狀的水平中心。
使用圓角矩形工具(U)為瓶頸添加邊框。做一個210×75像素光綠松石的形狀與完全圓角。



第5步
現(xiàn)在我們將添加一個海盜標(biāo)簽的瓶子。使用矩形工具(U)在瓶子上形成深灰色條紋。重復(fù)(對照-J)的綠松石瓶底,用深灰色標(biāo)簽一起選擇復(fù)制,點擊  鼠標(biāo)右鍵和團(tuán)結(jié)形狀在重疊 以使標(biāo)簽不可見的不需要的碎片。



第6步
讓我們來形成一個程式化的頭骨。使用橢圓工具(U)制作一個37 x 37像素的白色橢圓。為眼睛添加兩個小黑灰色圓圈。從一個小矩形形成一個下巴。
通過在瓶子頂部添加一個圓圈突出顯示,使玻璃表面更光滑。 在“ 圖層”面板中降低其不透明度,使其變?yōu)榘胪该鳌?/span>



第7步
讓我們通過添加一個軟木塞完成我們的瓶子。復(fù)制(Control-J)瓶頸,并在“ 屬性”面板中將副本的顏色更改為棕色。按下Control- [將副本放在瓶頸下(或者在“ 層”面板中手動拖放)。
通過將角半徑設(shè)置為30像素,使軟木的頂部略微圓化。



第8步
在這里,我們有 - 我們的朗姆酒瓶圖標(biāo)已經(jīng)準(zhǔn)備好了!讓我們繼續(xù)下一個!



2.設(shè)計方向盤圖標(biāo)
步驟1

讓我們從460 x 460像素的淺褐色圓圈構(gòu)成方向盤的底部。復(fù)制(Control-J)圓,按下Control-T進(jìn)行自由變換,并使副本更?。ㄔ谙聢D中可以看到用黑暗筆劃標(biāo)記的較小副本)。選擇兩種形狀,單擊  鼠標(biāo)右鍵,然后減去“正面形狀” 以剪去內(nèi)圈。



第2步
現(xiàn)在我們將構(gòu)成車輪的內(nèi)在部分。在方向盤內(nèi)部做一個160 x 160像素的黃色圓圈,并使用 頂部的對齊面板將兩個形狀水平 和垂直對齊。
復(fù)制(Control-J)棕色的輪子形狀,將副本放在頂部(Shift-Control-]),按Control-T進(jìn)行自由變換并縮小,使形狀變得更小。



第3步
讓我們添加方向盤的酒吧或持有人。使用矩形工具(U)制作一個30 x 540像素 深褐色的形狀,并將其放置在輪子下方(Shift-Control- [)。不要忘記把酒吧對準(zhǔn)車輪。



步驟4
讓我們添加更多的元素到酒吧。使用圓角矩形工具(U)在桿頂部制作一個夾具。使用“ 屬性” 面板使頂部的形狀比底部更圓。
使用直接選擇工具(A)使形狀的底部稍窄(與我們用朗姆酒瓶相同)。
復(fù)制創(chuàng)建的元素,在自由變換模式下將其上下顛倒,并將其附加到條的底部。
現(xiàn)在,我們可以將組(Control-G)欄與保持器一起,通過在“ 層” 面板中選擇組文件夾復(fù)制整個組,按下Control-T并將其旋轉(zhuǎn) 90度。
再做兩個副本,然后沿不同方向旋轉(zhuǎn)45度,如下圖所示。



第5步
讓我們通過添加一些釘頭木輪基地完成方向盤圖標(biāo)。首先在車輪頂部放置一個很小的深灰色橢圓。將一個又一個在底部,組兩個圓,并復(fù)制該組。旋轉(zhuǎn)組90度,并制作更多的副本,就像我們對酒吧做的一樣。
大!現(xiàn)在我們可以把我們的圖標(biāo)放在圖標(biāo)庫上繼續(xù)前進(jìn)!



3.制作一個海盜胸部圖標(biāo)
步驟1

從670 x 530像素的黃色矩形開始制作胸部。現(xiàn)在我們來添加我們胸部的木質(zhì)部分。繼續(xù)使用矩形工具(U)制作585 x 260 px深褐色的形狀,并將兩種形狀的水平中心對齊 。
在胸部頂部添加較淺顏色的較小矩形, 并將黃色和淺褐色形狀的頂部邊緣對齊。



第2步
現(xiàn)在我們將在我們的胸部表面上形成木板。使用矩形工具(U)創(chuàng)建一個585 x 20 px 深棕色條紋,并將其放在頂部木制形狀的上方,對齊形狀的水平中心。復(fù)制(Control-J)幾行,并將復(fù)制品放在木制的形狀上。
在我們的胸部頂部添加另一個金色的金屬元素:做一個67×165像素的 垂直矩形,把它放在我們的胸部的蓋子的中心。



第3步
讓我們給我們的胸部添加一個鎖。創(chuàng)建一個130 x 155像素大小的深黃色圓角矩形和30像素圓角半徑。把一個小圓圈和一個三角形組合在一起制成鑰匙孔。我們可以在多邊形工具(U)的幫助下制作一個三角形,在控制面板上將邊數(shù)設(shè)置為3。



步驟4
而我們的胸部圖標(biāo)已準(zhǔn)備就緒!讓我們來看看我們的最后一個圖標(biāo)!



4.渲染一個花式海盜帽子圖標(biāo)
步驟1

從910 x 160像素的深灰色橢圓開始形成一個帽子,讓我們看看我們?nèi)绾文軌蚋淖冞@個形狀,使它稍微拱起。按下Control-T進(jìn)行自由變換,在頂部的控制面板中找到  Warp Modes按鈕。 
選擇弧彎曲并將彎曲 值設(shè)置為20%,從而將形狀向上彎曲。


第2步
使用橢圓工具(U)創(chuàng)建一個400 x 400像素的圓,并將其放置在圓弧的中心。使用直接選擇工具(A)將兩側(cè)錨定點向下移動一點,使圓圈看起來更像一個雞蛋。選擇兩種形狀,單擊  鼠標(biāo)右鍵并合并形狀。



第3步
讓我們?yōu)槲覀兊拿弊犹砑右粋€明亮的輪廓。復(fù)制(Control-J)統(tǒng)一的帽子形狀,頭頂?shù)娇刂泼姘迳希⑻畛漕伾O(shè)置為無。將行程設(shè)置為4點行程重量的 黃色。使用自由變換功能縮小形狀并將其向下延伸一點,以便穿過帽子的底部邊緣。
應(yīng)用轉(zhuǎn)換,讓我們看看我們?nèi)绾慰梢噪[藏黃色輪廓的不必要的部分。選擇深灰色的帽子形狀,切換到矩形工具(U),單擊  鼠標(biāo)右鍵并進(jìn)行選擇。將羽化半徑設(shè)置為0像素。現(xiàn)在你會看到帽子周圍的“行軍螞蟻”選擇。



步驟4
轉(zhuǎn)到選擇>反轉(zhuǎn)并移動到圖層 面板。選擇黃色輪廓圖層,然后單擊面板底部的“ 添加圖層蒙版”按鈕。這樣我們在帽子周圍創(chuàng)造了一個面具,隱藏了黃色條紋的不需要的部分。做得好!



第5步
復(fù)制瓶子圖標(biāo)上的頭骨組,放在帽子上。使用圓角矩形工具(U)為程式化的骨骼制作細(xì)水平條紋。將骨頭旋轉(zhuǎn)45度并進(jìn)行復(fù)制,使其沿相反的方向旋轉(zhuǎn),使骨頭交叉。



第6步
讓我們通過為我們的帽子添加一個明亮的頭巾來完成圖標(biāo)。使用矩形工具(U)制作一個575 x 60像素的紅色條紋,并將其放在帽子下面(Shift-Control- [)。復(fù)制條紋并向下拖動副本,將其顏色更改為更淺的紅色。
最后,在左側(cè)添加兩個較小的垂直條紋,塑造頭巾的尖端。



5.添加裝飾細(xì)節(jié)到背景
步驟1

讓我們通過添加一些最后的筆觸到背景使整體構(gòu)圖看起來更復(fù)雜。使用自由形狀的鋼筆工具(P)武裝自己,畫幾條循環(huán)的旋流線。 
轉(zhuǎn)到頂部的控制面板,然后單擊形狀按鈕以創(chuàng)建新的形狀圖層。



第2步

現(xiàn)在我們可以調(diào)整設(shè)置并改變旋轉(zhuǎn)線的外觀。將 頂部的控制面板中的筆觸設(shè)置為深藍(lán)色(確保選擇了“ 形狀工具”模式),將“ 筆觸重量”設(shè)置為4磅,然后打開“ 筆畫選項”菜單。 
選擇虛線并單擊更多選項。從這里我們可以將Cap和Corner更改為Round,并調(diào)整  Dash和Gap值,使線條適合組合。 



第3步
繼續(xù)前進(jìn),再添加幾行。切換到橢圓工具(U),并在這里和那里斑點一些小圓圈,填補(bǔ)我們的形象的空白點。
而這就是它!我們的圖標(biāo)集已經(jīng)看起來完整。從這里,我們有兩個選擇。如果你想保留這個干凈平整的圖標(biāo),然后繼續(xù),保存你的文件,你就完成了!


步驟4

否則,我們可以繼續(xù)改進(jìn)我們的圖標(biāo),使用Adobe Photoshop的機(jī)會,通過添加一些蹩腳的紋理圖標(biāo),從而給他們一個舊的,破舊的外觀。如果你喜歡這種調(diào)整,你想使用一些默認(rèn)的畫筆或從Envato市場的一些自定義畫筆  ,請務(wù)必檢查第5部分,第1步和從我的  如何在Adobe Photoshop中創(chuàng)建平坦的天氣圖標(biāo)教程,并發(fā)現(xiàn)如何快速輕松地添加紋理觸摸。
除此之外,如果您想知道如何為您的圖標(biāo)添加時尚的長陰影效果,您可能會喜歡教程如何在第1部分的步驟10之后的Adobe Photoshop中創(chuàng)建時尚的平面空間圖標(biāo)。

一瓶朗姆酒!我們的海盜圖標(biāo)集準(zhǔn)備就緒!
埃!我們做了一個很好的工作,完成了與海盜資產(chǎn)的平面圖標(biāo)集!我希望你喜歡本教程,并發(fā)現(xiàn)了一些新的提示和技巧,這些提示和技巧將會對你將來的圖標(biāo)集或平面插圖有用。


原文:如何在Adobe Photoshop中創(chuàng)建平面海盜圖標(biāo) 
譯者:平面設(shè)計小丸子 
出處:http://www.zcool.com.cn/article/ZNTk3NDMy.html