Pilot / Wei-Hua Wu's Educate Portfolio 2019

2019 領 航

/

吳 偉 樺 教 學 作 品 集

領港，是當一艘船隻要前往大洋時， 在港口往外海的這段路上， 為船舶導航、陪伴船舶出港的一艘小船。

目錄 Contents 個人學經歷

04

Resume

影像處理課程設計 Adobe Photoshop Curriculum Design

06

基礎操作、影像處理功能

08

從入門到進階的去背

10

材質的運用

12

無步驟作業：超現實反差影像設計

16

跨軟體設計：英雄風格影像設計

20

更加豐富的設計方式

22

數位設計課程設計

38

Portfolio Design Curriculum Design

Adobe Illustrator Curriculum Design

作品集編輯課程設計

26

向量繪圖的觀念建立

28

熟悉鋼筆、標準字設計練習

30

吉祥物設計

32

元素組合插畫設計

36

自傳撰寫、基礎功能操作

40

虛擬作品集

42

作品集設計課程

44

全國技藝競賽電繪選手訓練 National High School Skills Competition Player Training

48

第一階段 : 暑訓

50

第二階段 : 平時訓練

54

第三階段 : 賽前訓練

56

選手指導手冊

60

個人設計作品 Graphic Design Works

62

吳 偉 樺 教 學 作 品 集

關於我

經歷

姓名

吳偉樺 / Elsu Wu

生日

1983 / 08 / 20

地址

911 屏東縣竹田鄉鳳新路491號

聯絡

08 - 7885279 / 0912-861-619 / treewuthriver@gmail.com

學歷

國立雲林科技大學 / 視覺傳達設計系

在美術館工作時期，遇到了許多藝術界與教育界的先進、前輩，常聽他們興嘆，屏

經歷

私立民生家事商業高級職業學校 / 兼任教師

東不管是經濟、文化、教育等等，與外地有很大的資源差異。我自己在屏東設計與

大樹小河視覺設計 / 視覺設計師

我從來沒想過有一天，會當上一名老師。

剛滿 30 歲那一年，我剛離開美術館的工作，開始以個人工作室的型式做設計接案 工作。突然有一天，接到一通電話，問我有沒有意願到高職去教書，在沒什麼把握 的心情下，我迅速的整理好自己的工作資料，投出這份履歷。

文化界工作這幾年，我真的感覺到屏東真的還有很多、很多需要我們去努力地方，

屏東美術館 / 展覽組組長

屏東值得我們更多的投入與期待。

墾丁夏都沙灘酒店 / 企劃部設計組主任

因此，當我順利接到廣告設計科的教學工作，戰戰兢兢地站上講台，一堂堂課去準

使用軟體

PHOTOSHOP / ILLUSTRATOR / INDESIGN

備、一週週的規劃課程、考試、與作業，一學期一學期的，帶著學生去成長、探索

DREAMWEAVER / SKETCHBOOK

教學課程

影像處理 / 數位設計 / 網頁設計 / 企業識別系統 / 繪本設計

作品集製作 / 電腦繪圖 / 角色設計 / 國中小設計職群體驗課程

指導獲獎 紀錄

104學年 全國美展屏東區平面設計 / 第一名 指導老師

與前進。我知道對學生來說，上一堂課就表示少了一次與他們相處的機會，所以我 要求自己，在自己還是他們老師的時候，盡量地教給學生我認為有幫助的東西。

教學工作比想像中的累好多、好多，這真的是一個燃燒生命的工作。但當學生的軟 體操作能力提升、當學生越來越喜歡我的課、當學生滿意他們的作品的時候、當學 生開始問我一些關於設計方面的問題、當他們身上也開始有了設計人的味道、當他

們開始認真思考自己的未來、當他們畢業之後還會偶爾想起我的時候，好像所有的

辛苦都被遺忘了。

而其實學生帶給我更多，工作上學不到的東西，他們讓我想起了自己的初衷：我希 望能與更多人分享我的工作心得與所學、我希望能為這塊土地多做一點事、我希望 能為這個社會帶來一點點改變。

雖然我從沒想過自己可以當上一名老師，但或許最能達成這個目標的方式，就是教 04 05

育。因此我帶著我的教學分享作品集，希望邁向下一個五年。

105學年 全國高級中等學校學生技藝競賽電腦繪圖組 / 第一名、金手獎 指導老師 105學年 「健豪盃」全國月曆設計大賽 / 銅獎 指導老師 106學年 全國高級中等學校學生技藝競賽電腦繪圖組 / 優選 指導老師 106學年 全國美展屏東區平面設計 / 第三名 指導老師 107學年 全國高級中等學校學生技藝競賽電腦繪圖組 / 優選 指導老師

吳 偉 樺 教 學 作 品 集

06

07

影像處理課程設計 A d o b e Pho to sho p C u r r i c u lu m De s i g n

吳 偉 樺 教 學 作 品 集

影像處理課程設計

作為所有的數位設計開啟最基礎、應用性最廣的軟體，Adobe Photoshop

/ 影像處理功能 /

的課程設計，重要性非常的高。在設計的課程時主要分為 6 個部分，來

要讓學生更快熟悉 PS，先從「影像處理」這塊功能下手，設計了一系列

幫助學生一步一步的從基礎到進階，去了解 Photoshop 影像處理軟體：

PS 簡單好用的、針對影像調整功能介紹的課程。用不同的例圖，讓學生 使用各種基礎的影像處理功能，如：色階工具、色相 / 飽和度工具 ... 等等，

