如何與設計師合作?
制定設計規范,設計有規范,評審有標準
在藍湖「設計規范云」自定義添加顏色、文本樣式、圖層樣式、圖標、組件等元素后,團隊成員就能輕松使用添加好的元素。
視覺設計師是怎樣讓前端工程師100%實現設計效果的?
我們公司的設計師都是直接在藍湖上上傳設計圖,前端工程師可以直接看到交互、標注、切圖等,不需要過多無效的溝通,就可以輕易理解對方需求
藍湖教程:藍湖自動切圖功能該怎么用?
1、將需要生成切圖的圖片拖入PS
2、左鍵依次單擊“窗口”——“擴展功能”——“藍湖”
3、在彈出的小窗口上方單擊“切圖”,再點擊“標記為切圖”
4、之后在彈出的小窗口上方單擊“上傳”,再點擊“上傳全部畫板”
5、上傳成功后,點擊“去Web端查看”
6、雙擊設計圖即可查看標注和切圖
藍湖插件ps切圖使用教程?
、將需要生成切圖的圖片拖入PS
2、左鍵依次單擊“窗口”——“擴展功能”——“藍湖”
3、在彈出的小窗口上方單擊“切圖”,再點擊“標記為切圖”
4、之后在彈出的小窗口上方單擊“上傳”,再點擊“上傳全部畫板”
5、上傳成功后,點擊“去Web端查看”
6、雙擊設計圖即可查看標注和切圖
有哪些關于前端設計師的書籍?
1、HTML/HTML5基礎:
《HTML5秘籍》
2、CSS
推薦書籍:
1、《圖靈程序設計叢書:HTML5與CSS3設計模式》
2、《Web開發技術叢書:深入理解Bootstrap》
3、《高流量網站CSS開發技術》
4、《CSS設計徹底研究》這個一定要
5、《Web開發技術叢書:深入理解Bootstrap》
6、可以找一些專門講SASS的書,但是我沒找到
7、《CSS權威指南(第3版)》
3、深入學習JS
推薦書籍:
1、《單頁Web應用:Javascript從前端到后端》
2、《Web2.0界面設計模式》
3、《響應式Web設計:HTML5和CSS3實戰》
5、工具
學會使用grunt進行JS、CSS、HTML壓縮,特別是模塊化js開發時候的壓縮
會用PS進行切圖、保存icon
入手sublime、webstorm
學會使用chrome調試面板,特別是:console、network、profile、element
進階:
4、性能
推薦書籍:
1、《Web性能權威指南》
2、雅虎網站頁面性能優化的34條黃金守則
5、HTTP及TCP協議族
推薦書籍:
1、《HTTP權威指南》
2、《TCP/IP詳解》
3、《圖解TCP/IP(第5版)》
希望可以幫到您,謝謝!
前端有時候也會做UI設計,一般會使用到ps、sketch、xd來做設計,如果你是mac系統的話,可以使用sketch,這是一個專門的UI設計工具,同時配合藍湖來使用,不僅可以一鍵切圖標注,還可以生成代碼,直接復用。所以ps、sketch、xd和藍湖都是前端工程師必備的設計工具