iT邦幫忙

DAY 26
10

簡單學電腦繪圖系列 第 23

第二十六 設計icon很簡單,不得不分享(下)

耶黑
在上一篇有跟大家分享一個好東西,這次要以小內的方式來教大家溜

嘿嘿嘿 為什麼要這麼早來發文呢
因為明天要回嘉義,回家陪家人哩
所以要提早發,不然回到家肯定很晚哩 ><
在家就想要多陪家人,不想碰電腦,
還有我家的狗狗,分給大家看一下嘿嘿嘿
毛毛粉絲團:
https://www.facebook.com/MaoMaoDaily
XD

好哩廢話不多說GO發文

內式icon作法yo

在此篇就不在提到設計的一些原理,以及方式,再之前的文章中都有,可以回去看^^
這次著重於工具用法,讓大家都可以親自好好做出來喲


建議一開始設計先開大尺寸,就可以仔細顧到細節的設計,之後要匯出在縮小即可。

Step1
我以iphone4s ,114的尺寸來作設計
尺寸為114x114但是由於要開大尺寸,x4倍=456px x 456px。

Step2
先畫出圓角114/18,由於尺寸開大了4倍,圓角也要跟著3倍
18*4=72

Step3
再畫一個新的圓角,高為456px,寬為400px,把它對齊剛剛圓角圖層top的部分

Step4

試著將這兩個圓角型,填上顏色,下面為陰影的部分

Step5

在複製一個圓角(非陰影的那個),底下可以放你想要呈現,分割的畫面,先調透明度,就可以看到下面的物件
接著用遮罩!

Step6
在上面,我又多加了外框線,再將想要的顏色好好搭配即可。
如果一開始還沒排好想要的圖形,可以一直連續點已經在遮照理的物件,點到同一層時,再將想要加入的丟進去,並擺好

Step7
接著要交大家畫簡單泡泡
點選漸層(圓形的)

Step8
接著旁邊面板調整,劉兩個顏色(白色),只需要調透明度,大家可以條條看,哪樣比較好

最後完成圖

XD
看起來好像遊戲的icon,趕快來玩ˋˇˊ
嘿嘿嘿
大家快點試試看吧
(icon中的人物再之前的 四方人文章中有提到怎麼畫喲)
有沒有簡單又快速XD
快製作自己的icon吧ˋ ˊ

以下有不錯的延伸閱讀,可以去看一下喲!

WWDC 2013 How to make iOS 7 Icons and UI
https://www.youtube.com/watch?v=eRUplOgpgyA#t=232

iOS 7 的圓角圖標是怎樣一個圖形?
http://www.zhihu.com/question/21191767

iOS 7 的設計
http://blog.evendesign.tw/post/53428379353/ios-7

iOS7 icon
http://movies.apple.com/media/us/ios/ios7/f34c5445-5a9c-4b3a-9556-8efe89147559/design\_icondraw/design\_icondraw.mp4


小內之前的寫過的文章分享XD 沒有看過的朋友們可以看看喲
第一課 如何簡單學電腦繪圖:
http://ithelp.ithome.com.tw/question/10126750

第二課 基礎繪圖認知、技巧 - 「點」篇
http://ithelp.ithome.com.tw/question/10127156?tab=opinion&oid=234239#234239

第三課 基礎繪圖-「線」篇
http://ithelp.ithome.com.tw/question/10127481

第四課 基礎繪圖&平面應用技巧-「面」篇
http://ithelp.ithome.com.tw/question/10127774

第五課 繪畫自己的家&Aode Kuler介紹
http://ithelp.ithome.com.tw/question/10128007

第六課-簡單做卡片設計
http://ithelp.ithome.com.tw/question/10128231

第七課 何謂平面設計 (Graphic Design)
http://ithelp.ithome.com.tw/question/10128466

第八課 中階繪圖-認識明暗度 ( Illustrator 應用篇 )
http://ithelp.ithome.com.tw/question/10128913

第九課 中階繪圖-認識明暗度 ( Photoshop 應用篇 )
http://ithelp.ithome.com.tw/question/10129493

第十課 認識色彩 & 與特別分享 Iris Grac自閉小女孩
http://ithelp.ithome.com.tw/question/10129785

第十一課 LOGO設計必看
http://ithelp.ithome.com.tw/question/10130221

第十二課 簡單設計名片,靠自己最實在
http://ithelp.ithome.com.tw/question/10130641?tab=opinion#bottom

第十三課 簡單玩海報設計
http://ithelp.ithome.com.tw/question/10130944

第十四課、一起拯救報紙,關於報紙設計
http://ithelp.ithome.com.tw/question/10131301

第十五課 雜誌設計由你開始
http://ithelp.ithome.com.tw/question/10131761

第十六課 簡單線上設計、快速輸出、宅配到家 [ 超簡單送禮,必選之一 ]
http://ithelp.ithome.com.tw/question/10132097?tab=opinion#bottom

第十七課 淺談書籍設計,點綴與美化你的內容
http://ithelp.ithome.com.tw/question/10132522

第十八課 3D效果
http://ithelp.ithome.com.tw/question/10133152

第十九課 包裝設計與企業識別化CIS
http://ithelp.ithome.com.tw/question/10133549

第二十課 怎麼開始網頁設計?
http://ithelp.ithome.com.tw/question/10133833

第二十一課 用繪圖記錄生活有趣小事
http://ithelp.ithome.com.tw/question/10134349

第二十二課 手繪圖轉電繪圖-上色教學
http://ithelp.ithome.com.tw/question/10134892

第二十三課 四方人怎麼畫,看這裡
http://ithelp.ithome.com.tw/question/10135252

第二十四課 Infographics(資訊圖表),簡報好幫手,表達好方法
http://ithelp.ithome.com.tw/question/10135696

第二十五 設計icon很簡單,不得不分享(上)
http://ithelp.ithome.com.tw/question/10135977


上一篇
第二十五 設計icon很簡單,不得不分享(上)
下一篇
第二十七課 簡單畫地圖
系列文
簡單學電腦繪圖27
0
SunAllen
iT邦高手 1 級 ‧ 2013-10-11 01:08:52

沙發

現在才發現...我沒用過Apple的筆電落寞落寞

XD
可以玩玩看

拍照

總裁 iT邦好手 1 級‧ 2013-10-11 18:07:26 檢舉

我早就發現了,我連筆電都沒用過....毆飛

0
a25031364
iT邦新手 4 級 ‧ 2013-10-11 01:23:07

好可愛的icon呀!去哪載敲碗敲碗敲碗敲碗敲碗敲碗

請輸入 小內畫畫

0
老鷹(eagle)
iT邦高手 1 級 ‧ 2013-10-11 08:11:46

喜歡沙發

謝謝謝謝灑花

0
tomchun
iT邦研究生 5 級 ‧ 2013-10-11 09:51:01

忙

灑花灑花

我要留言

立即登入留言