據(jù)某團隊透露，自全司上下都配備Macbook后，設(shè)計部的同事們紛紛將Photoshop換成Sketch，改變過程折騰了相當(dāng)一段時間，于是留下此文，教你如何從Photoshop遷移到Sketch，那些正準(zhǔn)備轉(zhuǎn)移陣地的同學(xué)，節(jié)省時間就從這篇開始咯。

　　@Teambition ：Sketch可以說是Photoshop最佳替代，而且比起Photoshop，它更側(cè)重于用戶界面的設(shè)計。雖然目前Sketch素材還是太少，不過我正在著手解決這個問題。

　　備注：通過分析甚至是重復(fù)使用他人的作品可以取得進(jìn)步，然后開始創(chuàng)作你自己的作品。在學(xué)習(xí)的時候，重新想像正試圖解決的問題。學(xué)習(xí)他們的技巧，并它融入到自己的設(shè)計思考中去。

　　可以到BohemianCoding下載試用版。如果因為需要付費而錯過了這款應(yīng)用，那是得不償失，特別是它還不貴，價格只有Photoshop的1/10。它能讓你的設(shè)計變得更加高效，一旦用上你絕對會愛上它。

　　遷移：我的圖標(biāo)(My Icons)

　　作為一個用戶界面設(shè)計師，圖標(biāo)是唯一一種不必每次都從頭開始的組件。圖標(biāo)被存儲為SVG格式，這是是一種廣泛被使用的矢量格式，已經(jīng)被越來越多地被用于css中，代替那種特定分辨率的內(nèi)嵌圖片。

　　從圖標(biāo)集(Icon Sets )開始

　　有免費和付費的兩種。付費版也不貴，非常適合入門級別的設(shè)計師。以下是我個人使用的SVG圖標(biāo)集列表：

　　Pixicon by Jackie Trananh ($5)

　　Symbolicons ($35)

　　Glyphicon ($59)

　　Entypo (Free)

　　Batch by Adam Whitcroft (Free)

　　PSD圖標(biāo)集( PSD Icon Sets):

　　Brankic1979 (Free)

　　IconSweets2 ($8)

　　Broccoli by Visual Idiot (Free)

　　如何從Photoshop導(dǎo)出形狀到Sketch中

　　如果你有Photoshop格式的圖標(biāo)集，那么這個導(dǎo)出的流程會稍微復(fù)雜一些。除了Photoshop之外，還需要使用到Illustrator：

　　1，在Photoshop中，選擇所有的Photoshop形狀層 ( Shape Layers )和合并形狀(Merge Shapes)。

　　2，文件(File)——>導(dǎo)出(Export)——>路徑到 Illustrator(Paths to Illustrator)，保存為.ai格式

　　3，在Illustrator中，打開以上的文件，選擇所有形狀，設(shè)置為黑色。

　　4，文件——>保存為SVG格式

　　5，導(dǎo)入SVG文件到Sketch中，進(jìn)行編輯。

　　遷移：我的圖案

　　除非你是一個純粹的扁平設(shè)計師，否則你會需要在設(shè)計中使用到圖案材質(zhì)。你的客戶可能也會要求。 Sketch有躁點預(yù)設(shè)，但是如果你有更高的要求，你可以在把Photoshop的圖案文件保存為單獨的圖案文件，然后導(dǎo)入到Sketch的圖案文件庫。沒有遷移工具?？梢栽囋嘢ubtle Patterns，一個圖案網(wǎng)站。

　　如何遷移PSD文件?

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

　　不過，用Sketch重現(xiàn)Photoshop設(shè)計非常簡單。畫圖形、上顏色，應(yīng)用Photoshop類似的陰影效果即可。圖標(biāo)和樣式部分是最困難也是最重要的一部分。作為一名設(shè)計師，應(yīng)該專注設(shè)計基礎(chǔ)(設(shè)計原則、簡潔的設(shè)計元素、像素完美等等)，不要依賴那些使用特定軟件實現(xiàn)的效果，比如樣式、濾鏡、動作。

　　Sketch雖然很新，但是很多出色的設(shè)計師已經(jīng)開始分享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

　　我也分享一下我自己的文件

　　通常我是不會分享我的設(shè)計文件的，但是，既然它能幫助新用戶更快上手Sketch，那么我就破例一次吧。

　　Pinterest Concept

　　iPhone(Phone image by Paul Flavius Nechita)

　　Dribbble Concept

　　Marcelo Marfil還制作了一系列視頻：《如何創(chuàng)作一個自定義的Sketch UI》

　　結(jié)語

　　除非你像我一樣，已經(jīng)使用了3個月以上的Sketch，要不然你可能還是會回去用Photoshop，編輯老的PSD等需求，或者圖片編輯、圖片繪制、等重的圖片設(shè)計工作。然而，我們需要知道的是，有一種Photoshop的替代品，它可以完全專注于用戶界面設(shè)計。一種集結(jié)了Photoshop、Illustrator和Omnigraffle等優(yōu)勢、可以匹敵Adobe的工具。

最新評論