UI/UX影像處理、網頁設計軟體:推薦書單、課程

網頁設計 UIUX PS AI XD 軟體書單 課程推薦

並非只有網頁設計才需要學影像處理軟體,尤其如果你有經營網站、部落格、粉絲專頁的話!你一定會需要做一些影像處理,像是做一些宣傳圖片、或是照片的 Resize、上字、修剪、解析度調整、美化等。

 

而前端工程師和網頁切版,除了網站操作、程式語法之外,也要會處理設計師提供的設計稿原始檔,將需要的圖片擷取、切出來。因此設計常用的幾款「網頁設計軟體」也要會操作才行。

 

世界最著名的影像處理軟體:PhotoShop

 

Photoshop 案例實作推薦書
書名

正確學會Photoshop CC的16堂課

我一直很喜歡施威銘研究室的 16 堂課系列,Dreamweaver 的部分也有推薦這系列的書籍。這本我還是萌新時也自己讀過,覺得非常實用,功力大有進展。

實作切分為 16 堂課,由淺入深的方式,對於初學者剛進入 PS  的世界掌握基本功能有很大的幫助。

購買連結

 

Photoshop 推薦線上課程

 

網頁設計 Photoshop 線上學習課程 推薦
課程名稱

Photoshop 2021小白輕鬆成高手,從零開始學會PS,輕鬆搞定摳圖修圖設計美工特效自媒體應用

內這個課程雖然不是最多人購買,但是中文教程裡最新 2020 年所錄製,且比起其他中文課程太過著重理論、或工具式的逐一教學較為無趣,我覺得這個課程的規劃是比較實用型的!邊學就能得到樂趣。

且前面幾章規劃的,正好就是我認為至少必須熟悉的功能,像是照片的存取、操作、大小、文字添加等,另外圖層的部分也要懂,但一樣不需太進階。

評分:4.4 (21 个评分) 144 students

售價:便宜CP值高
課程連結

網頁工程師、網站自架者等⋯⋯如果你不是要往網頁「設計」方向走,軟體的學習你只需學到「基礎操作熟悉」(要熟悉喔!) 即可,更應該著重的是加強美感、學會辨識好的設計和不好的設計對你來說更為重要!

向量圖形繪製:Adobe Illustrator

Illustrator 你不一定要學,因為現在繪製網頁設計圖稿大多使用Adobe Photoshop 或是 Adobe XD 另外還有 Sketch 等⋯⋯,因為 Illustrator 的特性比起上述兩款比較不適合用在網頁設計稿的繪製,不過還是有設計師會用 Illustrator 來繪製設計稿,包括我自己都習慣用它來做網頁設計。

 

但你也不必太擔心萬一沒學遇到怎麼辦,因為 Adobe 系列的軟體大致上邏輯都相通,你學會 Photoshop 相當於也學會了部分的 illustrator,至少你應該會具備基礎的將圖擷取出來的能力,或稍加學習後就能具備。

 

當然如果有餘力的話,Illustrator 其實是一套非常有特色的繪圖軟體!向量繪圖的效果非常的精美!不會失真的特性,也讓 Illustrator 的網路素材可改性非常高,創作的自由度比起 Photoshop 更靈活,更直覺!非常推薦的一套軟體,也是為什麼我偏愛使用它!

 

illustrator 16堂課 案例實作推薦書
書名

正確學會 Illustrator CC 的16堂課

內一樣推薦施威銘研究室的 16 堂課學會系列!但我要老實說,其他推薦的兩本我都看過,唯獨 Illustrator 這本我沒看過,因為我的 Illustrator 是在大學遇到厲害的老師所教導的!

Illustrator 的繪圖特性讓他很多繪圖的技巧我認為看實際操作,並且詳加練習後比較能真正記住和學會!因此如果要學 Illustrator,我會比較推薦線上課程喔!如果你還是習慣要有書來輔助的話,16堂課系列的優良血統值得你考慮!

