編者按：營(yíng)銷+設(shè)計(jì)雙學(xué)習(xí)的Sketch特制教程！今天這篇教程非常棒的地方是既能熟悉Sketch的操作技巧，還能學(xué)會(huì)郵件營(yíng)銷的精髓。作者巧妙地將營(yíng)銷與設(shè)計(jì)的關(guān)鍵點(diǎn)結(jié)合起來講，絕對(duì)大有收獲的一篇教程。推薦練習(xí) >>>

木有Mac，裝不了Sketch？別怕，辦法在這：《用虛擬機(jī)體驗(yàn)Sketch！為設(shè)計(jì)師準(zhǔn)備的MAC OSX安裝指南》

前言

如果你曾經(jīng)參加過每周郵報(bào)的設(shè)計(jì)工作的話，你就會(huì)知道毫無疑問這是營(yíng)銷策略中的關(guān)鍵一環(huán)，它們能夠幫助我們和潛在的用戶建立直接聯(lián)系。但是，我們必須格外注意如何設(shè)計(jì)它們，以使得能夠吸引收件人的眼球，最重要的是達(dá)成我們的營(yíng)銷目的。

這里是這個(gè)設(shè)計(jì)練習(xí)的背景：想象我們是一家提供在線課程學(xué)習(xí)的公司，我們想要與我們的潛在用戶取得聯(lián)系，向他們展示我們的平臺(tái)能帶來的好處。在這種情況下，我們可以使用Sketch設(shè)計(jì)一個(gè)簡(jiǎn)潔的但有效的郵報(bào)來達(dá)到我們的目標(biāo)。

我們將使用到Sketch中最常用的幾個(gè)功能來創(chuàng)建我們的視覺稿，你將會(huì)驚訝于這是如此的簡(jiǎn)單！

最終效果：

素材打包 ?微盤下載

做好準(zhǔn)備

為了順利完成這篇教程，你需要下載這些附件。在這個(gè)壓縮文件中，你可以找到我們?cè)诤罄m(xù)步驟中將會(huì)使用到的一些文本和圖像。

我將會(huì)使用Helvetica Neue字體作為默認(rèn)字體，但是如果你沒有這種字體的話，嘗試使用Helvetica或者是Arial作為代替。

注意：要做一名負(fù)責(zé)任的設(shè)計(jì)師！我的意思是：記得使用描述性的文字重命名圖層并將它們編組來組織內(nèi)容，你的同事會(huì)感謝你的，相信我。

好了嗎？我們開始吧！

設(shè)置繪圖板

第1步

讓我們從創(chuàng)建新的繪圖板開始。在菜單中選擇插入——繪圖板或者在工具欄中選擇?，F(xiàn)在在Sketch的畫布上拖動(dòng)繪制一個(gè)620*3000px的繪圖板。如果你覺得這很難，記得你可以使用屏幕右側(cè)的觀察器面板來調(diào)整參數(shù)。你同樣可以在左側(cè)的圖層列表中改變繪圖板的名字。

提示：設(shè)計(jì)郵報(bào)時(shí)通用的寬度是500-600px。

第2步

現(xiàn)在我們來添加一些參考線以便為我們正確地放置元素來提供參考依據(jù)，以達(dá)到平衡和穩(wěn)定的設(shè)計(jì)效果。我們應(yīng)該講參考線放在什么位置呢？

郵報(bào)可以有很多種設(shè)計(jì)方式，最簡(jiǎn)單的一種就是使用一欄式布局，由一個(gè)接一個(gè)的方塊形成垂直式文檔流，這種布局方式能夠允許我們用一種簡(jiǎn)便的方式引導(dǎo)用戶。而且，一欄式的布局結(jié)構(gòu)也更加利于我們?yōu)椴煌钠聊蛔鲞m配。

但是，為了達(dá)到教學(xué)的目的，我們將要做得多一點(diǎn)，我們將采用三欄式布局。

激活標(biāo)尺并且開始創(chuàng)建參考線。選擇視圖——標(biāo)尺，現(xiàn)在在水平標(biāo)尺上的30px、200px、225px、395px、420px還有590px處單擊，你可以點(diǎn)擊并拖動(dòng)標(biāo)尺來移動(dòng)它的位置。，你同樣可以對(duì)參考線這么做。要?jiǎng)h除參考線，點(diǎn)擊參考線并拖動(dòng)它們到標(biāo)尺的后方。

