Nik Ainley 作品集（photoshop 的自學奇才）

Nik Ainley 是英國出身的設計師，專注於個人的數位藝術與插畫創作。他曾經被 computer arts magazine 評選為 2006 年十大才華洋溢新銳創作者，作品細膩豐富，層次井然。

Nik Ainley 主要運用 photoshop 進行創作，並因為 case 的不同搭配其他繪圖軟體，像是Illustrator, 3D Studio max, Cinema 4D, Bryce, Poser and Xara 3D 等等。

比較特別的是，Nik Ainley 並非藝術設計相關領域的本科生，他是在倫敦帝國理工學院（Imperial College London）攻讀物理學位的同時，靠著自學的方式熟練 photoshop，展現了在藝術創作的才華喔。


：）


Nik Ainley artworks.

.

Emrah Yucel 作品集

VAW LOG 廢誌

Emrah Yucel 的名字你或許陌生。

但是他設計過的好萊塢電影的海報可說都耳熟能詳，從007、追殺比爾、龍吻等，都可說是電影海報的一時之選。但是，如果是這樣而已的話就不配稱為無敵了，他擅長的領域還有網站設計、CI、以及一些藝術性的創作作品，涉略範圍可說相當的廣泛。

話不多說馬上欣賞 Emrah Yucel 網站：

http://www.emrahyucel.com/splash.html

同學進入Emrah Yucel 網站（其實我也是第一次聽到這名字，XD）後，點選 works，就可以看到 VAWLOG 所推薦的 Emrah Yucel 作品集，裡面包含：電影海報（movie posters）、電視宣傳（broadcast）、其他海報（other posters）、企業形象設計（corporate ID）、網站設計（web design）、平面設計（print）等五大項。

剛剛上網逛到這則報導，看到與我們這次的交學內容相關，於是便 post 給大家參考。

同學在觀賞的同時，我會建議從色彩、構圖（也就是圖文的配置）、主題概念是否契合等三個概念，循序去分析。

看多了，分析多了，設計能力就會有所提升喔。

加油：）

.

06 /15 老師請假停課一天

嗨
今日身體很不舒服
頭很痛
生病

所以很不好意思
病假
課程順延 0622, 0629

請大家抽空利用一小時時間
著手進行海報設計
於下禮拜（0622）將檔案帶來課堂上繼續進行
（作業還沒交的加油喔
可參考其他同學已經完成的作業）

唯有實做才可以將所學融會
多搭配講義回憶過去幾堂課程內容
嘗試不同的排列與改變
做錯就按ctrl + alt + z
回覆上一次動作
別擔心做錯

獨立作業很辛苦
大家加油！！

下面是英國一家著名雜誌 Royal Magazine
可以線上閱讀與部分下載
該雜誌偏排與視覺設計有可觀之處
共有九期（issue 1~9）
請大家多加瀏覽


培養屬於自己的設計質感

希望大家妥善安排四天半連假
端午節愉快

有問題儘管聯絡我

：）

謝謝
大民

.

06 /08 老師請假停課一天

如標題所示
本週不用上課
請同學利用時間把作業補上
多做練習並準備 15 號和 22號的課程

作業或其他事情有困難
都歡迎聯絡我 ：）

謝謝
大民

更正！06/ 15 ＆ 06/ 22 - 第六、七堂課前準備

嗨
倒數二堂課
真是令人傷感。

06/ 15
將運用前五堂課所學，明確地來製作一份A4海報。這堂課終於脫離技術的修練，來到創意的實做。

海報設計主題如下連結：96年度資訊月展覽宣傳海報比賽，請詳細閱讀相關文字。另外，務必參考95年得獎作品，來瞭解海報的一些基本要素。

請同學從今天就開始，針對96年度資訊月展覽宣傳海報比賽網站，所提供的相關評分項目（特擷取設計重點 a.b.c.三點），進行構思，並尋找相關圖像元素，帶來課堂進行設計。

設計重點a.

資訊月海報主題：愛上數位生活 　　

2007 年，數位化的趨勢正帶領我們走向一個更美好的世界，從32位元到64位元的作業平台，ADSL到光纖，3G到3.5G，Wimax，高畫質液晶電視，多核 心電腦…等，更快、更美、更厲害的數位新品令人讚嘆，經由網路串連，一個超越以往，令人感動的數位生活已經形成，從體驗到感動的那一刻，人人都將愛上這便 利與美好的數位生活！

