萬盛學電腦網

 萬盛學電腦網 >> 圖文處理 >> Photoshop教程 >> ps鼠繪教程 >> Photoshop制作炫彩格子風格的APP軟件圖標

Photoshop制作炫彩格子風格的APP軟件圖標

  利用Photoshop創建彩色格子icon,本教程中用到了智能對象和智能濾鏡,你會從中了解到智能濾鏡的強大作用。好了,我們來學習一下吧,希望你會喜歡。

Photoshop制作炫彩格子風格的APP軟件圖標 三聯

  第1步:

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

1511688ae8a346188bd96f1586cf9fff 用PS創建彩色格子icon

  第2步:

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

7345b3e6a65e476cb42878507a93fd3c 用PS創建彩色格子icon

  繼續為其添加漸變疊加,數值如下:

d02075b9f72d46818a8a12bf32c46d0a 用PS創建彩色格子icon

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

0a50ff434ab842c59cdcd03c481e19ee 用PS創建彩色格子icon

  此時的背景:

658ecbe08008467aa50b0fcede3ed04e 用PS創建彩色格子icon

  第3步:

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

3088ea71bc4646aca510871387a11300 用PS創建彩色格子icon

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

2490e41e434642918beec65aaf42caa6 用PS創建彩色格子icon

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

a0b70c6c86bf4e0ab9b2a17db484ee9b 用PS創建彩色格子icon

  第4步:

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

d9a75dd338e64f0bb1f621cf4bbdad00 用PS創建彩色格子icon

  第5步:

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

4d6ad0be5c70462abe28d0b079d3c351 用PS創建彩色格子icon

  為創建的形狀添加角度漸變。

e51af720988c42b69954c1ef06bc8ba0 用PS創建彩色格子icon

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

52ce87f7757e4f99808405dca65a35d2 用PS創建彩色格子icon

  第6步:

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

f0232be344da4d8f8b6c4e451e2bdb29 用PS創建彩色格子icon

  第7步:

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

5a1253e1cb7c4160bf531dc0344b85cf 用PS創建彩色格子icon

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

c8ead6ba9d2941be9341af319c4ae2bd 用PS創建彩色格子icon

  第8步:

  將上一步創建的圖層Ctrl+J再次進行復制。將圖層混合模式設置為減去,圖層不透明度設置為20%。

  選擇移動工具,利用鍵盤上的方向鍵將其位置向下方與右方分別移動1像素。這樣格子的間隔部分便形成了凹槽的效果。

637e54f8cb984f5b94e0e6d0a3acac1a 用PS創建彩色格子icon

  第9步:

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

a9f679a0a5554c43922b10bea4c78b10 用PS創建彩色格子icon

  然後為其添加角度漸變。

e7b9e62e892b4496a74f6e1dc25188a7 用PS創建彩色格子icon

  繼續添加內陰影

5703623ba19143479d50dc65b99b4353 用PS創建彩色格子icon

  為了表現立體感還要為其添加投影

9ecf940e2f1644148f630c59224660b9 用PS創建彩色格子icon

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

b7f6bad298604fccba04e4aaae9c9df0 用PS創建彩色格子icon

  第10步:

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

3d28ad34d44c444aa45d12982d48f8d5 用PS創建彩色格子icon

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

c4537aa59ecf4e0ba8769ba0b3b567cf 用PS創建彩色格子icon

  繼續添加內發光。與第2步相同,我們這裡利用內發光來添加雜色。

8ec2bf6e410644ce8788b9aebd786d96 用PS創建彩色格子icon

  然後為其添加內陰影。

2de04114ed2b45bc8b1b07a648f71ddd 用PS創建彩色格子icon

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

2836753d844d442694b85fbdde93b813 用PS創建彩色格子icon

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

7125d0884c1d4810aa23d24b87314fb6 用PS創建彩色格子icon

  第11步:

  下面我們來添加文字。

e39beaac03ac4c20a11b6af1eff9350c 用PS創建彩色格子icon

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

b2d4057cf3a241b0ad2dea5e0df78ee5 用PS創建彩色格子icon

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

bb2b7df651654d6b9e3e6f6d12726f66 用PS創建彩色格子icon

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

9ea895e3674e45e4bf94cdc33eab40bb 用PS創建彩色格子icon

  第12步:

  做到這裡,總覺得icon平平淡淡,缺少點感覺。好吧,

copyright © 萬盛學電腦網 all rights reserved