火星網校
卡通風格UI圖標設計教程
發(fā)布時間：2024-01-12 16:43:14 瀏覽量：178次
第一次出UI教程，把之前參加過比賽的幾套風格各異的主題圖標拿制作過程出來講解一下，圖標的繪制方法有很多種，主要看你適合哪種，用得方便不，注意技巧跟細節(jié)本教程提供源文件psd下載(文章末端左下角有附件可以下載)或者網盤鏈接下載：
http://vdisk.weibo.com/s/cQKtf42BDhBj，希望大家多多支持！另外歡迎上傳交作業(yè)啦~
一、卡通風格 -- LYNN Rabbit （聯(lián)系人圖標）
Step01：點擊 - 【文件】- 【新建】（快捷鍵Ctrl+N）新建一個新的圖像，命名好并把寬度設置為800px，高度為600px，分辨率為72dpi，然后點擊確定，記得順手保存（快捷鍵Ctrl+S），以免做一半PS崩潰或者其他原因被關閉了那就悲催了~
Step02：先填充背景，色值為#282828（PS：這步主要是為了方便圖標觀看，背景色值不定，看著舒服，不影響圖標外觀即可）；
然后選擇【橢圓工具】（快捷鍵U，可按Shift+U切換），在畫布點擊【創(chuàng)建橢圓】彈出層，設置寬度為172px，高度為170px，并勾選【從中心】，然后點擊確定；
Step03：選中橢圓圖層，命名為yuan，右鍵選擇【混合選項】，選擇【漸變疊加】，線性漸變，色值從上到下為 #feb5d0 - #ff7fae，角度為90°；
再選擇【橢圓工具】創(chuàng)建寬度跟高度都為172px的圓，填充顏色為#c74a78；命名為yuan_di，對齊于yuan圖層并放在其下面；
Step04：復制yuan圖層（快捷鍵Ctrl+J）命名為yuan_ban，選擇右鍵清除圖層樣式，填充顏色為#FFFFFF；不透明度改為30%；
選擇【橢圓選框工具】（快捷鍵M，可按Shift+M切換），按住Shift鍵，畫一個正圓選區(qū)（大小自己把握），可對齊圖層，然后點擊【圖層】窗口的【添加圖層蒙版】；
再復制yuan圖層命名為yuan_bian01，選擇右鍵清除圖層樣式，填充顏色改為# ffadcb；按住Ctrl鍵點擊圖層載入選區(qū)，按方向鍵向上和向左移動一像素，再反向選區(qū)（快捷鍵Shift+Ctrl+I），再點擊【圖層】窗口的【添加圖層蒙版】；
同理復制yuan圖層命名為yuan_bian02，填充顏色為#fff2f7，載入選區(qū)向下移動兩像素，反向選區(qū)后添加圖層蒙版；
Step05：復制yuan圖層命名為nei_yuan，點擊【編輯】-【自由變換路徑】（快捷鍵Ctrl+T），縮小80%（記得點擊【保持長寬比】），右鍵清除圖層樣式，選擇【混合選項】設置：
【描邊】：大小3px，內部，顏色# d85082，
【內陰影】：顏色# c33c6d，不透明度70%，角度120°，距離5，阻塞2，大小8，
【漸變疊加】：線性漸變，色值從上到下為 # feb8d2 - # ff80af，角度為90°；
Step06：復制nei_yuan圖層命名為nei_yuan_ban，清除圖層樣式，自由變換路徑縮小94%（記得點擊【保持長寬比】），顏色# FFFFFF，不透明度改為10%；再載入yuan_ban的蒙版選區(qū)，點擊【圖層】窗口的【添加圖層蒙版】；
再復制nei_yuan圖層命名為nei_yuan_bian，清除圖層樣式，填充顏色改為# ffb9d3；載入選區(qū)向上移動兩像素，反向選區(qū)，再點擊【圖層】窗口的【添加圖層蒙版】，再把nei_yuan_bian圖層向下移動一像素；
再復制nei_yuan圖層命名為nei_yuan2，清除圖層樣式，自由變換路徑縮小90%（記得點擊【保持長寬比】），顏色# FFFFFF，不透明度改為5%；
Step07：繪制LYNN Rabbit頭部部分，用【橢圓工具】創(chuàng)建一個橢圓，設置圖層混合選項，再繪制耳朵部分，注意描邊細節(jié)跟陰影，臉部一一拆分，大多數(shù)用是用鋼筆工具、橢圓工具、圖層蒙版、設置圖層混合選項等完成，在這就不一一詳細說明，最后加上耳朵陰影和高光，拉個橢圓白色透明漸變，設置不透明度為50%，完成圖標的繪制。
END：Duang~ 完成圖標后加個華麗麗的背景，再用同樣的方法就繪制出一套主題圖標啦~
歡迎加入UI設計學習群587751709
熱門課程推薦
熱門資訊
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
2. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
4. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
6. 史上最全，平面設計UI設計必備的77個國內外素材、設計資源網站
ui設計社區(qū),大神太多了。3、behance: https://www.behance.net/ ,著名設計... 對于品牌設計師來說,除了圖案素材收集之外,還有一個很重要的,就是設計故...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
8. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
最新文章