設(shè)計(jì)標(biāo)題欄

我們郵件的標(biāo)題是十分重要的。它是我們與用戶的第一接觸因此我們應(yīng)在此直接說明我們的定位。還有一種很好的設(shè)計(jì)就是展示公司的名字并且在CTA按鈕后面加上一條標(biāo)語(yǔ)來鼓勵(lì)用戶注冊(cè)或者獲取關(guān)于更多有關(guān)于我們的信息。

首先我們?cè)黾右粭l前標(biāo)題（preheader），一條簡(jiǎn)單的文本提醒我們的用戶來給予這封郵件適當(dāng)?shù)臋?quán)限以防郵件的內(nèi)容無法正確的顯示。

第1步

選擇文本工具并且在繪圖板上單擊以加入一條文本，注意觀察器面板已經(jīng)顯示了當(dāng)前文本的屬性，輸入“Problems viewing this email？ View it online”。

將它的顏色調(diào)整為#8FA6B3，并將大小調(diào)整為11px，現(xiàn)在我們選擇“View it online”部分并將它的顏色調(diào)整為#FF736D，保持它的選擇狀態(tài)并點(diǎn)擊顏色旁邊的選項(xiàng)按鈕，將它的裝飾選項(xiàng)選中下劃線。

將文本移動(dòng)到離上方邊緣30px處。

第2步

使用矩形工具創(chuàng)建一個(gè)620*500px的矩形并且將它放置在文本圖層的下方，下邊緣距離文本30px，在觀察器面板中將它的顏色修改為#F5F7F8，取消邊緣選項(xiàng)的勾選來移除它。

第3步

打開這篇教程附帶的icons svg文件。選中這些圖標(biāo)并將它們復(fù)制粘貼到我們的文件當(dāng)中，我們將要用它來裝飾我們標(biāo)題的背景。

我將這些icon放在了?X= -50?和?Y = 0的位置（注意看觀察器面板中的選項(xiàng)），但是你可以按你喜歡的方式放置。

提示：你可以看到我們的icon的有些部分超出了繪圖板的范圍因而Sketch將它們自動(dòng)隱藏了，不奇怪，程序知道你正在使用繪圖板來限定你的設(shè)計(jì)區(qū)域所以它隱藏了超出了繪圖板的部分。試著將所有的icon移到繪圖板之外，你會(huì)發(fā)現(xiàn)整個(gè)就顯示出來了不是嗎？不要忘記再把它放回去哦。

第4步

在圖層列表中我們選中icon圖層和你先前創(chuàng)建的矩形，用工具欄中的按鈕將它們合并為一個(gè)組。將這個(gè)組移動(dòng)到圖層列表的最底部并將它命名為“背景”或類似的什么，然后使用左邊的小箭頭將圖層內(nèi)容隱藏起來。

選擇那個(gè)矩形然后選擇圖層——作為遮罩層使用，快看！Sketch會(huì)使用這個(gè)矩形遮蓋住所有在圖層列表中位于其上的圖層，如果我們先前將我們需要被遮蓋的元素和遮蓋的圖層進(jìn)行編組，我們就不會(huì)影響到編組外的圖層了，非常有用的小技巧！

現(xiàn)在你應(yīng)該有了如下圖形式被遮蓋的icon了：

第5步

打開logo svg文件然后將它們粘貼到你當(dāng)前的文件當(dāng)中，我知道它太大了，所以到觀察器面板中將它的大小改為90 x 31px，將它移動(dòng)到?X = 265，Y = 100的位置。

第6步

新建一個(gè)文字圖層并將它的寬度設(shè)置為560px并將它移動(dòng)到X = 30，Y = 220的位置?，F(xiàn)在編輯文本，輸入“Your place to discover real world skills”，將它的屬性設(shè)置為磅數(shù)?=?粗體，顏色?= #424242,?大小?= 48，行高?= 45和對(duì)齊?=?居中，并僅僅將“real”這個(gè)詞改為斜體。

第7步

現(xiàn)在我們來設(shè)計(jì)我們主要的動(dòng)作按鈕。繪制一個(gè)220*45px的矩形，在觀察器面板中將它的半徑設(shè)置為30，改變填充顏色為#D92B2B。將它放置在標(biāo)語(yǔ)文本的下方，兩個(gè)元素之間隔開50px距離。

第8步

