Photoshop利用濾鏡制作炫彩格子風格的APP軟件圖標
PS夢工場 發(fā)布時間:2013-06-04 16:49:58 作者:南辰翻譯
我要評論
利用Photoshop創(chuàng)建彩色格子icon,本教程中用到了智能對象和智能濾鏡,你會從中了解到智能濾鏡的強大作用
利用Photoshop創(chuàng)建彩色格子icon,本教程中用到了智能對象和智能濾鏡,你會從中了解到智能濾鏡的強大作用。好了,我們來學習一下吧,希望你會喜歡。

第1步:
打開Photoshop,Ctrl+N新建一個文檔,文檔尺寸可自定義。

第2步:
按住Alt鍵雙擊背景圖層,使其轉換為普通圖層。然后再次雙擊,打開圖層樣式面板,為其添加顏色疊加樣式,顏色為#262523。

繼續(xù)為其添加漸變疊加,數(shù)值如下:

再利用內發(fā)光中的雜色功能來給背景添加一些雜色,當然你也可以使用濾鏡中的添加雜色功能。

此時的背景:

第3步:
新建一層,用白色大號柔邊畫筆在畫布中心點擊出白色亮光。

Ctrl+T將其拉寬壓扁,如下圖所示。

將圖層不透明度調整為10-30%,這里可以根據(jù)自己的感覺來調整。

第4步:
接下來我們創(chuàng)建icon主體。利用圓角矩形工具在畫布中心點擊,在彈出的對話框中設置數(shù)值如下:

第5步:
在圓角矩形上方隨意繪制一個比其尺寸大一些的形狀,因為我們后面會將其轉換為剪貼蒙版,因此形狀可隨意繪制。

為創(chuàng)建的形狀添加角度漸變。

然后按住Alt鍵在角度漸變與圓角矩形中間點擊鼠標左鍵,將其轉換為剪貼蒙版。然后在圖層名稱上點擊右鍵,將其轉換為智能對象。

第6步:
利用馬賽克濾鏡(濾鏡>像素化>馬賽克)對其進行分塊處理。

第7步:
將執(zhí)行了馬賽克濾鏡的圖層Ctrl+J復制一層,同樣轉換為剪貼蒙版。然后點擊濾鏡>風格化>照亮邊緣。

將其圖層混合模式設置為線性減淡(添加),圖層不透明度設置為30%。此時每個格子間都被細線分割開了。

第8步:
將上一步創(chuàng)建的圖層Ctrl+J再次進行復制。將圖層混合模式設置為減去,圖層不透明度設置為20%。
選擇移動工具,利用鍵盤上的方向鍵將其位置向下方與右方分別移動1像素。這樣格子的間隔部分便形成了凹槽的效果。

第9步:
利用橢圓工具在icon中心繪制出一個正圓形。

然后為其添加角度漸變。

繼續(xù)添加內陰影

為了表現(xiàn)立體感還要為其添加投影

我們來看一下此時的圓形樣式

第10步:
利用橢圓工具在icon中心再次創(chuàng)建一個較小的正圓形。

為其添加顏色疊加樣式。此處顏色選擇接近黑色的深灰色。

繼續(xù)添加內發(fā)光。與第2步相同,我們這里利用內發(fā)光來添加雜色。

然后為其添加內陰影。

再來個內部描邊以使其輪廓更加明顯。

來看看我們處理后的結果。

第11步:
下面我們來添加文字。

然后為文字添加漸變。這里我就不給出具體數(shù)值了,你可以根據(jù)自己的感覺來。當然你也可以使用其他色系的顏色。

添加內陰影以模擬邊緣的高光。

當然了,要表現(xiàn)立體感,陰影還是不能缺少的。

第12步:
做到這里,總覺得icon平平淡淡,缺少點感覺。好吧,使出我們的殺手锏,添加發(fā)光!你立刻就會感受的奇跡的發(fā)生了。
把第4步創(chuàng)建的圓角矩形圖層按住Alt鍵向上拖動復制一份,把填充調為0,這樣我們就可以不受這個圖層本身顏色的控制了,而可以對圖層樣式進行為所欲為的調整,嘿嘿。

來吧,給它添加內發(fā)光!

還有內陰影

來看看效果,怎樣樣?是不是好看了很多。

你是不是正要慶祝終于完工了?等等,icon右上角那一片白是怎么回事?木有細節(jié)了,親。
第13步:
好吧,苦逼的設計師,繼續(xù)調整。
雙擊圖層,打開圖層樣式面板。在混合選項中,將“圖層蒙版隱藏效果”勾選上。

