電商設計——零基礎學裝修

時間：2022-08-03 15:09:02 | 來源：網(wǎng)站運營

時間：2022-08-03 15:09:02 來源：網(wǎng)站運營

電商設計中做需要認識的圖片及專用名稱

一、主圖：800X800px，分辨率72（電商所用圖片基本上都是這個分辨率，下面不重復寫了）

所謂主圖就是：展示產(chǎn)品全貌，可以前后左右，也可以是局部，反正就是給消費者展示我這個產(chǎn)品賣的是什么，加不加產(chǎn)品品牌Logo看運營。

展現(xiàn)形式：可以是拍攝圖，有背景的，也可以是白底圖，棚拍的（在攝影室搭建白布背景拍攝的圖片），看店鋪。

打開淘寶或天貓，隨便搜索某個產(chǎn)品，出來的產(chǎn)品圖就是主圖，最右邊一欄掌柜熱賣，一般是直通車圖，都是花錢買的，有些公司直通車燒不起，可能也不會要求做，這些主圖是采集于店鋪產(chǎn)品詳情頁里面的主圖，如下：

所以，電商中，運營要我們做主圖，就是放在產(chǎn)品詳情頁這個位置的，然后第一張會展示到外面平臺界面。

二、打標圖：800x800

所謂打標圖，就是在主圖的基礎上，打上標簽，所加內(nèi)容有：活動價、到手價、價格、贈品、新品上市及時間、活動logo（雙十一、雙十二等電商活動都有特定的logo）等等，但這些內(nèi)容都不會影響到主圖觀看。

例如：




這個加了活動價，就是打標，一般打標在四角或者最下面一行。

做打標圖，一般運營都會提出具體要求的。

三、鉆展圖：PC尺寸：520-280，手機端：640-200

鉆展圖是需要付費的推廣廣告圖，一般位置都是在PC/手機端首頁，如下

手機端也是，打開手機淘寶，首頁最頂部，輪播形式的海報圖就是鉆展圖。

制作鉆展圖，運營會給文案或者利益點（打幾折，領券，有什么優(yōu)惠），制作要求就稍微高一點，公司花錢推廣告，就是要引消費者看到能點擊，點擊進來了，才有可能轉(zhuǎn)化消費支付，所以鉆展圖要費心點，但又不能做得很復雜，不是我們設計師覺得做的圖好看就有點擊率的，有時候特別丑的圖，人家點擊率就是高，那也是沒有辦法的。

鉆展圖制作參考，一個建議花瓣搜索，一個是看店鋪有沒有買可以看鉆展點擊率的服務功能，如果有，你可以要求運營給你開個帳號，去看看同行點擊率高的鉆展圖是什么樣的，只有你想不到的圖，沒有你做不到的圖。

四、品銷寶（N多尺寸，具體看運營需求，運營忘記給，就去問要尺寸）

我們能夠常見的品銷寶PC端位置是這里：

其他地方，我不知道運營推廣到哪里去了，制作要求，運營會給，產(chǎn)品，文案，利益點等。

五、首頁=店招+海報+頁面排版

店招：一般尺寸是1920-150或者1920-120，這是全屏尺寸，但有些店鋪沒有購買阿里巴巴的智能模板，就做不了全屏了，那店招的尺寸可能就是950-120或者是950-150，看后臺顯示，怎么看，下面會講，不要著急，繼續(xù)往下看。

另外這里有個高度：150和120的區(qū)別，150高度的店招呢，就是導航欄做到店招同張圖片上面去了，120高度的店招，是不包含導航欄的，其他都沒啥區(qū)別。

這個就是店招，內(nèi)容有l(wèi)ogo、店鋪名稱，這是必須有的，另外可增加：收藏、關(guān)注、新品、優(yōu)惠券等，有些店鋪導航欄是跟店招連一起的，有些是分開的，所以具體情況，看你所在公司店鋪之前是什么樣的。

六、海報

這個海報尺寸看用什么樣的裝修方式了。

寬度是比較統(tǒng)一的，都是1920px，全屏的尺寸，高度就看具體情況具體分析。

