一篇文章教你看懂Photoshop和Sketch

2021-02-08 老王撩產品

寫在前面:最近有做UI的朋友問我sketch和ps到底有什麼區別?是不是sketch可以代替PS了呢?這篇文章深度為大家講解這兩種軟體的區別和做UI設計的優劣!

圖片為Photoshop2018版本啟動界面

先來說一下我們設計界的老大哥,photoshop即吃瓜群眾眼中的ps

Adobe Photoshop作為一款標準工業化的圖像處理軟體和最先應用PSD文檔格式的圖像處理軟體,其發展可追溯到80年代末,可謂歷史悠久啊!!!具體發展歷史大家可以自行百度這裡就不多說了,伴隨如此長久的版本迭代,Photoshop毅然決然的成為迄今為止世界上最暢銷的圖象處理編輯軟體。注意了!!!是圖像處理編輯軟體!!!請看下文:

Photoshop的專長在於圖像處理,而不是圖形創作。圖像處理是對已有的位圖圖像進行編輯加工處理以及運用一些特殊效果,其重點在於對圖像的處理加工;圖形創作軟體是按照自己的構思創意,使用矢量圖形等來設計圖形。涉及領域:平面設計、廣告攝影、影像創意、網頁製作、後期修飾、視覺創意,最後一點那就是界面設計,也是大多數UI設計師所熟知的!由此可見在photoshop中,對於這個功能複雜的龐然大物,界面設計只是小小的一部分功能!

第二來說說設計界新晉新星:sketch

還不認識的同學記住這個大鑽石sketch

sketch我沒記錯的話應該是從15年開始在大家面前出現的,那個時候用的人還很少,國內有不少先驅推廣,到目前為止已經迭代了不少的版本了。sketch是一款輕量級的矢量設計工具!那麼重點來了,請看下文:

關鍵點一是矢量設計工具,既然是矢量設計工具,好處我便不多說了,例如像素完美級別的處理等等~關鍵點二輕量級,既然說是輕量級,不得不說的是軟體的安裝包真是很小很小,只有小小20多M,相比較ps兩個多G的大小,sketch在安裝這方面真的是方便了很多。不了解該軟體的同學可能會問了,軟體這麼小能滿足日常設計需要嗎?功能多嗎?這麼問一點毛病都沒有!相比於ps來說,sketch的功能確實真的不是很多,但是確實能夠滿足對於那些單純做UI的同學來說,設計app,web,出圖切圖是完全足夠的!關鍵點三呢,也是sketch對於其他軟體的一個優勢,豐富的插件庫,sketch的插件對於軟體本身來說就是如虎添翼的感覺,讓你的設計效率達到非一般的感覺!

各有利弊

ps和sketch在正常的設計工作中都不是必不可少的,因為當下UI設計師不會純粹的只做GUI的工作,像平面類的海報,易拉寶都會做,在做這些的時候必然是使用圖像處理比較強的ps,如果你只是單純是一個平面設計師,你可以不用考慮sketch了,因為sketch是更注重在UI設計方向的設計工具。

現在依然有很多設計師在使用ps製作ui方面的設計稿,雖然ps cc在2017版本的對於切圖方面做了重大改進,目前ps的插件也在不斷增加,但有一個不可避免問題就是ps出的圖的文件都很大,而且ps吃內存的問題很讓人苦惱,還有一個問題就是大量的緩存文件。相比之下sketch不會存在這些問題,雖然sketch在繪製複雜的圖形上還稍有欠缺,但是這個問題可以通過illustrator解決,在illustrator中繪製的圖形完全可以複製到sketch中。

最後要說很關鍵的一點就是sketch只能在mac上使用,瞬間很多用win系統的同學感覺不公平啊!!!目前sketch只支持蘋果系統,這確實也是有點坑人!

sketch也是收費的其實,但是相比於ps來說它的價格是更美麗的,只有99$(一年),教育版的則更便宜,大家可以不用破解軟體了!

最後稍作總結呢,如果是工作中偏UI的工作比重很大,個人建議一定要使用sketch,同時你需要入手一臺蘋果電腦,在這推薦macbook pro,在財力允許的情況下內存需要16G的最好,如果不夠的話,乞丐版的pro也是足夠使用的,至於工作偏平面的同學則不需要了,ps還是非常棒的!!!

本文由@最美PM原創發表,未經許可禁止轉載!

