據(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)題。

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

　　可以到BohemianCoding下載試用版。如果因?yàn)樾枰顿M(fèi)而錯(cuò)過(guò)了這款應(yīng)用，那是得不償失，特別是它還不貴，價(jià)格只有Photoshop的1/10。它能讓你的設(shè)計(jì)變得更加高效，一旦用上你絕對(duì)會(huì)愛(ài)上它。

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

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

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

　　有免費(fèi)和付費(fèi)的兩種。付費(fèi)版也不貴，非常適合入門(mén)級(jí)別的設(shè)計(jì)師。以下是我個(gè)人使用的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)集，那么這個(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)有遷移工具?？梢栽囋嘢ubtle 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)單。畫(huà)圖形、上顏色，應(yīng)用Photoshop類(lèi)似的陰影效果即可。圖標(biāo)和樣式部分是最困難也是最重要的一部分。作為一名設(shè)計(jì)師，應(yīng)該專(zhuān)注設(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的替代品，它可以完全專(zhuān)注于用戶界面設(shè)計(jì)。一種集結(jié)了Photoshop、Illustrator和Omnigraffle等優(yōu)勢(shì)、可以匹敵Adobe的工具。

最新評(píng)論