一般1920-650尺寸的海報用的比較多，還有一個是1920-540的，是店鋪后臺所要求的；如果借助編輯器或者碼工助手，高度就沒啥限制了，都可以裝修上店鋪上去。

海報形式兩種：一種活動頁面的海報，就一張，隨意發(fā)揮，借助編輯器或者碼工助手都能安裝上。另外一種就是平時頁面，海報一般做輪播，這時候，最好統(tǒng)一一下尺寸，1920-650的最常見，個別店鋪的要求的尺寸也有可能是1920-540，目前就遇到這兩種，好像就是天貓店鋪和淘寶店鋪有略微差別的，到時候還是看后臺所要求圖片尺寸。

注意事項：在PS作圖的時候，新建所需尺寸的畫布，然后畫1000寬度的矩形，居中對齊，拉參考輔助線兩根，刪除矩形，海報文案及主要的展示圖都要在1000寬度范圍內(nèi)，不要超出，因為有些電腦屏幕沒有1920那么寬，為了照顧那些小屏幕電腦能看全海報，所以內(nèi)容最好集中中間一塊，兩邊給與縮小的空間，淘寶和天貓都不是自適應網(wǎng)站（自適應網(wǎng)站，可以根據(jù)屏幕不同的大小，頁面會等比例縮放，不是自適應網(wǎng)站，屏幕小了，頁面不會等比例縮放，還是那么大）。

店招下面展示的就是海報，如下是輪播海報，放置的張數(shù)很多張，看到過最多的好像是六七張吧，也是看后臺限制及編輯器的限制。

七、頁面排版

首先是問運營需求，頁面上需要放那些東西，然后再到咱設計師手里進行設計。

頁面怎么設計，看自己造化了，哈哈哈哈，打開花瓣看看，平時注意收藏，打開淘寶天貓，看看同行或者其他行的頁面排版，找找靈感。

我們公司目前是運營自己找好樣式，然后我們根據(jù)運營提供的，優(yōu)化成我們自己的風格就好了。

頁面排版注意事項：一個是跟制作海報一樣，拉1000寬度的參考線，好像是淘寶店鋪吧，加熱點有這個空間范圍，其實是950來著，但為了好記，我都以1000寬度算。加熱點就是加鏈接的意思，所謂空間范圍，就是這個范圍內(nèi)加的鏈接，能打開，超過這個范圍了，鏈接點不開。這個注意事項只針對那些沒有買智能模版的店鋪，只用碼工助手或者后臺原有的模塊，就有這個限制，因此，你們可以打開各個店鋪，有些店鋪頁面是這樣的，產(chǎn)品比較集中在中間，兩邊是空的或者裝飾性的圖；有些店鋪是可以全屏的，產(chǎn)品能布局到兩邊。

這就是買智能模板和沒買的差別。

八、產(chǎn)品頁=主圖+詳情（+關(guān)聯(lián)+小廣告）

主圖上面已經(jīng)講過了，天貓和淘寶店甚至京東店，都一樣的尺寸800-800，不再多說了。

詳情：PC端（天貓尺寸：790-高度不限 淘寶：750-高度不限 京東：990-高度不限）

手機端（寬度640）

制作詳情，第一步運營提出需求，產(chǎn)品賣點，提供文案，設計師構(gòu)思，全淘寶網(wǎng)天貓網(wǎng)，找同行參考圖，找國外的也行，進行簡單的排版，非常簡單，就是這個文案或者賣點，我要通過什么樣的圖表示，就把找的參考圖放進去，一般用xmind或者excel表格，都能做這件事；有了大概參考之后，如果是新品，那就根據(jù)參考，找模特或者產(chǎn)品進行拍攝；如果不是新品，老品翻新詳情，那公司就有圖，拿來直接作圖就好了。

做詳情，多找找參考，不是壞事；如果公司有京東天貓?zhí)詫毜?，那么一開始做詳情，就按990的尺寸來，做完了，等完稿了，等比例縮小就好了；990尺寸定稿，另存為JPG格式，將JPG拖入PS，拉參考線，然后切片，最后是web格式保存。

注意：現(xiàn)在將就移動時代，有些公司要求低，PC端和手機端詳情同步，那么我們做詳情最好是豎版的，傳統(tǒng)是橫版的，豎版尺寸高度大于寬度即可，像990的寬度，我們設計的時候，一模塊的高度大概1400，790的寬度，對應高度大概在1100，這個做多了，就把握個大概高度即可，沒有特別標準。如果公司要求高，要求PC端一個版本，手機端另外一個版本，那就PC做橫版，手機端做豎版即可。

做法如下：

1、按照自己設計的拉參考線，不要把圖不完整的中間切開，最好是一塊一塊的內(nèi)容，方便運營調(diào)整模塊順序，后期修改替換某張圖片的時候，也會很方便。

2、切圖：找到切片工具——基于參考線切片——然后圖片就切好了

3、保存（重點?。。。。。≈攸c?。。。。?！重點?。。。。。。?br>
保存快捷鍵：shift+ctrl+alt+s

按完快捷鍵，就跳出這個窗口了。

首先第一個：注意保存格式是jpeg的，也就是jpg；

第二：品質(zhì)要100，如果顯示小于100，自己手動拉到100即可，不然保持出來的畫質(zhì)是模糊不清晰的；

第三點H（高度hign首字母）超過了8000，那么第四點百分比的地方顯示的就不是100%，W（寬度width）也改變了，不是990了，那么保存出來的畫質(zhì)也是模糊不清楚的，也是不能用的，這個時候，就關(guān)閉這個窗口，回到畫布頁面。

4、裁切頁面

回到畫布之后，用裁切工具裁切頁面，最好從下往上拉，跟著有數(shù)值顯示，數(shù)值顯示高度小于8000的時候，根據(jù)所拉的參考線，切平即可，按enter鍵或者按上面打勾的地方，都可以。

然后再進行上面3保存切片的步驟，顯示如下，可以看到箭頭所標的數(shù)值都是正常的了：

然后再按儲存，會跳出下面窗口：

建議文件名成后面寫個1，因為后面還要繼續(xù)保存后面剩下部分的圖片，為了詳情切片不打亂順序，保存一次，就后面寫個1，第二次，就寫2，以此類推。

點保存會出來一個窗口，按確定就好了，保存完第一部分的圖，我們繼續(xù)回到畫布，可以按ctrl+z撤銷返回，也可以打開菜單欄——窗口——歷史記錄

點一些裁切前面一個步驟，就會恢復裁切前的完整詳情頁，記住之前保存第一部分的圖片到哪個位置，裁切的時候，就把那部分先裁切掉，如下

裁切的時候，也是會顯示剩余頁面高度的，截圖是截不出來的，自己操作一下就看到了；然后剩下的部分如果沒有超過8000高度，那就直接web保存就好了，命名的時候后面加2；如果超過8000，那繼續(xù)從下往上裁切，重復步驟，直到裁切完所有詳情。

打開圖片保存位置，就可以看到自動建的一個images文件夾

打開，看到的就是切片了

990尺寸的詳情，我們就是完成切圖了，出來把images名字更換成990，因為我們還要裁切其他尺寸，以免圖片都保存到同個文件夾混亂，所以要更改命名，系統(tǒng)默認名稱都是images。

6、更改尺寸

第一步，還是回到最初完整沒裁切的詳情頁面，然后再更改尺寸，快捷鍵ctrl+alt+i，出來這個窗口：

如果窗口出來了，顯示的單位不是像素，那就點一下，換成像素即可；這里可以看到寬度高度，鏈接他倆是一個類似鎖鏈一樣的圖標，如果需要等比例縮放，這個鎖鏈就要如我截圖的那樣是選中狀態(tài)，如果是下面這種

點一下那個鎖鏈，就好了，這表示對寬度和高度都上鎖了，要變大家一起變。

單位是像素，鎖鏈上鎖了，直接更改寬度為790即可。