01、軟體界面介紹、基礎操作

讓學生把照片處理成各種不同的效果，讓學生發現這真的是一套簡單但又

02、基礎工具與基礎功能認識

有趣的軟體。

03、影像調整功能介紹與濾鏡使用 04、路徑工具的使用與去背應用

各種影像處理的工具與指令教學完成之後，進入更有趣的「濾鏡」環節。

05、綜合媒材與影像材質的應用

除了介紹一些效果特殊、常用好用的濾鏡之外，最後再介紹「一指神功」

06、跨軟體設計

的「濾鏡收藏館」，讓學生先感受到影像處理軟體「很好玩」，也越來越 體會到數位設計的魅力。

/ 基礎操作 / 課程設計從基礎軟體操作開始、帶著學生去親近軟體，進行教學時，我會 不斷強調因 Adobe 公司整合了許多的設計軟體，所以有著「介面可親性」 的軟體設計原則，幾乎 Adobe 旗下的設計軟體介面與操作使用原則都非 常相似，也就是「學一套等於學三套」。

第二個重點，強調「所見即所得」的影像處理軟體特性，不需要去背誦與 記憶軟體的功能，直接去試用該功能指令，不喜歡這個效果還可以快速的 步驟記錄當中還原到上一步，藉此讓學生覺得使用軟體很簡單、有趣，不 再害怕用電腦，也慢慢慢慢產生熟悉感。 08 09

01

02 課程簡報畫面精選 利用 PS 豐富的圖像介面，為學生做功能說明，並利用不同例圖，讓學生從基礎功能開始認識軟體。 圖一 / 使用圖示與軟體面板圖片，為學生介紹什麼是「圖層」 圖二 / 用學生熟悉的不同例圖，讓學生開始去「摸軟體」，建立軟體熟悉度

吳 偉 樺 教 學 作 品 集

影像處理課程設計

/ 從入門到進階的去背 / 自己在業界帶過新人時，看到大學剛畢業的設計科系學生，不擅長去背這

時候，他們就是用著自己的速度與步調在學習，而我需要的做的便是提升

種基礎工具的人，居然不在少數，因此特地在 PS 課程中，使用了不少的

學習興趣、安排難度適當的作業，與在他們需要的時候從旁協助。

時間，來教導學生從入門到進階的各項去背技巧。 C、色版去背 A、魔術棒、顏色選取去背

在路徑去背的課程進行完成之後，進階教到「色版去背」，故意發送一張

最簡單的兩種去背工具，搭配不同例圖讓學生操作，在短短的一節課當中，

難度很高的模特兒照片給學生，請他們試著用鋼筆去背頭髮的部分。通常

就可以讓學生知道「去背」到底是什麼意思，跟「去背」後的圖檔到底能

學生都會叫苦連天。然後我才會告訴學生我們要上的是另一種比較難、但

發揮什麼功用。

很好用的「色版去背」，並且配合教材示範給學生看。學生像是發現一個 新天地一般的去使用這個新工具，也會很滿意自己使用色版工具去背出非

B、路徑去背 經過前面的軟體介面介紹、基礎操作、影像調整功能、濾鏡介紹，教學至 今學生對軟體的熟悉度到達了一定階段，開始進入到操作困難度較高的 「鋼筆工具」。我認為路徑工具的練習，除了親自操作示範給學生看，讓 學生熟悉路徑工具使用唯一的辦法就是：「多練習」。一開始先使用簡單 的「雞蛋」，先讓學生練習用鋼筆工具把一顆雞蛋去背，也因為雞蛋的造 型非常簡單純粹、也是大家非常熟悉的，所以雞蛋去背完成的時候，學生 自己是非常清楚自己有沒有達到好的去背效果。

練習完最簡單的雞蛋後，發送約 5 ～ 7 張，難度逐漸增高的例圖，讓學生 試試看自己能在兩堂課的時間內完成幾張。其實當學生只要開始動手做的 10 11

常自然的作品，也產生成就感。去背功能教學完成後，PS 的基礎功能教

01

02 課程簡報畫面精選 從簡單如「魔術棒」的去背功能開始讓學生操作，先建立「去背」的概念。然後再開始進入進階的去背技術學習，並強調 PS 的軟體彈性。 圖一 / 所有學生的鋼筆工具去背第一題：「雞蛋」，教學生如何用 5 個錨點，完成一個圓形物件的去背。 圖二 / 專業而好用的去背「色版去背」，則是為了向學生強調 PS 功能的深度與廣度。

吳 偉 樺 教 學 作 品 集

影像處理課程設計

學也告一段落。

/ 材質的運用 / 基礎課程結束後，是時候讓學生開始使用一些媒材來結合軟體， 刺激一些創意的火花！

如果想要做出好的設計，有許多前置的準備工作， 而學習去找到好用的元素便是其中之一。

01

因此在課程的設計上，我請學生先自己製作素材， 如：「抽象背景水彩」、「自己跳耀的照片」、 「手寫書法字」、「各式材質」等等， 有時甚至整個禮拜的課程都在準備素材、 下週才開始進入設計步驟的狀況， 學生可能在這一週都不知道自己準備的素材到底能做什麼？ 但下週就會發現這些素材都產生了變化無窮的影像處理效果。

