亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

教程所需要的資源，

為了跟著教程你將需要的（免費提供）資源：

• Open Sans font from Font Squirrel
• Playfair Dislay font from Font Squirrel
• Bokeh of String Lights on Tree photo from Good Stock Photos
  
• New Year’s quote from BrainyQuote

開始準(zhǔn)備文檔（完成本教程需要19步，要耐心噢～）

第1步

創(chuàng)建Photoshop文件（文件>新建…）如下圖所示設(shè)置。

第2步

設(shè)置參考線，我們將在620px寬的安全區(qū)域內(nèi)設(shè)計。

注：分別設(shè)置垂直參考線為：40PX，80px，340px，600px和640px。

提示：您還可以使用Photoshop插件里的GuideGuide設(shè)置參考線。

第3步

養(yǎng)成一個歸類的好習(xí)慣，有助于減輕在使用過程中查找文件的困擾。我們分別創(chuàng)建名為“Header”，“Message”，“Best”和“Quote”。創(chuàng)建組，圖層>新建>組...

快速創(chuàng)建組只需點擊如下圖里底部的文件夾圖標(biāo)。

準(zhǔn)備背景

不應(yīng)該讓你的背景太花哨或太分散注意力，因為在小屏幕上，許多電子郵件用戶不會看它。另外值得一提的是，背景不應(yīng)該是一個圖片，因為在默認(rèn)的情況下，許多電子郵件客戶端會阻止。

第1步

我們先來設(shè)置電子郵件的背景。設(shè)置前景色為蔥白色＃f6f9fb并按下Alt+ Backspace鍵來填充“背景”圖層。也可以使用其他任何你喜歡的淺色設(shè)置背景，但最好是微妙的淺色，因為他不會分散收件人的注意力。當(dāng)然不同的顏色會帶給用戶不同的心情。

第2步

設(shè)置安全區(qū)域，所有的郵件內(nèi)容被放在一個背景上。選擇矩形工具（U），繪制600px寬的白色#FFFFFF矩形。

設(shè)計頭部

郵件的頭部很重要，郵件的收件人將決定他們的時間是否值得進一步閱讀。妮可·梅林是位很牛的郵件專家，她認(rèn)為郵件的頭部清晰透明很重要。

“郵件的頭部很重要，如果設(shè)計得不好會被拒收。”

在本教程中，我會把公司名稱加上鏈接，以防在瀏覽器中打開的郵件不能正常加載。加之，包括大圖，以及簡單的心情文字，以展示該郵件節(jié)日快樂的意圖。

第3步

打開“Header”組，選擇橫排文字工具（T）。寫好公司名稱，為啥不用公司的標(biāo)志呢？如我之前提到的，當(dāng)你的郵件被打開時，損壞的圖像或被禁用的標(biāo)志不可見會使體驗的感覺很差。

挑選適合你公司品牌標(biāo)題的字體，將其放在左側(cè)頂部并在其周圍有一定的留白。在這里，我使用18像素的Open Sans (Bold)字體，顏色為：暗灰色＃434343。

第4步

這步很重要，在頂部的右邊文字提供可點擊的鏈接，以防它在瀏覽器中打開郵箱沒有提供很好的郵件客戶端（僅僅是一行簡單的文字鏈接就能做好的工作）。同樣我也使用了 Open Sans (Semibold)字體，顏色為：亮灰色＃666666，字體為13px。最后，將其放置在郵件的右上角。

第5步

真棒的開始！繼續(xù)，現(xiàn)在我們需要放置圖像以引起收件人的注意。我們將使用一個圣誕主題照片，并添加漸變效果。

使用矩形工具（U）繪制600x300px的矩形。然后在它的上面新建一個圖層，并使用漸變工具（G），拖動鼠標(biāo)從左上角到右下角，拉一個由紅色變?yōu)榫G色的漸變。

按住alt鍵，放在它與下面的圖層間時，會出現(xiàn)一個向下的剪頭，就會將其置入繪制的600*300px的矩形盒子，如下圖。

第6步

下載樹上有串燈的照片后，按住alt鍵將其放置在漸變圖層上。打開CMD+ T調(diào)整照片。

提示：按住Shift鍵來繪制/調(diào)整圖像比例時，圖像會等比例變化。

第7步

