熱音社

多媒體設計期末報告 第五組

B202098012 李姿穎 B202098022 張雅筑 B202098048 陳璿文 B303099106 林鈺喬 B210099106 朱以哲

目錄  個人作業 ……………………………………… 2 姿穎

…………………………………………… 3

雅筑

…………………………………………… 9

璿文

…………………………………………… 15

鈺喬

…………………………………………… 22

以哲

…………………………………………… 28

 小組作業 ………… ……………………………32 社團 banner………………………………………33 社團主題之網站或布落格分析………………………34 社團架構書………………………………………

37

心得………………………………………………39

1

個人作業

2

B202098012 李姿穎

3

個人風格大頭照── 畫出自我．展現特色

4

網路 logo 分析 ── 各展創意．相映其趣 1.星巴克 2011 年最新 logo 網址: http://www.starbucks.com 類型: 圖形符號型 簡述:

這是星巴克最新的 logo，2011 年 3 月 8 號才改成現

在這樣的。標示著星巴克嶄新的一頁及對未來的展望，希望能夠憑著此 Logo 再 度邁向另一個 40 年。過去的 logo 演 變如右下圖

2011 年 logo 把過去外為的 starbucks coffee 字樣去除了，只剩 下裡面的女海妖(Siren,或是有人說 美人魚)放大到原來包含字樣的大 小，並整個呈現星巴克特色的綠色。 大膽的將招牌 starbucks coffe 自樣去掉表示其執行長有信心認為大家看到女海 妖圖樣就會聯想到是星巴克商標。雖然有人認為其執行長這樣做是太過自信,但 我還是給予祝福,希望星巴克式的綠生活能夠繼續帶給大家美好的體驗。

5

２.英國飾品品牌 Accessorize 網址:http://www.accessorize.com 類型: 文字型 簡述: accessorize 在英文其實就是" 加上時髦裝飾品"的意思(動詞)，將這個單 字直接拿來作為品牌名稱，並用華麗的字型搭配一顆小皇冠在字母裡做變化，就 成了既淺顯易懂又有記憶性的招牌。除了看字面就知道賣的東西之外，很少有業 者以動詞作為品牌名，名稱特別之外其飾品也都很亮眼，因此近年來 Accessorize 在台灣的顧客也越來越多了。

３.美國板鞋品牌 Vans-OTW 系列 網址: http://www.vanstaiwan.com 類型: 綜合型 簡述: 由滑板鞋起家的運動鞋品牌 Vans，其中一個受歡迎的系列為"OFF THE WALL"(OTW)，在這個 logo 上有個滑板的形狀，在加上此系列名，並且使用的 是 Vans 的三大色彩之一---紅色，就成了這富有代表性的 logo。 "OFF THE WALL"有兩種含意，第一種是極限運動的意思，第二是來自英俚語， 表示獨特.突破傳統的事物之意。

6

修改前後的社團與活動照片 ── 美好回憶．畫龍點睛 【原圖】

【修改】

7

8

B202098022 張雅筑 9

個人風格大頭照 ── 畫出自我．展現特色

10

網路 logo 分析 ── 各展創意．相映其趣 1. 土豆網(tudou.com) 網址： http://www.tudou.com/ 類型：圖形符號型

背景分析：「每個人都是生活的導演」是土豆網發想的口 號，自娛自樂而 且 樂 得 讓 所 有 人 都 看 到 ， 就 是 土 豆 。 在 土 豆 網 中 ， 可 發 佈 自 己 製 作 或 收 集 的 個 人 音 頻 和 影 像 作 品，可 以 簡 單 地 分 享 生 活 的 點 點 滴 滴 ， 並 互 相 交 流 。 從 logo 可 看 出 ， 土 豆 網 希 望 大 家 可 以 從 中 得 到 很 多的快樂。 風 格 特 色 ： 其 實 土 豆 網 換 過 logo 的 樣 式 ， 但 不 變 的 是 以 「 笑 臉 」 作 為 最 大 的 標 記 。 一 般 的 logo 主 要 表 現 該 網 站 名 稱 或 網 站 的 主 題 (Ex： 商 品 )， 土 豆 網 和 其 他 logo 很 不 一 樣 的 是 ， 它 把 服 務 使 用 者 的 宗 旨 與 欲 達 成 的 目 的 — 讓 使 用 者 可 以 得 到 快 樂 ， 表 現 在 logo 中 。 選 擇 原 因：資 訊 的 發 展 常 使 得 人 們 的 距 離 越 來 越 遠，但 土 豆 網 不 僅 讓 使 用者可以分享生活的點滴，而且最大的宗旨是希望使用者能夠開開心 心，在越來越冷漠的現今社會中，拉進了人們的距離。

