2.3 制作炫酷的H5移動展示作品

目前H5設計領域還沒有統(tǒng)一的設計工具，需要搭配多種軟件來設計制作。本節(jié)將分別以Photoshop和手機設計工具為例，介紹制作炫酷H5作品的操作方法。

2.3.1 運用Photoshop制作H5作品

伴隨著H5的興起，多數H5背后的設計師都是從其他相關行業(yè)跨入這個領域的，因為專業(yè)的H5生成平臺存在嚴重的同質化問題，很難做出理想的效果，所以即使是有設計功底的設計師，也得需要根據自身的優(yōu)勢來選擇工具進行學習與制作，從而達到想要的H5效果。

其中，Photoshop是用于制造H5中的各種圖形、圖像和文字元素的不錯工具，下面將利用Photoshop來設計一個“11.11”電商活動的H5單頁效果，如圖2-35所示。

1. 使用Photoshop制造H5單頁

下面介紹使用Photoshop制作H5單頁的背景、圖片和文字等元素的方法。

（1）在Photoshop工作界面中，單擊“文件”|“新建”命令，彈出“新建文檔”對話框，①設置“名稱”為“H5頁面設計”、“寬度”為1080像素、“高度”為1920像素、“分辨率”為72像素/英寸、“顏色模式”為“RGB顏色”、“背景內容”為“白色”，如圖2-36所示；②單擊“創(chuàng)建”按鈕，新建一個空白圖像。

（2）展開“圖層”面板，新建“圖層1”圖層，選取工具箱中的漸變工具，打開“漸變編輯器”對話框，在漸變條上設置淡紫色到深紫色的漸變（RGB參數值分別為189、73、208；34、4、128），如圖2-37所示。

（3）選中“圖層1”圖層，在圖像編輯窗口中，從圖像最下方正中心往圖像中心點垂直拖曳填充徑向漸變，效果如圖2-38所示。

（4）按Ctrl＋O組合鍵，打開“舞臺.jpg”素材圖像，如圖2-39所示。

（5）選取工具箱中的移動工具，將舞臺圖像拖曳至背景圖像編輯窗口中的合適位置處，效果如圖2-40所示。

（6）設置“圖層2”圖層的“混合模式”為“濾色”，效果如圖2-41所示。

（7）為“圖層2”圖層添加一個圖層蒙版，從上至下填充黑色到白色的線性漸變，隱藏部分圖像效果，如圖2-42所示。

（8）選取工具箱中的多邊形工具，在工具屬性欄中設置“選擇工具模式”為“形狀”、“填充”為無、“描邊”為粉色（RGB參數值分別為229、0、126）、“邊”為3，在圖像編輯窗口中繪制一個多邊形圖像，效果如圖2-43所示。

（9）按Ctrl＋T組合鍵，調出變換控制框，適當調整圖像形狀、大小及位置，效果如圖2-44所示。

（10）展開“圖層”面板，雙擊“多邊形1”圖層，彈出“圖層樣式”對話框，選中“描邊”復選框，設置“顏色”為深紫色（RGB參數值分別為34、4、128），其他參數設置如圖2-45所示。

（11）單擊“確定”按鈕，為圖層添加描邊，效果如圖2-46所示。

（12）柵格化“多邊形1”圖層，運用橡皮擦工具適當擦除多邊形圖像3個邊的部分圖像，效果如圖2-47所示。

（13）選取工具箱中的橫排文字工具，單擊“窗口”|“字符”命令，在彈出的“字符”面板中，設置“顏色”為白色（RGB參數值均為255），其他參數設置如圖2-48所示。

（14）輸入相應文本，并調整文字至合適的位置，效果如圖2-49所示。

（15）在“字符”面板中，設置“顏色”為黃色（RGB參數值分別為240、255、5），其他參數設置如圖2-50所示。

（16）輸入相應文本，并調整文字至合適的位置，效果如圖2-51所示。

（17）在“字符”面板中，設置“顏色”為粉色（RGB參數值分別為229、0、126），其他參數設置如圖2-52所示。

（18）輸入相應文本，并調整文字至合適的位置，效果如圖2-53所示。

（19）展開“圖層”面板，雙擊相應文字圖層，彈出“圖層樣式”對話框，選中“描邊”復選框，相關參數設置如圖2-54所示。

（20）單擊“確定”按鈕，為圖層添加描邊，效果如圖2-55所示。

（21）選取工具箱中的橫排文字工具，單擊“窗口”|“字符”命令，在彈出的“字符”面板中，設置相關參數，如圖2-56所示。

（22）輸入相應文本，并調整文字至合適的位置，效果如圖2-57所示。

（23）在“字符”面板中，設置“顏色”為藍色（RGB參數值分別為3、196、255），其他參數設置如圖2-58所示。

（24）輸入相應文本，并調整文字至合適的位置，效果如圖2-59所示。

（25）選取工具箱中的漸變工具，打開“漸變編輯器”對話框，①在漸變條上設置青色到淡青色的漸變（RGB參數值分別為5、235、205；206、255、253）；②單擊“新建”按鈕，新建漸變預設，如圖2-60所示。

（26）選取工具箱中的自定義形狀工具，在工具屬性欄中設置“選擇工具模式”為“形狀”、“填充”為新建的漸變預設、“描邊”為無、“形狀”為“模糊點1”，在圖像編輯窗口中繪制一個如圖2-61所示的形狀。

（27）在“字符”面板中設置“顏色”為白色（RGB參數值均為255），其他參數設置如圖2-62所示。

