JinJin 的部落格

2012新一代設計展介紹

2012新一代設計展官網：
https://sites.google.com/a/yodex.com.tw/xin-yi-dai-she-ji-zhan/

活動時間

展覽時間
開始於2012-05-18~結束於2012-05-21
時間從10:00:00至18:00:00

活動地點
台北世界貿易中心展覽大樓
台北市信義區信義路五段5號

費用資訊
現場：全票200元；學生及優待票150元 預售：單日130元；雙日230元

==================================================================

2012新一代設計展參觀心得報告

報告說明：

1.請至少選擇觀賞後印象最深刻的一件作品，請註明學校與題目、設計類別，寫下心得報告
2.須附上相片，主題、學校、作品說明等
3.以PowerPoint製作繳交，上台報告加分

==================================================================

參考格式如下

1.學校、作品名稱：
2.設計類別：
(包裝設計類、平面設計類、數位媒體類、空間設計類、產品設計類、工藝設計類...等)
3.作品相片：
4.作品說明：
5.對於作品的心得：
6.對於本次參觀的具體收穫與心得：
7.有興趣的設計方向：

==================================================================

附註：寫越多件作品分數越高

遠距教學的表格製作影音原始檔
共三個檔案
放在學校 ican系統→教材區
這次前兩個檔案是直接上傳到ican
下載會有下載紀錄，請大家下載

但因空間不足還是放到推薦網站區
要記得去下載喔!
大家試試看是否可順利下載
若有問題請回報

[hr]
本講義的範例
http://mepopedia.com/~jinjin/web/hw06-ex/

[hr]

在進入表格之前，先複習一下基本的設定，大家可以下載練習檔來練習，希望可以透過影片讓大家對於CSS基本的設定更佳的熟練，也先把基本的部分做好設定。

Dreamweaver中#content、#footer、h2、項目清單的CSS設定
http://www.youtube.com/watch?v=gvI0qYcn9ko



[hr]

表格的概述

表格是網頁中常出現的元素，在傳統的網頁設計中表格除了有整理資料的功能外，還常被使用為整個頁面排版的工具，但是在CSS逐步展開WEB標準設定後，表格逐漸不再擔任重要的版面配置任務，而以DIV取代，但表格仍然在整理資料上，扮演重要的角色，本單元也以CSS搭配表格，講述如何以表格整理資料，並同時展現美感的部分，包含：色彩、標題、邊框、背景等。

表格中的標記

最常用的與表格相關的標記為<table>、<tr>、<td>。

<table>：定義整個表格。
<tr>：定義一列
<td>：定義一個儲存格


如以下是三列兩欄表格的HTML語法：

<table><br /> <tr><br /> <td>表格儲存格</td><br /> <td>表格儲存格</td><br /> </tr><br /> <tr><br /> <td>表格儲存格</td><br /> <td>表格儲存格</td><br /> </tr><br /> <tr><br /> <td>表格儲存格</td><br /> <td>表格儲存格</td><br /> </tr><br /> </table><br />


另外為了使CSS可以更活用的設計表格樣式，還有兩個常用的標記：

<caption>：定義表格的大標題，該標記可以出現在<table></table>之間的任意位置，不過通常出現在第一排<table>標記之後。

<th>：是table header的縮寫，即表頭的意思，在表格中用於列或欄的名稱，跟<tr>和<td>很類似，主要是針對他們進行樣式設定。

例如表格也可以這樣表現：

<table><br /> <caption>表格的標題</caption><br /> <tr><br /> <th>表格標頭</th><br /> <th>表格標頭</th><br /> </tr><br /> <tr><br /> <td>表格儲存格</td><br /> <td>表格儲存格</td><br /> </tr><br /> <tr><br /> <td>表格儲存格</td><br /> <td>表格儲存格</td><br /> </tr><br /> </table><br />

各部位如圖所示

表格的邊框

設定儲存格的邊框

border-collapse:collapse;

HTML屬性中：
cellpadding：設置儲存格內容和邊框之間的距離
cellspacing：設置相鄰儲存格邊框之間的距離



以CSS實現cellpadding的作用，只要對td使用padding就可以，而對儲存格使用margin是無用的，必須在table使用專門屬性：border-spacing來代替他。

接下來則以實例來解說表格的應用：


Dreamweaver表格製作-TABLE,TR TD TH caption的CSS設定

http://www.youtube.com/watch?v=3gPx_YYE1yI



[hr]

Dreamweaver表格製作-細部調整、圖片開啟新視窗、超連結等CSS的設定

http://www.youtube.com/watch?v=69CMaum2WPY



[hr]

Dreamweaver中表格CSS設定以及影音嵌入

http://www.youtube.com/watch?v=lXMUKwYmBqQ