我常跟學生傳達一個觀念： 「數位設計」不代表所有東西都要在電腦上完成。 學生可以善用自己本來就有的「手繪能力」、「手工能力」， 動手去畫、去做東西然後再利用電腦設計的特性， 特過電腦這個「媒介」，把自己原本具有的能力， 12 13

發揮、放大、加強。

圖一 / 學生用水彩隨意畫出的潑墨，經過掃描與去背後，作為課堂作業合成用的素材

02

03 課程簡報畫面精選 圖二 / 在素材、圖形、幾何元素的搭配之後，一個有氣氛的影像圖形慢慢的被處理出來 圖三 / 以許多去背完成的元素，讓學生可以在練習過程當中，除了更熟悉軟體之外，也慢慢建立編排版面與造型的觀念

吳 偉 樺 教 學 作 品 集

14 15

學生作業精選 學生用水彩的素材、搭配自己跳起或擺姿勢的照片，再利用 PS 的打光效果，將自己融合進影像合成裡。

學生作業精選 相同的元素，但因為每個學生的美感不同，變化出各種精彩的作品

吳 偉 樺 教 學 作 品 集

影像處理課程設計

/ 無步驟作業：超現實反差影像設計 / 從學期開始，課程均搭配了我準備的教材，帶著學生一步步的練習。這 個階段，我為學生指定了第一個「無步驟作業」。無步驟作業，便是只 將題目告訴學生，給他們看一些範本後，自己決定畫面主題，自己準備 素材，然後試著利用之前課堂所學的技法，把作業做出來。事前我先播放 Coldpay 樂團的「Up&Up」Music Video，這支影片裡面有許多利用影像， 合成出超現實畫面的視覺效果，是一隻非常唯美、帶給人視覺驚奇感的 MV。我希望能透過影像刺激學生的想像力，然後讓他們自己去尋找元素、 去發想畫面，設計自己的影像創作作品。說實話，這個課程有許多學生的 作業，令我讚嘆與喜愛不已。

17

▲

Coldplay 樂團「UP&UP」MV 內富有超現實視覺效果的畫面

▲

16

學生看過樂團的 MV 後，自己發想畫面、搜集元素，創作出來的作品

吳 偉 樺 教 學 作 品 集

18

19

吳 偉 樺 教 學 作 品 集

影像處理課程設計

/ 跨軟體設計：英雄風格影像設計 / 在數位設計課程當中，兩套最重要的平面設計軟體 PS 與 AI，課程其實是 同時進行。在兩套軟體的基礎打完之後，開始讓學生做互相應用。

學習過程中，會發現兩套軟體的介面非常像，使用邏輯也很類似。更重要 的，是兩套結合兩套軟體做出更多設計的變化。電腦繪圖、影像處理、字 體設計……，自此，讓學生的設計版圖，開始變得豐富起來。

此項課程，讓學生利用 AI 把自己的照片，畫上美漫英雄風格的線條，然後 結合影像處理，並加上字體設計與 PS 的濾鏡效果。課程的步驟雖然繁多， 但可把自己變成近年來流行的美漫風格，把自己變成超級英雄的樣子，學習 到一種新的風格，而且效果有趣，對於跨軟體的應用，也更加熟悉。

【使用軟體】 Photoshop / Illustator

課程簡報畫面精選 20 21

圖一 / 學生用水彩隨意畫出的潑墨，經過掃描與去背後，作為課堂作業合成用的素材

02

03 圖二 / 在素材、圖形、幾何元素的搭配之後，一個有氣氛的影像圖形慢慢的被處理出來 圖三 / 以許多去背完成的元素，讓學生可以在練習過程當中，除了更熟悉軟體之外，也慢慢建立編排版面與造型的觀念

吳 偉 樺 教 學 作 品 集

影像處理課程設計

/ 更加豐富的設計方式 / 數位設計課程的主力集中於二年級，在學年的數位設計課程將近結束時，

自己也是看著網路論壇慢慢學著做，才會了這個效果，我會跟同學分享這

我帶著學生進行一個大型的數位設計作業。這個作業刻意運用較多的軟體

個小經驗，再次強調網路時代自學能力的必要性、重要性。

與設備，藉此讓學生發現自己已經有很高的軟體操作與綜合運用能力，即 使在數位課程結束，他們也能用自己的能力繼續學習。

最後的編輯階段，要把「Low Poly」、「風吹效果照片」、「書法字」利 用材質、打光、色彩調整等 .... 影像處理功能去做整合。使用相同的元素，

LOW POLY ART 影像風格設計課程，運用了現在因 3D 產業而新創的一

示範出非常多不同的影像風格。讓同學知道，有能力廣泛地去收集與製作

種設計風格。原本應該使用 AI 一格格去分析圖片畫出低網格風格的圖片，

元素之後，別忘了利用數位設計軟體有著「快速」、「可還原」、「多變化」

但我特地準備了一套的小軟體，只要在圖片上點擊，軟體就會自動把本來

的特性，讓自己的設計有更多元的面貌，更加豐富精彩。

的照片轉變為 Low Poly 風格，不需再經過繁複的繪製。這麼好用的軟體 居然在網路上用心花時間找一下，就有很棒的資源可使用。現在網路上有 非常豐富的資源，只要學生願意花時間，其實有非常多資源等著他們去運 用與學習，我會非常希望學生能了解這件事情。

接著利用 Apple iPad 的 Apple Pencil，使用「Zen Brush」這套軟體，讓 學生在平板上書寫書法字。藉著這樣的機會，讓學生知道在智慧型裝置風 行的年代，對這個世代的的創意工作者來說，有多少的方便的科技可運用， 又是何其幸福。

