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

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

前言

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

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

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

最終效果：

素材打包 ?微盤下載

做好準備

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

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

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

好了嗎？我們開始吧！

設(shè)置繪圖板

第1步

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

提示：設(shè)計郵報時通用的寬度是500-600px。

第2步

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

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

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

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

設(shè)計標題欄

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

首先我們增加一條前標題（preheader），一條簡單的文本提醒我們的用戶來給予這封郵件適當(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)并點擊顏色旁邊的選項按鈕，將它的裝飾選項選中下劃線。

將文本移動到離上方邊緣30px處。

第2步

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

第3步

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

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

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

第4步

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

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

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

第5步

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

第6步

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

第7步

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

第8步

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

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

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

第9步

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

我們的標題完成了！

設(shè)計“我們是誰”方格

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

第1步

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

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

第2步

繪制一條100px長的線條并且將寬度設(shè)置為2px，描邊顏色設(shè)置為#E24A4A，將它放置在兩段文本之間，和兩者各隔開25px的距離。記住：如果你在移動元素的時候按住Alt鍵你就會看到元素之間以像素表示的距離大小。

第3步

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

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

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

第4步

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

第5步

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

又一個方格完成了！

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

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

第1步

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

第2步

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

第3步

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

第4步

我們需要更多一些文本圖層來展示我們剩下的其他課程。讓我們在做一遍：插入三個心文本圖層，輸入隨便什么或者是從夫附件中粘貼過來。將它們的屬性和位置按照下圖中所示進行設(shè)置，然后在進行五遍類似的操作完成剩下的5個。

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

再來一遍

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

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

第2步

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

第3步

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

我們就要完成啦！

設(shè)計頁腳

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

第1步

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

第2步

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

第3步

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

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

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

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

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

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

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

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

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

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