電商運營教程資料打造面DuangDuang動態(tài)效果

1、文章來自網(wǎng)絡(luò) 觀點不代表分享者觀點手把手教你打造頁面DuangDuang動態(tài)效果在電商設(shè)計中，動態(tài)效果已經(jīng)被廣泛的應(yīng)用。 一個好的頁面的動態(tài)效果往往能起到吸引更多 的顧客，增進與顧客的溝通，在購物的過程中得到更加新奇好玩的體驗。本次分享的是一個大促頁面的動態(tài)效果制作。希望大家看過后，能學(xué)會然后讓自己的頁面動起來。正文：在電商設(shè)計中，動態(tài)效果已經(jīng)被廣泛的應(yīng)用。 一個好的頁面的動態(tài)效果往往能起到吸引更多的顧客，增進與顧客的溝通，在購物的過程中得到更加新奇好玩的體驗。本次分享的是一個大促頁面的動態(tài)效果制作。希望大家看過后，能學(xué)會然后讓自己的頁面動起來。一、設(shè)計思路首先設(shè)計這個動態(tài)效果的思路是在設(shè)計的

2、過程中逐步完善的。一開始有這個想法的出現(xiàn)是因為想在平面設(shè)計中融入自己的新創(chuàng)意，所以就有了制作動態(tài)頁面的想法。店鋪本身的風(fēng)格是好玩有趣，所以開始圍繞著這個風(fēng)格去收集制作頁面的動態(tài)元素。二、動態(tài)原理本次的動態(tài)效果主要是通過 gif動圖來實現(xiàn)的，先講一下gif動圖的原理。gif動圖就是將一張張相近的圖按照每秒鐘 12或24張或更多的速度播放，使人眼產(chǎn)生錯覺看到它動，所以這個動態(tài)太效果的制作，會涉及較多的gif動圖教程。三、開始制作1.前期工作前期工作主要是構(gòu)思頁面最終想要的表現(xiàn)效果，進行設(shè)計靈感的收集和對頁面中所要用到的gif圖的制作。如果將整個頁面細化拆分開就可以發(fā)現(xiàn)頁面所用到的都是很簡單的小元素

3、，例如一些小圓形、小矩形都是自己制作的，很少用到現(xiàn)有的素材。先看最終效果。匪碼陀1己世同4 13«21 h3&Gif圖1 1212 （具體操作參照圖文）1 基礎(chǔ)圖形制作1212（藍色方框星為了方便到冒點圖辰，可腦補為透明底）倆如散布的小圓柱將之前的闍黑編輯為一 個粗，命名為左12同理制柞右12（本文原創(chuàng)作者：大麥電商,轉(zhuǎn)載請保留）2.G汗動態(tài)制作這個動圖效果在本個頁面中起到了最主要的作用，很直觀的表現(xiàn)從雙十二的活動主題，也是最為復(fù)雜的一個。制作步驟：首先在 Ps中新建一個1920*700 的文檔。選擇“ HoratioDBol ”字體打出“ 12 “這個樣式的圖案，調(diào)整文字圖

4、案到合適大小，再通過復(fù)制圖案圖層并輕移圖層使”12 “表 現(xiàn)出3D立體效果。文字樣式有用到一個簡單的描邊，要注意的是最上層的那個“12 “的文字顏色要與描邊的顏色能明顯區(qū)別。接著要制作一個多圓點均勻散布的圖層，并創(chuàng)建剪貼蒙版到最上層的“12 “圖層。接著在“ 12 “的周圍加一些小圓柱，并將此前的工作整合到一個組命名為”左十二“。將“左十二“整個組復(fù)制后命名為”右十二“，將”右十二“平移到合適位置，調(diào)整以下整體立體效果。完成到這一步后，便進入動態(tài)圖的制作。打開Ps窗口選項選擇時間軸。在時間軸中選擇創(chuàng)建幀動畫。復(fù)制已有的所選幀。 選中新復(fù)制的幀，然后在圖層面板，選中左右十二兩個組中 的圓形圖層，

5、做向左下的位置輕移動，而后選擇過渡動畫幀。在新彈出的窗口中選擇要添加的幀數(shù)（這個案例中選擇的是20幀），幀數(shù)越多最后的 gif圖的動效就約自然，但文件圖片也相對會比較大，所以要控制好一個度。做完這個之后按播放動畫就有一個動畫效果了。在時間軸中選擇全部幀復(fù)制并粘貼在原有幀之后，設(shè)置為反向幀，選擇播放次數(shù)為永遠，使動畫有一個連貫循環(huán)的過程。進一步優(yōu)化是設(shè)置小圓柱的動畫效果。這里的做法是每兩個幀隱藏一個小圓柱，先是隱藏“左12 ”的小圓柱，后是隱藏“右 12 ”的小圓柱。這樣小圓柱也就動了起來，整個動態(tài)效果就顯得比較 豐富，有趣了。最后 shift+ctrl+Alt+s，儲存為gif格式，完成第一個

6、 gif圖。Gif圖2 陪你12.12陪你狂歡這個gif圖的制作相對第一個就簡單得多了，動的部分只有五個圖層且為同步移動。由除文案以外的圖層是同步移動，所以可以把這五個圖層鏈接起來，或轉(zhuǎn)化為一個智能對象，或編一個組之類的，總之方便選擇就可以，以下將這個動的整體稱為“滑動條”。新建幀動畫，選擇復(fù)制第一幀，在第二幀中將“滑動條”做向左平移。而后點擊過渡幀，設(shè) 置添加的幀數(shù)為15。復(fù)制已有的幀，點擊粘貼多幀在原有幀之后，設(shè)置為反向幀。選擇播放次數(shù)為永遠，再儲存為gif格式就完成了。注意點是移動滑動條的時候不要讓文案碰到描 邊白底圓。GIF-2P冊靜先生昭間1已1己玨職 a動的部分圓點描邊的歸文案矩影

7、套路：時間軸 創(chuàng)霆幀動畫 夏制幀平移 過渡幀復(fù)制 反向幀v-aWi1 .MB 洽.亡心"he*-vGif圖3 “小豬”（本文原創(chuàng)作者：大麥電商，轉(zhuǎn)載請保留）“小豬”的動態(tài)是一只做向左移動的矢量豬，也很簡單圖層只有3個，動的只有“小豬”。首先布置好圖層，“小豬”半邊的身體被上面的圖層遮擋。之前老套路的步驟便不再贅述，將“小豬”向左移動到超出畫布范圍。設(shè)置過渡幀。為了讓“小豬”走得慢點，這里對每個 幀設(shè)置了 0.03秒的延遲。之后的操作大體類似，沒有反向幀這個步驟。最后呈現(xiàn)的效果是一只從角落出現(xiàn)的豬消失在頁面邊框線，如此重復(fù)同一個動作。GIF-3Gif圖4 “優(yōu)惠券”“優(yōu)惠券”這個gif動圖的制作方法與之前的大同小異，做好整體的一個圖層，在每個幀中設(shè)置變動的部分，相信大家看過動圖效果，結(jié)合之前的例子就能清楚做圖的思路。這里不做過多步驟講訴。后期工作：后期的工作重要是后臺裝修，在這里不做過多的講述。需要注意的是動態(tài)效果頁面編輯要用到特殊的代碼生成工具，本次用到的是”盛夏科技“這個工具。具體用法不難，可登錄”盛 夏科技“的 網(wǎng)站進行具體操作?？偨Y(jié)：在本次設(shè)計中，頁面融入了動態(tài)效果，這是一個很有創(chuàng)意的嘗試。如果將讓這些動態(tài)效果都 靜止下來就可以發(fā)