高效省時教程!Photoshop用戶如何遷移到Sketch?

編者按:據某團隊透露,自全司上下都配備Macbook后,設計部的同事們紛紛將Photoshop換成Sketch,改變過程折騰了相當一段時間,于是留下此文,教你如何從Photoshop遷移到Sketch,那些正準備轉移陣地的同學,節省時間就從這篇開始咯。

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

備注:通過分析甚至是重復使用他人的作品可以取得進步,然后開始創作你自己的作品。在學習的時候,重新想像正試圖解決的問題。學習他們的技巧,并它融入到自己的設計思考中去。

高效省時教程!Photoshop用戶如何遷移到Sketch?

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

遷移:我的圖標(My Icons)

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

高效省時教程!Photoshop用戶如何遷移到Sketch?

從圖標集(Icon Sets )開始

有免費和付費的兩種。付費版也不貴,非常適合入門級別的設計師。以下是我個人使用的SVG圖標集列表:

Pixicon?by Jackie Trananh ($5)

Symbolicons?($35)

Glyphicon?($59)

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)。

高效省時教程!Photoshop用戶如何遷移到Sketch?

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

高效省時教程!Photoshop用戶如何遷移到Sketch?

3,在Illustrator中,打開以上的文件,選擇所有形狀,設置為黑色。

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

高效省時教程!Photoshop用戶如何遷移到Sketch?

5,導入SVG文件到Sketch中,進行編輯。

遷移:我的圖案

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

高效省時教程!Photoshop用戶如何遷移到Sketch?

如何遷移PSD文件?

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

高效省時教程!Photoshop用戶如何遷移到Sketch?

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

高效省時教程!Photoshop用戶如何遷移到Sketch?

Sketch雖然很新,但是很多出色的設計師已經開始分享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

高效省時教程!Photoshop用戶如何遷移到Sketch?

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

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

Pinterest Concept

iPhonePhone image?by Paul Flavius Nechita)

Dribbble Concept

高效省時教程!Photoshop用戶如何遷移到Sketch?

Marcelo Marfil還制作了一系列視頻:《如何創作一個自定義的Sketch?UI》

結語

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

會讓你愛上Sketch的那些好文!

心動了!超好用的預覽圖神器!
《想要一稿過不加班?Sketch絕配神器Mirror搶先體驗》

心動不如行動!方便貼心功能合集!
《UI設計師新寵!聊聊sketch那些方便好用的貼心功能》

直接上教程,看效果也是超贊的,過程還簡單!
《SKETCH設計教室!從零開始學APP設計利器SKETCH(二)》

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

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

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

高效省時教程!Photoshop用戶如何遷移到Sketch?

收藏 2
點贊

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。