后面就是重復前面的步驟web格式保存，切圖……后面切750、640尺寸，都是一樣的步驟。

切圖這塊內(nèi)容講得蠻多的，因為有不少坑，對于新手來說，很容易就入坑里，還不知道自己錯在哪里。

這里另外說一句，既然講到web格式保存，那就講講png透明底圖怎么保存，一種方法是另存為，直接能找到PNG格式的，另外一種就是web格式保存：

這個地方點開，一般選中png-24保存格式，然后保存即可。

這里可以看到，你要是會做動畫，也能存為GIF格式的。

為什么要用web格式保存呢？前面我們說的主圖、海報基本上都要web格式保存，因為這樣保存出來都jpg小，另存為的方式，jpg可能幾M，但web格式保存出來的，可能就幾kb，用于網(wǎng)上的圖片，大多數(shù)用這種方式，瀏覽頁面的時候，打開圖片速度快。

小重點：手機端圖片切片高度都不能高于2500，京東的，好像是1500吧，我給忘記了，基本上后臺都有顯示的，不需要死記硬背，知道就行，PC端切片高度沒有限制，但最好也不要太長了，太長了，圖片就大，打開速度就慢。

詳情內(nèi)容就結(jié)束了，講講關(guān)聯(lián)及小廣告，如下：

大家注意觀察的話，就可以發(fā)現(xiàn)，有些店鋪正式詳情開始之前，都會有這些廣告，當然是店鋪自家產(chǎn)品的廣告，現(xiàn)在還沒有活動，優(yōu)活動的話，就是有活動海報+優(yōu)惠券的圖，那叫關(guān)聯(lián)，天貓關(guān)聯(lián)寬度790，淘寶關(guān)聯(lián)寬度750，關(guān)聯(lián)組成=首頁海報+優(yōu)惠券，沒找到圖，自己電商活動節(jié)日的時候，可以找店鋪看看，這種關(guān)聯(lián)，基本上都是電商活動的時候做的，平時幾乎不做，頂多放些廣告圖。

到此，產(chǎn)品頁就講完了，內(nèi)容有點多，看一遍消化不了的，多看幾遍，然后自己上手操作幾遍，就好了。

九、下面我們開始講實操裝修了

打開千牛賣家中心，進入賣家中心頁面：

對于我們設計來說，主要用到的是店鋪管理這塊，最初運營給與帳號的時候，可能店鋪管理下面是空白的，這時候，我們點一下店鋪管理旁邊的箭頭，就會出來一排，后面有大頭針的圖標，點我們經(jīng)常所需要用的：圖片空間、店鋪裝修、查看淘寶店鋪、手機淘寶店鋪就可以了，以后再用的時候，就會直接在外面，不需要重復點箭頭，方便了很多。

作為電商設計師，最好養(yǎng)成一個圖片整理的習慣，不管是店鋪的，還是自己電腦里的文件，對文件要命名，工作時間一長，圖片就很多啊，可能一年后要用一年前的圖片，要是整理不妥當，真的是找不到，大海撈針，很費時間。

目前根據(jù)工作經(jīng)驗，比較高效的文件命名方法是這樣的：

美工組——日?！辍?名稱

這樣以后尋找圖起來非常方便了。

日常就是平時工作所做的內(nèi)容，方便自己看自己都做了哪些東西，除去日常，若公司做好幾個品牌，那么跟日常同等級別的，你就要新建XX品牌文件夾，YY品牌文件夾，把日常里面運營定稿的產(chǎn)品詳情，就可以另存為一份到某品牌文件夾里面，再進行切圖，把切圖保存到某品牌文件夾里面去，方便其他同事找某個品牌的時候，就很容易找到產(chǎn)品詳情、海報、主圖及拍攝圖了。

養(yǎng)成這個習慣，方便你我他，嘻嘻~~~

好了，進入正題！

圖片空間：也是要建文件夾的，某個產(chǎn)品上新，某個活動頁面，最好都命名好，方便以后圖片空間不夠了，知道那些圖已經(jīng)過時了，可以刪除；圖片空間的作用，就是店鋪裝修所用到的圖片都要先上傳到圖片空間，這是裝修的第一步。

