Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程

PS教學第37篇

第一篇

設計清新風格簡潔時鐘圖片的PS實例教程

教程主要會用PS的圖層樣式,圖層樣式基本上一直是圖標或者字體制作的常客,同學們根據教程來學習一下吧,相信可以完成的很好,但是要動起手來噢。

本篇教程通過PS製作一款乾淨清新的時鐘圖標教程,做起來也不復雜,但是不管複雜不復雜的東西,都必須動手製作才行,會用到圖層樣式,圖層樣式基本上一直是圖標或者字體制作的常客,同學們根據教程來學習一下吧,相信可以完成的很好,但是要動起手來噢。

效果圖:


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


先在PS裡面新建一個800*800的畫布,顏色用#f3fbff(淡藍色)鋪滿!

1.新建一個圖層畫出560*560的圓角矩形(顏色為純白色),圓角為90,參數如下


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


2.然後調整圖層形狀的斜面浮雕參數和投影參數


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


3.畫出時鐘的內錶盤,新建一個318*318的正圓並調整它的斜面浮雕參數、內陰影參數以及漸變疊加參數,如圖:


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


4.調整完內錶盤和外表盤的效果圖如下:


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


5.接下里我們畫時間刻度;新建一個7*7的正圓(顏色為#595f70),給它加個內陰影,具體參數如下


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


現在我們要畫12個刻度讓他平均分配到對應的時間點上,怎麼畫呢?我們可以用動作來實現它

操作步驟:F9打開動作窗口,新建一個動作,開啟錄製——選中一個圓點執行ctrl+t,然後按住Alt鍵拖動中心點至畫布的中心,然後鬆開alt,按住shift,旋轉30°,結束動作錄製即可——最後再複製多個圖層,分別執行動作即可


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


最後我們再把四個點替換成文字,就可以得到如下圖象:


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


6.最後我們再來做指針(指針我參考的是DW經典款的指針),指針用形狀堆疊而成,再給指針加上投影就好了,最後旋轉複製時針、分針、秒針即可;

指針顏色為#69728b,投影看參數


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


7.指針的軸是用了三層員堆疊而成,大家可以看看細節


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


8.把這些全部整合到一塊即可,別忘了每個圖層命名,最終效果如圖


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


本篇要主要的就是圖層樣式的運用和動作錄製的運用,心態也很關鍵,不要中途覺得難就不做了,練習一下吧。


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


第二篇

繪製綠色主題風格時鐘APP圖標的PS教程

首選先來分析一下教程的效果圖,教程主要分為三個部分來完成,具體如下底座、內圓、指針,其它問題都不大,主要是指針部分、需要用到多個圖層及圖層樣式,來表現圖標的立體感,教程的視頻和源文件已經打包了,感興趣的朋友一起來學習吧。

最終效果:


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


先看看效果圖:


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


步驟一:首先新建畫布400px*300px畫布,命名為時鐘,填充背景顏色# 63d7a6。


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


步驟二:使用圓角矩形、繪製一個190px*190px,圓角半徑為40px的底座,併為它添加圖層樣式。


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


步驟三:現在我們來繪製內圓部分吧,選擇橢圓工具繪製一個154px*154px的正圓吧,併為它添加一下圖層樣式。


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


步驟四:繼續選擇橢圓工具,繪製一個132px*132px的正圓吧,併為它添加一下圖層樣式。


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


步驟五:現在我們來繪製三角位置,選擇多邊形工具邊數設置為3,繪製一個顏色白色三角形,並將混合模式設置為疊加,命名為下側三角。


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


步驟六:複製下側三角執行自由變換命令,調整中心點至畫布中心,旋轉90度並執行重複上一命令並複製,shift+ctrl+alt+t複製出另外兩個三角形狀,將上側三角混合模式設置為柔光,透明度設置為70%,左右兩側三角混合模式正常。


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


步驟七:現在我們將指針的位置繪製一下吧,選擇圓角矩形工具,畫兩個圓角矩形,旋轉放到合適的位置。


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


步驟八:接下來我們為兩個指針添加一下相同的圖層樣式吧。


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


步驟九:現在我們繪製秒針吧,選擇矩形工具,繪製一個顏色為#ff5758長寬2px*24px的矩形,並添加圖層樣式。


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


步驟十:指針完成之後我們選擇橢圓工具繪製一個20px*20px的正圓吧,併為它添加一下圖層樣式。


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


步驟十一:現在我們趕緊來繪製最後一個圓吧,使用橢圓工具繪製一個10px*10px正圓,給它起名叫小內圓吧,併為它添加圖層樣式。


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程


Adobe Photoshop清新風格簡潔時鐘+綠色主題風格時鐘APP圖標教程

記得關注哦

記得評論哦

記得轉發哦


分享到:


相關文章: