search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

【 設計教學 】教你利用sketch創建彩色時尚的APP圖標 – PS筆刷工廠

教你利用sketch創建彩色時尚的APP圖標

這一次的教學是屬於攝影作品領域中的其他資訊的相關教學。

文章出處是來自優設的攝影作品類文章,寫教學的作者是呼嘯而過Charles,感謝呼嘯而過Charles提供其他資訊的實作教學。

教學大綱:

Sketch是Mac平台上超火的圖片處理軟件,功能強大,並且比起PS它更加輕量級。感謝Sebastien Gabriel,本教程由他製作。下方是最K效果。不贅言,直入主題。


其他資訊教學開始

Sketch是Mac平台上超火的圖片處理軟件,功能強大,並且比起PS它更加輕量級。感謝Sebastien Gabriel,本教程由他製作。下方是最K效果。不贅言,直入主題。

教你利用sketch創建彩色時尚的APP圖標

01.安裝sketch

如果你尚未購買它,你可以下載試用版或者直接到App Store購買。然後安裝並啟動sketch。

當你看到提示畫面,不要點開任何特定的模版,只要點擊”OK“按鈕,然後開啟新文檔。你將會看到下圖。

教你利用sketch創建彩色時尚的APP圖標

02.創建畫板

畫板是工作區域,它的尺寸可以不受限制,小到圖標、大到任意大。如果你用過Illustrator,他們是相同的。

在鍵盤上按“A”鍵或者點擊左上角的“Insert”按鈕,選擇”artboard”(如圖1)。如圖,你可以在右側欄看到許多預設尺寸。本例不採用這些預設尺寸。簡單在畫布上畫任意尺寸的畫板。完成後在右側面板上”size”上輸入400 X 300(如圖2)。

教你利用sketch創建彩色時尚的APP圖標

教你利用sketch創建彩色時尚的APP圖標

在你的畫板/左側的圖層面板,雙擊”Artboard 1″標籤,將其重命名。作者將其命名為”Colorful switch”,因為它是描述性名稱(如圖3)。

教你利用sketch創建彩色時尚的APP圖標

03.設置彩色背景

現在你已經製作一個畫板,是時候為它設定色調了。你可以之後調整它。但背景色的選取會影響到你圖標上的光線反射和圖標上的着色。

敲擊鍵盤上的”R”鍵選擇矩形(insert>shape>rectangle (R),如圖4)

教你利用sketch創建彩色時尚的APP圖標

在畫板上畫一個矩形,使其與畫板完全匹配。矩形工具將自動對齊畫板的邊沿(如圖5)。完成後你將發現右側的效果面板(effect panel)自動完成灰色填充和灰色邊框(如圖6)。

教你利用sketch創建彩色時尚的APP圖標

教你利用sketch創建彩色時尚的APP圖標

解除邊框顏色,然後點擊填充顏色。在16進制框輸入“A846FF”(如圖7)。現在你能得到基本顏色。

教你利用sketch創建彩色時尚的APP圖標

現在請注意填充面板右上角的“+” 按鈕,點擊它。

如你所見,在此前的圖層之上添加新的填充圖層。

如果未選中漸變面板請選中它,在畫板上從左上角到右下角畫漸變(如圖8)。

教你利用sketch創建彩色時尚的APP圖標

在填充類型選擇器右下角的兩個方形是你所選擇的漸變色。點擊它,使其變成可編輯狀態。

