sketch制作LOGO(一)---環形光暈

1 打開界面

首先你需要擁有一款Sketch，你可以從商店購買，如果你手頭有點緊的話可以先使用試用版。

打開界面，此刻你不需要任何模板，直接新建界面即可。



2 創建畫板

正式開始工作之前，我們需要創建一個畫板，這與AI一樣。

創建畫板的方式：一我們可以通過插入的方式進行繪制，默認工具欄的最左邊的小加號點開即可看見，選中“Artboard”或者你直接按快捷鍵A在工作區繪制也一樣。最后我們會在界面最左邊的檢查器中找到畫板的屬性值，設置“400 x 300”px即可。



3 填充一個彩色背景

現在我們已經准備好了一個畫板，給它一個背景基調，你可以在制作完圖標以后再添加，但是背景的產生的環境色會決定你圖標的色彩。

為了這個教程我來回做了很多次，現在我們切入正題。

快捷鍵R當然也可以選擇(插入>形狀>矩形，如圖4)，讓繪制的矩形充滿畫板，此時你需要注意到它的屬性值會出現在右側的檢查器中(Fill是填充顏色，Color是邊框顏色)如圖6。



取消邊框顏色，設置填充顏色為十六進制值類型#A846FF(圖7)，現在點擊顏色面板右上角的“+”你會看到他會新增一個顏色填充面板，選中選擇線性漸變，漸變梯度為從左上到右下(如圖8)。



接着是設置漸變填充的屬性值，確保你的形狀的左上的顏色是# FFFFFF(白色)和右下方的顏色是# 000000(黑色)。點擊漸變顏色選擇器或者直接點擊圖形右下角的小圓點設置色彩為#000000(黑色)透明度0，具體透明度設置詳見圖9顏色面板下紅色方框內。選擇左上角白色設置不透明度60。



再次點擊“+”創建一個新的顏色填充，這一次是一個徑向漸變填充。



確保左上方和右下方的顏色是白色和黑色。設置它們的透明度都為50。最終得到一個超級閃亮的霓虹燈效果即從亮到暗紫色的梯度，如圖12。



最終背景效果完成，全選你的背景圖層(Cmd+G)打包成組，雙擊左側圖層列表的組(或者是Cmd+R)將打包的組命名為Background。



4 使用內置IOS模板

現在讓我們開始創建我們自己的圖標。

這里我們可以使用內置的ios圖標模板，而不必重新創建那個相當復雜的圓角矩形。

單擊(File>New from Template>iOS App icon)，會創建一個新的文件，里面向你展示了iOS的整套圖標模板。

在圖層列表中找到iOS-76@2X畫板，解鎖(shift+Cmd+L)選中iOS-76@2X圖層,復制(Cmd+C)它並把它粘貼(Cmd+V)到你的原始文件中,現在你可以關閉你的模板文件了。



選中圖標圖層以及我們之前創建的背景圖層(按住Cmd然后再按住shift我們就可以在成組的情況下多選組內的內容，僅僅按住Cmd是單選)如圖17。



使用對齊工具使得圖標在畫板中能夠水平與垂直居中對齊，對齊功能(圖18)可以在界面右側檢查器最上面找到最終得到(如圖19)。



現在我們把圖標拖出背景組里，(Cmd+G)成組命名為icon。再次選中圖標成組，命名為“Icon Base”(圖20)



5 底座

選中圖層Base，改變填充顏色為#FFFFFF 。點擊“+”再次添加顏色填充，顏色值#FAC3FF不透明度為10%，如圖21。



現在使用快捷鍵“O”在Base圖層上面創建一個124 x 124的橢圓，當然不要忘記使用對齊功能使之與Base圖層居中對齊(如圖22)。



選中“Oval 1”，設置填充為線性漸變填充並使之傾斜。設置左上角顏色值#E500E7右下角顏色值#00D7FF，不改變混合模式(如圖23)。



命名此層為“Super colorful base”和成組“Color Base” (如圖24)。



6 創建錐形浮雕效果

然后創建一個橢圓來當做“Super colorful base”的旋鈕。

在“Super colorful base”圖層之上繪制一個58 x 58的橢圓，給這個橢圓添加一個垂直的線性漸變，頂部色值為：#FFDBFF 底部色值為#FCF2FC (如圖25)。



選中這個橢圓成組，更改組名為“Knob base”(如圖26)。