11

2. 康迅數位整合股份有限公司(payeasy) 網址： http://www.payeasy.com.tw/ 類型：文字型 背景分析：payeasy 為台灣網友廣泛使用的線上購物網站，採用線上瀏覽與購 買，大大節省了消費者至實體店面的時間，不僅在逛的時候很 easy，連付錢時 也能夠很 easy，，讓消費者可以輕鬆逛，也用便利的方法得到商品，這就是 payeasy 最大的訴求。 風格特色：在 logo 中，不見有其他的圖形來作為裝飾，僅僅用簡單的幾個英文 字作為 logo，顏色很繽紛，讓人有簡單明瞭，卻又不失活潑樂趣之感，更特別 的是，因為 payeasy 是一家線上購物網站，在 logo 上，更有創意的在 payeasy 的 a 變成了@，將線上購物網--以網路來交易，最大的特色融入於 logo 中，可 謂創意十足。 選擇原因：其實 logo 主要的訴求即為簡單明瞭又不失創意，payeasy 僅僅使用 幾個英文字組成使其簡單大方，又運用巧思將網路的元素融入於 logo 中，讓人 看了會心一笑。 3. 夢 時 代 (Dream Mall) 網 址 ： http://www.dream-mall.com.tw/ 類 型 ： 綜 合 型 (圖 型 符 號 +文 字 ) 背景分析：夢時代為一座結合多項生活機

12

能 的 購 物 商 場 ， 其 logo 以 熱 情 的 紅 花 、 象 徵 環 保 的 綠 葉 、 和 平 的 海 藍 與 象 徵 自 由 的 飛 躍 人 形 組 合 而 成，表 達 了 健 康 圓 滿 的 生 活 空 間 與 滿 足 快 樂 的 精 神。夢 時 代 不 僅 提 供 多 元 的 休 閒 購 物 空 間，也 希 望 能 提 升 人 文 素 養 與 生 活 品 質。中 文 字 也 有 些 變 化，有 星 星 鑲 嵌 在 其 中，表 達 了 星 星 — 也就是夢想，就在夢時代！ 風 格 特 色：每 一 個 顏 色 與 圖 形 都 有 其 意 義 與 象 徵，且 層 層 相 扣 呈 順 時 針 運 行 的 圖 形 意 象，代 表 成 長 創 新 的 活 力 與 同 心 協 力 的 精 神 的，每 一 個 人 都 能 成 為 創 造 時 代、追 求 夢 想 的 摘 星 人。除 此 之 外， 中 文 字 與 圖 案 不 是 分開的兩個個體，而是能互相呼應的。 選 擇 原 因 ： logo 即 是 代 表 該 公 司 或 網 站 的 形 象 ， 而 夢 時 代 的 logo 充 分 的表達了夢時代對自己的期許與責任，豐富的圖形與色彩都富涵了意 義，讓 觀 者 感 受 到 其 偉 大 長 久 的 理 想，活 潑 生 動 的 元 素 更 可 看 到 創 意 與 創新。

13

修改前後的社團與活動照片 ── 美好回憶．畫龍點睛 【原圖】

【修改】

14

15

B202098048 陳璿文

16

個人風格大頭照 ── 畫出自我．展現特色

17

網路 logo 分析 ── 各展創意．相映其趣 1. MOBILE01

網址： http://www.mobile01.com/index.php 類型：綜合型 LOGO 簡述：mobile01 是台灣的一個知名討論網站，最令人印象深刻的就是將”01”形象 化為一個拿著叉子的小惡魔；再加上全站皆以綠色為基調，LOGO 也以綠色繪 成，和網站十分搭配。我選擇這個 LOGO 的原因除了設計令人印象深刻外，也 因為我自己常常上這個網站觀看新訊息的緣故。

2. PChome

