Photoshop利用濾鏡制作炫彩格子風(fēng)格的APP軟件圖標(biāo)

PS夢(mèng)工場(chǎng) 發(fā)布時(shí)間：2013-06-04 16:49:58 作者：南辰翻譯

利用Photoshop創(chuàng)建彩色格子icon，本教程中用到了智能對(duì)象和智能濾鏡，你會(huì)從中了解到智能濾鏡的強(qiáng)大作用

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

637e54f8cb984f5b94e0e6d0a3acac1a 用PS創(chuàng)建彩色格子icon

　　第9步：
　　利用橢圓工具在icon中心繪制出一個(gè)正圓形。
a9f679a0a5554c43922b10bea4c78b10 用PS創(chuàng)建彩色格子icon

　　然后為其添加角度漸變。
e7b9e62e892b4496a74f6e1dc25188a7 用PS創(chuàng)建彩色格子icon

　　繼續(xù)添加內(nèi)陰影
5703623ba19143479d50dc65b99b4353 用PS創(chuàng)建彩色格子icon

　　為了表現(xiàn)立體感還要為其添加投影
9ecf940e2f1644148f630c59224660b9 用PS創(chuàng)建彩色格子icon

　　我們來看一下此時(shí)的圓形樣式
b7f6bad298604fccba04e4aaae9c9df0 用PS創(chuàng)建彩色格子icon

　　第10步：
　　利用橢圓工具在icon中心再次創(chuàng)建一個(gè)較小的正圓形。
3d28ad34d44c444aa45d12982d48f8d5 用PS創(chuàng)建彩色格子icon

　　為其添加顏色疊加樣式。此處顏色選擇接近黑色的深灰色。
c4537aa59ecf4e0ba8769ba0b3b567cf 用PS創(chuàng)建彩色格子icon

　　繼續(xù)添加內(nèi)發(fā)光。與第2步相同，我們這里利用內(nèi)發(fā)光來添加雜色。
8ec2bf6e410644ce8788b9aebd786d96 用PS創(chuàng)建彩色格子icon

　　然后為其添加內(nèi)陰影。
2de04114ed2b45bc8b1b07a648f71ddd 用PS創(chuàng)建彩色格子icon

　　再來個(gè)內(nèi)部描邊以使其輪廓更加明顯。
2836753d844d442694b85fbdde93b813 用PS創(chuàng)建彩色格子icon

　　來看看我們處理后的結(jié)果。
7125d0884c1d4810aa23d24b87314fb6 用PS創(chuàng)建彩色格子icon

　　第11步：
　　下面我們來添加文字。
e39beaac03ac4c20a11b6af1eff9350c 用PS創(chuàng)建彩色格子icon

　　然后為文字添加漸變。這里我就不給出具體數(shù)值了，你可以根據(jù)自己的感覺來。當(dāng)然你也可以使用其他色系的顏色。
b2d4057cf3a241b0ad2dea5e0df78ee5 用PS創(chuàng)建彩色格子icon

　　添加內(nèi)陰影以模擬邊緣的高光。
bb2b7df651654d6b9e3e6f6d12726f66 用PS創(chuàng)建彩色格子icon

　　當(dāng)然了，要表現(xiàn)立體感，陰影還是不能缺少的。
9ea895e3674e45e4bf94cdc33eab40bb 用PS創(chuàng)建彩色格子icon

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

29918a0c47924f5cb5b623c5e9c6518d 用PS創(chuàng)建彩色格子icon

　　來吧，給它添加內(nèi)發(fā)光!
d38173e2d90b4022a50d5e4e3b0bb2d9 用PS創(chuàng)建彩色格子icon

　　還有內(nèi)陰影
5fe6eb054a0a4374bccc5c455502e654 用PS創(chuàng)建彩色格子icon

　　來看看效果，怎樣樣?是不是好看了很多。
486cbbde1042473aa74b402d388addeb 用PS創(chuàng)建彩色格子icon

　　你是不是正要慶祝終于完工了?等等，icon右上角那一片白是怎么回事?木有細(xì)節(jié)了，親。
　　第13步：
　　好吧，苦逼的設(shè)計(jì)師，繼續(xù)調(diào)整。
　　雙擊圖層，打開圖層樣式面板。在混合選項(xiàng)中，將“圖層蒙版隱藏效果”勾選上。
e02d4d510d144257888a93620a5ea7af 用PS創(chuàng)建彩色格子icon