（28）輸入相應文本，并調整至適當的位置，效果如圖2-63所示。

（29）在“字符”面板中設置“顏色”為白色（RGB參數值均為255），其他參數設置如圖2-64所示。

（30）輸入相應文本，并調整至適當的位置，效果如圖2-65所示。

（31）選取工具箱中的鋼筆工具，在工具屬性欄中設置“選擇工具模式”為“形狀”、“填充”為無、“描邊”為白色（RGB參數值均為255）、“描邊寬度”為6像素，在圖像編輯窗口中繪制一個形狀，并適當調整位置，效果如圖2-66所示。

（32）選取工具箱中的自定義形狀工具，在工具屬性欄中設置“選擇工具模式”為“形狀”、“填充”為“漸變”（在“漸變”選項區(qū)中選擇“色譜”漸變色）、“漸變樣式”為“線性”、“旋轉漸變”為－27、“描邊”為無、“形狀”為“百合形狀”，在圖像編輯窗口中繪制一個如圖2-67所示的形狀。

（33）在“字符”面板中設置“顏色”為白色（RGB參數值均為255），其他參數設置如圖2-68所示。

（34）選取工具箱中的直排文字工具，輸入相應文本，并調整至合適的位置，效果如圖2-69所示。

（35）用與上同樣的方法，制作相應的文字內容，即可完成電商推廣H5單頁的設計，效果如圖2-70所示。

2. 將PSD文件導入H5頁面中

相信做平面設計的人都非常熟悉PSD格式（Photoshop Document），它是Photoshop中的專用圖形文件格式，也是默認的保存文件格式，可以用來存儲Photoshop生成的圖層、通道、參考線、注解和顏色模式等內容。在H5頁面中運用各種PSD格式的畫面元素，主要優(yōu)勢如圖2-71所示。

使用人人秀平臺可以快速地將PSD格式文件導入H5頁面中，而且支持在Photoshop中進行H5設計，然后上傳至人人秀平臺一鍵生成H5頁面。

下面以人人秀為例，介紹PSD一鍵導入H5的操作方法。

（1）登錄人人秀官網，在右上角進入個人中心，如圖2-72所示。

（2）單擊左側＋號，創(chuàng)建新的H5頁面，如圖2-73所示。

（3）在彈出的窗口中可以選擇創(chuàng)建空白模板，或者套用模板市場的模板，如圖2-74所示。

（4）若選擇“模板市場”，頁面則會跳轉到模板商店，用戶可以在模板商店中選擇自己喜歡的模板進行套用，如圖2-75所示。

（5）這里只簡單介紹上傳PSD格式的一些基礎操作，因而選擇“空白模板”，進入人人秀H5編輯器，在頂部的工具欄中選擇“PSD導入”工具，如圖2-76所示，然后根據提示選擇并上傳文件即可。需要注意的是，在人人秀上傳PSD格式時，需要先將其中的圖層柵格化。

（6）彈出“PSD導入”對話框，單擊中間的“上傳PSD文件”按鈕，如圖2-77所示。

（7）彈出“打開”對話框，選擇要導入的PSD文件，如圖2-78所示。單擊“打開”按鈕，即可開始上傳PSD文件了。

（8）上傳PSD文件后，也可以打開“圖層”面板，查看各個圖層的對象，以及進行刪除和調整順序等操作，如圖2-79所示，可以看到其商品圖片、背景圖片、文案以及促銷圖形等都使用了不同的圖層進行存放，可以進行更加方便的編輯操作，而不會引起整體畫面的改變。

營銷人員可以在Photoshop中將H5頁面的源文件設計好，并存儲為PSD格式，然后直接導入人人秀平臺上，即可得到與設計圖對應的H5作品，可以節(jié)省大量的排版時間。

2.3.2 運用手機平臺制作H5

隨著時代進步，智能手機已經成為大眾普遍使用的工具，而H5的主要載體便是智能手機，除了在智能手機端瀏覽H5成為一種需求外，手機制作H5也已成為H5發(fā)展的一個趨勢，眾多H5制作平臺紛紛推出手機端制作H5，例如人人秀推出的小程序制作工具便能夠很好地解決在手機端制作H5的用戶需求。

下面介紹如何通過人人秀公眾平臺制作H5頁面的方法。

（1）打開手機端微信程序，關注“人人秀”微信公眾號，進入公眾號界面，點擊頁面下方的“點我制作”按鈕，如圖2-80所示。

（2）跳轉到人人秀制作界面，點擊相應的模板，如圖2-81所示。

（3）執(zhí)行操作后，跳轉到模板預覽界面，點擊界面下方的“立即制作”按鈕，如圖2-82所示。

（4）進入H5模板制作界面，點擊相應的文本預覽框，可以修改文本的內容，如圖2-83所示。

【專家提醒】

在人人秀微信小程序中制作完成的H5，可以在完成設計保存時跳轉到的頁面中分享作品至其他相關平臺，也可點擊“返回我的作品”按鈕，跳轉至“我的作品”頁面，單擊“分享”按鈕，同樣可以完成相關平臺的作品展示推廣。

（5）向左滑動屏幕，進入第二個頁面，在其中可以上傳商品圖片或者宣傳圖片，修改完成后單擊下方的“保存”按鈕，如圖2-84所示。

（6）彈出信息框，用戶可在其中更改封面圖片、修改標題內容等，單擊“保存”按鈕，如圖2-85所示。

（7）執(zhí)行操作后，即可發(fā)布剛制作的H5頁面，效果如圖2-86所示。