網址： http://www.pchome.com.tw/ 類型：文字型 LOGO 簡述：PChome ONLINE 是台灣的知名入口網站之一，為單純的文字搭配型 LOGO，以兩種藍色來分開”PC” “home”，卻又不是單純的分色(PC 的 C 的末端 有一些些”home”的藍色)，這一點我很喜歡，只是簡單的作了一點改變卻讓正個 LOGO 變的完全不單 調，因此我選擇這個 LOGO。

18

3. 傾聽自然

網址： http://nature.hc.edu.tw/vbb/index.php 類型：圖形符號型 LOGO 簡述：這個網站是專門給攝影者討論各種自然攝 影相關情報的網站，可以在其中找到不少自然生物的照片。這個網站的 LOGO 為圖形符號型 LOGO，一個人露出耳朵傾聽的樣子。這個圖形和網站名稱'傾聽 自然'十分搭配，故選之。

19

修改前後的社團與活動照片 ── 美好回憶．畫龍點睛 【原圖】

【修改】

20

21

B303099106 林鈺喬 22

個人風格大頭照 ── 畫出自我．展現特色

23

網路 logo 分析 ── 各展創意．相映其趣 1. APPLE 網址：http://www.mbatics.com/2010/04/ipad.html#more 類型：圖形符號 分析：以咬過一口的蘋果圖案來代表公司的名稱 APPLE，當初蘋果公司創辦人 賈伯斯認為蘋果是一種完美的水果，有營養不容易壞，一天一蘋果，百病不侵， 所以他希望他的公司能和蘋果一樣完美。

2. SUPRO-MARKETR

網址：http://www.supro-market.com/ 類型：文字符號 分析：這是一間網路自創品牌服飾的 LOGO，品牌名稱就叫做 SUPRO-MARKETR,SPMK 式品牌名稱的縮寫。以超級市場不分男女老少的概 念作為品牌形象概念。將超級市場的原文 Super 結合 Professional 一詞，而 擬出 Supro 為強力鮮明的主題標語。

24

3.

清心茶飲店

網址： http://www.chingshin.tw/index.asp 類型：綜合型 分析：以一個愛心為主軸，呼應了店名"清心"，愛心上的微笑應該是指喝下她的 人都會因為好喝而面露微笑

25

修改前後的社團與活動照片 ── 美好回憶．畫龍點睛 【原圖】

【修改】

26

27

B210099106 朱以哲

28

個人風格大頭照 ── 畫出自我．展現特色

29

網路 logo 分析 ── 各展創意．相映其趣 1. Mobile01 網址： http://www.mobile01.com/index.php 類型：圖形符號型 簡述：他這個網站是個多元的網站，主要是一些 3C 用品、汽機車介紹等等，名 字為 Mobile01，簡稱 01，因為他網站常常介紹一些 3C，常常有一些勸敗文， 所以想個惡魔般的網站，於是便以小惡魔的頭取代 0， 再加一個 1 來構成他們的網站 LOGO，很有特色。

2. YouTube 網址： http://www.youtube.com/ 類型：文字型 簡單分析：非常有名的影片平台，大家可以無限制的上傳影片分享給大家，LOGO 很簡潔，雖然簡單卻又不失設計感，很容易讓人有印象。

30

3. 巴哈姆特 網站名稱： http://www.gamer.com.tw/ 它是何種類型：綜合型 簡單分析：很有名的電玩遊戲社群網站，以遊戲中的召喚獸「巴哈姆特」命名， 在 LOGO 上除了巴哈姆特四個字外，還加上巴哈姆特這隻龍來加強他的 LOGO，很有設計感。

31

小組作業

32

社團 banner 設計 ── 創意巧思．聚焦熱音  B202098012 李姿穎

 B202098022 張雅筑

 B202098048 陳璿文

 B210099106 朱以哲

 B303099106 林鈺喬

33

社團主題之網站分析 ── 參考範例．汲其所長 【註】選取網站眾多，每組員各取一呈現

 B202098012 李姿穎 網站:文藻外語學院熱音社

分析： 依照架構圖主要就是分 Home, News, Events, Recruitment,和 Links 幾個部分 首頁(Home)的地方有 New update--方便大家尋找最新更新的文章 Talk--注意公告 Chat room--提供社員即時聊天傳遞訊息的功能 最新消息(News)的話就是 po 一些最新活動消息 活動(Events)部分依照學期分,放有個學期活動的辦法文昭 樂團(Recruitment)就提供各社員公開招人 連結(Links)提供到無名小站的連結 整個網頁色彩很鮮豔,呈現繽紛活潑的感覺。

34

 B202098022 張雅筑 網站:崑山科技大學熱音社部落格

分析： 版型結構：為一般部落格版型，主要導覽位右側，次要導覽位右下，需拉捲軸， 中間為最新或置頂的文章 優點：次要導覽十分詳細，有多項連結可直接點選 缺點：要一直拉捲軸才能瀏覽完整個網站的導覽，缺乏簡潔性，太繁瑣

 B202098048 陳璿文 網站:高科熱音社

分析： 正上方即是斗大的標題，中間則是新文章，下方則是以各個樂手的圖片當作內容 的連結。優點是風格強烈，令人難以忘記；缺點為色調不友善，長時間未更新。 35

 B210099106 朱以哲 網站: Myspace

分析： 類似於 Youtube 的影音社群網站，可以建立自己的版並 PO 上自己的音樂，所以 廣受玩音樂的歡迎，然後他介面很簡潔但又充滿時尚感讓人一看就覺得很舒服， 版型也很舒服，一目了然！

 B303099106 林鈺喬 網站:內湖高工熱音社

分析： 這是內湖高工熱音社的網站，功能上我覺得還不錯，除了前面套用部落格形式的 功能外，還多了超連結，給社員增加一些常識的網站，美中不足的是他們的網站 略顯單調，用了不好看的橘色當大底，沒有比較精彩的美編。

36

社團網站架構書 ── 堆石砌磚．逐步實踐

37

38

39

心得 ── 回顧所學．心有所感  B202098012 李姿穎 雖然這堂課不符合我的學分領域，但覺得要好好增進一下自己的電腦技能， 於是選擇了這堂多媒體設計。整學期下來，覺得最開心的就是學會操作了一些繪 圖及修片軟體 (例如 Inkscape,和 GIMP...等等)，並且得到了很多額外的線上學 習資源和好用的免費軟體。因為電腦方面一直是自己覺得很不足又因而感到恐懼 的領域，所以能夠試著嘗試這方面的東西，又學到了一點新技能覺得很有成就感。

 B202098022 張雅筑 當初是抱著想要學習更多的電腦軟體，而選擇了這門課！很開心在這門通識 課中學到了 inkscape，讓我了解到原來電腦繪圖不再那麼遙遠困難，也因為這 門通識課，讓我接觸到平常幾乎不會接觸到的 CSS 語法，原來一個網站的架構， 背後是如此的具有多變性與不容易！在這門通識課中，學到了許多不同性質的軟 體，希望在未來，可以對這些軟體更精進、更熟悉。

40

 B202098048 陳璿文 時間過的好快，一學期馬上就要結束了；在這次的多媒體設計課程中，我認 識到了一些以前從來沒有接觸過的東西，像是電子書、LOGO 設計軟體等等， 但我覺得這些東西都教的太淺了一些，是唯一比較可惜的地方；希望未來能看到 更多這樣的課程開設。

 B303099106 林鈺喬 在這堂課中我學到了很多用電腦製作多媒體作品的方法，像是大頭照的畫法. 社團 banner 的製作.還有語法等等，也接觸到了許多之前不知道的軟體，其中尤 其是修圖的那幾套軟體特別的吸引我，以前看別人用電腦修出許多特別的照片， 我都會覺得怎麼那麼厲害，一直以為那些要用很高級的軟體才能夠製作出，上完 這堂課自己也能夠修圖真的很棒。還有大頭照的部分，常常在夜市之類的地方看 到有藝人再幫忙訂作這種似顏繪的人像，雖然我們還不能專業的畫出像他們那樣 的圖，可是基本的原理已經學到，只要再多加練習我們也可以變得很厲害，就不 需要再讓別人賺我們的錢了。總之這一整個學期下來，我真的覺得這堂課很棒， 如果對於這領域有興趣的人真的應該要來修修看。



41

B210099106 朱以哲 我覺得這學期學到了很多有關網站從企畫到製作的方法，也學到很多 好用的新軟體，像是 GIMP 我後來都有繼續在用！也學到了基本的 CSS 語法，雖然以前玩無名小站時就稍有接觸，不過幾乎都是直接 copy 人家 做好的，現在才也可以自己動手換換 Banner 和背景！

Thanks for your attention.

Group 5.

42