請創立一仿生設計為主的全新品牌，並為其設定色彩企畫及設計相關商品。

=======================================

講義：

仿生設計色彩計畫期末作業說明
http://w3.cyu.edu.tw/jinjin/99-1/c-final.pdf

LOGO設計程序
http://w3.cyu.edu.tw/jinjin/99-1/logo.pdf

=======================================

進度表:

第十三週05/15　主題確定，分組名單，資料蒐集與分析，LOGO草圖討論每人十個
第十四週05/22　企劃書撰寫--色彩語意與色彩尺度
第十五週05/29　LOGO與相關設計討論
第十六週06/05　期末仿生企劃與成品討論
第十七週06/12　期末作業發表與檢討 Presentation【期末作業】
第十八週06/19　期末作業發表與檢討 Presentation【期末作業】

=======================================

組員名單及工作分配

目錄：

一、基本設定

1.品牌名稱：

2.產業類別：（食品、生活用品、科技、家具....)

3.經營理念與特色：

4.仿生物：

5.經營項目及產品：

6.主要消費族群設定：


二、市場分析

1.資料蒐集與分析

1.仿生物
–仿生物介紹
–相關仿生物作品

2.相關產業的LOGO及其產品分析
- 整理競爭品牌LOGO與產品資料
並盡可能以表格的方式分析其包裝及色彩

包裝與LOGO圖片 1.品牌名稱 2.包裝方式 3.風格特色 4.使用色彩 5.市場定位 6.廣告標語 7.容量價格


三、色彩計畫

1.設計理念
2.為整體型或對比型配色？
3.設定主要色
4.設定搭配色

四、標誌發展與設定

1.標誌設計意念展開圖
2.LOGO設計元素
3.LOGO標準色與輔助色

五、品牌定位

色彩語意尺度表 ：
1.十字型語意色彩形象尺度表
2.對比型色彩形象尺度表
3.多向型色彩形象尺度表

六、產品草圖與完成圖
每位同學請至少設計一種樣式

請創立一仿生設計為主的全新品牌，並為其設定色彩企畫及設計相關商品。

=======================================

講義：

仿生設計色彩計畫期末作業說明
http://w3.cyu.edu.tw/jinjin/99-1/c-final.pdf

LOGO設計程序
http://w3.cyu.edu.tw/jinjin/99-1/logo.pdf

=======================================

進度表:

第十三週05/15　主題確定，分組名單，資料蒐集與分析，LOGO草圖討論每人十個
第十四週05/22　企劃書撰寫--色彩語意與色彩尺度
第十五週05/29　LOGO與相關設計討論
第十六週06/05　期末仿生企劃與成品討論
第十七週06/12　期末作業發表與檢討 Presentation【期末作業】
第十八週06/19　期末作業發表與檢討 Presentation【期末作業】

=======================================

組員名單及工作分配

目錄：

一、基本設定

1.品牌名稱：

2.產業類別：（食品、生活用品、科技、家具....)

3.經營理念與特色：

4.仿生物：

5.經營項目及產品：

6.主要消費族群設定：


二、市場分析

1.資料蒐集與分析

1.仿生物
–仿生物介紹
–相關仿生物作品

2.相關產業的LOGO及其產品分析
- 整理競爭品牌LOGO與產品資料
並盡可能以表格的方式分析其包裝及色彩

包裝與LOGO圖片 1.品牌名稱 2.包裝方式 3.風格特色 4.使用色彩 5.市場定位 6.廣告標語 7.容量價格


三、色彩計畫

1.設計理念
2.為整體型或對比型配色？
3.設定主要色
4.設定搭配色

四、標誌發展與設定

1.標誌設計意念展開圖
2.LOGO設計元素
3.LOGO標準色與輔助色

五、品牌定位

色彩語意尺度表 ：
1.十字型語意色彩形象尺度表
2.對比型色彩形象尺度表
3.多向型色彩形象尺度表

六、產品草圖與完成圖
每位同學請至少設計一種樣式

請創立一仿生設計為主的全新品牌，並為其設定色彩企畫及設計相關商品。

=======================================

講義：

仿生設計色彩計畫期末作業說明
http://w3.cyu.edu.tw/jinjin/99-1/c-final.pdf

LOGO設計程序
http://w3.cyu.edu.tw/jinjin/99-1/logo.pdf

=======================================

進度表:

第十三週05/15　主題確定，分組名單，資料蒐集與分析，LOGO草圖討論每人十個
第十四週05/22　企劃書撰寫--色彩語意與色彩尺度
第十五週05/29　LOGO與相關設計討論
第十六週06/05　期末仿生企劃與成品討論
第十七週06/12　期末作業發表與檢討 Presentation【期末作業】
第十八週06/19　期末作業發表與檢討 Presentation【期末作業】

=======================================

