繪製 Mockup 的工具,目前戰最兇的應該就是 PS 和 Sketch 吧,在課堂上有學員問了這個問題。我自己是 Photoshop 派的,會推薦初學者學習的也絕對是 Photoshop。

初學者轉行

初學者?那更要先從 Photoshop 開始。

現在網頁流行首頁放張美美的大圖,圖庫裡的圖不是每張都剛好符合心中想呈現的感覺,直接下載就能直接套用啊,起碼也要套個濾鏡或是調個色。不開 Photoshop 就只能開 Keynote 修圖了(不要笑, Keynote 的去背功能和調色功能很好用)。

在我工作的經歷中,修照片調色調合成是常常在做的事,有的客戶甚至拒絕使用向量圖,要求使用照片,營造貼近人們生活氛圍的質感。

專把 PS 當成影像處理軟體使用,圖片改一改再套回 Sketch 當然也是一種作法。但對初學者而言就是得學習 2 套軟體的操作。

若是平面設計師轉職 UI…目前我還沒遇到完全不會 Photoshop 的平面設計師,跨行學習要花費非常多的時間,比起重新學習一套軟體操作,不如先把 UI/UX 知識補一補,換一種思考方式操作自己原本就熟悉的工具,門檻會稍微低一點。

沒事幹嘛淨身出戶?能延用就延用啊,買新軟體也是成本、花時間重新學習也是成本。

而且不能保證未來不會遇到和 Win 系統一起工作的情況,雖然可以轉檔,但轉檔=可能會出事。以往轉檔合作經驗不太好,能用原始檔直上最保險。

向量

很多人愛講向量圖放大縮小不失真,說得好像 Photoshop 沒這功能似的。PS 的形狀圖層也是向量圖,畫 Mockup 並不需要太花俏或炫技的軟體操作技術,重點在介面好不好用上。

當然扁平風的 UI 都用向量做。但有時候手癢會想刻個擬物風 icon,我會用形狀圖層畫出物件輪廓、圖層樣式加上基本底色後,開新圖層用筆刷繪製細節。


ANNA SUI wallet

2013 年的舊作品,(嘖、最近都沒在畫這類圖,想掏個新一點的東西出來還找不到)。所有物件都是「向量」,形狀圖層和圖層樣式設好基底後,貼材質,再用筆刷上高光、上陰影,所以許多細節部份是「像素」。

至於向量圖放大縮小失不失真呢…當然沒辦法把一顆 800px 尺寸的 icon 放大到貼捷運整面牆的程度,但放大 5 倍沒有問題。形狀圖層是向量圖,所以不管怎麼放大縮小 icon 輪廓線一定是銳利的,當然放大倍率不能太誇張,不然材質會糊掉。嘛…螢幕上看看而已沒有要印刷,放大 5 倍沒問題,很夠用了。

網路資源

Photoshop 的外掛工具多到眼花撩亂,說網路資源學習管道更是完爆 Sketch。我超愛買的「創意市集」 Creative Market 大部份都是 PS 檔。光是每月驚喜大包我就買過很多次,好用省事~

另附上兩間我幾乎每個都買了的外掛商:

Ui Store | Creative assets and tools for designers

喜歡自己畫小 icon 的,JetPack 必買,自動轉向量的描圖完爆 AI 內建功能。

Blocs 2 有許多常見樣板可以不寫一行 Code 做出 RWD 網頁,快速產出 Landingpage 必備。不套程式的話這款我會推工程師用喔!自選樣板、換圖打字就好,整組都設計得美美的了。

Source – We create time-saving tools for designers and developers.

PSD Cleaner 特別標這一個外掛,自從收過一次幾百個圖層命名亂七八糟、沒群組沒整理、還留了一堆該刪的圖層不刪的 PSD 檔後,立刻買了這外掛。幫你檢查圖層哪裡忘了整理的好用工具,協作必備!

上手速度

上手快這件事我不確定,畢竟大部份的人都先用熟 Adobe 系列再轉去用 Sketch,學習困難的挫折都算在 Adobe 身上了。想聽聽先學會 Sketch 再回頭學 Photoshop 的人的看法。

我自己用 Sketch 用到是一整個火大,操作習慣問題。在 Photoshop 使用快速鍵,按 1 下「V」是選取工具,按 2 下「V」是選取工具,連續按很多很多下「V」都還是選取工具。

但在 Sketch 裡,同樣的「V」,按第 1 下和按第 2 下,使用者操作的工具不同。之前我就抱怨過這一點了,有讀者說這不是問題,看工具列哪個工具被選中,現在就是在用哪個工具啦~

…那我還要快速鍵幹嘛?用 PS 我可以目光專注在畫稿上,按什麼鍵盤快速鍵就是什麼,不確定有沒有按到還可以多戳幾下沒事。到 Sketch 我還得中斷思考把目光到工具列上瞄一眼現在有沒有選錯?(不要跟我說工具列又沒離畫稿多遠,每次切換工具就中斷一瞬思考試試?)

Sketch 只能用在 Mac、偶爾會有 Bug(可能我比較衰)、偶爾當個機(可能我和它犯沖)之類的狀況就不提了,總之我最在意的功能 Sketch 沒有,倒是 AFFINITY DESIGNER 辦到了。要我放下 Photoshop 換一個畫 Mockup 的工具,短期內不可能。

繪圖風格

很多我喜歡的大神作品都沒辦法用向量軟體繪製,這無解,前幾年會搞出上面那顆 icon 也是受了不少 Dribbble 作品的影響。


Mike | Creative Mints

是 Dribbble 上的知名大神,我非常喜歡他的作品,素描水彩手繪底子紮實。最近他的作品用了 ZBrush,害我也默默爬了不少 ZBrush 的教學文,然後發現 ZBrush 真不是給初學者用的。以前在 Win 時代用慣的 3DMAX 沒有 MAC 版;問了台灣經銷商,C4D 貴到爆…更別說 Maya。還是先玩看看不用錢的 Blender,再不然 Photoshop 也有陽春的 3D 功能。


Eddie Lobanovskiy

那顆鬆餅和牛排的 icon 相信看過的人都印象深刻。雖然不知道為什麼要刻一個牛排的 icon,但設計師總是希望自己做出來的東西能越酷炫精緻越好,作品完成後的爽字和成就感很難形容。

總之,雖然現在扁平風當道,就技術上和 UI 工作上我也是都做向量,但絕對不會放棄擬物風的!Photoshop 功能多、肥大是缺點,但換個角度看,要 3D 有陽春 3D、要動畫可以做逐格 GIF、要修照可修照、要畫向量可畫向量,基本我在工作上會用到的功能一款 Photoshop 全包。能一套解決不用開其他軟體切來切去(不用煩惱相容性),很棒啊~

Sketch 是好工具,能快速繪製 Mockup ,但「請配合目的來選擇適合自己的工具」。

comments powered by Disqus