利用上網下載的筆刷，做出「風吹碎片」的效果。在一個步驟一個步驟的 引導下，學生看著自己的照片做出了好像被風吹成的碎片的神奇效果。我 22 23

【使用軟體】 Photoshop / Illustator / TriangulateImage5 / ZenBrush

01

02

課程簡報畫面精選 圖一 /

利用網路資源分享的筆刷，將照片處理成飛散碎片的效果

圖二～圖五 /

示範如何使用相同的元素，編排處理出完全不同效果的影像圖形效果

03

04

05

吳 偉 樺 教 學 作 品 集

24

25

吳 偉 樺 教 學 作 品 集

26

27

數位設計課程設計 A d o b e I l lu s t ra to r C u r r i c u lu m De s i g n

吳 偉 樺 教 學 作 品 集

數位設計課程設計

數位設計課程主要的教學軟體為 Illustrator，當 PS 教學到一個階段時，開始

許多學生從小就喜歡畫畫，從小拿著畫筆畫畫在紙上用顏料東塗西抹，因此

接續學習 illustrator 軟體是非常相輔相成的，不僅因為軟體介面雷同、操作觀

在 PS 用數位板的「點陣圖」方式的繪圖，對他們來說較好理解、也比較不

念接近，更重要的是兩套軟體各司其職，學生可借力兩套軟體的功能特性，

會有陌生感。反觀「向量繪圖」，則是另外一種繪圖技術跟藝術表現方式了，

嘗試更多的設計風格。

所以必須從最基礎的開始建立，讓學生了解什麼是向量繪圖是第一步驟。

Illustrator 的軟體教學工作如下：

01、向量作繪圖的觀念建立 02、熟悉貝茲曲線工具 03、標準字設計 04、吉祥物設計 05、元素組合插畫設計

/ 向量繪圖的觀念建立 / AI 是一套非常強大的向量繪圖軟體，只要學會了 AI 的向量繪圖邏輯與方式， 其實間接也學會了很多「圖形建立」軟體的邏輯與原理，因此第一項任務便 是先幫同學介紹建立 AI 的圖形繪製能力。

就像小朋友開始學畫畫一樣，從線條開始、直線、曲線、面、虛線、實面 ...， 一開始的課程雖然非常進階，但最主要的目的就是幫學生建立起：「向量繪 圖」的觀念。 28 29

【使用軟體】 Illustator

課程簡報畫面精選 根據 AI 工具箱內的工作逐項介紹，帶領學生逐個使用這些向量繪製工具，慢慢建立向量繪圖的觀念。 然後再介紹較為進階的「貝茲曲線」與「組合路徑工具」。

吳 偉 樺 教 學 作 品 集

數位設計課程設計

/ 熟悉鋼筆 / 大多數學生在這個課程中開始感到 PS 與 AI 的相似 性。對於 PS 已有一定的熟悉度，鋼筆去背也都練習 過之後，越來越熟悉貝茲曲線的操作方式了。此時進 入 AI 貝茲曲線繪畫課程，學生會發現他們練習了幾 週的在 PS 可以去背的技巧，到了 AI 變成可以繪圖 的工具，更加的得心應手。

在 AI 練習鋼筆工具，發送一些知名影星的照片給同 學，請他們先進入 PS 利用濾鏡效果處理成色彩分層 的樣子，然後再把圖檔抓進 AI 裡，照著影像處理過 後的色彩分層，去練習用貝茲曲線把臉部五官與細節 勾勒出來。

一開始大家只是不斷照著不同的色彩去拉線做貝茲曲 線的練習，但一兩節課慢慢畫下來，熟悉的臉慢慢的 在螢幕上出現了，最後加上開始字體、漸層工具、色 票、反光工具……等，讓畫面的完整度更加提高。

【使用軟體】 Photoshop / Illustator

在課程時間允許的情況下，則位同學拍攝照片，再使用他們

30 31

的照片來練習，繪製的效果更加有趣。

學生作業精選

數位設計課程設計

/ 標準字設計練習 / 字體對於一個學設計的人來說，是非常重要的課程。中文字體不像英文字 體組成字母較少，造字工程是非常浩大的，也因此中文字體當中實際可選 用的電腦字型其實很少，此時就必須自行設計的「標準字」，讓自己的設 計產生更獨特的效果。

進行實作之前先向學生介紹「中文字型」的種類，如常用的電腦設計字 體、一些較有風格的電腦字體，並介紹一些自己在業界常用、覺得好用的 字體，與這些字體的使用時機。為學生初步建立中文字型的美感認知。

標準字設計會以一些「成語」或是「賀詞」，平均字數約 4-6 字的字詞， 讓學生盡量將文字圖形化、或將字體的結構做一些改變。紙筆還是大家最 熟悉的創作工具，同學先在紙上打好草稿，再進電腦使用電腦設計工具把 他電腦化，這種設計流程較為簡單順暢，學生通常都能感受到比較多的成 就感。

標準字的草稿設計完成之後，掃描稿子進電腦，接著其實又回到了「鋼筆」 的練習。用貝茲曲線將自己的練習慢慢的變成電腦稿，並且教同學如何在 完稿的過程中，利用貝茲曲線的特性，把筆畫的造型做得更極致。電腦稿 的文字框完成後，開始進行上色，同學們利用 AI 自行設計的第一組標準 字，便順利完成了。