組員名單及工作分配

目錄：

一、基本設定

1.品牌名稱：

2.產業類別：（食品、生活用品、科技、家具....)

3.經營理念與特色：

4.仿生物：

5.經營項目及產品：

6.主要消費族群設定：


二、市場分析

1.資料蒐集與分析

1.仿生物
–仿生物介紹
–相關仿生物作品

2.相關產業的LOGO及其產品分析
- 整理競爭品牌LOGO與產品資料
並盡可能以表格的方式分析其包裝及色彩

包裝與LOGO圖片 1.品牌名稱 2.包裝方式 3.風格特色 4.使用色彩 5.市場定位 6.廣告標語 7.容量價格


三、色彩計畫

1.設計理念
2.為整體型或對比型配色？
3.設定主要色
4.設定搭配色

四、標誌發展與設定

1.標誌設計意念展開圖
2.LOGO設計元素
3.LOGO標準色與輔助色

五、品牌定位

色彩語意尺度表 ：
1.十字型語意色彩形象尺度表
2.對比型色彩形象尺度表
3.多向型色彩形象尺度表

六、產品草圖與完成圖
每位同學請至少設計一種樣式

2012新一代設計展介紹

2012新一代設計展官網：
https://sites.google.com/a/yodex.com.tw/xin-yi-dai-she-ji-zhan/

活動時間

展覽時間
開始於2012-05-18~結束於2012-05-21
時間從10:00:00至18:00:00

活動地點
台北世界貿易中心展覽大樓
台北市信義區信義路五段5號

費用資訊
現場：全票200元；學生及優待票150元 預售：單日130元；雙日230元

==================================================================

2012新一代設計展參觀心得報告

報告說明：

1.請至少選擇觀賞後印象最深刻的一件作品，請註明學校與題目、設計類別，寫下至少500字的心得
2.須附上相片，主題、學校、作品說明等
3.回覆此篇文章，註明學號

==================================================================

參考格式如下

1.學校、作品名稱：
2.設計類別：
(包裝設計類、平面設計類、數位媒體類、空間設計類、產品設計類、工藝設計類...等)
3.作品相片：
4.作品說明：
5.對於作品的心得：
6.對於本次參觀的具體收穫與心得：
7.有興趣的設計方向：

==================================================================

附註：寫越多件作品分數越高

2012新一代設計展介紹

2012新一代設計展官網：
https://sites.google.com/a/yodex.com.tw/xin-yi-dai-she-ji-zhan/

活動時間

展覽時間
開始於2012-05-18~結束於2012-05-21
時間從10:00:00至18:00:00

活動地點
台北世界貿易中心展覽大樓
台北市信義區信義路五段5號

費用資訊
現場：全票200元；學生及優待票150元 預售：單日130元；雙日230元

==================================================================

2012新一代設計展參觀心得報告

報告說明：

1.請至少選擇觀賞後印象最深刻的一件作品，請註明學校與題目、設計類別，寫下至少500字的心得
2.須附上相片，主題、學校、作品說明等
3.回覆此篇文章，註明學號

==================================================================

參考格式如下

1.學校、作品名稱：
2.設計類別：
(包裝設計類、平面設計類、數位媒體類、空間設計類、產品設計類、工藝設計類...等)
3.作品相片：
4.作品說明：
5.對於作品的心得：
6.對於本次參觀的具體收穫與心得：
7.有興趣的設計方向：

==================================================================

附註：寫越多件作品分數越高

參考講義

http://mepopedia.com/forum/read.php?304,22284

1.Photoshop手繪風格-線稿製作 http://w3.cyu.edu.tw/jinjin/99-2/CG-line.pdf
2.PhotoshopQ版卡通上色 http://w3.cyu.edu.tw/jinjin/99-2/CG-color.pdf

與上課製作方式

自行繪製一個角色(人物)

[hr]
5/24前請上傳：

1.附上掃描之鉛筆線搞
(掃描時請設定解析度300dpi，上傳則以儲存為網頁與裝置用選項(72dpi))

2.進入photoshop以鋼筆工具或繪圖板任一自己擅長或適合的方式繪製線稿

[hr]
5/31前請上傳：

彩色完稿

[hr]
請註明：
1.設計角色：
2.角色風格
3.繪製方式
4.班級，學號，(姓名)

並請記得存好分圖層之photoshop原稿，以便繼續進行製作
本作業檔案請勿合併圖層

[hr]
上課練習參考圖檔

線稿完成PSD檔: http://w3.cyu.edu.tw/jinjin/99-2/line.psd

參考講義

http://mepopedia.com/forum/read.php?304,22284

1.Photoshop手繪風格-線稿製作 http://w3.cyu.edu.tw/jinjin/99-2/CG-line.pdf
2.PhotoshopQ版卡通上色 http://w3.cyu.edu.tw/jinjin/99-2/CG-color.pdf