店鋪裝修：開始裝修頁面了（我們這里主要講沒有買過智能模板的店鋪裝修，智能模板裝修有特定的編輯器，光我以前用過的，就有四五個，很多，編輯器都不難，看一看，琢磨一下那些功能，就會了，方法都是想通的。）

裝修頁面也是主要講首頁裝修，關(guān)聯(lián)怎么上，至于詳情怎么上，我真不知道呢，都是運營上的~

點擊店鋪裝修，進入頁面：

再點擊店鋪裝修——點擊PC端

可以看到首頁是在基礎頁里面的，我們平常的頁面，都會在首頁裝修，因為會放一段時間，做活動的時候，我們一般是自定義頁，新建一個頁面，最后做完發(fā)布，然后設置為首頁，即可在PC端首頁看到活動頁面了。

這里方便講解，我就新建一個自定義頁講解。

新建一個頁面，然后命名一下這次活動名稱，比如：2019五一勞動節(jié)，確定，就進入到裝修頁面了，要是進入不了，可能瀏覽器不好用，換個瀏覽器，這種情況是有的。

打開以后，我大概分為5塊內(nèi)容

1、模塊：是跟2這塊內(nèi)容有關(guān)，用于各種編輯5這塊內(nèi)容的模塊，也可說是功能區(qū)。

配色：很少用到，基本不用

頁頭：主要跟4店招的位置有關(guān)，主要是底色是純色，還是上背景圖片。

頁面，就是跟5頁面有關(guān)，主要是底色是純色，還是上背景圖片，跟頁頭一樣。

2、功能區(qū)：直接左鍵鼠標按住某個功能，拖過去就好了。

寶貝推薦，基本上寶貝自動出來了，都不需要自己加產(chǎn)品了。

其他功能塊呢，大家自己進入后臺，挨個挪移遍，用一遍，就知道干嘛用的，我這邊主要講“自定義”這個功能。

3、可看到自己命名這個頁面的名稱，也可以跳到其他頁面

我們目前所處的位置就是頁面編輯，布局管理要特別講一下。

我們看到現(xiàn)在頁面5模塊上面分為左右兩欄，挺丑的，只有淘寶小店鋪，沒有專門的設計師，才會用這樣的模式，所以我們要改一下頁面布局。

點開布局管理

如圖操作，多添加幾個通欄單元

就會出現(xiàn)如上圖所示的模塊，把系統(tǒng)默認的上面模塊，可以刪掉，然后進入頁面編輯，開始我們的裝修。

4、店招

如圖操作，點擊編輯，有窗口，就可以開始裝修我們的店招了。

新店鋪，一般會顯示默認店招，背景圖可更換，店招高度及寬度，上面都有顯示，950-120，默認店招上面也不能加鏈接，所以我們不會用默認店招，會用自定義店招。

不管自定義店招還是默認店招，寬度都是950，不算全屏1920，這個時候就要用到1模塊的頁頭——背景圖功能了，做一張1920-120的底圖，通過頁頭上傳，然后店招用950-120的尺寸，底圖和店招用色什么的要一致，這樣出來的全屏店招就毫無違和感了。

看著像是一張圖，其實是兩張圖上下疊加一起的。

自定義店招里面，若店招上面只加一個鏈接，那么下面這種辦法就能解決：

插入圖片，圖片地址就去圖片空間復制，鏈接網(wǎng)址，一般是鏈接首頁網(wǎng)址。

前面已經(jīng)打開圖片空間了，如若上傳店招，鼠標放到店招圖片上，就會顯示出這四個圖標，鼠標放上去，都會顯示這個圖標的作用，第二個圖標就是復制圖片鏈接的，點一下，復制了圖片地址，再到頁面編輯的地方，把圖片地址復制過去，即可。

但是這種只能加一個鏈接的方式，往往是不能夠滿足店鋪需要的，這個時候，我們就要借助DW或者碼工助手了。

