UI教程,ps設(shè)計上傳主題icon圖標(biāo)

2023-12-20 17:30:18 來源/作者: / 己有:0人學(xué)習(xí)過
psd文件下載:ps教程論壇素材

臨近年末,事情越來越多,真的是很忙,但是我還是盡量抽時間給大家?guī)硪恍┬〉膱D標(biāo)教程,希望大家多多支持,不足的地方還請大家多多包涵,當(dāng)然拍拍磚也是可以的,別拍死就行,最后希望大家越來越棒,早日成為大神,帶我裝逼帶我飛。

今天的教程是繪制一個上傳主題圖標(biāo),先看下效果圖,怎么樣,看起來還行吧,做起來也非常簡單,五分鐘就可以做好。

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
開始之前我們還是按照老規(guī)矩來先簡單的分析一下,這個上傳圖片主要由上面藍色層,下面的厚度層,還有芯片和箭頭這幾個部分組成。用到的樣式也很簡單,主要就是內(nèi)陰影和漸變。

1、新建畫布800*800,填充背景顏色為#343B44

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
2、新建圓角矩形,命名為底板,填充顏色F0e9e7。加一些漸變和投影。

UI教程,ps設(shè)計上傳主題icon圖標(biāo)

UI教程,ps設(shè)計上傳主題icon圖標(biāo)

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
3、復(fù)制底板層,重命名為藍色層,清除圖層樣式,然后用刪除錨點工具刪除最下面兩個錨點,之后選擇轉(zhuǎn)換點工具,按Shift同時選中兩個描點然后按鍵盤上的方向鍵上適當(dāng)移動描點,把下面兩個錨點變成直角。

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
就是這個樣子,接下來添加圖層樣式。

UI教程,ps設(shè)計上傳主題icon圖標(biāo)

UI教程,ps設(shè)計上傳主題icon圖標(biāo)

UI教程,ps設(shè)計上傳主題icon圖標(biāo)

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
4、接下來我們做高光層,復(fù)制藍色層,重命名為高光層,清除圖層樣式,我們給他添加新的內(nèi)陰影作為高光。對了,記得填充改為0

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
是不是比剛才更有質(zhì)感了?

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
5、下面是厚度層,這個也簡單,復(fù)制底板層,清除圖層樣式,命名為厚度層,然后按住ALT鍵往上拖出一個新的圓角矩形,移動到合適的位置,選擇減去頂層形狀。
 

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
然后添加漸變和內(nèi)陰影。

UI教程,ps設(shè)計上傳主題icon圖標(biāo)

UI教程,ps設(shè)計上傳主題icon圖標(biāo)

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
貌似出來點樣子了。

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
6、好了,底板做好了,接下來做箭頭,這次我偷個懶直接用ps自帶的形狀工具來畫,填充顏色為0070b5,命名為箭頭層。

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
大小自己把握就行了,數(shù)值就不給出了,畫好記得逆時針旋轉(zhuǎn)九十度,變成上傳的樣子。

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
這里我用了插件做的倒角,前面有一期我講了怎么手動去倒解,今天就不重復(fù)了,偷個懶,也不能說是偷懶,提高工作效率嘛。
用法我還是說一下,怕有新童鞋沒用過。很簡單的,選擇文件 》 腳本 》Corner Editor,前提是你安裝了,沒有的可以到這里下載:http://bbs.16xx8.com/thread-169693-1-1.html。

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
形狀出來了加圖層樣式就好了

UI教程,ps設(shè)計上傳主題icon圖標(biāo)

UI教程,ps設(shè)計上傳主題icon圖標(biāo)

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
7、接下來是芯片了,先來上面的那層,先繪制一個圓角矩形填充EFC265,命名為上層芯片。然后復(fù)制三個放到合適的位置,添加圖層樣式。

UI教程,ps設(shè)計上傳主題icon圖標(biāo)

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
 

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
下面的芯片也是一樣的方法,不過顏色稍微深一點,也是加內(nèi)陰影就搞定,復(fù)制上層芯片,重命名為下層芯片,顏色填充為BC9850,刻改變一下大小。

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
好了,搞定,就是這個樣子,還不賴,趕緊發(fā)到朋友圈去炫耀一下吧。

UI教程,ps設(shè)計上傳主題icon圖標(biāo)
很簡單的教程,大家做記得總結(jié)一下,哪些樣式可以做出哪種效果,還能不能用其他方法。這樣同學(xué)們可以進步的更快。

標(biāo)簽(TAG) UI設(shè)計教程 UISTAR