如果我們不在按鈕上寫字這個(gè)按鈕就是沒有用的。我們需要一段呼告文本，一小句話來聚焦我們的目的并吸引用戶的注意力。我很樂意多談一些這種營(yíng)銷手段，但是我們還是快一點(diǎn)做教程吧。我們創(chuàng)建一個(gè)文本圖層然后輸入“Join us from 10$/month”。

將它的屬性更改為磅數(shù)?=?粗體,?顏色?= #FFFFFF和大小?= 15。然后將它移動(dòng)到X = 225，Y = 375的位置，就在我們的圓角矩形之內(nèi)。

我們待會(huì)還要用到這個(gè)按鈕，所以將它保存為一個(gè)符號(hào)似乎是個(gè)好方法。將文字和矩形圖層編組并在工具欄中點(diǎn)擊創(chuàng)建新符號(hào)，注意在圖層列表中，文件夾的顏色由藍(lán)色變成了紫色。

第9步

我覺得我們需要增強(qiáng)背景圖片和文本的對(duì)比關(guān)系，所以我們來做一點(diǎn)小小的改變。選擇圖層列表面板，展開背景組并復(fù)制那個(gè)你用來遮蓋icon的矩形，將它復(fù)制到組的頂端，然后在觀察器面板中將它的混合模式調(diào)整為加亮并將不透明度調(diào)整為50%。最后你的結(jié)果應(yīng)該類似于這樣：

我們的標(biāo)題完成了！

設(shè)計(jì)“我們是誰(shuí)”方格

現(xiàn)在我們已經(jīng)吸引了用戶的注意力，我們需要更多地討論下我們自己和我們的服務(wù)了。我們是誰(shuí)？我們是做什么的？我們需要用一種直接和簡(jiǎn)明的方式來回答這些問題，試著展示我們的服務(wù)的優(yōu)點(diǎn)。

第1步

創(chuàng)建兩個(gè)新的文本圖層，將它們的寬度調(diào)整為480px，你可以輸入你喜歡的隨便什么東西，但是我是用了你將會(huì)在附件中找到的文本。

完成了，現(xiàn)在來調(diào)整它們的位置和屬性。

第2步

繪制一條100px長(zhǎng)的線條并且將寬度設(shè)置為2px，描邊顏色設(shè)置為#E24A4A，將它放置在兩段文本之間，和兩者各隔開25px的距離。記?。喝绻阍谝苿?dòng)元素的時(shí)候按住Alt鍵你就會(huì)看到元素之間以像素表示的距離大小。

第3步

選中這條線和文本圖層然后將它們編組，記得組織你的圖層并將它換一個(gè)名字，我用了“first-block”。

選擇“Search for online…”這個(gè)文本圖層，在觀察器面板中點(diǎn)擊“創(chuàng)建一種新的文字樣式”。對(duì)第二段文字也采取相同的操作?，F(xiàn)在，所有采取這個(gè)樣式的文字都會(huì)隨著你修改某一段文字的樣式而跟著改變。

注意：記住Sketch并不能保存在一個(gè)圖層內(nèi)有不同參數(shù)的文字樣式。

第4步

打開highlights-icons svg文件，復(fù)制這三個(gè)icon然后將它粘貼到你的文件中來，使用你已經(jīng)繪制的參考線來對(duì)齊它們，如果你使用三列布局的話。不要將它們放的太過于貼近上面的方格，將它們之間隔開大約40px，如果你需要幫助，請(qǐng)看下面的圖片：

第5步

創(chuàng)建三個(gè)170排序?qū)挼奈谋緢D層，然后使用?Helvetica Neue Bold字體，大小?= 15、行高?= 18、顏色?= #424242并且對(duì)齊?=?居中。將它們放置在離icon?30px的位置，然后輸入下面這些文字！

又一個(gè)方格完成了！

設(shè)計(jì)“新課程”方格

郵報(bào)的一個(gè)通常的功能就是發(fā)送最新的文章或者讀者會(huì)感興趣的內(nèi)容。所以在我們的呼告內(nèi)容和自我介紹內(nèi)容之后，讓我們創(chuàng)建一個(gè)方格來展示我們最新的一些教學(xué)課程吧！

第1步

復(fù)制你已經(jīng)制作完的“first-block”組，并將它放置在前一個(gè)方格的下方，中間隔開40px，然后修改這段文本，現(xiàn)在應(yīng)該像下面這樣：

