在线观看 国产-在线高清一级欧美精品-在线高清国产-在线福利视频-久久观看视频-久久观看

下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當(dāng)前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

時間:2024-03-07 22:32作者:下載吧人氣:33

教你快速打造優(yōu)美的 iOS 應(yīng)用圖標(biāo)

開始前,請先準(zhǔn)備一個iOS 應(yīng)用圖標(biāo)模板,可以從iOS Icon Template或者App IconTemplate下載(我用的就是后者的素材)。

我的電腦屏幕上只顯示了 1024px 的大圖標(biāo),我覺得用這個模板做參考就可以了。

你可以將應(yīng)用圖標(biāo)模板進行裁剪,只保留 1024px 的圖標(biāo),或者處理模板上的其余元素。

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

下面我們正式開始。

步驟 1:創(chuàng)建 iOS應(yīng)用圖標(biāo)的基本形狀

首先新建一個圖層并填充背景色,參考色值是#acced6。

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

接下來,給顏色圖層添加蒙版,使其呈現(xiàn)圖標(biāo)的輪廓。技術(shù)上來講這一步可要可不要,因為上傳圖片之后,蘋果官方會自動幫你切成圓角。

不過,為了呈現(xiàn)更好的視覺效果,我建議使用蒙版。

怎么操作呢?按住COMMAND(MAC 用戶)或者CTRL(Windows 用戶)鍵的同時點擊圖標(biāo)模板圖層,顏色圖層就會出現(xiàn)一個選區(qū)啦。

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

再在圖層面板的底部點擊蒙版圖標(biāo),就可以創(chuàng)建蒙版了。

步驟 2:添加漸變色

在顏色圖層點擊鼠標(biāo)右鍵,在彈出的菜單中選擇混合選項。我們來給它加一個弱漸變。漸變的起始和終止色值分別為#acced6和#7cbece。

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

漸變樣式選擇線性漸變,角度設(shè)置為135度,呈現(xiàn)出由左上角的深藍色到右下角的淺藍色漸變效果。

如果這兩種顏色順序搞顛倒了,調(diào)整角度為 -135 度或者 315 度就行了。

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

步驟 3:創(chuàng)建內(nèi)圓

圖標(biāo)中部的白色圓形是整個圖標(biāo)設(shè)計的重要組成部分,我們可以利用iOS圖標(biāo)柵格畫一個圓:使用橢圓工具(U)創(chuàng)建一個寬高為 890px 的正圓,

在屬性面板中可以調(diào)整它的大小以便與柵格對齊。

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

步驟 4:給圓形添加圖層樣式

給形狀圖層添加描邊、陰影和漸變等圖層樣式。

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

添加漸變

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

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

漸變樣式選擇徑向漸變。要讓圓的中心呈現(xiàn)些許亮色,從圓心到邊緣有一個白色到淺灰色的漸變,縮放比例設(shè)置為150%。

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

添加描邊

圓的描邊要加粗,描邊位置選擇內(nèi)部,描邊大小的參考數(shù)值為30px,填充類型選擇漸變。

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

漸變所用顏色比圖標(biāo)的背景漸變色要亮一些。起始色值和終止色值分別為#d1e4e8和#a9deeb,漸變角度設(shè)置為-45度,呈現(xiàn)出由頂部的淺藍色到底部的深藍色漸變效果。

添加內(nèi)陰影

這里的內(nèi)陰影其實是白色高光,你也可以使用內(nèi)發(fā)光樣式。將混合選項設(shè)置為正常,距離設(shè)置為0。將大小設(shè)置為70。

(注:此處原文為 140px,但是與截圖上的參數(shù)不符,所以譯者暫時將參數(shù)改為70px)

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

添加投影

最后給這個圓添加投影,讓描邊看上去更清晰,也可以讓整個圓在藍色背景下看的也很明顯。把陰影的透明度設(shè)置為10%,

距離設(shè)置為0,將大小設(shè)置的稍微大一點,我的參考數(shù)值是55。

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

效果如下圖所示:

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

步驟5:添加鉛筆圖標(biāo)