正如你所看到的我們剛剛創建了基礎圖形以及我們的圖標區，現在我們擁有底、ios7形狀、五顏六色的底和旋鈕。剩下的僅僅是添加效果這些事了。

在這一點上，如果你想確保明確的清楚上面的步驟，我創建了中間步驟示意圖文，你可以點擊這里。

現在我們需要花一些時間在組“Color base” 上。

我們要打造“ring”環繞我們的大圓圈。使用橢圓工具“O”創建一個128 x 128的橢圓別忘了使用對齊工具，效果如圖27。



現在我們再創建一個116 x 116的小橢圓，如圖28所示。



單擊工具欄中的布爾運算“substract”功能即圖29紅框所示，現在我們得到的是一個環形，如圖30所示。



你會注意到這個環是一個形狀組，如果你雙擊打開它你還能繼續修改繪制形狀，重命名該環形為“Surrounding”

給這個環添加一個線性漸變，以對角線的角度，左上色值為#F698FF右下色值為#FFF3FF當然效果如圖31。



現在我們要添加一個額外的線性漸變用來模擬漫反射，將鼠標移到圖形中線性漸變的路徑上你會看見鼠標的指針會變成一個帶“+”的指針，在左上1/3的地方單擊添加一個新的顏色設置顏色值為#BDB6FF，效果如圖32所示。



下一步是創建一個錐形，由於Sketch沒有“斜面和浮雕”效果，所以我們需要通過線性漸變來創建出這個三維效果。

在橢圓圖層“Super colorful base”的下方創建一個144 x 144大小的橢圓，取消邊框並給它添加一個垂直的線性漸變頂部色值是#FFFFFF底部色值是#DF80FF(效果如圖33)。



下一步是創建一個模糊使它有一個適當的平滑效果。注意右側檢查器中的“Gaussian Blur”。檢查它的復選框並設置的數值3(圖34)。最后，設置不透明度44%(圖35)。





7 添加圖形深度

現在你已經進一步深入了你的圖標了，選擇添加圖層“Super colorful base” ，點擊右側的 “Inner Shadows”(內陰影)旁邊的“+”添加內陰影效果。保持色值#000000;偏移量X和Y為0;Blur(模糊度)為10;Spread(阻塞)值為0(如圖36)。



點擊“+”再次添加內陰影，不透明度為56;偏移量X為0，Y為7;Blur(模糊度)為9如圖37。



8 修飾旋鈕

現在我們已經創建出了一個漂亮的圓形，但是我們需要把它與背景較好的統一起來，在你的“icon base” 文件夾里選擇“Base”圖層沿着光源的方向給它添加一點環境色。

我們給“Base”圖層創建第一個內陰影色值為#E187FF;不透明度為90;偏移量X為0，Y為5;Blur(模糊度)為6;Spread(阻塞)值為0。點擊“+”再次添加內陰影此刻色值為#FFFFFF;不透明度為100;偏移量X為0，Y為-5(如圖38)。



現在，我們來修飾小旋鈕，選擇組“knob base”和“橢圓2”圖層。

內陰影一：色值# 8d1799透明度48%;X：0：Y：1;模糊：3

內陰影二：色值# FFFFFF透明度100%;X：0：Y：2;模糊：3

這將創造一個有着漂亮光澤的按鈕。



下一步將會使按鈕更具有“觸摸感”，給它一點深度。用橢圓工具在48 x 48的按鈕中間畫一個 40 x 40的圓(如圖40)，去掉邊框給它一個垂直的線性漸變，上面為純黑#000000，下面為白色#FFFFFF設置透明度0%(如圖41)。



接下來我們設置下這個40 x 40橢圓的混合模式。混合模式設置為“overlay”(如圖42)。



我最喜歡Sketch 3.0的陰影工具。

首先我們選擇“Icon base > Base” 圖層。我們要給它添加3個層次的陰影。陰影的層次模式如下：

色值# 000000，透明度42% ，X 0 Y 10，模糊：16，阻塞0;

色值# 000000，透明度34% ，X 0 Y 4，模糊：14，阻塞0;

色值# 000000，透明度24%， X 0 Y 2，模糊：2，阻塞0，如圖43。



最后我們要做的是“base” 上的很強烈的投影。

復制“base”圖層，可以“Cmd+C，Cmd+V”復制也可以按住Alt拖動圖形來復制。

復制完后我們需要去掉圖層上的效果，用以創建新的效果，這時我們可以在右邊檢查器中取消陰影效果的勾選，然后點擊上方的垃圾桶就能刪除多余的效果了(圖44)。設置填充圖層#000000會得到圖45。



