2020年是特殊的一年搓逾，今年的國慶和中秋都擠在了十一黃金周旁钧，一星期內(nèi)連過兩個大節(jié)日笋鄙，但又時逢疫情师枣，相信大部分人都苦于無法上門拜訪慶祝，這時候萧落，為親朋好友們送上一張自己用心制作的電子賀卡践美，是最合適不過的祝賀節(jié)日方式了。
下面找岖，小編將在Mac系統(tǒng)上陨倡，使用Hype 4版本，為大家送上制作動態(tài)電子賀卡網(wǎng)頁的教程许布，在看完本教程以后玫膀，小編保證你也能做出美美的電子賀卡，心動不如行動爹脾，隨小編一起進入Hype的神奇世界吧！
效果預(yù)覽與分析
這里小編已經(jīng)提前做好了一個電子賀卡效果箕昭，大家先一起預(yù)覽一下效果吧灵妨，效果見下圖1的GIF，是不是特別好看呢落竹？是不是突然間動力滿滿了呢泌霍？
圖1：GIF效果展示預(yù)覽
從上圖預(yù)覽可以看到，整個效果主要包含一個粉紅色場景的制作述召，場景需要兩個矩形作為賀卡邊框朱转，還需要一行一閃一閃時隱時現(xiàn)的祝福語，同時頁面開始就有3個心形圖案漂浮向上积暖，最吸引人的是中間心形圖案沿著Love軌跡移動的動態(tài)效果藤为，這里需要的素材有2個，一個是Love的圖像素材夺刑，另一個是心形圖像素材缅疟，有上面2個素材就可以完成整個電子賀卡的制作了，分析完成后遍愿，下面開始正式的教程存淫。
場景部署
第一步：在Hype左側(cè)場景列表中，新建一個場景沼填，然后點開Hype的“場景檢查器”桅咆，設(shè)置場景大小為Web項的大小（1240*800）坞笙，以確保場景足夠大岩饼，能否覆蓋整個HTML網(wǎng)頁荚虚。
圖2：設(shè)置場景大小
第二步：同樣的，在“場景檢查器”中忌愚，設(shè)置場景背景顏色的代碼為“#A52543”曲管，如下圖3，將場景的顏色從白色變?yōu)闇睾偷姆奂t色系硕糊。
圖3：修改場景背景顏色
第三步：此時由于場景很大院水，所以默認的縮放比例100%是無法俯瞰整個場景的，所以需要調(diào)整Hype上方的縮放比例為50%或者75%简十，如下圖4檬某，以保證大家可以完整地看到整個場景頁面，方便下面的場景制作螟蝙。
圖4：縮放場景
第四步：點擊“元素”按鈕恢恼，選擇“矩形”，往場景中加入一個矩形胰默，然后在“度量檢查器”中场斑，取消勾選“限制比例”，修改矩形的寬度為“600px”牵署，高度為“600px”漏隐，保證矩形是一個正方形，然后鼠標拖動矩形的位置在場景的正中間奴迅。
圖5：調(diào)整矩形大小
第五步：選中矩形元素青责，然后切換到“元素檢查器”，設(shè)置矩形的填充樣式為“顏色”取具，顏色代碼填寫“#D497A6”脖隶，如下圖6。
圖6：設(shè)置矩形背景顏色
第六步：再次添加一個矩形元素暇检，然后根據(jù)上述步驟产阱，設(shè)置該新建矩形的寬度為“570px”，高度為“570px”占哟，矩形的背景顏色代碼為“#A52543”心墅，最后鼠標拖動該矩形，調(diào)整矩形的位置榨乎，調(diào)整到效果如下圖7即可怎燥。
圖7：調(diào)整矩形位置
從上述的效果預(yù)覽中可以看到，想要達到上述的效果蜜暑，還需要一張Love圖像素材和心形圖像素材铐姚。因此，在開始下面步驟前，小編提前準備好了一張矢量圖和一張心形圖素材隐绵，分別對應(yīng)下圖8和下圖9之众，分享給大家使用，大家要是不滿意或者是想要自定義的話依许，可以將矢量圖拉入PhotoShop軟件中進行另外的加工處理棺禾。
圖8：love矢量圖
圖9：心形圖
第七步：在元素按鈕中選擇“圖像”，將Love矢量圖拉入場景中峭跳，然后拖動位置使場景效果如下圖10膘婶。
圖10：場景加入Love矢量圖
第八步：在元素按鈕中，選擇“文本”蛀醉，往場景中加入一行文字悬襟，具體內(nèi)容如下：“happy national day !”，寓意國慶節(jié)快樂脊岳，大家可以隨意發(fā)揮。然后在“排印檢查器”中垛玻，需要設(shè)置三個地方割捅，主要設(shè)置參數(shù)如下圖11所示帚桩。
圖11：設(shè)置文本格式
具體需要設(shè)置文字的字體類型為“Palatino”,字體大小為“48px”棺牧，字體顏色代碼為“#E5BCC7”。最后朗儒，拖動字體元素，調(diào)整字體的位置如下圖12参淹。
圖12： 場景完成效果展示
到這里為止醉锄，本節(jié)就結(jié)束了，在本節(jié)中浙值，小編帶大家學習了如何搭建一個好看的電子賀卡場景恳不，在下一節(jié)中，將主要帶大家學習如何利用Hype的動畫軌跡功能开呐，實現(xiàn)心形動態(tài)上浮的效果和文字閃爍的效果烟勋，請大家繼續(xù)關(guān)注Hype中文網(wǎng)站進行后續(xù)學習哦。