我們在上一步的基礎(chǔ)上添加一枚圖標(biāo),我選的是鉛筆圖標(biāo)。你可以在Sliceberry或者the Noun Project搜索你想要的圖標(biāo)。由于我們制作的圖標(biāo)是1024*1024規(guī)格的,

所以一定要選大圖標(biāo)。

如果你也想用鉛筆圖標(biāo),可以從the Noun Project下載,作者是Molly Bramlet,下載鏈接:https://thenounproject.com/term/pencil/16973/

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

將該圖標(biāo)導(dǎo)入你的PSD文件并調(diào)整大小。如果你用的鉛筆圖標(biāo)跟我用的一樣大,需要將其縮小到原來的1/2。你可以利用iOS模板把該圖標(biāo)控制在內(nèi)圓的范圍之內(nèi)。

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

為了讓該圖標(biāo)垂直于水平線,需要將其旋轉(zhuǎn)62.32度。按下COMMAND(MAC用戶)或者CRTL(Windows用戶)鍵的同時按下T鍵,

在頂部緊挨著小三角形圖標(biāo)的窗口中輸入數(shù)值62.32。(你也可以跳過旋轉(zhuǎn)圖標(biāo)這一步驟)

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

步驟6:給鉛筆圖層添加圖層樣式

終于到了圖標(biāo)制作最后的步驟了,我們來給它添加漸變疊加和內(nèi)陰影。

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

添加漸變疊加

打開該圖層的混合選項,選擇漸變疊加,色值參數(shù)同步驟2,即起始色值和終止色值分別為#acced6和#7cbece。漸變效果沿對角線方向呈現(xiàn),

角度設(shè)置為-45度,從左上角的淺藍色開始,到右下角的深藍色結(jié)束。

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

添加內(nèi)陰影

這是本教程的最后一個小步驟。給鉛筆圖層添加內(nèi)陰影,讓它看起來有些厚度。內(nèi)陰影其他參數(shù)不變,只降低其透明度,參考數(shù)值為15%。

這是因為圖標(biāo)整體使用的是亮色,所以我們讓它有一點陰影的感覺就可以了。

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

最終效果

UI教程,快速設(shè)計一個IOS應(yīng)用圖標(biāo)

圖標(biāo)到這里就制作完成了。這篇教程的目的就是向你展示漂亮的iOS應(yīng)用圖標(biāo)制作方法,過程沒那么復(fù)雜,最終的效果看起來也很棒,

你可以使用這個方法嘗試制作其他圖標(biāo)。

標(biāo)簽Criscroc,UI教程,ps網(wǎng)頁設(shè)計,應(yīng)用圖標(biāo),IOS

相關(guān)下載

查看所有評論+

網(wǎng)友評論

網(wǎng)友
您的評論需要經(jīng)過審核才能顯示

公眾號

主站蜘蛛池模板: 亚洲永久精品一区二区三区 | 亚洲小视频在线播放 | 男人的天堂天堂网 | 中文国产成人精品久久一区 | 久久综合资源 | 色婷婷.com | 欧美一区二区视频在线观看 | 久久国产精品男女热播 | 亚洲国产成人久久综合一区 | 中文国产成人精品久久一区 | 午夜视频国产 | 久久精品波多野结衣 | 中日韩一区二区三区 | 伊人色在线观看 | 丁香综合五月 | 亚洲精品在线播放 | 日韩综合| 婷婷五月情| 中文欧美日韩 | 亚洲最大免费视频网 | 国产一在线精品一区在线观看 | 中文字幕视频免费 | 亚洲视频一区 | 六月丁香伊人 | 亚洲国产精品久久精品成人 | avtt国产 | 国产视频97 | 无遮免费网站在线入口 | 欧美大片天天免费看视频 | 男人的天堂v | 欧美自拍偷拍视频 | 最新欧美在线 | 国内自拍偷拍网 | 欧美日本在线播放 | 性天堂网 | 亚洲精品www久久久久久 | 亚洲欧美视频在线播放 | 精品视频 久久久 | 亚洲理论视频 | 下面一进一出视频 | 色婷婷狠狠久久综合五月 |