【使用軟體】 Illustator

學生作業精選

吳 偉 樺 教 學 作 品 集

數位設計課程設計

/ 吉祥物設計 / 除了字體設計之外，向量插畫也經常碰觸到「吉祥 物設計」。吉祥物設計的繪畫流程與標準字的流程 雷同，先在紙上將吉祥物草稿繪製完成，然後進電 腦拉線稿，再進行上色的動作。

吉祥物設計課程包含針對吉祥物的特性做講解，如： 吉祥物的行銷方式及其能達到的效益、吉祥物設計的 精神、設計的注意要點，並列舉國內外多項成功或 必較特殊的案例來跟同學分享。建立了大方向的概 念之後，才開始動手設計。

有別於前面作業著重於鋼筆的運用，此項作業也開 始請同學開始注意上色的，背景色、陰影、光面、 細節、光暈、材質質感 ... 等，做出更多的色彩層次。 當進行到這項作業時，學生對於 AI 向量繪圖的熟悉 度，已能有很大的提升。

【使用軟體】 Photoshop / Illustator

吉祥物設計競賽在業界時常舉辦，進行課程時，若課程的時間剛好有同類型設計比賽可以參加，

32 33

則直接將練習題目更換為該比賽題目，讓學生除了達到作業的練習效益，才能有參加競賽的經驗。

課程簡報畫面精選 圖一 / 學生用水彩隨意畫出的潑墨，經過掃描與去背後，作為課堂作業合成用的素材 圖二 / 在素材、圖形、幾何元素的搭配之後，一個有氣氛的影像圖形慢慢的被處理出來 圖三 / 以許多去背完成的元素，讓學生可以在練習過程當中，除了更熟悉軟體之外，也慢慢建立編排版面與造型的觀念

吳 偉 樺 教 學 作 品 集

34

學生作業精選

35

請學生去思考「台灣吉祥物」，學生自行選擇創作的素材，畫出各種不同可愛的吉祥物。

學生作業精選 相同的元素，但因為每個學生的美感、特質不同，變化出各種精彩的作品

吳 偉 樺 教 學 作 品 集

數位設計課程設計

/ 元素組合插畫設計 / 隨著同學對 AI 軟體與向量繪圖越來越熟悉，開始進行 AI 課程當中比較大型作業。我會請學生創作一幅「全 AI 的 元素型全景式插畫」，什麼是「元素型全景式插畫」？

客戶時常提出需要畫出一個情境、或是一個地景的需求。 不管是虛擬的世界還是真實世界，不管是寫實的風格還 是可愛的風格，這種從前景到背景、從地形到人物，所 有元素都需要自己設計的插畫，並且利用元素編排產生 豐富畫面的向量插畫作品，在業界有很高的需求度。因 此我希望學生也能練習一次這種「元素型全景式插畫」。

元素型插畫必須去思考畫面中哪些是最主要、最精緻的 元素？哪些是可大量複製、豐富畫面的元素？哪些是背 景元素？每個物件都需要完整地畫出，然後去做群組、 前後堆疊。元素畫完後開始組合排列，編排畫面，並且 加入為插畫設計的標準字。這種元素豐富、注重完成度 很高的作品，通常也會學生帶來很高的成就感。

【使用軟體】 Illustator

36 37

學生作業精選

吳 偉 樺 教 學 作 品 集

38

39

作品集編輯課程設計 Po r t folio De s i g n C u r r i c u lu m De s i g n

吳 偉 樺 教 學 作 品 集

作品集編輯課程設計

設計科系的學生在畢業前，要做的最後一個大作業，便是將自己在過去三

如在高職畢業之前，如果能熟悉 PS、AI、ID 三套軟體，對這個階段的他

年的作業與作品，整理成一本能代表自己、為自己發聲的作品集，帶著他

們來說，數位設計能力便已具有一定程度。而作品集編輯課程，便是教學

進行到下一個階段的旅程。

InDesgin 的最好時機。

/ 自傳撰寫 /

在基礎課程中，會使用兩份文件帶著學生進行操作設定，來認識 InDesign

在進行課程之前，我會為學生上一門很特別的課程 —「自傳撰寫」。我

的主要功能。

自己還在企業工作時，在某些應徵環節發現，即使是完成學業、開始求職 的大學生，也有許多人把自傳寫的七零八落、未將自己的優點凸顯出來，

第一份作業使用一份 4 個頁面的簡易出版物，先讓學生建立「主版」與「子

沒把自己的故事說得吸引人。

版」之間的運用觀念，並交互示範「文字框」、「圖框」、「色塊框」三 種框架工具的使用方式。「框架」對 ID 來說是很重要的工具，所有的編

為此，我綜合自己撰寫自傳的相關經驗，以及收集課程資料，整理成一堂

輯作品需要遵循著網格系統（Gird System）去執行，一份出版物看似只

「書寫自傳」的課程，向學生介紹寫自傳時，該經營與強調的事項，與經

是圖文編排，但當中其實運行著隱藏的網格設計系統，去穩定、支撐起整

常發生的錯誤。

個編輯物的架構。而這個網格系統，便是藉著 ID 的框架工具建立。藉著 軟體的功能，帶出編輯的設計概念，讓學生不只是在學軟體、同時也在學

自傳課程完成後，給學生一段較長的作業時間，讓學生專心的、好好的寫

設計。

