Sketch進階教程-快速複製、測距以及邊界

Sketch Mac是一款爲設計師量身定做的優美界面和強大工具兼有的專業繪圖工具。能夠滿足網頁、用戶界面、圖標等的設計需求。 Sketch是一款爲設計師量身定做的優美界面和強大工具兼有的專業繪圖工具。製作出漂亮的圖形是一件很有挑戰性的事情,你所需要的是一款精心設計的應用 程序。此次小編帶大家瞭解Sketch快速複製、測距以及邊界。

1、夜視項目的框架設計

經過初步整理之後,我們得到夜視項目的框架,方便我們利用Sketch進行具體界面設計,框架如下:

另外,因爲虛擬項目的變更,所以在《夜雨原創玩轉Sketch第五期:原型設計入門》的基礎上,對首頁進行了重新設計,設計後的界面如下:

2、圖像變色處理

細心的同學可能發現了,界面的圖像進行了黑白處理,這是在《夜雨原創玩轉Sketch第六期:最全圖像處理方案》中沒有提及的,所以這裏補充一下Sketch圖像變色的處理教程。變色的處理比較簡單,選中圖像後,在檢查器處找到“Color Adjust”選項即可,“Color Adjust”對應的4個子選項功能分別爲“Hue(色相)”、“Saturation(飽和度)”、“Brightness(亮度)”、“Contrast(對比度)”,可以拖動滾動條對圖像進行調整。

以首頁的banner配圖黑白處理爲例,只需要將“Saturation(飽和度)”選項數值設置爲0即可得到黑白的圖片。

3、快速複製

我們在畫原型時,往往會遇到重複的元素需要不斷複製的情況,除了通過複製、粘貼之外,利用Sketch的快捷鍵可以事半功倍。以首頁的banner定位小圓點爲例,我們需要複製數個重複樣式的小圓點,則可以使用到這個小技巧,具體操作步驟如下:

1)首先需要畫出一個小圓點,選中小圓點後,按住鍵盤的“option(alt)”鍵,鼠標往右拖動複製一個小圓點

2)然後,按下“command(⌘ )”+“D”組合鍵,即可複製一個相同的圓點,並且可以新複製的小圓點水平位置和前面的小圓點保持一致,且間距都設置好了。

如果在第1)步中拖歪了,會導致重複複製的元素出現偏移,那也不要緊,利用Sketch的對齊和分佈工具即可,在工具欄處即可看到。

4、測距

在Sketch中進行設計,對尺寸、間距的把控必不可少。Sketch中提供比較方便的測距方式,在拖動圖層的時候,就可以看到相鄰圖層間距的展示;也可以通過選中圖層,按住“option(alt)”鍵,然後鼠標移動到其他圖層,查看兩者的間距。

5、邊界

這裏說的邊界,是指頁面的邊界,以首頁爲例,首頁底部還有什麼內容?底部最多展示多少內容?是否有邊界還是一直無限刷新?這些都是我們在進行原型設計時,需要考慮的問題。

考慮清楚之後,我們可以在原型設計時,把首頁底部需要呈現的內容全部畫出來,也可以用文字註明邊界的設置。

在實際演示時,我們往往會默認展示一屏的內容,這個時候,我們可以用隱藏圖層的方式,把下方的邊界內容隱藏起來,在需要的時候再進行展示。隱藏的方法也比較簡單,找到邊界的圖層,點擊眼睛符號即可在展示和隱藏之間進行切換。

以上就是小編爲大家帶來的Sketch進階教程-快速複製、測距以及邊界。還有更多詳細、實用的功能以及相關軟件sketch和其他Mac軟件獲取,大家快來Macdown.com自行探索一番吧。

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