確認你的形狀的左上角的顏色是白色(#ffffff)、右下角是黑色(#000000)。點擊漸變色選擇器中的黑色,設置它的透明度為0。漸變色的透明度的調整可以通過滑動取色器右下方的滑塊或者在RGB右側的“A”字母輸入框輸入。選擇白色,設置透明度為60(如圖9)。

教你利用sketch創建彩色時尚的APP圖標

設置填充為“overlay”(如圖10)

教你利用sketch創建彩色時尚的APP圖標

然後再次點擊添加按鈕。這次選擇第三個標籤以得到徑向漸變。調整漸變為從左上角到右下角(如圖11)。

教你利用sketch創建彩色時尚的APP圖標

確認左上角顏色為白色,右下角顏色為黑色。保證他們的透明度都為50%。同樣設置這個填充為“overlay”。完成後效果如圖12。一個閃亮的由淺及深的霓虹燈紫色漸變色。

教你利用sketch創建彩色時尚的APP圖標

最後,創建組,將前面創建的圖層放入組中。在左側面板中選擇你的圖層,摁住“cmd”和“G”將圖層放入組中,雙擊組,將它命名為“Background”。或者起個更瘋狂的名字,如crazy color。最終效果見圖13。

教你利用sketch創建彩色時尚的APP圖標

04.應用內嵌的iOS7圖標模版創建圖標的外形

現在讓我們一起創建圖標吧。

我們將用內嵌的iOS圖標模版,因此可以避免重建帶複雜圓角的外形。

點擊“File”>“New From Template”>“iOS App Icon”(如圖14),新建文件。

教你利用sketch創建彩色時尚的APP圖標

在左側的面板中點擊“[email protected]”中的“Icon Shape”右側的鎖(如圖15)。選中此圖層並解鎖,複製(cmd+c)並粘貼到你原始的文件中 (如圖16)。你可以關閉模版文件窗口,無需保存。

教你利用sketch創建彩色時尚的APP圖標

教你利用sketch創建彩色時尚的APP圖標

選擇已經創建的“Icon Shape”圖層(點擊“cmd”可以選擇多個圖層,如圖17)。

教你利用sketch創建彩色時尚的APP圖標

使用右側邊欄頂部的排列工具,將圖標置於背景的中間。點擊“align horizontally” 按鈕(水平居中第四個圖標)和 “align vertically” 按鈕(垂直居中,第七個圖標),如圖18。完成後如圖19。

教你利用sketch創建彩色時尚的APP圖標

教你利用sketch創建彩色時尚的APP圖標

現在我們整理之前的成果,之後就不必再做了。在Icon shape圖層點擊 “cmd+G” 創建組。向上拖拽該組,重命名為“Icon”。在該組中再次點擊“Cmd + G”將圖層放入群組中。重命名為“Icon Base”(如圖20)。

教你利用sketch創建彩色時尚的APP圖標

05.創建基礎形狀

選擇“Base” 圖層,修改色彩為#ffffff。點擊“+”按鈕添加第二個平色填充(可理解為單色-譯者注),設置顏色為#FAC3FF。

設置剛才的平色透明度為10。完成後如圖21。

教你利用sketch創建彩色時尚的APP圖標

現在鍵盤上點擊“O” 選擇橢圓形狀工具。在“Base”圖層的中央畫124 * 124的圓。你也可以右側邊欄設置圓的尺寸。不要忘記我們之前使用的排列工具將圓形完美的居中。去掉邊框,你將得到如圖22的圖形。

教你利用sketch創建彩色時尚的APP圖標

將“Oval 1”圖層的填充樣式設為“Linear Gradient”(線性漸變-譯者注),調整角度為對角線。設置左上角顏色為#E500E7、右下角顏色為#00D7FF。不要修改透明度和混合模式。(如圖23)

教你利用sketch創建彩色時尚的APP圖標

為該圖層命名為“Super colorful base” ,然後將起放入“Color Base”群組。(如圖24)

教你利用sketch創建彩色時尚的APP圖標

運用橢圓工具畫旋鈕。畫一個58 * 58的圓,然後將它與“Super colorful base”居中對齊。

在該圖層上添加垂直線性漸變。頂部顏色為#FFDBFF、底部顏色為#FCF2FC。(如圖25)

教你利用sketch創建彩色時尚的APP圖標

為該圖層建群組(cmd+G),然後命名為Knob base”(如圖26)

教你利用sketch創建彩色時尚的APP圖標

如圖所示,我們已經創建了基礎形狀以及我們圖標的區域。在底層我們完成了iOS7的形狀。並且在頂層完成了彩色圓形和旋鈕。現在剩餘的任務就是在這些扁平形狀上添加一些效果。中場休息,我們已經漂亮地完成了一半。讓我們下半場繼續創造奇迹吧。

06.創建斜面效果

現在我們來處理“Color base” 群組。

首先,周圍創建“環”。

在Base中央用橢圓工具(點擊“O”)創建128 * 128的圓。不要忘記使用排列工具。按住“Alt” 鍵顯示智能引導線,使每個元素都對齊。完成後如圖27。

教你利用sketch創建彩色時尚的APP圖標

再次運用橢圓工具,創建一個小一點的圓。將之前的圓與之居中對齊。不要忘記按住“shift” 來畫116 * 116的圓。(如圖28)

教你利用sketch創建彩色時尚的APP圖標

確保最近添加的圖層在最上面,選擇兩個圖層,之後工具欄點擊“substract”(差集-譯者注)如圖29。完成後如圖30。

教你利用sketch創建彩色時尚的APP圖標

教你利用sketch創建彩色時尚的APP圖標

你會注意到現在Oval 3變成“shape group”。若你打開它,你可以修改形狀。重命名為“Surrounding”。

在它的上面創建線性漸變圖層。確保漸變從左向有一些透視漸變。

設置頂部顏色為#F698FF 、底部顏色為#FFF3FF。完成後如圖31。

教你利用sketch創建彩色時尚的APP圖標

現在創建附件的漸變圖層來模擬反射。當你在漸變中激活描邊時,你會看到光標有“+”。點擊添加新顏色。在1/3 處添加新顏色(近旋鈕輪廓)設定顏色為#BDB6FF。(如圖32)

教你利用sketch創建彩色時尚的APP圖標

下一步是關於斜面。我們需要這圖標上創建一點“隆起”。創建後會突出中心部分的元素並創建3D效果。這sketch中沒有類似Photoshop中的斜面和浮雕工具。我們可以使用簡單的漸變來創建同樣的效果。

在“Super colorful base”圖層下面畫一個新的144 * 144圓(點擊“O”鍵) 並居中對齊。去掉邊框,添加一個垂直的漸變,頂部顏色設置為#ffffff ,底部顏色設置為#DF80FF (如圖33)。

教你利用sketch創建彩色時尚的APP圖標

下一步是通過創建模糊效果來製造恰當的平滑過度效果。注意右側邊欄的“Gaussian Blur” (高斯模糊-譯者注)。點擊複選框,設置參數為3px(如圖34)。最後設置該圖層的透明度為44%(如圖35)。

教你利用sketch創建彩色時尚的APP圖標

教你利用sketch創建彩色時尚的APP圖標

07.添加深度

現在為圖標的斜面添加一些深度。對彩色圓重複該深度。選擇“Super colorful base” 圖層,在“Inner Shadows”(內陰影-譯者注)行點擊“+”添加首個內陰影。

保持顏色為#000000 ,但設置透明度為64%。設置X和Y坐標值為0、blur(模糊-譯者注)值為10。保持spread (範圍-譯者注)為0(如圖36)。

教你利用sketch創建彩色時尚的APP圖標

再次點擊“+”按鈕添加內陰影。這次設置透明度為56,X:0, Y:7 和blur值為9(如圖37)。

教你利用sketch創建彩色時尚的APP圖標

08.斜面

現在我們為中心部件添加了漂亮的斜面。在這部分我們將深度添加到基礎部件上,將他們更好的混合起來。

在“icon base”文件夾,選擇“base”圖層。我們需要做的是保持相同的光線方向,及從上至下由淺到深。對此處而言頂部為白色、底部為粉色。

添加第一個內陰影,設置顏色為#E187FF,透明度為90%。X:0, Y:-5, Blur:6,範圍值為0。

添加第二個內陰影,顏色為#ffffff,透明度為100%。這次設置該內陰影為向下而飛向上。設置Y:5 (如圖38)。

教你利用sketch創建彩色時尚的APP圖標

將內陰影應用於小旋鈕。選擇“knob base” 群組和“oval 2″ 圖層。

設置第一個內陰影顏色為#8D1799,透明度48% 。X:0 Y:-1 和 blur:3。

設置第二個內陰影顏色為#ffffff,透明度100% 。X:0 Y:2 和 blur:3。完成後值旋鈕頂部將創建一個漂亮的反射(如圖39)。

教你利用sketch創建彩色時尚的APP圖標

下一步是將旋鈕雕刻的更有觸感和深度。使用橢圓工具,在旋鈕的中間畫48 * 48的圓(如圖40)。取消邊框,添加垂直漸變填充,設置頂部顏色為黑色,底部顏色為白色。最後設置白色透明度為0%(如圖41)。

教你利用sketch創建彩色時尚的APP圖標

教你利用sketch創建彩色時尚的APP圖標

用調整混合模式來代替添加顏色。設置整個圖層為“overlay” (疊加模式-譯者注,如圖42)。

教你利用sketch創建彩色時尚的APP圖標

你也可以設置其他尺寸。

09.陰影

這部分是我的最愛。Sketch 3中令人驚艷的是其將陰影處理的如此精妙。在Sketch 3中有幾種創建陰影的方法:在圖層面板中應用陰影工具。簡易漸變或者應用模糊圖層。

這裡我們使用兩種方法:陰影工具和模糊圖層。

首先選擇“Icon base > Base” 圖層。然後共計添加三個陰影。從很重的貼近base(底部原件-譯者注)的陰影到很輕的base的陰影。添加陰影如下:

#000000 Alpha(透明度-譯者注) 42% X:0 Y:10 Blur(模糊值-譯者注):16 Spread(範圍-譯者注):0

#000000 Alpha 34% X:0 Y:4 Blur:14 Spread:0

#000000 Alpha 24% X:0 Y:2 Blur:2 Spread:0

完成後如圖43。

教你利用sketch創建彩色時尚的APP圖標

最後為base添加強烈的陰影(drop shadow)。

複製“base” 圖層:可以右鍵點擊圖層,選擇複製(duplicate);或者複製、粘貼圖層;或者按住“alt” 鍵,拖拽圖層。

完成後你會發現效果也同樣複製過來了。刪除全部效果。取消靠近效果的複選框,然後點擊選擇標籤右側的垃圾圖標(靠近“+” 符號)。點擊此圖標將自動取消所有陰影效果(如圖44)。設置顏色填充的顏色為#000000。完成後如圖45。

教你利用sketch創建彩色時尚的APP圖標

教你利用sketch創建彩色時尚的APP圖標

在圖層面板重,重命名該圖層為“Big drop shadow” ,將其移動至“base”圖層下面(如圖46)。

教你利用sketch創建彩色時尚的APP圖標

調整該圖層的位置,向下移動30px:選擇圖層,按住shift鍵同時點擊向下箭頭的按鍵三次。按住Shift+上下左右箭頭將以10px單位移動選中圖層(如圖47)。

教你利用sketch創建彩色時尚的APP圖標

最後,設置該圖層透明度為20%,然後設置高斯模糊值為7px(如圖48)。底部原件現在有了漂亮的陰影。

教你利用sketch創建彩色時尚的APP圖標

下面將同樣的陰影應用到旋鈕上。

進入“Knob base”群組,選擇oval 2”圖層。複製該圖層,將其移出群組。為該圖層設置單獨的群組,重命名為“Knob shadow” ,將該群組拖拽到“knob base” 下面(如圖49)。

教你利用sketch創建彩色時尚的APP圖標

移除該圖層的所有效果,設置單色為#000000,向下移動10px(如圖50)。完成後設置該圖層透明度為10%、告訴模糊為4px。效果會非常輕微(如圖51)。

教你利用sketch創建彩色時尚的APP圖標

教你利用sketch創建彩色時尚的APP圖標

讓我們製作個更精緻的陰影。複製該圖層,向上移動10px,與旋鈕對齊。修改此圓的形狀。選中后按enter(return)”鍵,如圖52。現在編輯路徑。請注意右側面板已經發生變化。

教你利用sketch創建彩色時尚的APP圖標

如果未選中,選擇底部錨點(如圖52)。將該錨點下移10px(如圖53)。完成後在矢量編輯面板的頂部點擊“finish editing”,回到常規視圖。

教你利用sketch創建彩色時尚的APP圖標

設置圖層透明度未20%、8px高斯模糊(如圖54)。

教你利用sketch創建彩色時尚的APP圖標

完成最後的陰影,複製剛才完成的圖層,設置透明度為40%。在右側面板的“size”中,設置新圖層68寬、80高,設置頂部居中對齊(如圖55)。

教你利用sketch創建彩色時尚的APP圖標

最後設置圖層的混合模式為Overlay,進而得到漂亮的深藍色陰影(如圖56)。

為旋鈕陰影添加方向效果。

選擇旋鈕的base圖層(“Knob base>Oval 2”)。添加三個陰影效果,如下:

·#000000 60% alpha(透明度-譯者注) X:0, Y:1, Blur:2, spread 0. 設置混合模式為“Overlay”。

·#000000 14% alpha X:0, Y:3, Blur:4, spread 0。

·#000000 50% alpha X:0, Y:2, Blur:4, spread 0。

完成後如圖57。

教你利用sketch創建彩色時尚的APP圖標

現在我們完成了陰影部分。

10.完成細節

添加開關。

在Knob base群組中創建圓角矩形:點擊“U” 鍵或點擊“Insert>Shape>Rounded” (如圖58),尺寸8*2(寬*高)、圓角半徑為3或更多。

教你利用sketch創建彩色時尚的APP圖標

將它移到其他旋鈕圖層的頂部,重命名為“pointer thingy”,我尚未找到更合適的名字。

水平居中,距旋鈕底部右側8px(如圖59)。

教你利用sketch創建彩色時尚的APP圖標

取消邊框,設置單色為#CA2DEA、透明度為40%。

為其添加深度。添加陰影:#FFFFFF 46% alpha X:0, Y:1, Blur:0。然後添加內陰影:#000000 40% alpha X:0, Y:1, Blur:0。

設置內陰影混合模式為“overlay”。完成後如圖60。

教你利用sketch創建彩色時尚的APP圖標

在“color base” ,應用橢圓工具(點擊“o”鍵)創建8X8的圓。將其移至距旋鈕左側10px處並水平居中。重命名為“OFF”(如圖61)。取消邊框,為其填充顏色為#ffffff 、設置混合模式為overlay(如圖62)。

教你利用sketch創建彩色時尚的APP圖標

教你利用sketch創建彩色時尚的APP圖標

為了使其更像關閉的開關,在“OFF”圖層的頂部創建另一個圓型圖層。這次設置其尺寸為6X6。取消邊框並與“OFF” 圓居中對齊(如圖63),完成後看起來漂亮許多。

教你利用sketch創建彩色時尚的APP圖標

同時選擇“oval 11”和“OFF”圖層。在工具欄應用“substract”(差集-譯者注)合併他們(如圖64)。 完成後如圖65。

教你利用sketch創建彩色時尚的APP圖標

教你利用sketch創建彩色時尚的APP圖標

創建“ON” 圓,複製“OFF”圖層。重命名它,將其移到旋鈕的另一側,距離相同(如圖66)。

教你利用sketch創建彩色時尚的APP圖標

點擊圖層左側的三角形來展開矢量圖群組,選擇“oval 11″ (如圖67)並刪除它(如圖68)。

教你利用sketch創建彩色時尚的APP圖標

教你利用sketch創建彩色時尚的APP圖標

大功告成!

11.導出

教程的最後我們將展示將畫板一次輸出多個DPI。這是一個絕妙的特點。

在本列中我們將輸出一倍(當前設計的尺寸)和兩倍的文件。

選擇畫板“colorful switch”。

在右側邊欄的底部,你會看到“Make Exportable”按鈕。點擊它,你將得到圖69。

教你利用sketch創建彩色時尚的APP圖標

1x表示基線,例如你設計的原始尺寸。在“Export”的右側點擊 “+”,添加新的輸出倍數。系統自動添加@2x(2倍-譯者注)。你也可以改變後綴和格式(如圖70)。

教你利用sketch創建彩色時尚的APP圖標

當你點擊“Export colorful switch”將生成1倍和2倍的相應格式的文件。

當你看到這裡,你已經具備了成功的潛質(能看譯者嗦到這裡的都是意志十分強大的童鞋,這段非原文,乃譯者自己的感慨!)。希望此教程能給各位帶來些許幫助。

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: 教你利用sketch創建彩色時尚的APP圖標

版权所有,保留一切权利! © 2019 PS筆刷工廠


熱門推薦

本文由 wwwfreebrushscom 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