什麼是「愛上數位生活」？你想怎麼傳達「愛上數位生活」的內涵與具體意象？發揮你最驚人的創意以及無與倫比的設計功力，創作出最吸引人的96年資訊月海報！！

設計重點b.

為持續 推廣全民資訊應用教育的理念，透過資訊月全國海報徵選活動鼓勵民眾以資訊應用結合個人理念創作，藉由全國競賽方式選出資訊月活動宣傳海報，進而達到全民參與的目的。

活動以創意為主軸，結合「科技理性」與「人文情愫」，透過實際應用於生活面的資訊科技為題材，並集合全國民眾的創意巧思，評選出當年度最具代表性之資訊產業宣傳視覺，為台灣資訊產業宣傳與推廣，並同步預告當年資訊月已熱烈展開 。

設計重點c.

• 主題切合性 30%
• 構圖與佈局 30%
• 整體創意 20%
• 技巧、色彩 10%
• 主題標語及創作意念 10%

至於免費圖像元素，可見 image related。如有發現好網站，我將更新其中。

06/ 22
請同學繳交A4三頁以上的心得報告。此作業目的在練習圖文編排的實做能力。藉由這份心得報告整理學員在課堂所學的技術、觀念、心得想法，並將作品呈現其中。

製作流程：
1. 心得文字撰寫
2. 過往圖像作業整理
3. 圖文整合編排

唯有自己動腦去構思獨特的 idea，動手於軟體進行實做，才會發現不熟悉的地方與盲點。將這些盲點在課堂上交由我來釐清，即可收到教學相長的功效。

不過，重點還是請大家保持愉快的心情來上課，不要被上面看起來很恐怖的作業所蒙蔽拉，大民人很好的。

：）


對了，FTP\5 - 校園宣傳海報設計\ref.pdf 請下載參考閱讀一下，裡面除了有版面編排的相關資訊外，還有一些其他的資料，像是 AI 的出血設定、t-shirt設計、書籍設計、CD設計。設計版面編排可以說是06/ 15作業的基礎知識，請先瀏覽閱讀喔。


.

大頭照DIY設計 (4) 之課堂作業

這次的作業很簡單，
file/ new file 開一個4*6inch，300ppi，rgb mode的新檔案，
將自己的大頭照，
做成一份這樣（如上圖）的 .psd 和 一份 .jpg即可。


.

class 5 - passport size photo design (3)

1. [工S] stamp 圖章工具
   
   • alt + 左鍵（複製來源）；左鍵貼上皺紋
   • 從接近皺紋處，取來源
   • 適當的圖章大小（「快」括弧鍵 " [ "縮小，" ] "放大，同筆刷）
     
     
2. mask（遮罩），黑白灰的遊戲
   
   • 黑：不要的、要遮住的；白：要的，顯露的；灰：依白的程度而定，透明的
     
     
3. blending mode（圖層混和模式），黑白灰的遊戲
   
   • 去白留黑（multiply ）
   • 去黑留白（screen 系列）
   • 去灰留黑白（overlay 系列）
     
     
4. 本日 filter（濾鏡）
   
   • filter/ Liquify（一些有趣的功能像是膨脹、縮小、旋轉外，做錯記得同樣 ctrl + alt + z ）
   • filter/ blur/ Gaussian blur （最常用的濾鏡之一，可製造景深，柔化皮膚......不勝枚舉）
     
     
5. 標準大頭照範例，FTP：\2 - 大頭照DIY（1）\內政部.pdf
   
   • 大頭照製作流程：拍攝、去背、調色、修整瑕疵、製作3.5*4.5cm證照、排列於適合的相片尺寸（ex. 4*6inch）、7-11 便宜沖洗、如有瑕疵再修正。
     
   • 閃亮亮的導線：「快」ctrl + r（rule，規矩的意思），3.2-3.6cm 各畫一條
   • 如何對齊導線？ 將 view/ snap 勾起來
   • 快速複製的方式：先選取「移動工具V」（選取範圍工具右邊那個箭頭），在妳要複製的圖像上面（當然也要是指定的圖層），按住 alt ，游標會出現雙鍵號，按住滑鼠左鍵拖拉即可
   • Shift 鍵的重要性：等比例縮放，同水平、垂直線移動
   • 將多個圖層合併為一個：ctrl 選取所要合併圖層，滑鼠右鍵，選 merge layers
   • 替大頭照加上外匡方便裁切：將外圖層外框用選取工具框起來，edit/ stroke，選 inside、1 px 和喜歡的顏色，點 ok。
     
     
