名片設計範例

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. 名片的設計元素（字體、構圖、色彩、雙面、紙材質、後製加工）