教你如何從Photoshop遷移到Sketch

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

@teambition :sketch可以說是photoshop最佳替代,而且比起photoshop,它更側重于用戶界面的設計。雖然目前sketch素材還是太少,不過我正在著手解決這個問題。文章源自四五設計網-http://www.wasochina.com/10346.html

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

教你如何從Photoshop遷移到Sketch-1
  可以到bohemiancoding下載試用版。如果因為需要付費而錯過了這款應用,那是得不償失,特別是它還不貴,價格只有photoshop的1/10。它能讓你的設計變得更加高效,一旦用上你絕對會愛上它。文章源自四五設計網-http://www.wasochina.com/10346.html

遷移:我的圖標(my icons)文章源自四五設計網-http://www.wasochina.com/10346.html

作為一個用戶界面設計師,圖標是唯一一種不必每次都從頭開始的組件。圖標被存儲為svg格式,這是是一種廣泛被使用的矢量格式,已經被越來越多地被用于css中,代替那種特定分辨率的內嵌圖片。文章源自四五設計網-http://www.wasochina.com/10346.html

教你如何從Photoshop遷移到Sketch-2
  從圖標集(icon sets )開始文章源自四五設計網-http://www.wasochina.com/10346.html

有免費和付費的兩種。付費版也不貴,非常適合入門級別的設計師。以下是我個人使用的svg圖標集列表:文章源自四五設計網-http://www.wasochina.com/10346.html

pixicon by jackie trananh ($5)文章源自四五設計網-http://www.wasochina.com/10346.html

symbolicons ($35)文章源自四五設計網-http://www.wasochina.com/10346.html

glyphicon ($59)文章源自四五設計網-http://www.wasochina.com/10346.html

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-3
  2,文件(file)——>導出(export)——>路徑到 illustrator(paths to illustrator),保存為.ai格式

教你如何從Photoshop遷移到Sketch-4
  3,在illustrator中,打開以上的文件,選擇所有形狀,設置為黑色。

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

教你如何從Photoshop遷移到Sketch-5
  5,導入svg文件到sketch中,進行編輯。

遷移:我的圖案

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

教你如何從Photoshop遷移到Sketch-6
  如何遷移psd文件?

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

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

教你如何從Photoshop遷移到Sketch-8
  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-9
  我也分享一下我自己的文件

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

pinterest concept

iphone(phone image by paul flavius nechita)

dribbble concept

教你如何從Photoshop遷移到Sketch-10
  marcelo marfil還制作了一系列視頻:《如何創作一個自定義的sketch ui》

  結語

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

繼續閱讀
我的微信
微信掃一掃
weinxin
我的微信
惠生活福利社
微信掃一掃
weinxin
我的公眾號
 
  • 本文由 四五設計網小助手 發表于 2022年9月5日11:05:49
  • 轉載請務必保留本文鏈接:http://www.wasochina.com/10346.html
    • 咩票電影 3

      原來還可以這樣操作

    發表評論

    匿名網友
    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    拖動滑塊以完成驗證