Please enable JavaScript.
Coggle requires JavaScript to display documents.
網站設計 (工具 (程式分享 (JSFiddler, JSBin, codepen, sandbox), 切版 (Adobe Illustrator…
網站設計
工具
-
切版
Adobe Illustrator + ai2html
-
-
-
-
-
-
專業用語
切圖
- 將設計稿切成便於製作成頁面的圖片，並完成html+css布局的靜態頁面
- 把一張設計圖 利用到切片工具 把自己所需的切成一張張小圖，然後用DIV+CSS完成靜態頁面書寫，完成CSS布局
目的
- 讓網頁稿有了交互性: 實現你平時看到的各種各樣的功能。
- 體積: 切圖時候一定注意少用圖片工, 採用div+css布局更能減小網頁體積 是表現與內容分離
境界：
- 能把所有設計稿里出現的圖形元素按照基礎要求切出來交給前端工程師。
- 對所有切圖進行優化，有針對圖片輸出體積的優化、有利用 CSS Sprite 減少請求的優化、也有針對減少自己後期網站改版升級時候工作量的優化。這部分已經需要很多前段方面的知識了。要讓切圖也「語義化」必須得和前段配合得很好。
- 從超出「圖片」的角度思考並且實現更高階的效果，比如現在做網頁經常需要考慮桌面和移動平台的不同解析度，使用 Responsive 的布局的話切圖應該怎麼切，是不是需要切兩套；遇到 iPad 或者 rMBP 的高清屏怎麼處理網頁中的圖片以及背景；是否可以應用一些新的技術比如 Web Font、Font Icon、CSS 3 里的新特性來減少網頁里的圖片等等
-