據某團隊透露,自全司上下都配備macbook后,設計部的同事們紛紛將photoshop換成sketch,改變過程折騰了相當一段時間,于是留下此文,教你如何從photoshop遷移到sketch,那些正準備轉移陣地的同學,節省時間就從這篇開始咯。
@teambition :sketch可以說是photoshop最佳替代,而且比起photoshop,它更側重于用戶界面的設計。雖然目前sketch素材還是太少,不過我正在著手解決這個問題。文章源自四五設計網-http://www.wasochina.com/10346.html
備注:通過分析甚至是重復使用他人的作品可以取得進步,然后開始創作你自己的作品。在學習的時候,重新想像正試圖解決的問題。學習他們的技巧,并它融入到自己的設計思考中去。文章源自四五設計網-http://www.wasochina.com/10346.html

遷移:我的圖標(my icons)文章源自四五設計網-http://www.wasochina.com/10346.html
作為一個用戶界面設計師,圖標是唯一一種不必每次都從頭開始的組件。圖標被存儲為svg格式,這是是一種廣泛被使用的矢量格式,已經被越來越多地被用于css中,代替那種特定分辨率的內嵌圖片。文章源自四五設計網-http://www.wasochina.com/10346.html

有免費和付費的兩種。付費版也不貴,非常適合入門級別的設計師。以下是我個人使用的svg圖標集列表:文章源自四五設計網-http://www.wasochina.com/10346.html
pixicon by jackie trananh ($5)文章源自四五設計網-http://www.wasochina.com/10346.html
symbolicons ($35)文章源自四五設計網-http://www.wasochina.com/10346.html
glyphicon ($59)文章源自四五設計網-http://www.wasochina.com/10346.html
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)。


4,文件——>保存為svg格式

遷移:我的圖案
除非你是一個純粹的扁平設計師,否則你會需要在設計中使用到圖案材質。你的客戶可能也會要求。 sketch有躁點預設,但是如果你有更高的要求,你可以在把photoshop的圖案文件保存為單獨的圖案文件,然后導入到sketch的圖案文件庫。沒有遷移工具。可以試試subtle patterns,一個圖案網站。

設計師應該避免回頭看自己的舊作,所以,這其實是一次從頭開始的機會。sketch是100%矢量軟件,所以沒法導入帶有大量位圖效果的psd文件。從我個人使用fireworks的經驗來看,整個流程也不是完美的。許多樣式都出錯了。甚至是字體看起來也特別丑。


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

結語
除非你像我一樣,已經使用了3個月以上的sketch,要不然你可能還是會回去用photoshop,編輯老的psd等需求,或者圖片編輯、圖片繪制、等重的圖片設計工作。然而,我們需要知道的是,有一種photoshop的替代品,它可以完全專注于用戶界面設計。一種集結了photoshop、illustrator和omnigraffle等優勢、可以匹敵adobe的工具。


1F
原來還可以這樣操作