Android程序猿的Sketch學習之旅

簡書博客同步更新 傳送門

Sketch專爲App繪圖場景而生,也可以少量處理位圖圖片。通過下午3個小時的官方用戶文檔中文版的閱讀和實踐,我發現Sketch真得做到了“花最少的時間就能上手的繪圖工具,讓你專注於設計本身”

熟練使用Sketch需要理解一些概念:

  1. 選區
  2. 圖層
  3. 羣組
  4. 切片: 畫布中的特定區域導出爲一個文件
  5. 符號(Symbol),類似於佈局文件裏的標籤
  6. 蒙板,這個的作用類似安卓裏的SetXfermode方法

剛打開Sketch可以對每個菜單欄下的內容熟悉一遍,Sketch的界面可以分爲四個部分

  1. 最左邊的Page展示
  2. 頂部的工具欄
  3. 右邊的檢查器
  4. 中間的畫板

我的學習過程就是按着Sketch官方用戶手冊上的介紹實踐了一遍,現在感覺已經能自己修改圖標了(要有圖片素材),剩下的就是對各種快捷鍵和繪圖小技巧的熟練使用。

注意事項:

  • 當你爲 Mac 或網頁設計時,你會想打開子像素抗鋸齒效果,但是爲 iOS 設計時,你會想關掉它。
  • 文字渲染遇到的問題是普通的屏幕裏並沒有足夠多的像素來精確的展現文字的曲線。這就需要用到子像素抗鋸齒技術了,它會將那些被文字曲線遮住一部分的像素稍稍變亮一些,並且在視覺上產生更平滑的效果。
  • 順利實現子像素抗鋸齒效果,文本必需出現在一個不透明的(有色的)背景上
  • 實現圖層混合模式,Sketch 需要在一個透明背景上渲染所有的圖層

一次實踐案例

在App設計裏,這張圖標表示“我的”或“個人中心”,未選中時:

未選中的我的圖標

未選中的數據列表圖標

當選中時,顏色由灰色變成紅色,並且填充顏色頭像,看起來有面的即視感:

選中的我的圖標

選中的數據列表圖標

使用Sketch就能很高效的完成這樣的改動,具體使用到的操作在官方用戶手冊的“圖片”分類下和“導出”分類下說明得很到位,本文就不再贅敘了。

小結

這次跨界的感受是在安卓開發過程中,能做到對設計師給的切圖心中有數,降低了彼此的溝通成本。加深一種解決問題的認識:實現某種UI顯示效果,從代碼環節轉移到圖片處理環節上

參考資料:

Sketch官方用戶手冊

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章