ps設(shè)計(jì)格子APP軟件圖標(biāo)(5)
本教程抓喲使用Photoshop制作炫彩格子風(fēng)格的APP軟件圖標(biāo),教程中用到了智能對(duì)象和智能濾鏡,你會(huì)從中了解到智能濾鏡的強(qiáng)大作用。好了,我們來(lái)學(xué)習(xí)一下吧,希望你會(huì)喜歡。
先看看效果圖
第1步:
打開(kāi)Photoshop,Ctrl+N新建一個(gè)文檔,文檔尺寸可自定義。
第2步:
按住Alt鍵雙擊背景圖層,使其轉(zhuǎn)換為普通圖層。然后再次雙擊,打開(kāi)圖層樣式面板,為其添加顏色疊加樣式,顏色為#262523。
繼續(xù)為其添加漸變疊加,數(shù)值如下:
再利用內(nèi)發(fā)光中的雜色功能來(lái)給背景添加一些雜色,當(dāng)然你也可以使用濾鏡中的添加雜色功能。
此時(shí)的背景:
第3步:
新建一層,用白色大號(hào)柔邊畫(huà)筆在畫(huà)布中心點(diǎn)擊出白色亮光。
Ctrl+T將其拉寬壓扁,如下圖所示。
將圖層不透明度調(diào)整為10-30%,這里可以根據(jù)自己的感覺(jué)來(lái)調(diào)整。
第4步:
接下來(lái)我們創(chuàng)建icon主體。利用圓角矩形工具在畫(huà)布中心點(diǎn)擊,在彈出的對(duì)話(huà)框中設(shè)置數(shù)值如下:
第5步:
在圓角矩形上方隨意繪制一個(gè)比其尺寸大一些的形狀,因?yàn)槲覀兒竺鏁?huì)將其轉(zhuǎn)換為剪貼蒙版,因此形狀可隨意繪制。
為創(chuàng)建的形狀添加角度漸變。
然后按住Alt鍵在角度漸變與圓角矩形中間點(diǎn)擊鼠標(biāo)左鍵,將其轉(zhuǎn)換為剪貼蒙版。然后在圖層名稱(chēng)上點(diǎn)擊右鍵,將其轉(zhuǎn)換為智能對(duì)象。
第6步:
利用馬賽克濾鏡(濾鏡>像素化>馬賽克)對(duì)其進(jìn)行分塊處理。
第7步:
將執(zhí)行了馬賽克濾鏡的圖層Ctrl+J復(fù)制一層,同樣轉(zhuǎn)換為剪貼蒙版。然后點(diǎn)擊濾鏡>風(fēng)格化>照亮邊緣。
將其圖層混合模式設(shè)置為線(xiàn)性減淡(添加),圖層不透明度設(shè)置為30%。此時(shí)每個(gè)格子間都被細(xì)線(xiàn)分割開(kāi)了。
第8步:
將上一步創(chuàng)建的圖層Ctrl+J再次進(jìn)行復(fù)制。將圖層混合模式設(shè)置為減去,圖層不透明度設(shè)置為20%。
選擇移動(dòng)工具,利用鍵盤(pán)上的方向鍵將其位置向下方與右方分別移動(dòng)1像素。這樣格子的間隔部分便形成了凹槽的效果。
第9步:
利用橢圓工具在icon中心繪制出一個(gè)正圓形。
然后為其添加角度漸變。
繼續(xù)添加內(nèi)陰影
為了表現(xiàn)立體感還要為其添加投影
我們來(lái)看一下此時(shí)的圓形樣式
第10步:
利用橢圓工具在icon中心再次創(chuàng)建一個(gè)較小的正圓形。
為其添加顏色疊加樣式。此處顏色選擇接近黑色的深灰色。
繼續(xù)添加內(nèi)發(fā)光。與第2步相同,我們這里利用內(nèi)發(fā)光來(lái)添加雜色。
然后為其添加內(nèi)陰影。
再來(lái)個(gè)內(nèi)部描邊以使其輪廓更加明顯。
來(lái)看看我們處理后的結(jié)果。
第11步:
下面我們來(lái)添加文字。
然后為文字添加漸變。這里我就不給出具體數(shù)值了,你可以根據(jù)自己的感覺(jué)來(lái)。當(dāng)然你也可以使用其他色系的顏色。
添加內(nèi)陰影以模擬邊緣的高光。
當(dāng)然了,要表現(xiàn)立體感,陰影還是不能缺少的。
第12步:
做到這里,總覺(jué)得icon平平淡淡,缺少點(diǎn)感覺(jué)。好吧,使出我們的殺手锏,添加發(fā)光!你立刻就會(huì)感受的奇跡的發(fā)生了。
把第4步創(chuàng)建的圓角矩形圖層按住Alt鍵向上拖動(dòng)復(fù)制一份,把填充調(diào)為0,這樣我們就可以不受這個(gè)圖層本身顏色的控制了,而可以對(duì)圖層樣式進(jìn)行為所欲為的調(diào)整,嘿嘿。
來(lái)吧,給它添加內(nèi)發(fā)光!
還有內(nèi)陰影
來(lái)看看效果,怎樣樣?是不是好看了很多。
第13步:
好吧,苦逼的設(shè)計(jì)師,繼續(xù)調(diào)整。
雙擊圖層,打開(kāi)圖層樣式面板。在混合選項(xiàng)中,將“圖層蒙版隱藏效果”勾選上。
然后為圖層添加蒙版,用黑色畫(huà)筆將細(xì)節(jié)擦出來(lái)。
第14步:
最后添加上倒影,完成效果圖。
學(xué)習(xí) · 提示
相關(guān)教程
- 圖標(biāo)設(shè)計(jì),設(shè)計(jì)一款心形的APP圖標(biāo)
- 圖標(biāo)設(shè)計(jì),在PS里制作小清新風(fēng)格的天氣圖標(biāo)
- 圖標(biāo)制作,用PS制作時(shí)尚的郵件圖標(biāo)
- UI圖標(biāo)教程,用PS繪制一個(gè)獨(dú)特的漸變風(fēng)格播放器圖標(biāo)
- UI圖標(biāo)教程,用PS制作一個(gè)音樂(lè)圖標(biāo)
- 圖標(biāo)設(shè)計(jì),用PS繪制索尼PSP圖標(biāo)
- UI圖標(biāo)教程,在PS中繪制一枚炫酷的鐘表圖標(biāo)
- UI圖標(biāo)教程,用ps制作浪漫的冰晶圖標(biāo)
- 圖標(biāo)制作,用PS繪制一款簡(jiǎn)約風(fēng)格的解密游戲圖標(biāo)
- 手機(jī)圖標(biāo),用PS繪制華為手機(jī)圖標(biāo)
推薦教程
- ps設(shè)計(jì)折紙效果風(fēng)格的短信軟件圖標(biāo)
- 相機(jī)UI圖標(biāo)設(shè)計(jì)教程
- UI知識(shí),做UI的工作方式與流程
- ps日歷圖標(biāo)
- UI教程:設(shè)計(jì)電池icon
- UI視頻, 設(shè)計(jì)中得美術(shù)基礎(chǔ)
- UI知識(shí),設(shè)計(jì)師必須知道的優(yōu)秀UI設(shè)計(jì)原則
- 地圖圖標(biāo),設(shè)計(jì)簡(jiǎn)潔的地圖主題UI圖標(biāo)教程
- ps設(shè)計(jì)盒子圖標(biāo)
- PS繪制磚塊ICO圖標(biāo)