相關焦點

  • sketch教程 介紹篇
    之前大家基本上都是用Axure來畫產品原型,但是說句實在話,用Axure畫原型實在是太醜了。Sketch教程 | 介紹篇自從學會了Sketch,Glen已基本棄用Axure和PS了,好東西不獨享,這裡整理一個系列教程,分享給大家。介紹篇先講講為什麼用上了Sketh基本可以棄用Axure+PS了。1.
  • 為什麼sketch中預置的畫布尺寸比真實解析度小?靜電告訴你答案
    這個問題被成百上千的初學者問起過,每次都要費勁口舌來解釋,「其實Sketch的做法沒錯,就是這個樣子的,原理是什麼什麼什麼」。可是靜電實在架不住每天兩三遍甚至更多人問起同樣的問題。那麼,就在這篇文章中,讓我們好好來解釋一下,為什麼預置畫板會這麼小。
  • zeplin和sketch協作的三個小竅門
    相信作為一個有追求的設計師,大家都用上了省時省力的神奇zeplin了吧,相比於其他的標註,它的優點就不用多說了,更新後的zeplin不僅支持photoshop
  • 產品設計常用工具Sketch破解版和漢化下載
    相比與photoshop在圖片處理,平面設計等方面的強大功能,Sketch在這些方面可能並不突出,但是sketch針對web和UI設計做了最大程度上的優化,在流程,交互,UI等方面的設計表現更專業,從構思和實施的每一個步驟都可以使用它,尤其是在設計App的時候,它內置了iOS用戶界面設計常用的模板和組件,即使不會ps的人也可以快速的設計出高顏值的APP界面。
  • Symbol讓你正確打開Sketch
    sketch作為一個新生的設計工具,雖然在功能上沒有photoshop那麼完備,但是勝在其輕量級,完美告別ps的卡頓和無處不在的加載條
  • 善用新功能,老司機帶你榨乾Sketch
    前言我與 Sketch 的結緣源於近四年前設計師 Meng To 發表了一篇比對 Sketch 和 Photoshop 的文章 [1] ,為他在網上預售他的電子書「Design+Code」造勢。誰知道在這個關鍵的節點,德國低調的大神設計師 Ivo Mynttinen 在他的 Blog 發表了一篇關於數據設計的文章——《Designing Data with Sketch[4]》,讀完文章之後,不僅更加佩服 Ivo,也更難以掩飾自己對 Sketch 那份滿滿的要溢出的愛來。接下來,咱們就聊聊 Sketch 在我們設計圖表的時候,能有什麼表現吧。
  • 資源共享 | sketch軟體+教程 輕鬆上手 分分鐘擼圖
    sketch軟體(持續更新中)https://pan.baidu.com/s/1sU5RqlMXmTCo27D_-pf-yQ
  • sketch阻擊手?Adobe Creative Cloud 2015 啟動界面搶先欣賞
    靜電第一時間下載使用了photoshop CC 2015,這個號稱sketch阻擊手的,並且大幅引入sketch特性的軟體,面對這個巨無霸,習慣了fireworks和sketch操作流的靜電並沒有給與這個軟體多積極的評價,有時候,他更像一個四不像,雖然功能全面,但過於繁重難以上手,引入的artboard功能更是跟自家的畫布之間的層級關係傻傻地分不清楚
  • Sketch 插件導出切片
    通過 Sketch 導出的在線標註能夠節省很多溝通的成本。除了標註之外還有個比較重要的功能就是切圖的導出。Sketch 中如果要導出一張切圖,需要將其標記為切片(Slice)。在 Sketch 中切片的標記是多種多樣的,針對不同的切片標記插件需要處理的邏輯也有細微的差別。下面我們就來看看不同的切片操作在插件中應該如何導出吧。
  • 一篇文章讀懂PS「圖層」的N多用法
    ,圖層可以說是photoshop裡面最基礎的一塊內容,但是很多人對圖層理解的不是很透徹,甚至有很多剛接觸後期的小白,覺得圖層是攔路虎,之前寫了非常多的教程,但是並沒有系統的來講一些photoshop裡面的圖層;有朋友留言說,希望可以講一下圖層,那今天就用一篇文章帶你理解:圖層的基本操作;進階的調整圖層,智能圖層,剪切圖層以及圖層在曝光合併裡面的重要應用。
  • Sketch能幹的Photoshop都行!
    這幾天,這個強大的工具終於開放測試啦~~雖然說很多設計師比較推薦sketch,可是這回了不得!sketch有的功能,PS都能實現了!打開Photoshop 中的UI-DNA 面板,你就能看見它的所有相關的功能了。不同的功能也都有相應的子區域,點擊右上角的按鈕就可以將子區域的功能展開或者收起:
  • Sketch插件六|基於GoogleMap生成地圖|
    這次馬克筆設計留學的MUzi老師教大家快速生成地圖的插件Map Generator 3.0,它的地圖資源由谷歌和MAPBOX提供,
  • 【新人教程】一篇文章教你玩轉美國支票
    一篇文章教你搞懂個人支票,空頭支票,現金支票,匯票,電子支票。在美國日常生活中,支票(check)是使用非常頻繁的轉帳支付方式, 也是目前美國主流的支付方式之一。從國內剛來美國的朋友可能還不太熟悉,畢竟國內電子支付早就成為了主流。支票做為較為傳統的方式,小到買一杯咖啡,大到買車買房,都有用武之地。
  • 慄子UI從零開始學sketch3
    但除了矢量編輯的功能之外,我們同樣添加了一些基本的位圖工具,比如模糊和色彩校正。我們盡力讓 Sketch 容易理解並上手簡單,有經驗的設計師花上幾個小時便能將自己的設計技巧在Sketch中自如運用。對於絕大多數的數字產品設計,Sketch 都能替代 Adobe Photoshop,Illustrator 和 Fireworks。」
  • 這也許是比較全面的sketch轉psd的教程了!
    看到標題,其實今天聊啥已經沒有了啥懸念,可能sketch轉psd對於大多數同學來說已經不是什麼新鮮事,但是今天我想把他更全面的整理下,用一些圖文說明讓這個操作變得更加的通俗易懂。Photopea相信大家都不陌生,我之所以把Photopea定義為入門轉換,是因為Photopea真的有很多未知的Bug,比如不支持中文的轉換,就是在Photopea顯示不出來中文,只有轉換之後用photoshop打開才能顯示,其次Photopea是一個國外團隊開發的線上工具,所以有時候人品不好的時候就無法打開使用。
  • 五分鐘了解谷歌全棧設計師打造的 Sketch 插件:Sketch Material
    6、吐司生成 | Snackbar吐司生成功能支持移動端和桌面端的吐司,所有可見欄位均可編輯。另外,你也可以選擇隱藏或顯示按鈕。style/typography.html#typography-typeface)10、浮高調整 | Elevations當你選擇一個圖層或分組時
  • 我為什麼喜歡sketch?
    Adobe XD出來了,第一時間試用,感覺除了repeat grid和hotspot好像沒什麼亮點。筆者是一名無線UI/UE設計師,還是無比鍾愛SK。呼喚還在使用Adobe PS/AI的小夥伴們,大膽嘗試,設計效率將會提升百倍。
  • 如果你是UI設計師,你應該看看這篇Sketch3使用後感
    如果你是ui設計師,恰巧手頭邊有有osx系統,可以進來看看這個革命性的產品。如果暫時沒有沒關係,看完這個貼,估計你可能會中毒。這個月組織學習了Sketch3,感受最深的是我看到的圖標,界面不再鋸齒! Skech是一款輕量級的矢量工具,如sublime text如此高效的工具。 我們來看下sketch的界面。
  • 一篇文章看懂EOS主網上線對你的影響!
    他提醒說:「除非你從五個有公信力的消息源處獲取信息,否則不要輕舉妄動。我所指的有公信力的消息源是在同一天就同一件事情同時發表相同聲明的那些節點。除非你親眼所見,否則不要輕舉妄動。」由 EOS.IO 軟體提供的任何安全性在一定程度上,取決於如何使用、配置和部署。EOS.IO 建立在許多第三方函數庫上,如 Binaryen(Apache License)和 WAVM(BSD 3-clause),也是在沒有任何形式的保證下提供 「按原樣(AS IS)」 代碼。
  • 【乾貨教程】萌萌噠機器人 用sketch手把手教你做
    ↑↑↑伸出手指點這裡原創/自譯教程:用sketch創作萌萌噠機器人形象(翻譯)本作品由站酷網:紫豔冰琳 原創,未經許可請勿作商業用途。本教程介紹的是如何在sketch中用最簡單的形狀、線條以及快捷鍵來創作機器人形象。作者創作了以下幾種機器人形象。