與上課製作方式

自行繪製一個角色(人物)

[hr]
5/24前請上傳：

1.附上掃描之鉛筆線搞
(掃描時請設定解析度300dpi，上傳則以儲存為網頁與裝置用選項(72dpi))

2.進入photoshop以鋼筆工具或繪圖板任一自己擅長或適合的方式繪製線稿

[hr]
5/31前請上傳：

彩色完稿

[hr]
請註明：
1.設計角色：
2.角色風格
3.繪製方式
4.班級，學號，(姓名)

並請記得存好分圖層之photoshop原稿，以便繼續進行製作
本作業檔案請勿合併圖層

[hr]
上課練習參考圖檔

線稿完成PSD檔: http://w3.cyu.edu.tw/jinjin/99-2/line.psd

參考講義

http://mepopedia.com/forum/read.php?304,22284

1.Photoshop手繪風格-線稿製作 http://w3.cyu.edu.tw/jinjin/99-2/CG-line.pdf
2.PhotoshopQ版卡通上色 http://w3.cyu.edu.tw/jinjin/99-2/CG-color.pdf

與上課製作方式

自行繪製一個角色(人物)

[hr]
5/24前請上傳：

1.附上掃描之鉛筆線搞
(掃描時請設定解析度300dpi，上傳則以儲存為網頁與裝置用選項(72dpi))

2.進入photoshop以鋼筆工具或繪圖板任一自己擅長或適合的方式繪製線稿

[hr]
5/31前請上傳：

彩色完稿

[hr]
請註明：
1.設計角色：
2.角色風格
3.繪製方式
4.班級，學號，(姓名)

並請記得存好分圖層之photoshop原稿，以便繼續進行製作
本作業檔案請勿合併圖層

[hr]
上課練習參考圖檔

線稿完成PSD檔: http://w3.cyu.edu.tw/jinjin/99-2/line.psd

CG手繪風格-Photoshop線稿製作與Q版卡通上色

以Photoshop繪製插畫的方式很多種，大家可以盡量盡量嘗試不同的畫法，選擇最適合自己也最符合自己風格的方式來完成。

參考講義

1.Photoshop手繪風格-線稿製作 http://w3.cyu.edu.tw/jinjin/99-2/CG-line.pdf
2.PhotoshopQ版卡通上色 http://w3.cyu.edu.tw/jinjin/99-2/CG-color.pdf

[hr]

上課練習參考圖檔

線稿完成PSD檔: http://w3.cyu.edu.tw/jinjin/99-2/line.psd

[hr]

1.掃描草圖線稿


2.繪製之線稿


3.彩色完稿


[hr]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/1-2.jpg[/IMG] [IMG]http://i556.photobucket.com/albums/ss1/whc915/2-3.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/3-1.jpg[/IMG] [IMG]http://i556.photobucket.com/albums/ss1/whc915/4-1.jpg[/IMG]

[hr]

其他參考網站

1.末日書院
http://www.geocities.jp/kokawaru/
點紅色的愛字進入
有不同的軟體說明，及一些CG基本知識，步驟也算詳細，是不錯的CG入門網站。

2.CG畫廊&CG教學
http://web1.emax.net.tw/fannyia/se-Cg.htm
雖然年代較久遠，但有還算完整的線畫及上色處理過程，可以參考參考囉。

3. Photoshop7教學
http://egtseng.hp.infoseek.co.jp/7teach/7teach.htm

4. CG偽教學
http://chocolate.wolflord.org/cm/cmcho/favorite/cgteach/CG.htm
一個案例的教學

5.photoshop CG教程(基本篇)一個案例的教學
http://blog.yam.com/rokaxinkh/article/4418913

6.CG教學 (簡單畫CG!) / Photoshop繪圖教學/一個案例的教學
http://www.wretch.cc/blog/g3111638/9639436

7.hoelex浩里斯
http://blog.yam.com/hoelex
http://tw.streetvoice.com/users/hoelex34/
http://www.heyshow.com/browsing/users.asp?id=14375
http://tw.becuber.com/space.php?uid=200&do=album&id=260
http://www.kung-long.com.tw/findTeamUITeamAction.action?artist_id=485
[hr]

其他同學範例

1.掃描草圖線稿

[img]http://a3.sphotos.ak.fbcdn.net/hphotos-ak-snc6/229256_210603118960268_100000317455175_700979_4374547_n.jpg[/img]

2.繪製之線稿

[img]http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc6/227954_210604802293433_100000317455175_700989_1248615_n.jpg[/img]


3.上色完畢

[img]http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/230034_213085182045395_100000317455175_717398_1588190_n.jpg[/img]

[hr]





[hr]