自己的自傳，繳交作業後再為他們做「自傳健檢」，為學生把自傳更系統 性地整理、調整語順、訂正錯別字，讓學生的自傳更完整。

第二份作業使用一份「錯誤百出」的編輯物，帶著學生利用 ID 的功能， 去修正這些錯誤，這些簡單的功能例如：文字斷行、造型文字框、圖框樣

/ InDesign 基礎功能操作 /

式、文字對齊方式……等，雖然功能相當基礎，但可讓學生在編輯的時候

在業界工作，可以發現業界其實會 ID 軟體的新鮮設計人並不多，但 ID 與

做出更多的變化，產生更多可能性。

AI 的操作相似度高，而且針對「多頁面出版物」來編輯時，有著許多聰明、 40 41

好用的軟體邏輯，而近年的印刷乙級證照，也首度將 InDesign 操作納入

學生開始知道了 ID 的軟體操作邏輯、功能的使用能力、編輯的概念，正

考題範圍，可見 InDesign 排版軟體已受到一定程度的重視。我認為學生

式進入作品集課程。

01

02

04

03

05

課程簡報畫面精選 圖一 / 撰寫自傳時，經常發生的錯誤

圖二 / 基礎 InDesign 課程中，讓學生利用一份簡單的文件來了解軟體的基礎功能

圖三 / 利用 InDesign 功能，把文件的設計變得更加突出

圖四、圖五 / 基礎課程（二）當中完成的第二份設定文件

吳 偉 樺 教 學 作 品 集

作品集編輯課程設計

/ 虛擬作品集設計 / 我不急著讓學生開始東湊西拼的開始做起作品集，軟體課程完成之後， 又回到「概念」的部分。作品集是一本可以形塑一個設計者的出版物， 甚至是一個設計者，帶著他旅往人生任何一個階段的重要陪伴物，我花 了許多時間告訴學生什麼是一本「好作品集」。

作品集不是一間倉庫，他是一個展示精緻、有風格的櫥窗。作品集不是 自 High 放入一堆自己喜愛的作品，而是要利用做作品集的機會，好好 檢視自己的作品成熟度，然後也藉機展示自己的多元性。作品集不是按 圖索驥的放入大量資料，而是透過系統性、有策略的，展示自己整理過 後的資料。

理論課後，我們藉由一些現有的文字與資料，製作一本「虛擬作品集」， 並希望學生在這個虛擬作品集的製作課程中，開始去思考自己的作品集

01

02

要用什麼設計風格呈現？需要哪些設計元素？並且開始著手準備裡面要 放入的資料。虛擬作品集製作過程中，設計出「履歷頁」、「開章頁」、 「作品頁」等組成一本作品集需要的版面。虛擬作品集的課程是為了讓 學生，再從 ID 軟體剛學習完成之後，銜接到那麼重要的自己的作品集 設計作業之間，有個提早熟悉作品集編輯流程的機會，在動手製作起自 己的作品集之時，才不會慌亂、才有經驗可循。

課程簡報畫面精選 圖一 / 作品集的作品擺放順序，其實有一定的策略性 圖二 / 與學生介紹一本作品集的組成架構，並使用「虛擬作品集」課程進行一次體驗設計

42 43

01

02

課程簡報畫面精選 圖一、圖二 /

利用不同的素材如：影像、手繪元素等，讓作品集的視覺更豐富，打造自己的作品集風格

圖三 /

風格確定後，在色塊的變化之下變化出不同的作品章節頁面，作品集的架構更加完整

03

吳 偉 樺 教 學 作 品 集

作品集編輯課程設計

/ 作品集設計課程 / 前面做了那麼多的前置教學作業，終於到了學生大展身手 的時間。每個設計者完成一本自己的作品集，當中有大量 的思考與自己的邏輯，每個人的作品集有自己的形成方

圈外人 / 林俊賢個人設計作品集 ( 左 1/ 作品集封面；左 2- 右 4 作品集內頁精選 )

式，因此沒有步驟來讓學生遵循製作。我只為學生訂出每 週進度，來提醒他們如何在畢業前完成作品。

每週有新的進度到來，每週跟學生討論他們之前完成的進 度，有沒有什麼問題。或是提醒之前進度還沒完成的同 學，務必跟上腳步。並且在大家進度都到了重要階段的時 候，隨時重新示範重要的軟體功能，或是排版編輯示範。

從搜集資料到風格確定；自傳撰寫、為自己的作品集命名 企劃；封面設計、內頁版型設計；作品加入、作品介紹

蓄勢 / 王昭凱個人設計作品集 ( 左 1/ 作品集封面；左 2- 右 4 作品集內頁精選 )

……，一週週過去了，學生過去三年的精華，慢慢的被整 合、呈現出來。

每年都有很多學生的作品集，讓我不斷的一看再看，他們 專心做著作品集的樣子，那種重視程度，也讓科上的很多 老師，說同學突然有了不一樣的感覺。我也希望，每個同 學都能能帶著這本自己用心製作完成的作品集，走得更遠 更好。 44 45

The Little Things of Life / 呂玉秀個人設計作品集 ( 左 1/ 作品集封面；左 2- 右 4 作品集內頁精選 )

吳 偉 樺 教 學 作 品 集

鴕鳥慢飛 / 林均諭個人設計作品集 ( 上排左 1/ 作品集封面；餘圖：作品集內頁精選 )

46 47

設計之森 / 李榆婕個人設計作品集 ( 上排左 1/ 作品集封面；餘圖：作品集內頁精選 )

