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

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

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

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

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

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

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

有免費(fèi)和付費(fèi)的兩種。付費(fèi)版也不貴，非常適合入門級(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中，打開以上的文件，選擇所有形狀，設(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ù)。沒有遷移工具?？梢栽囋?a target="_blank" target="_blank" rel="nofollow">Subtle Patterns，一個(gè)圖案網(wǎng)站。

如何遷移PSD文件？

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

不過，用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)開始分享Sketch文件了。坦白的說，自定義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é)語

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

會(huì)讓你愛上Sketch的那些好文！

心動(dòng)了！超好用的預(yù)覽圖神器！
《想要一稿過不加班？Sketch絕配神器Mirror搶先體驗(yàn)》

心動(dòng)不如行動(dòng)！方便貼心功能合集！
《UI設(shè)計(jì)師新寵！聊聊sketch那些方便好用的貼心功能》

直接上教程，看效果也是超贊的，過程還簡(jiǎn)單！
《SKETCH設(shè)計(jì)教室！從零開始學(xué)APP設(shè)計(jì)利器SKETCH（二）》

原文地址：blog.mengto
譯文地址：www.teambition.com

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量83萬的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：