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

@teambition ：sketch可以說(shuō)是photoshop最佳替代，而且比起photoshop，它更側(cè)重于用戶界面的設(shè)計(jì)。雖然目前sketch素材還是太少，不過(guò)我正在著手解決這個(gè)問(wèn)題。文章源自四五設(shè)計(jì)網(wǎng)-http://m.wasochina.com/10346.html

備注：通過(guò)分析甚至是重復(fù)使用他人的作品可以取得進(jìn)步，然后開(kāi)始創(chuàng)作你自己的作品。在學(xué)習(xí)的時(shí)候，重新想像正試圖解決的問(wèn)題。學(xué)習(xí)他們的技巧，并它融入到自己的設(shè)計(jì)思考中去。文章源自四五設(shè)計(jì)網(wǎng)-http://m.wasochina.com/10346.html

　　可以到bohemiancoding下載試用版。如果因?yàn)樾枰顿M(fèi)而錯(cuò)過(guò)了這款應(yīng)用，那是得不償失，特別是它還不貴，價(jià)格只有photoshop的1/10。它能讓你的設(shè)計(jì)變得更加高效，一旦用上你絕對(duì)會(huì)愛(ài)上它。文章源自四五設(shè)計(jì)網(wǎng)-http://m.wasochina.com/10346.html

遷移：我的圖標(biāo)(my icons)文章源自四五設(shè)計(jì)網(wǎng)-http://m.wasochina.com/10346.html

作為一個(gè)用戶界面設(shè)計(jì)師，圖標(biāo)是唯一一種不必每次都從頭開(kāi)始的組件。圖標(biāo)被存儲(chǔ)為svg格式，這是是一種廣泛被使用的矢量格式，已經(jīng)被越來(lái)越多地被用于css中，代替那種特定分辨率的內(nèi)嵌圖片。文章源自四五設(shè)計(jì)網(wǎng)-http://m.wasochina.com/10346.html

　　從圖標(biāo)集(icon sets )開(kāi)始文章源自四五設(shè)計(jì)網(wǎng)-http://m.wasochina.com/10346.html

有免費(fèi)和付費(fèi)的兩種。付費(fèi)版也不貴，非常適合入門級(jí)別的設(shè)計(jì)師。以下是我個(gè)人使用的svg圖標(biāo)集列表：文章源自四五設(shè)計(jì)網(wǎng)-http://m.wasochina.com/10346.html

pixicon by jackie trananh ($5)文章源自四五設(shè)計(jì)網(wǎng)-http://m.wasochina.com/10346.html

symbolicons ($35)文章源自四五設(shè)計(jì)網(wǎng)-http://m.wasochina.com/10346.html

glyphicon ($59)文章源自四五設(shè)計(jì)網(wǎng)-http://m.wasochina.com/10346.html

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)集，那么這個(gè)導(dǎo)出的流程會(huì)稍微復(fù)雜一些。除了photoshop之外，還需要使用到illustrator：

1，在photoshop中，選擇所有的photoshop形狀層 ( shape layers )和合并形狀(merge shapes)。

　　2，文件(file)——>導(dǎo)出(export)——>路徑到 illustrator(paths to illustrator)，保存為.ai格式

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

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

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

遷移：我的圖案

除非你是一個(gè)純粹的扁平設(shè)計(jì)師，否則你會(huì)需要在設(shè)計(jì)中使用到圖案材質(zhì)。你的客戶可能也會(huì)要求。 sketch有躁點(diǎn)預(yù)設(shè)，但是如果你有更高的要求，你可以在把photoshop的圖案文件保存為單獨(dú)的圖案文件，然后導(dǎo)入到sketch的圖案文件庫(kù)。沒(méi)有遷移工具。可以試試subtle patterns，一個(gè)圖案網(wǎng)站。

　　如何遷移psd文件?

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

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

　　sketch雖然很新，但是很多出色的設(shè)計(jì)師已經(jīng)開(kāi)始分享sketch文件了。坦白的說(shuō)，自定義sketch甚至比psd更簡(jiǎn)單。：)

sketch ios kit by marcelo marfil

safari and ios6 template by benjamin de cock

navigation bars

ios message ui by ben breckler

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

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

pinterest concept

iphone(phone image by paul flavius nechita)

dribbble concept

　　marcelo marfil還制作了一系列視頻：《如何創(chuàng)作一個(gè)自定義的sketch ui》

　　結(jié)語(yǔ)

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