6. 所有快速鍵，都必須在英文模式下才能生效
   
   
7. 用 [、] 調整筆刷大小，如果毫無反應，此時按一下 shift 上面的那顆 Caps Lock，就可以解決勒。
   

.

名片設計範例

480 種（仍在增加當中）不同風貌的名片設計範例，
從木頭夾子到壓克力版，
可以看到設計者對於材質的要求與轉換；
外型、色彩、圖像元素的靈活搭配，
多樣的組合產生截然不同的視覺（甚至觸覺）觀感轉移，
相信大家可以在如此龐大的範例中，
找到屬於自己的那份靈感。

希望不要錯過。

Link：dailypoetics.typepad.com > 1 BUSINESS CARDS +


.

資源

新增一些資源的連結在右手邊。

Photoshop Related 蒐集 photoshop 軟體教學文件；
Image Related 蒐集免費的線上影像資源，
網站並依照影像的屬性類別作了分類（比方人物、動物、蔬菜......）；
Color Related 有色彩學的基礎知識與實用線上工具，
請大家不要錯過。

另外，
在右手邊的 archive，
不但依照時間整理了文章，
還可以像操作電腦資料夾一樣，
展開或折疊；
藉由替文章下標籤（label）的概念，
可以由標籤替文章分類（例如：課堂筆記），
這樣應該可以更方便同學找到想看的文章。


.

class 4 - passport size photo design (2)

1. 色彩（回想色相環）
   
   • 三屬性：色相（hue）、明度（brightness）、彩度或飽和度（saturation）
   • 四組對比：（黑白）、（紅 red, 青）、（綠 green, 紫）（藍 blue, 黃）
     
     • ex, curve，blue channel，調整 curve 的中間調，加影像的藍色=減黃色。
       
       
2. 影像調色相關，皆在 image/ adjustments/
   
   
   • 最重要的三個指令：
     
     • curve（曲線） 「快」ctrl + m
       亮部（右上）、中間調（正中央）、暗部（左下）
       
     • level（色階） 「快」ctrl + l
       亮部、中間調、暗部像素的堆積
       
     • hue/saturation...（色彩屬性） 「快」ctrl + u
       
       • ex, curve，blue channel，調整 curve 的中間調，加影像的藍色=減黃色。
         
         
   • 按 alt，cancel 變成 reset
   • Invert（反轉）「快」ctrl + i，黑 白、紅 青、綠 紫、藍 黃
     
     
     
3. 去背概念：單純的幾何圖形（path）、複雜的髮絲（channel）、單純的背景、複雜的背景，四種狀況的交集，有不同處理方式。若要自行拍攝素材（比方說花椰菜），前處理用遠比後處理重要，單純，對比強的背景，成為首要注意事項。
   
   
   • path 去背，一種韻律感的養成，下錨點，下錯復原，下對繼續下，alt 調整一端控制點；下錨點，下錯復原......
     
     
   • channel 去背（記住黑與白的概念）
     
     • 切記「新增色版」為第一步驟，勿修改原始 red, green, blue channel
       
     • 白色=全選
     • 黑色=全不選
     • 25%白色+75%黑色的灰色= 選取25%（有點透明感）
     • 搭配筆刷，刷上黑、白
       
   • 其他去背：濾鏡、魔術棒......
     
     
4. 選取範圍（虛線框起來的地方，想到 ctrl + 左鍵點一下 layer、channel、path圖像）
   
   • ctrl + d 取消選取範圍

.

大頭照DIY設計 (1) 之課堂作業