第2步

選擇素材文件中的lessons文件夾然后通過插入——圖片將它們導(dǎo)入到當(dāng)前的文檔當(dāng)中，現(xiàn)在你有了7個(gè)圖片，620px寬。我們將一個(gè)保留為原來的尺寸，講別的都縮小以適配我們的三列式布局。

第3步

讓我們來為這個(gè)圖片添加一些文字。插入三個(gè)文字圖層，復(fù)制如下的文本，然后將它們的屬性如下設(shè)置：

第4步

我們需要更多一些文本圖層來展示我們剩下的其他課程。讓我們?cè)谧鲆槐椋翰迦肴齻€(gè)心文本圖層，輸入隨便什么或者是從夫附件中粘貼過來。將它們的屬性和位置按照下圖中所示進(jìn)行設(shè)置，然后在進(jìn)行五遍類似的操作完成剩下的5個(gè)。

另外一個(gè)方格完成了，現(xiàn)在花點(diǎn)時(shí)間來組織你的圖層面板，然后前進(jìn)到下一步！

再來一遍

我知道這個(gè)郵件很……長(zhǎng)，但是這沒有關(guān)系！用戶們知道向下滾動(dòng)，所以在下方在此添加一次我們的訴求目的會(huì)是一個(gè)好的主意，他們不必再滾回頁(yè)面頂部。

你還記得你復(fù)制過的“first-block”嗎？再?gòu)?fù)制一遍，將它移動(dòng)到課程方格的底部，隔開40px然后將它的內(nèi)容修改為如下所示：

第2步

插入一個(gè)620x243px的矩形然后用#F5F7F8的顏色填充?，F(xiàn)在增加一個(gè)新文本圖層并將它的內(nèi)容和屬性修改為如下圖所示的樣子：

第3步

選擇插入——符號(hào)來插入我們先前設(shè)計(jì)的用戶呼告按鈕，將它放置在前一段文本的底部。

我們就要完成啦！

設(shè)計(jì)頁(yè)腳

好的，現(xiàn)在我們已經(jīng)完成了我們幾個(gè)主要的方格和一個(gè)呼告按鈕了，接下來，我們要增加一些次要信息并且更多地一些內(nèi)容。接著，我們會(huì)在此談?wù)撐覀兊脑V求，重復(fù)呼告?，F(xiàn)在是時(shí)候完成頁(yè)腳設(shè)計(jì)并結(jié)束我們的教程了！

第1步

創(chuàng)建一個(gè)620*130px的矩形，將它用#555E68顏色填充并放置在用戶呼告按鈕的下方，接下來，創(chuàng)建一個(gè)620x45px的矩形并以#383E44顏色填充，你做完的效果應(yīng)當(dāng)如下圖所示：

第2步

插入logo-white文件并且將它移動(dòng)到X = 265，Y = 2787的位置。

第3步

讓我們加入最后的文本吧，然后采取如下圖所示的設(shè)置：

這不是不必要的，但是你可以調(diào)整繪圖板的高度來截取你真正能夠讀到的部分。你可以在圖層面板中選中它并且在觀察器面板中調(diào)整它的高度，我將他改為了2937px。

這是我們產(chǎn)品的最終效果！

靜電的Sketch教程合集持續(xù)更新中：

1. 《SKETCH設(shè)計(jì)教室！從零開始學(xué)APP設(shè)計(jì)利器SKETCH（一）》
2. 《SKETCH設(shè)計(jì)教室！從零開始學(xué)APP設(shè)計(jì)利器SKETCH（二）》
3. 《SKETCH設(shè)計(jì)教室！帶你了解超好用的SKETCH插件》
4. 《想要一稿過不加班？SKETCH絕配神器MIRROR搶先體驗(yàn)》

靜電的Xcode教程合集持續(xù)更新中：

1. 《搞定一像素不求人！為設(shè)計(jì)師量身打造的XCODE教程（1）》
2. 《搞定一像素不求人！為設(shè)計(jì)師量身打造的XCODE教程（2）》
3. 《零代碼搞定交互動(dòng)畫！為設(shè)計(jì)師量身打造的XCODE教程（3）》
4. 《搞定Tab bar交互！為設(shè)計(jì)師量身打造的XCODE教程（4）》

原文地址：tuts+
譯文地址：shejipai
譯者：設(shè)計(jì)派小溫

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量91萬的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：