NEVERLAND / 余淑君個人設計作品集 ( 作品集內頁精選 )

潘彥儒個人設計作品集 ( 作品集內頁精選 )

吳 偉 樺 教 學 作 品 集

48

49

全國技藝競賽電繪選手訓練 Na t ion a l H i g h S cho ol S k i l l s Com p e t i t ion Pla ye r Tra i n i n g

吳 偉 樺 教 學 作 品 集

全國技藝競賽電繪選手訓練

全國技藝競賽是高中職教育體系，每年的重點賽事之一。在民生家商的第

a、用形狀思考角色：先思考大形狀、再思考小細節

三年，對學校課程越來越熟悉、跟學生的互動也越來越好的情況下，我開

b、用剪影檢視角色的肢體：用剪影檢視角色的「動作清晰度」

始進行的選手訓練工作。選手訓練過程是一條漫長的路，必須無時無刻的

c、動態線的運用：帶出角色的姿勢、力度、韻律感

觀察選手的練習情形，選手的身心狀況都需要重視與照顧，隨時調整他的

d、視覺比例調整：運用比例讓角色不千篇一律

練習方向與難度，幫助選手在賽前達到最理想的狀態。

e、角色的線條運用：探討直線與曲線的關係 f、角色的情緒語言

選手訓練的訓練時間從選手升三年級的暑假開始，階段主要分為：1、暑 期訓練

2、日前輔導

3、賽前訓練，三個階段有不同的練習內容。

角色設計課程的內容，是許多動畫師在為動畫或繪本打造角色時，會去思 考與練習的步驟。我很高興學生能有機會去認識一個動畫師在創作角色

第一階段：暑訓 /

時，他所重視的環節。當學生先具備了「角色設計」的思考，再加強自己

此階段為了幫助學生建立他們的「大腦中的圖庫」，計畫性的安排各種屬

的電繪技術，畫出來的角色會越來越有風格、有生命、有個性，不再碰到

性的題目，進行大量的題目練習。每天大約進行 6 至 8 小時的練習，學生

題目就先很僵化開始畫一個圓圓的臉、大大的眼睛……，他不再每次都畫

使用電繪版上的手感會越來越好，線條變得越來越漂亮。

出一樣的東西。

這個階段也同時觀察選手應對題目的能力，與電腦上手程度，好的電腦繪

透過暑假題庫式的練習與角色設計的課程，許多學生在一個月的暑假集訓

圖選手，不會害怕電腦、懂的利用自己的優勢搭配電腦發揮出最大的效能，

之中，就會有很驚人的轉變。

善解題目，知道做什麼事情最加分、如何把時間最大化，從這個階段其實 就可以看出同學有無具備一個好選手的特質。

暑假時因為時間允許，跟學生能有大量的相處，因此能利用暑訓的時間， 進行「角色設計」訓練課程。課程共分為以下章節： 50 51

角色設計課程示範精選 形狀概念、動態線、直線曲線的關係、造型比例這些環節，都是探討角色時的好利器。另外，利用 速寫練習，可對人物的肢體扭轉更熟悉。

吳 偉 樺 教 學 作 品 集

52 53

暑期階段 / 選手作品

▲

學生使用剪影的概念，來檢視角色的清晰度。

▲

使用不同類型的題庫，讓學生增加「大腦中的圖庫」

▲

暑假的練習便可看出選手的潛力與應題能力

▲ 大量的練習讓學生的在暑訓階段，對電腦繪圖越來越熟悉，

也慢慢建立自己的風格

吳 偉 樺 教 學 作 品 集

全國技藝競賽電繪選手訓練

第二階段：平時訓練 /

暑訓結束，通過訓練的選手開始面臨長時的自主練習。此階段會 針對各選手的弱點，增加他們的練習量。讓選手不斷挑戰自己的 缺點，例如特別不會畫的種類、過度僵硬的風格、或者是繪圖速 度……等。

因暑假經過了大量的題目練習，與電腦的親近度也足夠了。此時 的選手會更知道自己是一個「電繪選手」，而不在只有練習生的 感覺。挑戰選手弱點的同時，學生也會更加知道自己的強項在哪 裡，慢慢喚醒生為選手的自覺。

此階段非常考驗學生的自制力與自學力。主輔訓老師都有許多繁 忙的工作多頭進行，最能幫助選手的人，就是選手本身。他們必 須像一塊很大的、極度乾燥的海綿，不斷地吸收。在每一題練習 中，掌握到更好的技巧、練習出更好的作品。然後，在每週的討 論中，凝聽建議找到自己的問題、吸收學習、然後內化，再應用 到下個禮拜的練習。

時間不會等選手，在這個階段，有時只是區區兩週，停滯還是進 步，便會非常明顯的呈現出來。

55

▲

54

不同學生在平時練習的階段，已經開始發展出接近專業的角色設計水準

吳 偉 樺 教 學 作 品 集

全國技藝競賽電繪選手訓練

第三階段：賽前訓練 / 賽前最後一個月的密集訓練，此時選手跟的一對一時間最多，能非常近距離的觀察 選手的狀態。針對比賽的所有環節，去設想選手面對比賽的尚有不足之處，幾乎使 用「挑惕」的方式，讓學生準備應對需有比賽的細節。