嗨
我從旅行的照片當中挑選六張作為此次作業
需分兩步驟（去背、設計）進行
請用原始檔製作，檔案擺在：個人隨堂作業\Yves\去背影像六張\
資料夾內並且有「去背作業範例.psd」，請按照該檔案格式製作，讓我看到三個圖層：去背、黑背景、白背景，還有一個妳所製作儲存的 path layer。

1. 去背*6，分別為：
   
   • 十字架
     
     
   • 埃及雕像
     
     
   • 聖母院塑像
     
     
   • 類薑餅人
     
     
   • 公園雕像
     
     
   • 一串心
     
     
   （請附原始檔.psd，格式參照作業範例）
   
   
2. 設計：將六項元素置放於105mm*148.5mm, 300ppi 的檔案中（此為1/2 A4大小，直橫福幅皆可），進行排列、縮放、組合、複製等等所有妳所會的技法......而成視覺作品，並加上一句文字標題。完成後將原始檔.psd 上傳外，並點選「另存新檔為」存成 .jpg（ /file/save as/ ）。
   

p.s.請整理作業資料夾，現在我們已經有兩個大作業，分別是1. 名片 2.去背。因此大家請至自己姓名的資料夾當中，建立1. 名片 2.去背兩個資料夾，並分別在對應資料夾中擺放作業。作業格式參照浩文（抱歉我修改勒資料夾名稱）。

1. 名片\
.psd 六份
.jpg 六份

2. 去背\
去背.psd 六份
去背.jpg 六份
創作.psd 一份
創作.jpg 一份


.

心情不錯

雖然
今天
雨
不過
來上課的同學依舊踴躍
真是很開心 ：）

瞥見諸位精美的筆記
更是感動在心頭 ：））

沒能來的同學
記得請教同事
畢竟
第三堂課程
是很重要的
沒有課堂的一番折騰與練習
很難有能力執行那項技術

大
家
加
油
。

class 3 - passport size photo design (1)

1. [工P] 路徑工具（筆、自由、+、-、轉），一種拖拖拉拉的遊戲，影像處理的基本重要技能
   
   
   • 每個錨點（anchor point），都需拉出控制端點（direction point）以求可再編輯（re-edit）
     
     
     
     
     
     
     
     
     - 4 screenshot from adobe photoshop help center
     
     
   • 去背切記往內吃一點
   • 搭配縮放工具 [快] space + alt; space + ctrl; space.
   • 錨點越少越好
   • 記得點兩下儲存 path layer！
   • [快] alt 修整一邊控制端點
   • 記得錨點一下錯，便使用回復功能再下一次
     
   • [快] ctrl + alt + z 無限回復（undo）
     
   • [快] ctrl + shift + z 無限重做（redo）
   • 小圓虛線圖形，讓 path 變成 selection（選取範圍）
     
   • [快] ctrl + j 以選取範圍所在圖層為基礎，新增圖層！
     
     
2. [工A] 選取/調整路徑工具
   
   • 錨點、控制端點、曲線，三個地方任君調整
     
     
3. screenshot（螢幕截圖）的方法：
   在妳想要截圖的畫面，按[F12]旁邊的[PrtSC]，到PS軟體中，選擇 file/new 開新檔案。什麼選項都不要調整的情況下，選 edit/ past，就可以輕鬆把圖片擷取下來，在PS上面編輯囉。
   
   
4. 過去三堂教學如有遺漏重點，歡迎來信或MSN提醒。：）

p.s. 此圖原始檔置於：隨堂練習作業\Yves\3min.psd
完成前後不超過三分鐘，運用簡單的複製、移動、光暈、漸層色、遮罩輕鬆完成，供同學參考。

.

05/ 18 - 第三堂課前準備

嗨
抱歉讓各位久等勒

明天請準備：
1. 數位相機一台
2. 可以把自己的相機照片傳到電腦的設備 (傳輸線或讀卡機)
3. 隨身碟（如果photoshop cs2試用版軟體抓不下來，就到老師電腦這邊抓八。）

還沒有上傳作業的同學，請儘速補上；大家都交齊勒，只剩妳沒交喔！

本週將混合大頭照DIY課程(1)(2)的進度一起進行，貝茲曲線、色頻、相關去背技術都是PS當中非常重要的基礎，如果順利，將在課堂上一一教授給大家，請大家務必到場練習，替未來的課程奠下基礎！

