京東電商海報的構成往往極具吸引力，大多數情況下我們指的是跨品類，跨店鋪的大活動，還有就是超級品牌日的海報也是極具設計水平的。什么是跨品類，比如：賣手機的店鋪，賣化妝品的店鋪，賣電腦的店鋪等，三者之間的關系就是跨品類，跨店鋪就是不同商家的店鋪一起參與進來做活動。什么是大活動，大活動就比如雙11，雙12，情人節，3.8蝴蝶節等等。像這類大活動，一般都是京東內部各個事業部的運營合作起來一起搞的，比如：生鮮部，服飾部，奢品國際部等等。往往針對這些大活動手機做gif旋轉，對海報的要求也是非常高的，就如同我的標題所示，包括三個部分：C4D，PS，H5，甚至更多，比如加上小視頻，動畫GIF等等，甚至加入，一個海報的整體工作，很少有一個人去單獨完成的，不過，也會有大神一人包攬。要不然他的整個設計思路不會那么清晰和連貫。
下面就進入這次解析的主題，這次是京東2.14情人節一個化妝品類的活動海報主題，上圖：
這是官方整個手機頭圖海報，也就是的動態效果，其實這個特效只發生一次，就是剛進入活動頁面時
產生的頁面。不斷的循環這是我弄的動態圖，無限循環。
這個是手機端的設計尺寸，原始的分辨率是。也有PC端的設計尺寸，分辨率是。當下PC端不是那么重要了，所以就沒有重點拿來講，因為在官方中海報中，H5針對的也只是手機端的頁面。在手機端流量為王的時代，PC端只能遭到冷落了。
海報設計的思想很有創意，以“心”為主題，信封，信紙為主要設計場景，傳遞和表達愛的理念這個東西，主題文案想得也很周到“愛不隔離”，正好很切合當下我國正面臨的戰疫挑戰，有意拉近消費者的情感心理距離。
官方的圖
本人模仿的圖
這是模仿海報的C4D源文件場景圖
一、C4D
C4D涉及的主要知識點，對于那些大佬來講，一看就知道個大概。
我當初在做這個圖的時候，已經荒廢了好久的C4D，好多功能和快捷鍵都忘記了，邊做邊熟悉，甚至學新的東西。如今，就我個人方法做出的效果來跟大家分享下：
1.C4D場景平臺的建立這就很簡單了，一個正方形放大，去除頂上，左右兩邊和正面的面。背景很多圓柱也是通過克隆出來的。
2.地板這個建立也很簡單手機做gif旋轉，通過正方形和圓柱得來。
3.裝化妝品的盒子是通過兩個模型之間的布爾來實現的。
4.我不知道如何形容那個模型，暫且說像垃圾桶的那兩個東西吧，都是通過圓柱，分裂面，提取樣條，樣條掃描來實現。
5.項鏈珠子心形狀首先是通過珠子，也就是球體克隆多個珠子，其次提取心形的樣條，對克隆出來的球體實行心形樣條的樣條約束（重點）。
6.心形盒中間的圓盤邊緣的一串凹進去，不是用布爾克隆做的，起初想用克隆布爾做，但是用了之后，電腦崩潰了，動不了，后來發現，布爾要消耗電腦很多計算，占用CPU和內存很大，所以卡住了。所以在建模的時候，很多大佬都很少用，盡量避免用布爾。后來我用面擠壓的方法，然后再細分曲面。前提是要計算好分段和面的數量。
7.兩個心形的制作是利用寶石消除對稱部分，然后再對稱，調整點，再加細分曲面而得來，我制作的心總感覺沒有別人的飽滿和好看，改天再好好重新制作一下。
8.中間的玫瑰花官方做的好看，按照我的觀點應該是利用正方體，然后通過雕刻工具來實現的，而我偷懶了，直接用膠囊來實現，然后刪除對稱部分，然后再通過調整點，和線來塑造曲面，然后再克隆出來，兩片葉子利用平面來做，思路是一樣的。
9.地上的不規則分布的星星和紙屑，都是用克隆，然后給克隆添加個隨機效果器做出來的。
10.就是GIF圖部分的制作，圖中GIF圖有三項：一是旋轉的對稱兩面心，二是旋轉的玫瑰花，三是利益點的切換，有了C4D之后，做起GIF圖就很簡單了，主要是在關鍵的角度和位置K關鍵幀，設置總的幀數是多少，比如，上面都設置的是30幀。官方設置的是22幀。此GIF圖當然也離不開PS的部分。
官方做的圖
官方做的圖
模仿做的圖
模仿做的圖
二、PS
涉及到PS方面就是添加一些產品和修飾海報方面了，比如調色相，明暗度，添加文案等，文案在C4D也可以添加，但我認為不如PS來的實在方便。如果僅僅是一張JPG的海報，就沒必要把各個裝飾單獨分離出來出圖，如果是要涉及H5和CSS3方面的代碼問題，就有必要對各個部分單獨出圖了，其實，在設計海報之前是不是有需要用到H5頁面，如果有需要用到，那么早在C4D那里就應該單獨出圖了，這就是下面一個部分要講的內容。
C4D做出的圖轉入PS添加產品進行融合
在添加產品之后，注意光影的方向和強弱，在做光影方面，PS始終還是沒有C4D來的真實，這就是當初喜歡C4D的原因，因為，光影感實在太強了，我在PS方面有的地方都沒有做陰影，其實這是不允許的，原因還是偷懶了。PS只是用來添加產品和定位各個裝飾品，比如：金色球，紅色球，旋轉的心，旋轉的玫瑰花的位置，比如，距離頂部多少像素，距離左邊多少像素。然后就是輸出各個裝飾品的PNG圖。
關于H5方面，看客作為了解一下就可以了，而對于我而言有一定的興趣，因為涉及到很多知識，因為自己之前學過一些html+css，所以知道一些。手機革命的崛起，興起，讓手機店鋪，即無線端成為了寵兒，昔日PC端成為了雞肋。如今京東很多促銷海報的代碼特效只有手機端有，電腦端很難常見了。所以，以后我的文章基本也是有關這方面的。
三、H5
在解析H5方面，有必要了解京東的整個APP頁面是有隨著可視化窗口的大小變化而相應的變化的，了解了一下，也就是這個領域所說的響應式布局。所以在單位方面，用上了VW，有的用百分比，有的用rem，而不是PX，因為要考慮到適應不同尺寸要求 ，通俗點講就是適應市面上不同手機分辨率的瀏覽習慣。這是區別于電腦端的。京東的店鋪裝修有幾個平臺的，最初版本的Jshop，通天塔，京東智鋪。如今的京東智鋪是最新的升級版本，我想它不會是最后的版本，隨著電商的日益發展，以后會出更高級的版本。
據我所知，Jshop手機端裝修是有自定義代碼這個模塊的，所謂的自定義代碼只是允許你使用HTML+CSS，JS是不允許的，所有商家都有的權限，也是很多第三方商家在用的，曾經我都用過自定義模塊來制作代碼特效海報。這個模塊很少有人去觸碰，因為搞不好，頁面會不顯示，對于美工而言，還是比較偏向于添加熱區鏈接這個模塊，這個模塊使用的幾率是最多的。
而通天塔操作起來比較繁瑣，主要偏向于運營方面，很多豐富的模塊，只需添加，修改，刪除的操作，還有錄入產品的sku等工作，對美工作圖來說相對較少，只需要做頭圖海報，還有各個樓層的樓層標題圖，還有最底下的活動詳情說明圖，大部分還是文字。通天塔的自定義代碼也就是開發模塊，這個模塊是可以用HTML+CS+JS的，如今我這篇文章的主題就是圍繞這個通天塔的模塊來的，貌似這個開發模塊是需要得到京東官方運營的允許才能開通的權限。商家自己是無法開通的，這是有區別于Jshop的。
最后一種就是京東智鋪了，據了解，京東智鋪針對手機端的裝修是沒有自定義代碼這塊，也就是在Jshop的基礎上取消了這一模塊，因為對很多商家來說，很少有商家的美工去弄這一塊。因為大多數美工對代碼不感興趣的，看見密密麻麻的代碼就頭大，而且，代碼方面出的問題比較大。而且如今的美工身兼數職，不只要會作圖，修圖，攝影，還要會剪輯視頻等等。
雖然自定義代碼模塊在最新的版本京東智鋪取消了，我相信以后它會重新出現的，畢竟海報的代碼特效還是挺吸引人點擊的。
下面就來解析這海報代碼方面的內容：
動態方面除了三張GIF圖以外，就是金色球，紅色球，產品圖，藍色禮盒圖的這些裝飾海報的點綴物的上下漂浮特效，旋轉心的從上而下出現直到停止，信封里帶有文案的信紙從底部上升出現直到停止，從頂部落下的心雨。
首先對包裹所有圖片的DIV進行寬度和位置的設置，即CSS方面：
div{
width:100vw;
:0 auto;
:;
:;
}
寬度定義100VW，頁邊頂部距離-top和頁邊底部距離-都為0、頁邊左部和右部距離，即：-left,-right都為自動：auto。溢出：隱藏，即:。
定義了京東自定義模塊里的父級DIV的寬度后，里面的子元素的寬度都要以父級元素的寬度100vw為基準將px換算成vw。即，這張海報的寬度是，也就是說1125=100vw。那么其他子元素的寬度px是多少呢？，比如這個旋轉的心是，那么它換算成VW是多少呢，其實很簡單，就是列個等比例運算：/1125=10.。高度可以寫也可以不寫，看需要，京東APP已經弄好了寬高適應可視化窗口大小的布局，父級元素:;用相對定位，子級元素:;絕對定位。無論父級元素如何變化，變大變小，子級元素也會相應去改變，因為子級元素的定位都是絕對的（相對于父級元素是絕對的），不變的。
這是在手機端分辨率下的頁面顯示
這是在手機端分辨率下的頁面顯示
其次對漂浮的CSS設置：
拿藍色的禮品盒單獨作為例子來講，其他的都是一樣的思路，其他只是在數值方面有些修改。
.{
width:10.;
top:88.;
left:53.;
:;
z-index:-4;
: 5s 1.5s ;
--: 5s 1.5s ;
}
@ {
0%{:(0,0,0)}
50%{:(0,5vw,0)}
100%{:(0,0,0)}
}
這是給藍色盒子做動作的CSS屬性值：
動作屬性：
動作屬性的名稱
執行5秒時間
動作從頭到尾的速度是相同的
動作一直持續下去
（另外一個多出一個-是針對其他瀏覽器的）
這個名稱為的動作是如何運行的呢？運動起始點是在X,Y,Z的起點都是0，運動到50%地方時Y軸的距離是5VW，運動到最后時，也就是100%時，又回到了原點，也就是做了往返運動了。
另外很多下的心雨只不過在上述的基礎上加了個透明度的屬性，即。另外除了定義運動的軌跡之后（），還規定了在Y軸上的旋轉角度（）
.{
width:3.;
top:-5vw;
left:10vw;
:;
z-index:-1;
: 10s ;
--: 10s ;
}
@ {
0%{
:1;
:(0,0,0) (0);}
80%{
:1;
:(0,80vw,0) ();}
100%{
:0;
:(0,100vw,0) ();}
}
@-- {
0%{
:1;
:(0,0,0) (0);}
80%{
:1;
:(0,80vw,0) ();}
100%{
:0;
:(0,100vw,0) ();}
}
可以在上述代碼的基礎上修改參數值，達到做出很多如海報心雨落下的特效。
總結：如今的電商裝修不僅僅涉及到PS，還涉及到了C4D場景建模，涉及到了攝影，涉及到了PR剪輯視頻，也涉及到了代碼方面的內容，比如Html+css,H5,CSS3,甚至等，要想自己的頭圖海報更加獨具一格，更加吸引力之外，在創意方面多下功夫，不僅僅讓海報是靜止的，也要讓海報動起來。
在電商高速發展的道路上，我想如今店鋪的操作更趨于簡單化，人性化，快速化，所以如今最新版本的京東智鋪貌似在代碼這方面未對商家開放，只對官方聯合活動，大活動開放，所以如今的美工沒必要把這一塊放在心上，有興趣的可以當做了解一下而已。我相信，在未來的版本當中，有很大可能會重新加入進來吧，因為一個有特效的店鋪，我相信還是挺吸引人點擊進來看的，只要有點擊，就會有轉化率提升的可能。畢竟技多不壓身。
如果有哪位大佬路過，歡迎批評指正。