eDM

範例結果

一、PhotoShop設計及輸出為網頁

1.商品_柔膚加亮效果

Step1.商品原圖>複製圖層

Step2.濾鏡>模糊>高斯模糊

Step3.右側【圖層】面版>濾色

Step4.S2之圖層>複製圖層

Step5.右側【圖層】面版>色彩增值>降低[透明度]即可

2.商品_倒影效果

Step1.商品原圖>複製圖層

Step2.自由變型Ctrl+T>[上方工具列]H:設定為-100%

Step3.右側【圖層】面版>新增「遮色片圖層」

Step4.色票確認為「黑白」> 利用「漸層工具」加入黑白色即可

二、eDM切片操作

1.利用PS進行【規則性切片】

PS切片工具

切片原則

(1)寬度約700px,圖片以在行動裝置閱讀清楚為原則

(2)全部先切一大塊

(3)圖片不要切得過於碎片

(4)利用【切片選取工具】,將大圖規則切小圖(目的為分攤圖片下載流量)

(5)切片選項設定:

名稱:圖片檔案名稱
目標:_blank
alt:SEO使用

在輸出後網頁結構

2.PS輸出

Step1:注意PSD檔案名稱,後續圖片檔名一致
Step2:【檔案】>【儲存為網頁用】>
【最佳化確認】>儲存為【影像及HTML】

三、利用DW調整

1.在< head >之前的設定

2.非規則商品陳列

3.運用Mark Man標示網頁草稿

4.建立影像地圖(MAP)

矩形:shape=”rect”
圓形:shape=”circle”
多邊形:shape=“poly”

並且在html結構中加入【alt】及【title】

5.加入【如看不到內容,請按此…】訊息

6.圖片改為絕對路徑

網站上傳後,利用【尋找/取代】方法將圖片改為絕對路徑