7 個 Photoshop 網頁設計專案 – 通過實踐學習網頁 UX 體驗設計

學習 Photoshop 網頁設計! 從頭開始到建立 7 個網頁設計專案

課程介紹:English 简中

從這 15 小時的課程,你會學到

  • 建立網頁設計,提供一個很棒的使用者體驗
  • 通過學習設計一個良好的使用者體驗來幫助你的客戶拓展業務
  • 學習如何建立很棒的網頁設計,幫助你的客戶成長,也幫助你設計業務(並可能最終帶來超出你能力範圍的工作)
  • 你將學習7種最流行的網頁設計風格
  • 你會知道什麼樣的設計風格可以避免(以及為什麼)
  • 你將學習附加服務,你可以為你的網頁設計客戶端提供額外的服務
  • 你將學會如何像專業人士一樣修圖
  • 你將學習如何在成千上萬的網頁設計師中脫穎而出
  • 你將學習如何去除背景(非破壞性的… … 就像專業人士一樣)
  • 你將學習如何將一張普通的影象轉換成一件藝術品
  • 你將學習如何使用漸層來創造背景
  • 你將學習和掌握圖層和圖層遮罩( mask )
  • 你將學習如何使用智慧物件來保持你的工作完好無損
  • 你會發現保持你的圖層組織的重要性
  • 你將學習關於字型選擇的技巧
  • 你將學習字型排版的實用與否
  • 你會了解為什麼排版優先順序,與風格,是重要的,這可以更容易閱讀內容
  • 你將學習在你的網頁設計中應該使用什麼類型圖片的技巧
  • 你將學習在哪裡下載商業免費圖片,不需要許可證或署名
  • 你將學習如何使用 Grid 樣版來使你的網頁設計符合桌面和移動裝置的業界標準
  • 你將學習如何快速和容易地對多個圖層進行排列
  • 你將學習如何用一次點選來平均分配圖層之間的空間
  • 你將學習如何建立一個大型選單設計,並為開發人員組織它
  • 你將學習如何設計懸停狀態(hover states),以便開發者知道如何編碼你的視覺效果
  • 當你完成了所有7個網頁設計專案和建議的作業時,你已經掌握了我的前10個鍵盤快捷鍵,這將幫助你更快地工作
  • 在完成了所有 7 個網頁設計專案和建議的作業之後,你應該擁有一個 7 個網頁設計的作品集設計

要求

  • 願意通過實踐來學習網頁設計
  • 建議使用 Photoshop CC。 舊版本也是可以使用

課程說明

學習使用 Photoshop 做網頁設計,邊做邊學。 精通使用 Photoshop 做 UX 網頁設計。 網頁設計是關於使用者體驗的。

這個課程的目標是教你如何做網頁設計,通過實際的專案(而不是看著我設計) ,提供一個偉大的使用者體驗。

學習如何在 Photoshop 中建立偉大的網頁設計,並通過實際的網頁設計專案建立偉大的使用者體驗。 實踐學習網頁設計!

Photoshop-UX-網頁設計專案 1

你的第一個使用者體驗網頁設計專案將包括為 Nike 建立一個獨特的創意網頁。 你將通過設計簡報學習我的創意設計。 然後,你會學到挑選圖片的重要性,以及如何像一個專業人士從背景中移除主題 。

您將學習如何建立標題、大型選單、行動呼叫(Call-to-Action,CTA)等等。

一旦你已經練習了你所學到的,通過重做我的網頁設計,你將使用你的創造性的願景為你的作品組合開發一個網頁設計。

Photoshop-UX-網頁設計專案 2

這個使用者體驗網頁設計專案將讓你把一個舊的,過時的,房地產網站變成一個專業的設計風格。 新的設計是為了更好的 UX (使用者體驗)而建立的。 這將幫助客戶成長他們的業務,包括一個行動呼叫( Call-to-Action),顯示在前景將無法被忽略。

  • 您將瞭解不可抗拒的提議,以及如何通過 CTA 建立他們
  • 在 Photoshop 中如何建立客製化英雄部分( custom hero sections )與客製化形狀,
  • 如何使用圖層遮罩來顯示 / 隱藏不同的元素
  • 在 Photoshop 中使用人物影象的專業技巧
  • 關於決定照片類型的建議
  • 在 Photoshop 中,如何使用漸層使你的背景更加動態
  • 如何輕鬆更新您的客戶標誌,以更新具有更新的外觀
  • 如何提高你客戶的可信度
  • 關於如何通過有效的寫作(或外包)來對你的客戶促銷專業技巧
  • 關於如何通過偉大的設計來確定線索( leads )的專業技巧
  • 還有更多..。

你所學到的東西可以很容易地應用到任何類型的公司和網頁設計中。 另外,我將與你分享我的一個小祕密,增加可信度,提升你的客戶在社群中的地位,這也增加了更多的人與你的客戶做生意的機會。

Photoshop – UX – Web Design Project 3

Photoshop-UX-網頁設計專案 3

我們的下一個使用者體驗網頁設計專案包括更新另一個舊的,過時的網站,並給它一個新的,新鮮的,最新的設計。

在這個專案中揭示了許多新的技巧和網頁設計技巧。 瞭解為什麼我為這個網站選擇了一個 sticky 選單,為什麼我選擇了一個隱藏選單(通過漢堡圖示) ,我如何建立一個無縫漸層背景(從標題到英雄到頁尾)的現代風格,更多關於影像的專業技巧,如何使用第三方應用程式作為你使用者體驗網頁設計的一部分,等等。