重命名該圖層為“Big drop shadow”並且將它置於“base”圖層下方(如圖46)。



現在我們要把這個圖層往下挪，按住Shift鍵並且按住鍵盤向下鍵3次，如圖47。



最后將投影設置不透明度20%設置高斯模糊7(如圖48)，此時你會發現生成一個漂亮的投影。



給按鈕添加類似投影。

選擇組“Knob base” 中的 “oval 2" 圖層，復制一層提取出來重命名“Knob shadow” 拖動放在組“knob base”里，如圖49。



除去這一層所有的效果填充顏色#000000並且向下移動10px(如圖50)，做到這一點后設置圖層不透明度為10%，高斯模糊4px，效果很微妙，(如圖51)。



讓我們做一個華麗的陰影。復制這一層，使它往回走10px與旋鈕居中對齊，我們需要修改下這個圓的形狀。選擇這個圖層按回車或者雙擊鼠標你會看到(圖52)。現在可以編輯路徑了，注意你右邊的檢查器面板已經改變了。



選擇底部的錨點，將這個錨點向下移動10px(圖53)，然后回車結束編輯狀態。設置圖層不透明度為20%，高斯模糊為8(圖54)。



再復制一個圓作為陰影，我們重復剛剛的工作，設置不透明度為40%,在右側面板我們修改下這個陰影的大小寬度為68，高度為80，並且高度與旋鈕頂端對齊(如圖55)。



最后，設置圖層混合模式為疊加，得到一個不錯的深藍色的陰影(圖56)。



我們現在要給旋鈕添加一個很有層次的陰影。選擇“Knob base>Oval 2"圖層。開始添加陰影效果：

色值# 000000 ，透明度60%，x：0，Y 1，模糊：2，阻塞0。設置此陰影的混合模式為“疊加”

色值# 000000 ，透明度14%，x：0，Y 3，模糊：4，阻塞0

色值# 000000 ，透明度50%，x：0，Y 2，模糊：4，阻塞0

你應該看看這個(圖57)。



這是我們現在做的陰影。

10 細節

做完之后我們需要添加兩個小東西來當做ON/OFF

在旋鈕組創建一個圓角矩形(U或者Insert>Shape>Rounded如圖58)，大小8 x 2半徑為3或者更多。把它放在你的其他旋鈕層並且命名為“pointer thingy”，我無法找到更好的命名。將其水平對齊並且處於底座的右側。



除去圓角矩形的邊框設置不透明度40%，色值為CA2DEA。

給它一點深度，添加陰影添加陰影：色值# FFFFFF，透明度 46%，x：0，Y 1，模糊：0和一個內陰影：色值# 000000，透明度 40%，x：0，Y 1，模糊：0。

設置內陰影圖層的混合模式為“疊加”，您得到(圖60)的結果。



在圖層“color base” 上用橢圓工具(O)創建一個8 x 8的圓。置於旋鈕的左側(離旋鈕10px)，重命名為“OFF”(圖61)，去掉邊框，顏色值為#FFFFFF，混合模式改疊加(圖62)。





為了讓它看起來更像一個“OFF”的按鈕，讓我們在它中間創建另外一個圓，這一次是6 x 6大小，去掉邊框可以看到這個新建的圓能很好的契合在“OFF”按鈕上(如圖63)。



選中你的“OFF”圖層和剛剛的圓圖(64)，執行命令“substract”你會得到這樣一個環形(圖65)。



創建“ON”，復制你的“OFF”層。重命名和移動旋鈕的另一邊，同樣的距離(圖66)。



點擊層的左邊三角形展開向量組，選擇“Oval11”(圖67)刪除它得到(圖68)。



你現在做到這一步!

11 輸出

這個教程最后一步就是切圖輸出了。我認為輸出是Sketch 3.0的一個極好的優點。

我想你們會想要導出1x(當前大小)和2x

選擇你畫板上的“colorful switch”在右側檢查器的底部你會看到一個“Make Exportable”的按鈕，單擊你會得到(圖69)。

1x表示基線，即你當前的設計尺寸，單擊右側的“+”會添加一個新的輸出窗口，選擇2x他會在輸出的時候自動放大2倍，當然你也可以更改后綴名(如圖70)。

當你點擊“Export colorful switch”，它會產生1X，自動擴展你的畫板上@2x的輸出選項和它所選擇的格式。瞧!