• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 平面理論教程 ] Sketch繪製搶眼有力的長郵件教學—- 其他教程




    教學主題: Sketch繪製搶眼有力的長郵件教程

    大家好!! 小編今天來和大家分享關於 其他教程中的平面理論教程教學

    今天的這個教學主題是: Sketch繪製搶眼有力的長郵件教程

    這教學的重點為這幾點 [ 郵件,教程,有力,我們,文本,一個,它們,設計,然後,使用, ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    營銷+設計雙學習的Sketch特製教程!今天這篇教程非常棒的地方是既能熟悉Sketch的操作技巧,還能學會郵件營銷的精髓。作者巧妙地將營銷與設計的關鍵點結合起來講,絕對大有收穫的一篇教程。推薦練習。

    營銷+設計雙學習的Sketch特製教程!今天這篇教程非常棒的地方是既能熟悉Sketch的操作技巧,還能學會郵件營銷的精髓。作者巧妙地將營銷與設計的關鍵點結合起來講,絕對大有收穫的一篇教程。推薦練習。

    前言

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

    這裡是這個設計練習的背景:想象我們是一家提供在線課程學習的公司,我們想要與我們的潛在用戶取得聯繫,向他們展示我們的平台能帶來的好處。在這種情況下,我們可以使用Sketch設計一個簡潔的但有效的郵報來達到我們的目標。

    我們將使用到Sketch中最常用的幾個功能來創建我們的視覺稿,你將會驚訝於這是如此的簡單!

    最終效果:

    Sketch繪製搶眼有力的長郵件教學

    素材打包 微盤下載

    做好準備

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

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

    注意:要做一名負責任的設計師!我的意思是:記得使用描述性的文字重命名圖層並將它們編組來組織內容,你的同事會感謝你的,相信我。

    好了嗎?我們開始吧!

    設置繪圖板

    第1步

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

    Sketch繪製搶眼有力的長郵件教學

    提示:設計郵報時通用的寬度是500-600px。

    第2步

    現在我們來添加一些參考線以便為我們正確地放置元素來提供參考依據,以達到平衡和穩定的設計效果。我們應該講參考線放在什麼位置呢?

    郵報可以有很多種設計方式,最簡單的一種就是使用一欄式布局,由一個接一個的方塊形成垂直式文檔流,這種布局方式能夠允許我們用一種簡便的方式引導用戶。而且,一欄式的布局結構也更加利於我們為不同的屏幕做適配。

    但是,為了達到教學的目的,我們將要做得多一點,我們將採用三欄式布局。

    激活標尺並且開始創建參考線。選擇視圖——標尺,現在在水平標尺上的30px、200px、225px、395px、420px還有590px處單擊,你可以點擊並拖動標尺來移動它的位置。,你同樣可以對參考線這麼做。要刪除參考線,點擊參考線並拖動它們到標尺的後方。

    Sketch繪製搶眼有力的長郵件教學

    設計標題欄

    我們郵件的標題是十分重要的。它是我們與用戶的第一接觸因此我們應在此直接說明我們的定位。還有一種很好的設計就是展示公司的名字並且在CTA按鈕後面加上一條標語來鼓勵用戶註冊或者獲取關於更多有關於我們的信息。

    首先我們增加一條前標題(preheader),一條簡單的文本提醒我們的用戶來給予這封郵件適當的權限以防郵件的內容無法正確的顯示。

    第1步

    選擇文本工具並且在繪圖板上單擊以加入一條文本,注意觀察器面板已經顯示了當前文本的屬性,輸入“Problems viewing this email? View it online”。

    將它的顏色調整為#8FA6B3,並將大小調整為11px,現在我們選擇“View it online”部分並將它的顏色調整為#FF736D,保持它的選擇狀態並點擊顏色旁邊的選項按鈕,將它的裝飾選項選中下劃線。

    Sketch繪製搶眼有力的長郵件教學

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

    Sketch繪製搶眼有力的長郵件教學

    第2步

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

    Sketch繪製搶眼有力的長郵件教學

    第3步

    打開這篇教程附帶的icons svg文件。選中這些圖標並將它們複製粘貼到我們的文件當中,我們將要用它來裝飾我們標題的背景。

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

    Sketch繪製搶眼有力的長郵件教學

    提示:你可以看到我們的icon的有些部分超出了繪圖板的範圍因而Sketch將它們自動隱藏了,不奇怪,程序知道你正在使用繪圖板來限定你的設計區域所以它隱藏了超出了繪圖板的部分。試着將所有的icon移到繪圖板之外,你會發現整個就顯示出來了不是嗎?不要忘記再把它放回去哦。

    第4步

    在圖層列表中我們選中icon圖層和你先前創建的矩形,用工具欄中的按鈕將它們合併為一個組。將這個組移動到圖層列表的最底部並將它命名為“背景”或類似的什麼,然後使用左邊的小箭頭將圖層內容隱藏起來。

    Sketch繪製搶眼有力的長郵件教學

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

    現在你應該有了如下圖形式被遮蓋的icon了:

    Sketch繪製搶眼有力的長郵件教學

    第5步

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

    Sketch繪製搶眼有力的長郵件教學

    第6步

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

    Sketch繪製搶眼有力的長郵件教學

    第7步

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

    Sketch繪製搶眼有力的長郵件教學
    貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
    使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
    用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

    第8步

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

    將它的屬性更改為磅數=粗體,顏色= #FFFFFF和大小= 15。然後將它移動到X = 225,Y = 375的位置,就在我們的圓角矩形之內。

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

    Sketch繪製搶眼有力的長郵件教學
    貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
    的選區;按住Alt鍵將從起始點為中心勾劃選區。

    第9步

    我覺得我們需要增強背景圖片和文本的對比關係,所以我們來做一點小小的改變。選擇圖層列表面板,展開背景組並複製那個你用來遮蓋icon的矩形,將它複製到組的頂端,然後在觀察器面板中將它的混合模式調整為加亮並將不透明度調整為50%。最後你的結果應該類似於這樣:

    Sketch繪製搶眼有力的長郵件教學

    我們的標題完成了!

    設計“我們是誰”方格

    現在我們已經吸引了用戶的注意力,我們需要更多地討論下我們自己和我們的服務了。我們是誰?我們是做什麼的?我們需要用一種直接和簡明的方式來回答這些問題,試着展示我們的服務的優點。

    第1步

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

    完成了,現在來調整它們的位置和屬性。

    Sketch繪製搶眼有力的長郵件教學

    第2步

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

    Sketch繪製搶眼有力的長郵件教學

    第3步

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

    Sketch繪製搶眼有力的長郵件教學

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

    Sketch繪製搶眼有力的長郵件教學

    注意:記住Sketch並不能保存在一個圖層內有不同參數的文字樣式。

    第4步

    打開highlights-icons svg文件,複製這三個icon然後將它粘貼到你的文件中來,使用你已經繪製的參考線來對齊它們,如果你使用三列布局的話。不要將它們放的太過於貼近上面的方格,將它們之間隔開大約40px,如果你需要幫助,請看下面的圖片:

    Sketch繪製搶眼有力的長郵件教學

    第5步

    創建三個170排序寬的文本圖層,然後使用Helvetica Neue Bold字體,大小= 15、行高= 18、顏色= #424242並且對齊=居中。將它們放置在離icon30px的位置,然後輸入下面這些文字!

    Sketch繪製搶眼有力的長郵件教學

    又一個方格完成了!

    設計“新課程”方格

    郵報的一個通常的功能就是發送最新的文章或者讀者會感興趣的內容。所以在我們的呼告內容和自我介紹內容之後,讓我們創建一個方格來展示我們最新的一些教學課程吧!

    第1步

    複製你已經製作完的“first-block”組,並將它放置在前一個方格的下方,中間隔開40px,然後修改這段文本,現在應該像下面這樣:

    Sketch繪製搶眼有力的長郵件教學

    第2步

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

    Sketch繪製搶眼有力的長郵件教學

    第3步

    讓我們來為這個圖片添加一些文字。插入三個文字圖層,複製如下的文本,然後將它們的屬性如下設置:

    Sketch繪製搶眼有力的長郵件教學

    第4步

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

    Sketch繪製搶眼有力的長郵件教學

    另外一個方格完成了,現在花點時間來組織你的圖層面板,然後前進到下一步!

    Sketch繪製搶眼有力的長郵件教學

    再來一遍

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

    你還記得你複製過的“first-block”嗎?再複製一遍,將它移動到課程方格的底部,隔開40px然後將它的內容修改為如下所示:

    Sketch繪製搶眼有力的長郵件教學

    第2步

    插入一個620x243px的矩形然後用#F5F7F8的顏色填充。現在增加一個新文本圖層並將它的內容和屬性修改為如下圖所示的樣子:

    Sketch繪製搶眼有力的長郵件教學

    第3步

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

    Sketch繪製搶眼有力的長郵件教學

    我們就要完成啦!

    設計頁腳

    好的,現在我們已經完成了我們幾個主要的方格和一個呼告按鈕了,接下來,我們要增加一些次要信息並且更多地一些內容。接着,我們會在此談論我們的訴求,重複呼告。現在是時候完成頁腳設計並結束我們的教程了!

    第1步

    創建一個620*130px的矩形,將它用#555E68顏色填充並放置在用戶呼告按鈕的下方,接下來,創建一個620x45px的矩形並以#383E44顏色填充,你做完的效果應當如下圖所示:

    Sketch繪製搶眼有力的長郵件教學

    第2步

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

    Sketch繪製搶眼有力的長郵件教學

    第3步

    讓我們加入最後的文本吧,然後採取如下圖所示的設置:

    Sketch繪製搶眼有力的長郵件教學

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

    這是我們產品的最終效果!

    Sketch繪製搶眼有力的長郵件教學

    看完小編分享的教學之後 是不是對平面理論教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 Sketch繪製搶眼有力的長郵件教程 這教學會喜歡

    文章標題: 骨子愛創意- Sketch繪製搶眼有力的長郵件教程–轉載請註明來源處

    本教學分類為平面理論教程中的 其他教程相關教學

    文章相關關鍵字為: 郵件,教程,有力,我們,文本,一個,它們,設計,然後,使用,

    本文永久連結 :Sketch繪製搶眼有力的長郵件教程

    本文轉載自 :VIA