然后為圖層添加蒙版,用黑色畫筆將細節(jié)擦出來。

第14步:
最后添加上倒影。Oh,my god!終于完了!


打開Photoshop,Ctrl+N新建一個文檔,文檔尺寸可自定義。

按住Alt鍵雙擊背景圖層,使其轉換為普通圖層。然后再次雙擊,打開圖層樣式面板,為其添加顏色疊加樣式,顏色為#262523。




新建一層,用白色大號柔邊畫筆在畫布中心點擊出白色亮光。



接下來我們創(chuàng)建icon主體。利用圓角矩形工具在畫布中心點擊,在彈出的對話框中設置數(shù)值如下:

在圓角矩形上方隨意繪制一個比其尺寸大一些的形狀,因為我們后面會將其轉換為剪貼蒙版,因此形狀可隨意繪制。



利用馬賽克濾鏡(濾鏡>像素化>馬賽克)對其進行分塊處理。

將執(zhí)行了馬賽克濾鏡的圖層Ctrl+J復制一層,同樣轉換為剪貼蒙版。然后點擊濾鏡>風格化>照亮邊緣。


第8步:
將上一步創(chuàng)建的圖層Ctrl+J再次進行復制。將圖層混合模式設置為減去,圖層不透明度設置為20%。
選擇移動工具,利用鍵盤上的方向鍵將其位置向下方與右方分別移動1像素。這樣格子的間隔部分便形成了凹槽的效果。

利用橢圓工具在icon中心繪制出一個正圓形。





利用橢圓工具在icon中心再次創(chuàng)建一個較小的正圓形。






下面我們來添加文字。




做到這里,總覺得icon平平淡淡,缺少點感覺。好吧,使出我們的殺手锏,添加發(fā)光!你立刻就會感受的奇跡的發(fā)生了。
把第4步創(chuàng)建的圓角矩形圖層按住Alt鍵向上拖動復制一份,把填充調為0,這樣我們就可以不受這個圖層本身顏色的控制了,而可以對圖層樣式進行為所欲為的調整,嘿嘿。




第13步:
好吧,苦逼的設計師,繼續(xù)調整。
雙擊圖層,打開圖層樣式面板。在混合選項中,將“圖層蒙版隱藏效果”勾選上。


最后添加上倒影。Oh,my god!終于完了!

相關文章
今天的教程是教給大家做一個非常有圣誕氛圍的圣誕快樂按鈕,充滿濃濃的圣誕節(jié)日氣息,小伙伴們還不快快打開PS一起來學習2021-06-16
ps2021怎么做漂亮的漸變按鈕?ps中想要設計一款領券的按鈕,如果添加漸變色會更加顯眼,該怎么設計漸變色按鈕呢?下面我們就來看看ps按鈕樣式的設計方法,詳細請看下文介紹2021-05-27
很多人人物游戲按鈕只能用AI才能設計,其實不然,一些按鈕不只可以用AI設計,PS照樣可以,今天我們就教大家制作一個藍色科技金屬質感的“play”按鈕,一起來學習吧2021-05-18
ps怎么設計配色干凈扁平化按鈕?很多時候我們會看到各種按鈕,想要設計一款顏色干凈清爽的扁平化按鈕,該怎么操作呢?下面我們就來看看ps按鈕矢量圖的設計方法,需要的朋友2021-04-08
怎么用PS制作按鈕形狀效果?下面這邊文章主要為大家講述了用PS制作按鈕形狀效果的教程,感興趣的小伙伴來學習吧2020-12-15
ps怎么設計圓形的不銹鋼金屬按鈕圖標?ps中想要設計一款圓形的按鈕,該怎么設計這個按鈕矢量圖呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2019-06-30
PS怎么設計可愛的按鈕?ps中想要設計一款可愛的按鈕,該怎么設計呢?下面我們就來看看ps設計按鈕的教程,需要的朋友可以參考下2018-10-30
ps怎么設計逼真的玻璃質感按鈕?ps中想要設計一款漂亮的玻璃按鈕,該怎么設計逼真透明的玻璃按鈕呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2018-09-23
ps怎么設計創(chuàng)意的圓形按鈕?ps中想要設計按鈕,該怎么設計創(chuàng)意的按鈕圖標呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2018-08-09
PS怎么設計左右輪播圖的按鈕?網頁中經常能見到多張圖片輪播的效果,會有左右按鈕,該怎么設計這個按鈕呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2018-08-09