將“樹上有串燈的照片”設(shè)置圖層混合模式為“疊加”。

第8步

寫主要信息。使用大膽而又不失優(yōu)雅的Playfair Display (Bold Italic)字體， 52px大小的白色（#FFFFFF）加粗文字，使其有了節(jié)日的感覺。設(shè)計節(jié)日的郵件一定要保持信息簡短明確。

四. 信息區(qū)域設(shè)計

應(yīng)該記住的另一件事是設(shè)計的可重復(fù)使用塊。例如，我們將設(shè)計出一個模板，以便用戶可以更改標(biāo)題，主副本，還需要一個呼吁行動的按鈕。此外，還可以重復(fù)這個塊，并使用不同的消息。

第9步

這是很聰明的設(shè)計在郵件里的一列，可以很容易地制作成響應(yīng)布局。打開“Message”組，選擇橫排文字工具（T）。設(shè)置字體為32PX，粗黑體。

第10步

現(xiàn)在是時候去做一個更詳細(xì)，不要太長，盡量抓住讀者的注意力，引領(lǐng)讀者點擊操作的按鈕。使用相同的橫排文字工具（T），寫下你的副本，顏色設(shè)為＃666666，字體為Open Sans (Regular) 18px。

第11步

現(xiàn)在放一個呼吁行動的按鈕，使您的郵件非常有用。創(chuàng)建一個名為“CTA”的新組，使用矩形工具（U），選取前景色為紅色＃de1816，繪制一個矩形形狀為240x40px。然后選擇橫排文字工具（T），輸入按鈕的信息：白色#FFFFFF，Open Sans (Bold)字體，字號為14px。

這時，需要繪制一個分隔線;顏色為淺灰色#eeeeee，用直線工具（U）設(shè)置高為1px繪制水平線，如下圖。

提示：按住Shift鍵可畫出筆直的線條。

設(shè)計“最佳”區(qū)

電子郵件摘要的簡訊中最常見的是讀者可能已經(jīng)錯過了有興趣的最新文章。在設(shè)計時你需要記住，這是一個動態(tài)元素，需要有模塊記錄郵件更換信息。

第12步

通過按CMD+ J（重復(fù)）將其拖動到“Best”組，重復(fù)以前使用的消息標(biāo)題層。方便改標(biāo)題，并把它放1像素的線下面，同時要保持垂直居中的節(jié)奏。

第13步

現(xiàn)在，我們將列出今年最好的一些文章。在本教程中，我會使用這個網(wǎng)站 Tuts+ Web Design的圖片，標(biāo)題和描述。

創(chuàng)建一個名為“Article”的新組。使用矩形工具（U），并按住Shift鍵，繪制一個140x140px的正方形。然后選擇一個標(biāo)題圖并將其拖動到Photoshop窗口，創(chuàng)建剪貼蒙版，調(diào)整圖像大小。

第14步

現(xiàn)在，需要輸入文章標(biāo)題和簡短的說明，以便讀者可點擊。通過復(fù)制和改變字體大小，重復(fù)“Message”組的描述層。

第15步

盡量減少“Article”組，CMD+ J復(fù)制兩次。依次將這些重復(fù)的組放到下面，這將方便更改文章的圖片，標(biāo)題和描述。

第16步

最后，選擇它們并使用CMD+ J，將這些層放入“Best”組，要有足夠的留白。

設(shè)計鼓舞人心的引用文字和頁腳

即將接近結(jié)尾。在頁面末端，放置一段鼓舞人心的引用文字，其次放tweet按鈕，放一段鼓舞人心的引用文字，目的是激發(fā)讀者。

第17步

打開“Quote”組，使用橫排文字工具（T），用優(yōu)雅的字體，寫一段鼓舞人心的引用文字。在這個例子中，我使用Playfair Display (Italic)字體，24px的字號及字色為灰色＃666666。

第18步

到 Twitter website網(wǎng)站復(fù)制tweet按鈕?？墒褂每旖萱ISHIFT + CTRL+ CMD+4截圖，如下圖所示。

第19步

最后一件事。寫郵件信息提供退訂選項。并使用鏈接，以及添加內(nèi)容背景。

恭喜完成！

郵件的布局設(shè)計完成，刪除不需要的層，并把它交給程序員。這就是整個設(shè)計過程的基本方法，希望你學(xué)到了一些東西。