請大家吃飽喝足，專心於 6:15PM 一同學習喔～^^ok

.

名片設計 (1) (2) 之課堂作業

除課堂練習之英文名片外，請另製作兩份名片。一份為中文，需包含同課堂作業所交代的六大元素（姓名、電話......）；另一份則中英元素自訂。詳述如下：

1. 名片一（課堂練習）：英文版含六大元素之正反 jpg檔 + 原始PSD檔。
（檔名為 front1.jpg、back1.jpg、1.psd）。

2. 名片二：中文版含六大元素之正反 jpg檔 + 原始PSD檔。
（檔名為 front2.jpg、back2.jpg、2.psd）。

3. 名片三：元素自由挑選之正反 jpg檔 + 原始PSD檔。
（檔名為 front3.jpg、back3.jpg、3.psd）。

請善加利用網路資源，以多樣的中英文字型，進行組合；並著重名片尺寸與造型、排列構圖與色彩搭配。多加發揮創意，畢竟，同學的作品會擺在網頁上供世人憑弔喔。>~<

上傳期限：05/17 (四)，多多練習不然會忘掉拉～

• 免費英文字體：http://www.dafont.com/
• 免費中文字型48套：http://briian.com/?p=290
• 設計佳例：http://creativebits.org/cool_business_card_designs
• http://www.phrizbie-design.com/business_card_design.html
• 這個材質不錯喔 http://www.flickr.com/photos/jaline/332138063/
  

同學作品欣賞, 凝, created by 奶油水母毛

第一屆課程，緊湊的八堂課當中，以飛快的速度^^帶領同學進行影像合成。成果頗讓人欣慰：）

作品名稱 - 凝。

奶油水母毛同學（真拗口......）利用多樣的視覺元素作為搭配，
增加畫面的豐富感，
並且利用ctrl + j 的新增選取圖層功能，
配合手臂部分的構圖錯置、
layer style（圖層樣式）中的 drop shadow（下拉陰影）、
adjustment中的 invert（色相反轉），
最後將圖像素材 desaturate（去彩度），
運用blending mode（圖層混和模式）的 overlay 和透明度調整，
完成這幅美麗的作品。

.

class 2 - bussiness card design (2)

1. 軟體
   • FileZilla 下載處
     
     
     • 點選後將如下圖所示。請點選FileZilla2_2_32_setup.exe。
       
       
     
     • 下載到桌面上後，點兩下進行安裝，從頭到尾都按「下一步」即可輕鬆完成。
       
       
     • 完成安裝後，執行軟體，將出現如下圖所示。點選站台管理員圖示。
       
       
     
     
     
     • 依下圖所示七步驟新增FTP站台，其中第二步驟按F2用以自行命名站台（ex. photoshop ftp）。
     
     
     
     
     • 新增站台設定七步驟完成後，再次點選如下圖站台管理員圖示。
       
       
     
     
     
     • 於自行命名站台（ex.photoshop ftp）處點兩下滑鼠左鍵，或選擇下方的「連線」即可進行與伺服器的連線動作。
       
       
     • 連線後左邊黃色漸層為使用者電腦，右邊藍色漸層為伺服器 FTP。
       
       
     
     
     
     • 可將檔案利用拖拉，進行下載與上傳檔案動作。
     
     
   • Adobe Photoshop CS2 下載處
     
     
     
     • 如下圖點選 download，儲存至電腦；點兩下解開壓縮檔，打開解壓縮後的資料夾，點選 setup.exe安裝軟體（從頭到尾按「下一步」即可輕鬆完成）。
       
       
     
     
     
     • 以上兩套軟體安裝，如有不瞭解之處請來信或MSN討論。：））
   • 
     
     
2. 名片設計流程（文字資料 → 核心概念發想 → 實做 [造型、色彩、構圖] ）
   
   
3. 圖層
   
   • 更改圖層名稱
   • 群組圖層 [快] ctrl + g （新增圖層的左邊按鈕）
   • 「字型圖層」無法填色
     
     
4. [工G]漸層色（線性、放射、角錐、反射、鑽石；滴管更替顏色）
   
   
5. [工U]向量圖形工具（矩、圓矩、橢、多邊、線、自訂）
   
   • 前顏色、後形狀
   
   
