photoshop快速設計一個IOS應用表徵圖製作教程

來源:互聯網
上載者:User
給各位photoshop軟體的使用者們來詳細的解析分享一下快速設計一個IOS應用表徵圖的製作教程。
教程分享:
開始前,請先準備一個iOS 應用表徵圖模板,可以從iOS Icon Template或者App IconTemplate下載(我用的就是後者的素材)。
我的電腦螢幕上只顯示了 1024px 的大表徵圖,我覺得用這個模板做參考就可以了。
你可以將應用表徵圖模板進行裁剪,只保留 1024px 的表徵圖,或者處理模板上的其餘元素。

 

下面我們正式開始。
步驟 1:建立 iOS應用表徵圖的基本形狀
首先建立一個圖層並填充背景色,參考色值是#acced6。

 

接下來,給顏色圖層添加蒙版,使其呈現表徵圖的輪廓。技術上來講這一步可要可不要,因為上傳圖片之後,蘋果官方會自動幫你切成圓角。
不過,為了呈現更好的視覺效果,我建議使用蒙版。
怎麼操作呢?按住COMMAND(MAC 使用者)或者CTRL(Windows 使用者)鍵的同時點擊表徵圖模板圖層,顏色圖層就會出現一個選區啦。

 

再在圖層面板的底部點擊蒙版表徵圖,就可以建立蒙版了。
步驟 2:添加漸層色
在顏色圖層點擊滑鼠右鍵,在彈出的菜單中選擇混合選項。我們來給它加一個弱漸層。漸層的起始和終止色值分別為#acced6和#7cbece。

 

漸層樣式選擇線性漸層,角度設定為135度,呈現出由左上方的深藍色到右下角的淺藍色漸層效果。
如果這兩種顏色順序搞顛倒了,調整角度為 -135 度或者 315 度就行了。

 

步驟 3:建立內圓
表徵圖中部的白色圓形是整個表徵圖設計的重要組成部分,我們可以利用iOS表徵圖柵格畫一個圓:使用橢圓工具(U)建立一個寬高為 890px 的正圓,
在屬性面板中可以調整它的大小以便與柵格對齊。

 

步驟 4:給圓形添加圖層樣式
給形狀圖層添加描邊、陰影和漸層等圖層樣式。

 

添加漸層
圓的漸層比較簡單,漸層色值為#ffffff和#d9d9d9。

 

漸層樣式選擇放射狀漸層。要讓圓的中心呈現些許亮色,從圓心到邊緣有一個白色到淺灰色的漸層,縮放比例設定為150%。

 

添加描邊
圓的描邊要加粗,描邊位置選擇內部,描邊大小的參考數值為30px,填滿類型選擇漸層。

 

漸層所用顏色比表徵圖的背景漸層色要亮一些。起始色值和終止色值分別為#d1e4e8和#a9deeb,漸層角度設定為-45度,呈現出由頂部的淺藍色到底部的深藍色漸層效果。
添加內陰影
這裡的內陰影其實是白色高光,你也可以使用內發光樣式。將混合選項設定為正常,距離設定為0。將大小設定為70。
(註:此處原文為 140px,但是與截圖上的參數不符,所以譯者暫時將參數改為70px)

 

添加投影
最後給這個圓添加投影,讓描邊看上去更清晰,也可以讓整個圓在藍色背景下看的也很明顯。把陰影的透明度設定為10%,
距離設定為0,將大小設定的稍微大一點,我的參考數值是55。

 

效果如下圖所示:

 

步驟5:添加鉛筆表徵圖
我們在上一步的基礎上添加一枚表徵圖,我選的是鉛筆表徵圖。你可以在Sliceberry或者the Noun Project搜尋你想要的表徵圖。由於我們製作的表徵圖是1024*1024規格的,
所以一定要選大表徵圖。

 

將該表徵圖匯入你的PSD檔案並調整大小。如果你用的鉛筆表徵圖跟我用的一樣大,需要將其縮小到原來的1/2。你可以利用iOS模板把該表徵圖控制在內圓的範圍之內。

 

為了讓該表徵圖垂直於水平線,需要將其旋轉62.32度。按下COMMAND(MAC使用者)或者CRTL(Windows使用者)鍵的同步選取T鍵,
在頂部緊挨著小三角形表徵圖的視窗中輸入數值62.32。(你也可以跳過旋轉表徵圖這一步驟)

 

步驟6:給鉛筆圖層添加圖層樣式
終於到了表徵圖製作最後的步驟了,我們來給它添加漸層疊加和內陰影。

 

添加漸層疊加
開啟該圖層的混合選項,選擇漸層疊加,色值參數同步驟2,即起始色值和終止色值分別為#acced6和#7cbece。漸層效果沿對角線方向呈現,
角度設定為-45度,從左上方的淺藍色開始,到右下角的深藍色結束。

 

添加內陰影
這是本教程的最後一個小步驟。給鉛筆圖層添加內陰影,讓它看起來有些厚度。內陰影其他參數不變,只降低其透明度,參考數值為15%。
這是因為表徵圖整體使用的是亮色,所以我們讓它有一點陰影的感覺就可以了。

 

最終效果

 

表徵圖到這裡就製作完成了。這篇教程的目的就是向你展示漂亮的iOS應用表徵圖製作方法,過程沒那麼複雜,最終的效果看起來也很棒,
你可以使用這個方法嘗試製作其他表徵圖。
好了,以上的資訊就是小編給各位photoshop的這一款軟體的使用者們帶來的詳細的快速設計一個IOS應用表徵圖的製作教程解析分享的全部內容了,各位看到這裡的使用者們現在是非常的清楚了製作方法了吧,那麼各位就快去按照小編的教程自己去製作吧。
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.