Photoshop-UX-網頁設計專案 4

在這個使用者體驗網頁設計專案中,學習還在繼續! 以一個巨大的英雄形象作為使用者體驗設計的背景開始。 這種形象本身將提升這家公司現有的品牌,並將在它的領域作為一個領導者。 這張照片雖然很棒,但還可以做得更好。 我們將通過學習如何從前景中移除2輛汽車來使它變得更好… 你將學習如何像專業人士一樣進行潤飾。

這個網頁設計的下一部分,包括創造一個偉大的(UX)使用者體驗,通過給訪問者提供他們正在尋找的東西。 在這種情況下,是一個出租的地方。 你可以通過在 Hero 部分設計一個過濾器來實現這一點,這個過濾器可以讓訪問者縮小搜尋範圍。

如果訪問者還沒有準備好通過這個網站做生意,他們會在滾動到包括4個利益驅動的服務的第一部分。 你將學習如何從頭開始建立4個客製化圖示,以及如何向客戶推銷它們的好處。 另外,還有一些額外的技巧,可以幫助你和你的客戶溝通,告訴他們你為什麼要這樣設計頁面。

然後,我將為您提供一些使用者體驗設計技巧,使用 Command / Control J(Photoshop 快捷鍵)可以快速、輕鬆地新增多個列表。 這一部分的網頁設計專案有更多的專業技巧。 其中之一是安排,樣式和選擇字型,使其更容易閱讀的內容。

我們還沒有完成你將在這個專案中學到的東西! 事實上,我給你提供了兩項服務,你可以向你的客戶推銷(你會把你的設計放在第一位,因為它很容易做到,然後你再向他們推銷)。 其中之一可以把更多的錢在他們的口袋裡以較少的付出。 你的客戶很難拒絕你的錢。 最困難的部分是決定收費多少。 這完全取決於你。

Photoshop-UX-網頁設計專案 5

你的下一個使用者體驗網頁設計專案包括採用一個舊的,過時的,基於政府文字的設計和建立一個更基於影像的網頁設計。 為什麼要改變? “政府”正試圖向遊客推銷他們的地理位置景點,圖片比文字更能說明。 畢竟,”一張圖勝過千言萬語”。

  • 您將以一個簡單的 Header 和 Hero 部分開始。
  • 然後,你會學到更多關於 Photoshop 的排版選擇和樣式。
  • 影像的正確選擇是多麼的重要,而錯誤的選擇可能是一場災難。
  • 學習如何在 Photoshop 中建立彈出式懸停狀態
  • 還有更多

Photoshop-UX-網頁設計專案 6

哦,天哪! 你會得到獎賞的。

這是我最喜歡的 UX 網頁設計專案! 您將學習一些您不知道是可能的… 如何找出什麼字型從使用一個(扁平) JPG 檔案! 是的,我將告訴你在哪裡上傳你的檔案,電腦將處理它的資料庫中的 100,000 個以上的字型,並告訴你哪一個是使用過的!

到目前為止,我們的大多數使用者體驗網頁設計專案都應用了一種最新的、乾淨的使用者體驗網頁設計風格。 這次不會了。 我們正全力以赴地用大膽有趣的復古設計風格改造一個平淡無奇的網站。

您將開始建立一個英雄部分的復古滑塊。 然後你將設計一個類似電子商務的主題部分,以老電影海報為特色。 一路學習更多的專業使用者體驗網頁設計技巧!

Photoshop-UX-網頁設計專案 7

到目前為止,你已經學會了我所有的 UX 網頁設計技巧。 不要絕望。 在這個最終的使用者體驗網頁設計專案中,我有更多的專業技巧和 Photoshop 技巧與你分享。

包括如何將一張普通、乏味、平淡的照片轉化為藝術作品; 水彩(在 Photoshop 中)。 別擔心。 不需要由畫布,畫筆或水彩顏料。 我將告訴你如何在 Photoshop 中做到這一點!

一旦你完成了所有7個 UX 網頁設計專案,你就掌握了超過12個鍵盤快捷鍵(這將幫助你更快地設計)。 另外,如果你應用了我的建議,你將有7個 UX 網頁設計從你的創造性願景和設計風格為你的設計作品組合。 所有這些,都可以提交到我們的問答部分以獲得反饋,或者只是為了展示你的新技能。

目標受眾

  • 為兩種新使用者建立; 請參見 Photoshop crash 課程部分
  • 高階使用者; 直接進入7個網頁設計專案
  • 任何想成為網頁設計師的人
  • 任何想要從上千名網頁設計師中中脫穎而出的人

講師簡介

Chris Parker   Photography | Photoshop | Lightroom | GIMP | Taught by a Pro

作為攝影師和平面設計師已經有30多年經驗了,我學到了一件重要的事情。 高效的工作流程將幫你賺更多。 我所有的課程都是以最大化學習和吸收的方式進行組織的。

Photoshop(自 1991 年以來)和 Lightroom(自 2007 年以來)的終身用戶。

自2010年以來,幫助攝影師實現他們的創意。

英文字幕:有

  • 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

優惠資訊

如何購買這門課程比較划算?可以參考課程優惠方案


報名參加課程

Sponsored by Udemy

也許你會有興趣

 歡迎使用 e-mail 訂閱 Soft & Share 

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: