多媒設計課成果報告

第四小組 (棋藝社 棋藝社) 棋藝社 醫學二 醫學二 醫學二 藥學一 藥學一

B101098067 B101098071 B101098164 B303099003 B303099202

宋之維 李維鈞 許弘璟 劉韋誠 林玉靜

目錄 Part I： ：個人部分 1. 個人風格大頭照 2. 網路 logo 分析 3. 修改前後的社團照片 Part II： ：小組部分 1. 社團 banner 2. 有關社團主題之網站或布落格分析 3. 社團網站架構書 4. 社團網站樣式修改前後對照與心得 -1-

1. 個人風格大頭照： 個人風格大頭照： Inkscape『 『獨特風格大頭照』 獨特風格大頭照』

2. 網路 logo 分析 Take a look! 特色 logo 在那裡? 在那裡

3. 修改前後的社團照片 gimp/Picasa 編修個人社團活動照片

-2-

醫學二 B101098067 宋之維

-3-

Inkscape『 『獨特風格大頭照』 獨特風格大頭照』

-4-

Take a look! 特色 logo 在那裡? 在那裡

1.圖形符號型 2.網站名稱 http://st.kjes.tp.edu.tw/StWeb/97/971/601/60131web/c.html

奧林匹克五環標誌是由皮埃爾-德-顧拜旦于 1913 年構思設計的，它是世界範圍內最為人 們廣泛認知的奧林匹克運動會標誌。五個不同顏色的圓環代表了參加現代奧林匹克運動會的 五大洲(歐洲、亞洲、非洲、大洋洲和美洲)。每一個參加奧林匹克運動會的國家都能在自己 的國旗上找到至少一種五環的顏色。 我會選擇他是因為它是一個全世界都很熟悉的 logo，他是一個完全由圖型概念設計的， 不但具有歷史的意義，以及象徵性的代表，跟這項運動本身的精神達到相呼應的目的。

1.文字型 2.網站名稱 http://tw.battle.net/sc2/zh/ 這 是 一 個 遊 戲 的 Logo，全 名 叫 做「 星 海 爭 霸 II」 ，在 大 陸 又 稱 做「 星 際 爭 霸 II」， 從 標 誌 上 我 們 可 以 看 出 是 文 字 型 的，用 翻 譯 出 來 的 名 子，這 是 一 款 描 述 人 類、蟲 族 、 神族之間的歷史對抗，是一款即時戰略遊戲，在台灣去年暑假上市，上市的第一週 全 球 同 步 售 出 300 萬 套，並 且 獲 得 2010 年 最 佳 即 時 戰 略 遊 戲，我 本 身 也 有 參 與，不 論是進行戰役的攻略，或是跟三五好友一起打電腦、或是連線到全世界進行對戰， 都是相當的刺激，昨天在台灣電子競技場上也是首度把他列入職業比賽項目之一。

-5-

1.綜合型 2.網站名稱 http://www.esports.com.tw/team.php?teamid=2 這個 logo 是台灣電子競技聯盟的一個職業隊伍橘子熊隊的標誌，取名橘子熊的原因，是 因為台灣黑熊。台灣黑熊是台灣的獨有熊類，喜歡玩鬧，但同時也有著強大的力量，最大的 特徵就是胸口有Ｖ型記號。因為台灣黑熊這樣的特性，使他成為我們選用的隊名。

-6-

gimp/Picasa 編修個人社團活動照片 1.卡通化邊框 卡通化邊框

2.梵谷 梵谷 色彩分離 模糊

-7-

3.圖層遮罩 圖層遮罩

4.灰階化 灰階化 新增圖層遮罩

5.卡通化 卡通化 去色調 水平調整

-8-

醫學二 B101098071 李維鈞

-9-

Inkscape『 『獨特風格大頭照』 獨特風格大頭照』

-10-

Take a look! 特色 logo 在那裡? 在那裡

1. 家樂福：http://www.wretch.cc/blog/g76330/8032045 綜合型 家樂福著名醒目的紅藍白企業標誌，看似簡單，卻饒富意義，裡面隱含著家樂福創立至今的 企業願景與對消費者的承諾。這個企業標誌第一次出現是在 1966 年，設計概念取自 Carrefour 的字首 C，C 的右端延伸一個藍色箭頭，左端一個紅色箭頭，象徵四面八方的客源不斷向著 Carrefour 聚集。一旁的 Carrefour 是家樂福原創母公司的法文名，在台灣翻譯為「家樂福」是 取「家家快樂又幸福」的意思，充分呼應了家樂福的經營理念。

2. 7-11：http://www.7-11.com.tw/ 文字型 7-ELEVEN 的前身統一商店股份有限公司是因為當初訴求的是從早上 7 點營業到晚上 11 點而 立，因現代消費模式才逐漸演變成 24 小時，顏色使用最原始的三原色紅色-綠色-橘黃色。

3. msn：http://tw.msn.com/ 圖案型 圖形的特徵是用一條網路線，串起途中的兩個人，很完整了呈現了 MSN 是什麼。 以上三者會選擇的原因，都是他們屬於生活中非常常見的 logo。

-11-

gimp/Picasa 編修個人社團活動照片 1.修補 修補 銳利化 相反亮度 反向

2.去色調 去色調 新增圖層遮罩

-12-

3.色彩分離 色彩分離 邊框 文字

4.卡通化 卡通化 邊框

5.去背 去背 卡通化

-13-

醫學二 B101098164 許弘璟

-14-

Inkscape『 『獨特風格大頭照』 獨特風格大頭照』

-15-

Take a look! 特色 logo 在那裡? 在那裡

1. 網址：http://www.google.com/chrome 類型：圖形 介紹：這是 google 和 chromium 的結合，所以形狀是跟隨 chromium 的 logo，而配色則是使用 google 的配色， 而藍色的擺在中心則是因為 chromium 原有商標是偏近藍色的。

2. 網址：http://www.facebook.com/ 類型：文字 介紹：facebook 的商標，藍色背景搭上白色的字，儉約的風格貫徹其商標，這兩種顏色都帶 給人有效率、快速的感覺！

3. 網址：http://tw.kkbox.com/index.html 類型：圖形+文字 介紹：kkbox 的商標，圖形呼應了產品名稱中的 box，而 KK 就印在這個 box 上，而最後一個 面則是一個音符，表示它的功能是和音樂相關的。 -16-

gimp/Picasa 編修個人社團活動照片 1.人物卡通化 人物卡通化

2.去背 去背

3.色彩曲線 色彩曲線

-17-

4.背景去彩度 背景去彩度

5.移除擋人的樹枝 移除擋人的樹枝

-18-

藥學一 B303099003 劉韋誠

-19-

Inkscape『 『獨特風格大頭照』 獨特風格大頭照』

-20-

Take a look! 特色 logo 在那裡? 在那裡

http://www.mercedes-benz.com.tw/content/taiwan/mpc/mpc_taiwan_website/twng/home_mpc/passengercars/ho

圖片類型：圖形符號 標誌由來：1899 年，住在尼斯的一位奧國商人也是總領事，艾米爾捷利尼先生向戴姆勒公司 買了一輛 23 匹馬力的賽車，並用他最喜愛的小女兒的名字 Mercedes 為名在尼斯出賽得了冠 軍。次年，梅巴荷為戴姆勒公司開發新車種，捷利尼一次訂購了三十六台，當時價值五十五 萬馬克，並取得部份國家代理權。戴姆勒接受捷利尼的建議將新車命名為 Mercedes。1902 年 橢圓型的 MERCEDES 標誌註冊成立，從此戴姆勒轎車產品皆以 Mercedes 命名。 至於目前眾所周知的三星標誌，最開始是由戴姆勒設計，在他去世之後由他的兒子所採用， 代表的是陸地、水上以及空中交通的現代化。在兩家公司合併之後，戴姆勒的三角星結合了 朋馳的桂冠圈飾，演變為今日所使用的三星標誌。 選擇原因：這個標誌會讓人有種高級的感覺，對於這個標誌的印象相當深刻，若有這種標誌 的車在路上，會吸引路人目光。

http://world.subway.com/Countries/frmMainPage.aspx?CC=TAI

圖片類型：文字型 標誌特色：Subway 品牌是世界上最大的潛水艇三明治特許經營機構，而 subway 字面上也有 地下鐵的意思，表示廣泛遍及全世界，sub 有在底下的意思，在海面下行駛的潛艇，與他們的 商品潛艇堡也有字面上的關聯。 選擇原因：這個文字型的 logo 相當的顯眼而且普遍存在全世界，所以選擇此標誌。

-21-

http://www.adidas.com/tw/homepage.asp

圖片類型：綜合型 標誌特色：三葉草從 1972 年開始成爲愛迪達的標志，三葉草的花語就是：幸福，當時所有愛 迪達産品都使用這壹標志。 三葉草的形狀如同地球立體三維的平面展開，很像壹張世界地 圖，她象征著三條紋延伸至全世界。但從 1996 年開始，三葉草標志被專門使用于經典系列 Original 産品。經典系列是選擇愛迪達曆史上最好的産品作爲藍本，在對其面料和款式進行略 微修改之後重新發布的。整個系列更趨時尚化，産品包括鞋、服裝及包袋等附件。 選擇原因：愛迪達的運動商品上，標誌相當明顯，而且整體給人很好的印象，所以選擇此標 誌。

-22-

gimp/Picasa 編修個人社團活動照片 1. 色差

2.色差 色差

3.色差 色差

-23-

4.去背 去背

5.黑白遮罩 黑白遮罩

-24-

藥學一 B303099202 林玉靜

-25-

Inkscape『 『獨特風格大頭照』 獨特風格大頭照』

-26-

Take a look! 特色 logo 在那裡? 在那裡 1.

2.http://www.jiunnhwa.com/playboy.php (中文) 3.圖形符號型 4.PLAYBOY 源起於美國，從一本雜誌的名字，最後變成一個時尚王國， PLAYBOY 不但是雜誌的傳奇，更是時尚圈的話題。 兔子有帶著幽默的性別暗示以及活潑、愛玩耍的象徵，這就是 PLAYBOY 所想傳達的。 而其性感、活力以及獨特個人魅力也是現代年輕世代的最愛。 1.

-27-

2.http://www.mcdonalds.com.tw/ (中文) 3.綜合型 4.麥當勞（McDonal’s）取 m 作為其標誌，顏色採用金黃色，它像兩扇打開的黃金雙拱門，象 徵著歡樂與美味。而麥當勞叔叔則象徵著祥和友善，象徵著麥當勞永遠是大家的朋友，社區 的一分子，他時刻都準備著為兒童和社區的發展貢獻一份力量。

歐德家具 1.找不到圖片，但第二點的網頁裡有。 2.http://www.order.com.tw/html/01.html (中文) 3.圖形符號型 4.歐德的十顆星 LOGO 代表秉持著誠心、實心、熱心、貼心、細心、真心、精心、愛心、耐 心、良心來服務消費者。

-28-

gimp/Picasa 編修個人社團活動照片 1.石膏 石膏＆ 石膏＆更加銳利

2.研磨 研磨&亮度橡皮擦 研磨 亮度橡皮擦

-29-

3.鉛筆 鉛筆&黑光 鉛筆 黑光

4.空氣噴槍 空氣噴槍&粗糙化 空氣噴槍 粗糙化

5.柔焦鏡頭 柔焦鏡頭&墨跡 柔焦鏡頭 墨跡

-30-

Part II 小組部分 小組部分 作業一 : 社團 Banner 設計 在選定要和棋藝社合作製作美化網頁後，第一個步驟就是製作網站 Banner，因為 Banner 可以讓近來此網站的人一目了然這個網站到底是在幹麼的，也或許可以從他的配色得知此社 團的特色……等等。

作業二 : 有關社團主題網站或布落格分析 由於本組組員都沒有製作網站的經驗，於是全組組員便上網搜尋相關網站，了解並分析 別人是怎麼架構的、特色是甚麼

作業三 : 社團網站架構書 學習到別人是如何架構網站後，接下來便是本組親手製作，製作前先擬定架構書，以便 在修改製作網站的時候有個大綱，也才不會沒有方向的修改

作業四 : 社團網站樣式修改前後對照心得 最後便是成果發表，與老師、同學簡報成果，並分享製作修改網站的酸甜苦辣。

-31-

社團 Banner 設計 ◎B101098067 宋之維

◎B101098071 李維鈞

◎B101098164 許宏璟 許宏璟

◎B303099003 劉韋誠

-32-

有關社團主題網站或布落格分析 有關社團主題網站或布落格分析 B101098067 宋之維 1. 網站名稱 ：高雄醫學大學棋藝社 http://gochess.club.kmu.edu.tw/ 2. 簡述分析 ： 使用黑白為底是他最大的特色，強調棋藝就只有黑與白兩種顏色， 缺點是很容易讓人以為這只是個廢棄的社團公布欄，不仔細看可 能會很快的關閉網頁。

1. 網站名稱 ：嘉義大學棋藝社 http://student.ncyu.edu.tw/~club0011/ 2. 簡述分析 ： 中規中矩的網頁架構配色自然大方，該有的連結一個都沒有少， 非常適合對外界招生，給人社團蓬勃發展的感覺，唯一稍有不足 的是很多超連結不一定都有東西。

-33-

1. 網站名稱：高雄應用科技大學棋藝社 http://140.127.119.31/cardgame/home8.html 2. 簡述分析：深紅色為背景給人熱鬧的感覺，下方更新資訊給人動態感，好像這 個網頁常常更新，甚至是每天更新的感覺，背景如果能稍微淡色一 些我覺得會更協調。

B101098071 李維鈞 1. 網站名稱 : 廣州棋院 http://www.qiyishe.com/ 2.簡述分析 : 這個網站的優點就是一目了然，並且在網頁的頂端，仿製了棋院的 照片，增添了許多棋藝的味道，資訊也相當常更新，最新的更新 -34-

是 2011.04.14，距離今天相當的近，而該網站也提供了其他棋藝社 的友情聯結。

1.網站名稱 : 北科棋藝社 http://www.ntut.edu.tw/~wwwchess/main.htm 2.簡述分析 : 一個不好的網頁的代表作，內容既少，且相當常久沒有更新了，後 一次更新是在 2004.05.14。

1.網站名稱 : 中國棋院在 http://games.sports.cn/ 2.簡述分析 : 優缺點網頁資訊相當豐富，他比較偏向於專業的網站，裡面的資 訊都是職業級的比賽介紹，而且其意的種類也相當的多，缺點的話， 他的網站畫面有點雜，如果是第一次使用此網頁的人可能會找不到 東西、或是沒有耐心看下去。 -35-

B101098164 許弘璟 1. 網站名稱：中華民國圍棋協會 http://www.weiqi.org.tw/default.asp 2. 簡述分析：本網站採用 3 欄式的架構，上方式主要的導覽方向，而左方則 是廣告或是推薦聯結，因為上方的指引使得瀏覽網站變得方便。

1. 網站名稱 ：台灣棋院 http://www.taiwango.org.tw/ 2. 簡述分析 ：本網站是採用三欄式的架構，以上方的選單為主要導覽選項，左 下欄則是副選單，是屬於主選單中的次項目，分類相當清楚，不 -36-

過因為次項目比較不明顯，所以瀏覽起來造成小小小小的不便。

1. 網站名稱：台灣圍棋發展協會 http://www.twgo.org.tw/ 2. 簡述分析：此網站採用三欄式的架構，下左欄是不會變的會員登錄區，以及 一些服務項目，左上 LOGO 則是回首頁，上方則是主要的導覽選 單，而右下欄是主要的頁面顯示欄，因為他所佔的空間很大，所 以瀏覽起來很舒服。

B303099003 劉韋誠 1. 網站名稱 : 說棋講奕 http://www.airgo.com.tw/cmt/ -37-

2. 簡述分析 : 加入這個網站的會員之後，可由左方的欄位進入對弈廳，可跟其 他會員對弈，右攔中也有推薦棋譜，提供的資訊相當豐富

1. .網站名稱：台大學生會 http://ntusa-site.blogspot.com/ 2. 簡述分析 : 右欄中詳細說出各幹部人員，以及學生會中的各個分部，BANNER 藍底白字，搭配淺藍色的頁面背景，給人很有效率的感覺，而且 版面寬大，看起來很舒服

1. .網站名稱：中華民國象棋教育推廣協會 http://www.ccla.org.tw/html/ 2. 簡述分析 : 中間的主要內容為最近的比賽活動，並且於左攔中列出近期的活 動時間，訊息取得十分快速且容易，此外，這個網站的討論區相 -38-

當熱絡，會員能針對許多主題做討論

B303099202 林玉靜 1. 網站名稱 : 中華民國紅十字總會 http://web.redcross.org.tw/ 2. 簡述分析 : 此網頁記錄了志工故事及志工團隊的現狀，同時也提供線上捐款 以及會友加入等服務。

1. 網站分析 : 台北兒童福利中心 http://www.tcwc-childrenhome.org.tw/ 2. 簡述分析 : 此網頁提供線上認養或助養兒童，以及貢獻愛心的機會，同時也刊載其社 團消息。

-39-

1. 網站名稱 : 上城扶輪社 http://www.rcuptown.org.tw/ezinfo/front/bin/home.phtml 2. 簡述分析 : 此網頁僅提供社團及社員介紹，也有提供訪客留言版以供 諮詢問題，但我覺得它缺少了線上服務這塊，使訪客並無 法利用網路來進行事宜。

-40-

社團網站架構書 社團網站架構書

-41-

-42-

-43-

社團網站樣式修改前後對照、 社團網站樣式修改前後對照、心得 改造前： 改造前：

改造後： 改造後：

-44-

-45-

-46-

-47-