用DW：首先先下載好這個軟件。

步驟：插入圖片，但不加鏈接地址，然后點<>這個圖標

復制這段代碼到DW，放在<body</body>標簽中間，然后點擊左上角“設計”

鼠標單擊圖片，出現(xiàn)下面屬性欄

選中矩形（旁邊還有圓形和不規(guī)則圖像，都是可以用的），在上面圖上按住左鍵，進行拖拽自己想要的熱點范圍。

在鏈接中刪掉#，復制鏈接地址，下面目標選擇_blank（意思是點擊鏈接，打開的頁面新開窗口），然后再點擊左上角“代碼”回到代碼頁面

復制<body></body>標簽之間的一段代碼，回到我們的后臺編輯頁面，將這段代碼代替剛才那一段，就好了。

確定保存。

用DW加熱點，只要是后臺系統(tǒng)默認的圖片尺寸，比如950、790、750等，都可以用這種方式。

另外一種是借助碼工助手。

碼工助手的特點就是可以全屏，樣式多樣，

地址：https://dianshang.gaoding.com/tools

我用的比較多的就是第一個，然后就是全屏海報，其他的內(nèi)容，都可以看看，功能很多，總有需要的時候。

我用第一個做示例，點開，可以給淘寶、天貓、京東、1688四個平臺裝修，目前你給哪個平臺的店鋪裝修，就選擇哪個；如果圖片排列出來有空隙，一般去掉10px就夠了；要是做的1920尺寸的圖，那就選擇全屏；然后復制圖片鏈接地址，確認就好了

界面簡單易懂，畫好熱點，加完鏈接，復制代碼到頁面編輯相應的位置，即可。

5、頁面內(nèi)容——自定義

一般頁面通過設計，我們就會采用自定義的方式，將頁面裝修上去。

這里裝修借助碼工助手即可，方法不重復累贅了，自定義模塊可以放很多個，基本上是夠用的，裝修完，可以點擊右上角預覽PC端，查看頁面是否有問題，鏈接是不是都能點開，沒問題了，再點擊發(fā)布站點。

PC端首頁，就這么裝修完畢了。

現(xiàn)在說一說手機端的裝修，那就很簡單了，這里的美艷切圖，用到的比較多，也就是手機端的自定義，載入圖片畫熱點，加鏈接，保存，就好了，多個圖片切片，那就多個美艷切圖模塊即可；手機端裝修不需要借助外界任何軟件編輯器，在這里就能完成裝修。

其他功能模塊，都可以點擊看看，有些也是要用到的，比如輪播圖模塊，智能雙列等。

然后講一下關(guān)聯(lián)和小廣告怎么上，天貓和淘寶上關(guān)聯(lián)方式不同。

天貓的就很簡單，店鋪裝修——寶貝默認詳情頁

自定義模塊，然后就用DW或者碼工助手，就可以了。

淘寶的稍微復雜一點，有些店鋪的運營用了神筆等其他輔助工具，我們?nèi)绻€像天貓一樣添加關(guān)聯(lián)，可能造成重復，這個先問問運營，一般在公司做得時間比較長的運營知道，從哪里上關(guān)聯(lián)。

講到這里，實操部分，基本也結(jié)束了，希望能幫助到大家~~~~

額外補充點代碼小知識，方便看得懂代碼。

<img src=”圖片地址”> img就是image在代碼中的簡寫，大家看到img，就要知道，這個標簽后面放的就是圖片地址。

用處：如果一個店鋪已經(jīng)裝修完畢，發(fā)現(xiàn)某張圖有點小問題，不想重復加熱點加鏈接，這個時候，在PS更改這張圖的問題，不要改變這張圖的尺寸，上傳到圖片空間，然后復制圖片地址，找到img標簽，替換它后面的圖片地址，就可以達到替換圖片的目的了，非常方便。

<a href=”鏈接地址”></a>，a標簽就是用來放鏈接的地方，看到a標簽，就知道，這里有個鏈接，知道就行，要更換鏈接的很少。

其他不多講了，謝謝大家觀看。