據某團隊透露,自全司上下都配備Macbook後,設計部的同事們紛紛將Photoshop換成Sketch,改變過程折騰了相當一段時間,於是留下此文,教你如何從Photoshop遷移到Sketch,那些正准備轉移陣地的同學,節省時間就從這篇開始咯。
@Teambition :Sketch可以說是Photoshop最佳替代,而且比起Photoshop,它更側重於用戶界面的設計。雖然目前Sketch素材還是太少,不過我正在著手解決這個問題。
備注:通過分析甚至是重復使用他人的作品可以取得進步,然後開始創作你自己的作品。在學習的時候,重新想像正試圖解決的問題。學習他們的技巧,並它融入到自己的設計思考中去。
可以到BohemianCoding下載試用版。如果因為需要付費而錯過了這款應用,那是得不償失,特別是它還不貴,價格只有Photoshop的1/10。它能讓你的設計變得更加高效,一旦用上你絕對會愛上它。
遷移:我的圖標(My Icons)
作為一個用戶界面設計師,圖標是唯一一種不必每次都從頭開始的組件。圖標被存儲為SVG格式,這是是一種廣泛被使用的矢量格式,已經被越來越多地被用於css中,代替那種特定分辨率的內嵌圖片。
從圖標集(Icon Sets )開始
有免費和付費的兩種。付費版也不貴,非常適合入門級別的設計師。以下是我個人使用的SVG圖標集列表:
Pixicon by Jackie Trananh ($5)
Symbolicons ($35)
Glyphicon ($59)
Entypo (Free)
Batch by Adam Whitcroft (Free)
PSD圖標集( PSD Icon Sets):
Brankic1979 (Free)
IconSweets2 ($8)
Broccoli by Visual Idiot (Free)
如何從Photoshop導出形狀到Sketch中
如果你有Photoshop格式的圖標集,那麼這個導出的流程會稍微復雜一些。除了Photoshop之外,還需要使用到Illustrator:
1,在Photoshop中,選擇所有的Photoshop形狀層 ( Shape Layers )和合並形狀(Merge Shapes)。
2,文件(File)——>導出(Export)——>路徑到 Illustrator(Paths to Illustrator),保存為.ai格式
3,在Illustrator中,打開以上的文件,選擇所有形狀,設置為黑色。
4,文件——>保存為SVG格式
5,導入SVG文件到Sketch中,進行編輯。
遷移:我的圖案
除非你是一個純粹的扁平設計師,否則你會需要在設計中使用到圖案材質。你的客戶可能也會要求。 Sketch有躁點預設,但是如果你有更高的要求,你可以在把Photoshop的圖案文件保存為單獨的圖案文件,然後導入到Sketch的圖案文件庫。沒有遷移工具。可以試試Subtle Patterns,一個圖案網站。
如何遷移PSD文件?
設計師應該避免回頭看自己的舊作,所以,這其實是一次從頭開始的機會。Sketch是100%矢量軟件,所以沒法導入帶有大量位圖效果的PSD文件。從我個人使用Fireworks的經驗來看,整個流程也不是完美的。許多樣式都出錯了。甚至是字體看起來也特別丑。
不過,用Sketch重現Photoshop設計非常簡單。畫圖形、上顏色,應用Photoshop類似的陰影效果即可。圖標和樣式部分是最困難也是最重要的一部分。作為一名設計師,應該專注設計基礎(設計原則、簡潔的設計元素、像素完美等等),不要依賴那些使用特定軟件實現的效果,比如樣式、濾鏡、動作。
Sketch雖然很新,但是很多出色的設計師已經開始分享Sketch文件了。坦白的說,自定義Sketch甚至比PSD更簡單。:)
Sketch iOS Kit by Marcelo Marfil
Safari and iOS6 Template by Benjamin De Cock
Navigation Bars
iOS Message UI by Ben Breckler
我也分享一下我自己的文件
通常我是不會分享我的設計文件的,但是,既然它能幫助新用戶更快上手Sketch,那麼我就破例一次吧。
Pinterest Concept
iPhone(Phone image by Paul Flavius Nechita)
Dribbble Concept
Marcelo Marfil還制作了一系列視頻:《如何創作一個自定義的Sketch UI》
結語
除非你像我一樣,已經使用了3個月以上的Sketch,要不然你可能還是會回去用Photoshop,編輯老的PSD等需求,或者圖片編輯、圖片繪制、等重的圖片設計工作。然而,我們需要知道的是,有一種Photoshop的替代品,它可以完全專注於用戶界面設計。一種集結了Photoshop、Illustrator和Omnigraffle等優勢、可以匹敵Adobe的工具。