幫你提升SKETCH使用效率的6個實用技巧
注意:本文當中的一些方法涉及到插件的使用。建議你首先安裝 Sketch Toolbox,非常棒的插件管理工具;另外請確保你的Sketch版本為最新(目前為3.2.2)。
一、自動等距複製元素
按住alt並拖拽元素可以實現複製,這是我們比較熟悉的方式。但是對於大量重複性的複製任務,這種手動方式仍然過於耗時。
我們時常遇到的一種比較典型的重複性需求,就是將某個元素複製多次並等距排列。對於這種典型任務,Sketch提供了非常便捷的實現方式。首先,我們仍需要通過“alt+拖拽”來複制一次,並參考動態顯示的間距值將新元素放置到合適的位置,然後使用快捷方式“cmd+d”來重複複製,每次複製出的新元素與前一個元素之間的距離都是我們第一次手動拖拽複製時所設定的值。你只管按住cmd鍵然後持續按d鍵,直到複製出你所需要的數量。
注意:如果你發現“cmd+d”並沒能實現自動等距複製,那麼請到Sketch的偏好設置當中,找到“Layers”下的“offset pasted & duplicated objects”並取消勾選即可。
二、圖層排序
設想一下你正在設計類似Dropbox那樣的應用,界面中需要一個文件列表,其中的文件默認按照上傳日期排序,但是用户可以切換為按文件名字母排序。你很認真的在設計稿中為每個示例文件起了不同的名字,一切都不錯;但是要演示按字母排序的文件列表時,你發現自己必須手動拖拽圖層來重新排序。
告別手動的煩惱吧,我們通過Sketch Mate插件來實現加速。
打開Sketch Toolbox工具
搜索“Sketch Mate”
點擊Install
Sketch Mate當中集成了很多實用功能,我們現在需要使用到的排序只是其中之一。下面的演示當中,每個文件列表項對應着一個名為“File”的組。
選中所有需要排序的組,在菜單欄中點擊Plugin > Sketch Mate > Sort > Sort Layers,在彈出的對話框中選擇“Text(A > Z)”。因為我們的示例當中每個組裏包含多個文本對象,所以接下來還需要選擇以哪些文本為標準進行排序。點擊OK後,你的列表會瞬間完成重新排序。
你也可以嘗試其他幾種排序方式。
三、圖層與artboard的批量重命名
良好有序的圖層與artboard結構是優秀設計稿的標誌之一,自己開心,協作起來大家也開心。但是必須承認,在很多時候,以更加合理的標準對圖層和artboard進行重命名是很枯燥且耗時的工作。還好有一款名為Renameit的插件可以拯救我們於水火。
打開Sketch Toolbox工具
搜索“Renameit”
點擊Install
在Sketch裏選中你想要重命名的圖層或artboard(至少選中兩個),按“ctrl+cmd+r”,喚出Renameit的對話框,輸入“前綴+參數”。其中前綴是我們所需的有特定含義的單詞,例如“icon”。參數分為三類:
%N:數字。例如,在對話框中輸入“icon %N”,點擊OK,所選圖層或artboard會被重命名為“icon 1”、“icon 2”、“icon 3”等等。
%W:寬度。例如,在對話框中輸入“icon %W”,點擊OK,所選圖層或artboard會被重命名為“icon 24”、“icon 36”、“icon 48”等等,其中的寬度值是自動獲取的該對象的實際寬度。
%H:高度。與%W同理。
四、動態按鈕
複製一個現有的按鈕並設置不同的按鈕標題,這是一種重複性強同時需要精確操作的工作,因為我們要做的不僅是複製,而且需要根據不同的標題長度來調整按鈕的寬度。著名的Dynamic Button插件就是為了解決這個問題而生的。到目前為止,這也是我個人最喜歡的插件。
打開Sketch Toolbox工具
搜索“Dynamic Button”
點擊Install
首先,我們需要通過DB插件來創建初始按鈕。新建一個文本對象,輸入我們所需的按鈕標題。選中該文本對象,按“cmd+j”,你會發現文本和一個自動生成的背景形狀一起被打包到了名為“Flex Button”的組裏,而且文本圖層被自動重命名為“0:0:0:0”。這4個數字代表着文本對象距離矩形背景的上、右、下、左邊緣的距離。
例如,根據實際需求,我們要將上、下兩個值設置為12,將左、右兩個值設置為20,那麼你可以將文本圖層重新命名為“12:20:12:20”,然後選中文本對象,按“cmd+j”,這時按鈕背景的尺寸會自動根據我們所設置的規格進行調整。
接下來,無論是修改這個按鈕當中的標題文案,還是複製一個新的按鈕並修改標題,只要再次選中其中的'文本對象並點擊“cmd+j”,按鈕背景的尺寸都會自動根據新文案的尺寸進行調整了。
五、Symbols的嵌套
目前,Sketch尚未“正式”支持symbols的嵌套,但我們可以通過一些技巧來實現,只是建議你在使用時小心一些。
要將Symbol A嵌入Symbol B:
選中Symbol A,在右側檢查器中將其設置為“No Symbol”,使其恢復為普通的組或對象
在左側圖層列表中,將A移入Symbol B
保持A的選中狀態,在右側檢查器中重新將其設置為原來的“Symbol A”
對我個人來説,這種方法在編輯帶有彈出層的界面時非常有用。我可以將初始界面整體創建為一個父級symbol,其中包含有對應着各種控件的子級symbol,然後將整個artboard複製,並設計浮層或彈框的樣式。如果初始界面當中某些元素需要發生變化,那麼含有浮層的artboard便會自動更新,無需手動移開浮層再做重複勞動。
六、使artboard根據內容自動調整尺寸
Sketch中的artboard體系可以幫我們站在全局角度總覽設計方案,這是它有別於其他競品的一個重要特性。想起以前用PS的狀況,感覺像是噩夢。
設想你需要時常在artboard中添加或移除內容 ? 如果artboard能自動調整尺寸,這該有多好?我們前面介紹過的Sketch Mate又能幫上忙了,確保你已經安裝好。
例如當前artboard當中的實際內容已經超過了artboard自身尺寸,你無法看到列表當中的更多條目。按“ctrl+shift+a”,artboard便可以精確的根據現有內容的實際高度來重新調整自身尺寸了,就這麼簡單。
相關文章
-
clothes什麼意思 clothes+clothing+dress等近義詞用法辨析
孤獨攀附上月色,帶來久遠的回憶,那些感動藉助一雙鵝黃的月翼飛向了心靈深處。聆聽泣血的枇杷曲,回首柵欄處的燈光,依舊那麼清晰,那些留在心靈深處的感動,一湧而上。初來乍到,暴風狂驟有真情。七年級的我,帶着青雉的氣息,愣懂的面 -
利用Kickstart自動化安裝CentOS的方法
前言因為需要在浪潮的x86服務器中集中部署CentOS搭建基於Hadoop的大數據平台,平時接觸SLES(SuSE Linux Enterprise Server)較多並且已經實現基於Autoyast方式使用光盤或者PXE網絡自動化安裝(後續會分享具體實現方法)。 -
photoshop cs6使用技巧
Adobe Photoshop CS6號稱是Adobe公司旗下最為出名的圖像處理軟件之一,集圖像掃描、編輯修改、圖像製作、廣告創意,圖像輸入與輸出於一體的圖形圖像處理軟件,深受廣大平面設計人員和電腦美術愛好者的喜愛。Adobe Photosho -
《The King's Speech》最後的演講
In this grave hour, perhaps the most fateful in our history, I send to every household of my peoples, both at home and overseas, this message, spoken with the same depth of feeling for each one of you -
在C語言中用ASSERT調試的八個技巧
C語言中的ASSERT(斷言)宏是嵌入式軟件開發人員可以使用的最好的調試工具之一。面小編給大家介紹在C語言中用ASSERT調試的八個技巧,歡迎閲讀! 在C語言中用ASSERT調試的八個技巧 技巧1:記住ASSERT的定義對許多開發人 -
英語面試問題:Which college classes did you like the
Which college classes did you like the best?Why?上大學時你最喜歡什麼課?為什麼?I like Business Strategy best.我最喜歡商業策略這門課。Actually,it was the hardest lass,but it was THE best class.事實上,這是 -
評課稿:skim and match the pictures with each paragraph
我們組開課的課題是七年級下Module11 Body language Unit2 Here are some ways to welcome them。 教學目標是通過對文本的學習,學生能夠製作一張關於介紹各國的社交禮儀的海報。謝老師在這節課中,對學生閲讀技能的灌輸 -
svchost.exe佔用cpu
近來,經常發現win7系統開機後反應超慢,經過檢查發現佔用CPU和內存很高。以下是本站小編收集的`佔用cpu,僅供大家閲讀參考! 佔用cpu1、進入安全模式2、刪除C:WINDOWSSoftwareDistribution下面所有的文件重啟機器,3、 打 -
Win8主題包deskthemepack的安裝教程詳解
在Windows XP和Windows 7時代,使用豐富多彩的'主題是Windows用户的一個顯著特徵。Win8也能更換主題,themepack就是Win8的專用主題包格式。但有時候雙擊這一格式主題包,卻顯示themepack無效。怎麼辦呢?解決方法需要將區 -
Eclipse使用EGit怎樣clone遠程倉庫並導入Eclispe?
背景:我要將自己在Bitbucket上的一個倉庫克隆到本地,而且我想用Eclipse來做開發工具。我按照這個鏈接()中的'步驟來進行,目前EGit安裝成功,克隆也是成功的,問題出在下面的這個步驟上,如圖:如果我選擇Import existing projec