選手的壓力來到最高點，因此我非常注意選手的心理狀態。因相處時間足夠，慢慢 能看到選手較為內心的面向。有的同學，覺得自己因為練習被異化了，成為邊緣人； 有的同學在以前的求學階段曾經被霸凌，影響了自己的自信心、懷疑自己；有的同 學不知道自己現在做的事情家中支不支持，也悄悄影響了自己的動力。因為在教育 現場的關係，看到這些學生的問題與困境，我開始接觸了許多心理、情緒相關的課 程、書籍與研習，並藉著不同的機會與場合，將自己的心得分享給同學。

我很希望我的選手他們能知道，不要被自己的心魔打敗，他們正在用自己最美的姿 態，創造自己的未來，他們也值得一個更好的未來。

我很幸運的，自己帶過的每一屆選手，都作出了幾乎超齡、令人動容的表現，畫出 了令人意想不到的作品，面對比賽的有著一定的沈著與從容。學生進步的速度與潛 能真的不只是用「驚訝」可形容。更重要的是，電繪訓練也讓這些學生更加相信自 己了！他們知道了很多事情不能只期待環境給他們什麼，要靠自己的努力去爭取， 他們應該為自己負責。當他們學習到這個層面，已超過一個選手訓練能帶給學生的 東西。 56 57

※ 民 生 家商 電 繪 選 手 指 導 工 作 ， 與 廣 設科陳宜璋老師共同合作指導完成

105 學年度電繪選手 / 林均諭作品金手獎作品

吳 偉 樺 教 學 作 品 集

58 59

106 學年度電繪選手 / 呂玉秀作品

107 學年度電繪選手 / 潘彥儒作品

吳 偉 樺 教 學 作 品 集

選手指導手冊

賽前，訓練進入最後最後的尾聲，選手已進入狀態。在最後的階段，好 像用回憶的方式，帶著選手從第一個作品開始看起。

這個從頭檢視的動作，有非常大的功能。通常學生看到自己三～四個月 前的作品，會驚訝自己現在與當初作品的落差之大，線條的成熟度、角 色的刻畫、上色的細節與豐富度呈現在眼前，這是騙不了人的東西。另 外，總進度檢討也能清楚出檢視選手在練習的各階段中，有哪些停滯 點，然後，他又是用什麼方法突破的？最後，選手指導手冊還能再次 提醒選手最易犯的錯誤，並且清楚整理出所有的容易忽視的大重點。

選手指導手冊，清楚地展示了，我們用了這麼長一段時間進行的各種練 習與訓練，讓選手符合一個競賽的狀態，並具有競爭實力。賽場中的最 重要的那張圖，只有選手自己面對，這張圖畫完之後，也不會再跟老師 檢討，不會再有下次的考題。當選手指導手冊編輯完成時，把他交給選 手，陪著他在這個重要的時刻，去享受這場重要的比賽。

選手訓練手冊畫面精選 第一章 / 全作品整理與注意事項 第二章 / 超級重點 第三章 / 練習成果整理表 第四章 / 賽程各步驟注意事項

60 61

吳 偉 樺 教 學 作 品 集

62

63

個人設計作品 G ra ph i c De s i g n Wo rk s

吳 偉 樺 教 學 作 品 集

64 65

高雄市青少年交響樂團「雪哈拉莎德」演奏會

高雄市國樂團「樂過極線」演奏會

高雄市國樂團團「南國晚風」演奏會

演奏會形象設計

演奏會形象設計

演奏會形象設計

屏東市公所殯葬服務設計網站 全網介面設計 / 園區設施服務圖設計

吳 偉 樺 教 學 作 品 集

高雄市青少年國樂團「將軍少年 2」演奏會 66 67

演奏會形象設計

2019 屏東燈會 / 牡丹鄉巡遊花燈車設計

吳 偉 樺 教 學 作 品 集

那瑪夏青銀合創輕旅行 68 69

旅遊導覽 DM 設計

因地制宜兩岸四地藝術交流展 / 主形象設計

因地制宜兩岸四地藝術交流展 / 展覽專刊設計 ( 上 )、展區設計 ( 下 )

2019

領航 Pilot

/

2019 吳偉樺教學作品集

設 計

吳偉樺 Elsu Wu

文 字

吳偉樺 Elsu WU

出 版

大樹小河視覺設計 TreeNRiver Visual Deisgn

聯 繫

0912-861-619 / 08-788-5278

特別感謝

民生家商 陳宜璋老師 蘇錦凌老師 曾丞軒老師 李忠哲老師 黃介良老師 林彥村老師 朱瑞璘老師

學生作品

吳思蓓 廖珮媜 鍾玉萱 陳佳伶 余淑君

出版日期

2019 / 07

陳儀庭 莊子琳 邱若寧 陳珝瑜 潘彥儒

戴慈萱 康瀅心 吳思辰 黃立憲 林均諭

王昭凱 鍾愛翎 蕭欣怡 饒美慧 張之櫻

吳晏誼 張詩葶 廖梓吟 李欣怡 謝承杰

劉芹言 丁建銘 莊皓晟 呂偉翔 吳宗澤

王俐蓉 林俊賢 李峻嘉 許文賢 呂玉秀

張恩絮 蔡俊傑 楊淳茹 楊莘怡 李榆婕

本教學作品 集 資 料 屬 個 人 智 慧 財 產 權 ， 為 作 者 本 人 所 有 ， 請 尊 重 智 慧 財 產 權 ， 勿 不 法 取 用

許哲瑋 郭豐原 巫筱婷 胡晉瑋