私信我或關注猿來如此呀公眾號,回覆:視頻學習,即有機會免費領取30天視頻學習資源包
大家在UI設計工作過程中,都會用到什麼設計工具呢?是不是還在用PS、AI等設計軟件呢?
那麼,今天介紹一款神軟件,如果你還不知道,那你就OUT了!那麼,我現在揭曉我推薦的這款“神”軟件——SKETCH!它大大的提升我的設計效率,不僅能設計網頁設計,APP界面也可以用它設計哦!
關於Sketch
Sketch 是一款適用於所有設計師的矢量繪圖應用。矢量繪圖也是目前進行網頁,圖標以及界面設計的最好方式。但除了矢量編輯的功能之外,我們同樣添加了一些基本的位圖工具,比如模糊和色彩校正。
我們盡力讓 Sketch 容易理解並上手簡單,有經驗的設計師花上幾個小時便能將自己的設計技巧在Sketch中自如運用。對於絕大多數的數字產品設計,Sketch 都能替代 Adobe Photoshop,Illustrator 和 Fireworks。
01
畫布
Sketch 的畫布尺寸是無限的,可以向任意方向無限延伸,你將擁有絕對的自由來規劃自己的創作區域。
如果你想在畫布中設置一個固定的畫框,你只需新建一個或多個新的畫板。舉個例子,設計移動應用界面時,很多設計師會為應用的每一個屏都創建一個畫板,然後排列開來以便查看。
你可以用無限精準的分辨率無關模式來查看畫布,或者打開像素模式來查看每一個像素導出成JPG或者PNG文件後的樣子。值得注意的是,有些效果——比如模糊——會自動將畫布的一部分以像素模式顯示,因為模糊本身就是一個基於像素的效果。
02
檢查器
右側的檢查器能讓你對正在編輯的圖層——有時是正在使用的工具——進行參數調整。當你選中一個圖層時,你會發現檢查器被劃分為幾個區域。
03
通用屬性
通用圖層式樣都在頂端區域:圖層所在位置,透明度,混合模式以及幾個特殊選項——比如調整矩形內角半徑和多邊形的不同點模式。
04
樣式屬性
邊框和填充屬性都有他們獨自的區域,你可以勾選左上方的小方框展開他們,並顯示出具體的選項。如果你點擊顏色按鈕,你會發現檢查器滑倒一邊,出現新的專門的顏色檢查器,你只需要單擊頂端的“後退”按鈕便會回到主檢查器。當你選中了其他圖層,同樣會自動回到主檢查器。
05
圖層列表
圖層列表列出了所在頁面的所有圖層(和切片),每個塗層都會有一個小小的預覽。
你可以在這裡:查看塗層是否被鎖定,不可見,使用了蒙板或標記為可導出;重新排列圖層,或者給圖層添加布爾運算,比如減去頂層形狀;對圖層進行建組或者重命名來管理他們。
06
多頁面操作
Sketch支持多頁面操作,你可以在圖層列表上面的按鈕裡面添加/刪除或者轉換到其他頁面(或者用鍵盤上的 Page Up/Page Down來切換)。圖層列表始終只會顯示當前頁面的圖層。
07
畫板
在圖層列表裡,有白色背景一欄的便是畫板,你可以把畫板視為設計中的頂層對象,所以一個畫板不能被嵌入另一個畫板。
08
圖形
在你的文件中最常見的圖層應該就是圖形了。Sketch 提供了多種不同的基本圖形供你選擇:圓形,矩形,星型等等。這幾個圖形中會有幾個有趣的額外選項,比如星型和圓角矩形。
你只需單擊工具欄中的添加(Insert)>圖形(Shape) 按鈕,選擇一個圖形,便可以開始創作。當你的鼠標在畫布上拖拽的時候,Sketch 會提示你這個圖形的大小,鬆開鼠標,便會成功添加圖形,右邊的檢查器上也會立即顯示出這個圖形的相關信息,又是也會出現相應的額外選項。
09
工具欄
Sketch 的工具欄涵蓋了你創作當中所需要的所有工具。
在默認工具欄中,第一組工具是用來添加新圖層的:圖形、圖片、符號等等。
編組 (Group) 和取消編組 (Ungroup) 能讓你有條例的組織文件。
接下來的幾個工具則都是用來編輯現有圖層:旋轉 (Rotate),變形 (Transform), 通過布爾運算來合併圖層,以及在圖層列表中上移或下移圖層。
工具欄最後的導出(Export) 按鈕 同時也是一個切片工具,你可以在這將你的作品導出為一個或多個位圖或者矢量文件。
總結:
在工作中還是需要重視效率,在做任何事之前我們是否有用心的去思考下當前的工作有沒有更快捷方便的辦法,可能前期會花去很多研究的時間,或者花去研究的時間研究的方法也不一定管用,但是這是更好提高我們效率的必經之路,發現好的方法分享給團隊的成員會更有助於大家的協作。
來源於猿來如此呀公眾號
私信我或關注猿來如此呀公眾號,回覆:視頻學習,即有機會免費領取30天視頻學習資源包