購買連結

 

Illustrator 推薦線上課程

網頁設計 illustrator 線上學習課程 推薦
書名

Illustrator CC 2018 手把手入門應用技巧

Illustrator 的中文課程非常之少,它比起 Photoshop 更符合「電腦繪圖」這個名詞,但假如你真的不會繪圖,也不用太擔心!因為我也不會畫畫!但 Illustrator 很多繪圖都是由小部件組合起來的,而那些小部件用它的一些工具就能產生,非常的有趣!

我看了這個課程的大綱,我認為是不錯的教程!有讓我回想起大學學這些技法時的記憶,對自己創造圖像有興趣的人,一定要學這套!

評分:4.7 (3 個評等) 2 students

售價:2,790
課程連結

 

Adobe XD:新時代的網頁設計軟體,更符合現代的網頁設計

講故事時間到了!

很多人會疑問,Adobe XD 和 Photoshop 有什麼差異?Photoshop 其實最早是拿來做「影像處理」也就是處理相片用的,像是早期所說的「修很大」幾乎都是用 Photoshop 修的,不管是修人像、海報、設計等⋯⋯,後來也廣泛用在網頁設計上。

 

但網頁畢竟跟照片有根本上的設計差異,處理影像用濾鏡、調色等功能網頁設計幾乎不用那些。且近年 APP 和極簡風盛行,網頁其實就是一些幾何元素的組成,比較偏向 UI/UX 設計,市場也因此出現了 Sketch 這樣專門設計 UI/UX 的軟體!並且大受業界歡迎!

 

一直以來的霸主 Adobe 感受到壓力後,才催生出了 Adobe XD 這套 UI/UX 設計軟體,並開放免費使用!

為什麼我推薦的是 XD 而不是 Sketch?

一是因為 Sketch 只推出 Mac 版本,Windows 使用者無法使用。二則是上述的 Adobe 軟體用習慣,再學習 Adobe XD,學習成本大大降低,不過聽說 Sketch 也很好學!但考慮到它只支援 Mac,萬一你丟檔案的對象沒有 Mac 那就麻煩了!

Adobe XD 推薦線上課程

這套軟體我沒用書學過,所以直接推薦兩套線上課程,如果你有先學 Photoshop 或 Illustrator 的情況下,應該可以很快上手!

網頁設計 版面設計 Adobe XD 線上學習課程 推薦
書名

從 Adobe XD 入門網頁設計

內容較少、價格相對較便宜,但還是足夠你認識 XD 的網頁設計功能、規劃 Wireframe 線框稿,製作 Prototyping 原型等!

評分:4.3 (287 个评分) 1349 名学生

售價:價格便宜但內容較少
課程連結

 

網頁設計 版面設計 Adobe XD 線上學習課程 推薦
書名

Adobe XD:網頁設計真容易

內六角學院的課程我上過幾個!都很優質,且符合業界現況,但缺點就是價格會比較高一點,如果想扎實學習的話,一千多學一個終生的技能其實一點都不貴呢!

評分:4.7 (165 个评分) 727 名学生

售價:1,590
課程連結

 

網頁工作者必備的基礎的設計美學、UX 觀念

網頁設計的 UX 與 美學基礎 書推薦
書名

如何設計好網站之UX與美學基礎

這本是針對網頁設計的美學、UI/UX 來做討論,作者是外國人,認為網頁製作者只需要有剛剛好足夠的美學概念即可,跟我的想法不謀而合!這本書也很適合純設計要誇入網頁設計閱讀,我遇過一些很厲害的設計,但提供給我的設計稿讓我差點吐血!因為他們只顧好看,而忽略了在網頁上應該要有網格的設計概念,導致有畫面根本無法網頁化!

購買連結

 

 

上一篇不要想折彎湯匙,該改變的是自己:電影駭客任務 下一篇你該要懂的簡單設計:有了美感、世界開始有了質感