6. 重要習慣
   
   • 取消選取
   • 移動工具的重要
     
     
7. 設計概念
   
   • 字型的選擇與搭配
   • 色彩的搭配
   • 放大、縮小檢視，是否可清楚傳達清晰資訊
     
     
8. 此篇文章所附圖片之.PSD原始檔皆可於 FTP 下載，同學可以進行參考（用簡單的截圖PrtScr、漸層色、遮罩）。
   

.

05/ 11 - 第二堂課前準備

嗨
大家好 :)
我是老師
在未來 6周的時間裡
大家叫我大民或是 Yves 即可.

這個 blog 是特別為大家所準備
用來公佈課程相關事宜
與一些連結資源的地方
yves 會盡力時時更新
希望大家善加利用.

這禮拜是母親節
先祝各位還有我自己的母親越來越美麗快樂
但
當然
課程還是要上
請準備：
1. 數位相機一台
2. 可以把自己的相機照片傳到電腦的設備 (傳輸線或讀卡機)
3. 隨身碟
4. 名片分享(把自己所蒐集的名片帶來和大家分享交流)

希望大家保持心情愉快來上課

.

同學作品欣賞, created by dodo.

這是去年 [影像藝術設計整合] 課程
由優秀的 dodo 同學在最終成果發表時
所創作的作品, 名為夢境.

dodo 運用素材與自己拍攝的照片
對 layer 中的基礎視覺元素作恰當排列堆疊
搭配 transform, mask, curve, blending mode(screen, overlay...). brush......
等課堂所教的基礎技法
營造出帶有空間深度的超現實主義 (Surrealism) 味道作品
感覺很好吃的樣子 (dodo別打我......)

徵得第一屆同學同意後
放上來給大家欣賞！

雖然這次的課程安排與去年有所不同
不過相信同學在 yves 的荼毒之下
在課堂與課後勤加練習
也可以完成很不錯的作品
供未來的同學欣賞 ^^
.

class 1 - bussiness card design

1. 開新檔案(用尺量。此例width89mm*height45mm)
   
   • 印刷/ 300ppi
   • 網頁/ 72ppi
     
     
2. 縮放、拖拉工作範圍(25%倍數下工作準則)
   
   • 拖拉 [快] space + 滑左
     
   • 縮 [快] space + alt + 滑左
   • 放 [快] space + ctrl + 滑左
     
     
3. 圖層
   
   • 右下角的 new layer(新增圖層) 與delete layer(垃圾桶)
   • 第一件事：新增一個圖層，勿在背景圖層做圖（靈活）
     
   • 作用的圖層背景是藍色（想清楚你要做的動作，是否在正確圖層）
   • 圖層順序可以移動（PS中的堆疊必須熟練）
   • 電腦使用原則與PS軟體操作原則概念相通（想想 shift、ctrl）
   • 狀態列的對齊排列工具（看圖說故事）
     
     
4. [工M] 選取範圍（虛線，作用範圍；矩、橢、垂、水）
   
   • 對老師很簡單，對大家很困難的概念^^
   • 靈活運用選取範圍是PS高手必經之路
   • 取消選取範圍 [快] ctrl + d
     
     
5. 填色（兩個方塊、迴旋箭頭）
   
   • 左上方塊 foreground color(前景色)
   • 右下方塊 background color(背景色)
   • 迴旋箭頭，前景色與背景色的互換
   • [快] alt + delete, 填入前景色
     
     
6. 字體安裝（.ttf 檔拖入 fonts資料夾）
   
   • ".ttf"檔案，即為字型檔（中英文字型皆同）
   • c:\windows\fonts\
   • 中文字型的顯示：edit/preferences/type,
     勾 show asian text options, 不勾 show font names in English
     
     
7. [工V] 移動工具
   
   • 最常使用的工具之一，用於元素的移動調整構圖
     
     
8. [工T] 文字工具
   
   • 字級大小、顏色
     
     
9. 變形 (transform)
   
   • 最常使用的功能之一
   • 等比例 shift
   • 軸心可移動
   • [快] ctrl + t
     
     
10. 名片的11項資訊元素（見講義）
    
    
11. 名片的設計元素（字體、構圖、色彩、雙面、紙材質、後製加工）