通用物件規格與範例
General VIS Objects and Standards in Web Era

當代實用美術/視覺設計
印象派 Impressionism
後印象派 Post-Impressionism
前印象派 Preface to Impressionism
新印象派 Neo-impressionism
表現主義 Expressionnisme
野獸派 Les Fauves
抽象表現主義 Abstract Expressionism
立體主義 Cubism
歐普藝術 OP Art
拼貼畫技 Collage
普普藝術 Pop Art
複合主義 Multiplexism
創意媒材 Creative Media

當代實用藝術作品品析
洪通 跨時空而通的素人畫家
Barry Kite 異常拼貼畫
Jeannette Guichard-Bunel 法國浪漫
Santosh Chattopadhyay 印度異情
Mike Butkus 數位色彩全設計
Kellie Day 40歲開畫不晚
冷軍:極端寫實主義

數位繪圖/美工設計建構
PhotoImpact 設計實作
數位圖片色彩導向實作
數位圖片檔案轉換實作
多選取區與物件實作

視覺識別標幟系統
Log 標誌設計元素
標準字
標準圖案分類
識別占有性
紋章學
旗幟學
VIS 設計思想演變
清末金龍旗
北洋十二章
中華民國青天白日
美國遊騎兵團盾章
美國職籃識別標誌演變
創意標誌品析
變形技術
反相技術

網路時代視覺識別系統
通用符號與規格
Core Logo 核心標誌
Favicon 網站識別圖示
標準圖案設計實作
元件設計師

標準字設計與文字工具
造型家族:變形‧扭曲
布景主題與風格物件
橫幅設計 (Banner)
縱意橫幅設計 (Web Doodle)
導覽設計 (Navigation)
專用圖示設計
圖示評論
個人化社交卡設計
數位貼圖設計
票證設計

網頁橫幅實作
gif 透明檔案處理技巧
動態導覽按鈕
手繪視覺識別系統設計
西方手繪視覺識別系統
中華手繪視覺識別系統
紋飾
其他國家的手繪VIS
素人創意漫畫

數位出版設計:意涵/樣式篇數位出版/網路文創:識別標幟系統篇-知識美學/數位美學建構方法

當前數位美工的最常應用就是視覺識別標幟系統,通常包括:標誌 (Logo, 標準字+標準圖案)、橫幅 (Banner)、縱意橫幅 (Web Doodle)、導覽 (Navigation),各式用途之系統化圖案、甚至衍生物品,如:圖示卡片貼圖票證、文具、飾物、服裝…等,而以標誌 (Logo)為系統中心且能具備「識別占有性

既為「系統」,各物品上必然會包括具「統一向面」的風格元件風格物件風格元件風格物件都是建構風格的材料,只是風格元件結構比較完整,譬如標誌 (Logo)或其變形;而風格物件只是一個、或幾個具備一致性、聯想性的零件。

在網路識別標幟系統中,就應用目的還可簡分為:布景主題、圖示、與特用類型,其在達成主題性、系列性的要求相同;但在組合方法、與創意技術上,會因專用目的而有不同,介紹幾項範例如下:

圖示創意作品網站視覺識別:布景主題‧橫幅導覽‧風格元件設計
VIS: Web Theme, Banner, Doodle, Navigation and Style Elements Design
圖示創意作品網站視覺識別:圖示‧專用圖示‧多元圖示‧風格物件設計
VIS: Icons, Personal Icons, Creative Symbolic Icons and Style Objects Design
圖示創意作品多元視覺識別:個人化社交卡‧貼圖‧票證設計
VIS: Social Cards/Stickers/Tickets with Personal Visual Identity Symbols Design

在網路時代,個人化媒體得以生存發展,又誕生了個人網路識別標幟系統,而其中物件,有些需具備固定規格,以下將以統雄老師的「統雄網群識別標幟系統」為範例介紹相關物件。

本系列同時介紹識別標幟系統設計的2大技術:「變形技術」與「反相技術」,並以國際上著名的識別標幟為範例。

Identity System(IS) used to be considered as simple as an logo. Nowadays, it became a series of symbols and objects to be designed.

I am going to demonstrate designs for 2 different files.

Banner with an IS for gif file.

Logo for jpg file.

Though gif file has the advantages of being small and with transparent background, it suffers with its limitation of colors and the capability of modification.

I advice to use jpg file for advanced modification before to transfer it into gif file, if it is necessary. (For example, you need gif files to render animated graphics.)

See Advanced Skills of PhotoImact for more tips.


在傳統媒體時代,視覺識別標幟系統必備的,就是標誌(Logo,標準字+標準圖案)、橫幅(Banner)。橫幅就是大標題的底版,是表現媒體風格與環境布景主題的主要物件。

進入網路時代,個人化媒體得以生存發展,又誕生了個人網路識別標幟系統,而其中物件,有些需具備固定規格,以下將以統雄老師的「統雄網群識別標幟系統」為範例介紹相關物件。

網路時代識別符號通用物件規格

General Identity System Symbols in Web Era

在網路發展過程中,有些網路識別符號,逐漸形成了通用的規格,最常使用的物件與尺寸、適用規格如下表。

本系列講義,並將特別介紹:核心標誌Favicon 網站識別圖示網頁橫幅,與動態導覽按鈕的設計與實作。

隨著螢幕解析度多元化、瀏覽器縮放功能彈性化後,除了Favicon 網站識別圖示仍有全球性固定規格外,當前其他物件,已愈來愈自由化,可自訂尺寸了。當然,如果加入特定社群,該社群還是可能存在社群內標準規格。

標誌符號
尺寸 (px,像素)
適用規格

統雄網路社群:多元學習‧獨立人格

16*16

Favicon 網站識別圖示

統雄網路社群:多元學習‧獨立人格

27*26

按鈕

統雄網路社群:多元學習‧獨立人格

52*50

正方形

統雄老師的標誌 80*80 基本核心標誌,要能 與各種物件組合應用。

統雄網路社群:多元學習‧獨立人格

143*59

Google標準

統雄網路社群:多元學習‧獨立人格

220*65

1024*768解析度,3 欄式常用規格。

統雄社群  124*112  社群大型標章 

留言用功能性動畫圖示

46*40

留言用功能性動畫圖示

象徵秘訣功能性動畫圖示 66*120 象徵秘訣功能性動畫圖示
動態導覽按鈕:待瀏覽
140*35 可變色動態導覽按鈕
網頁橫幅_統雄社群 600px*85px
網頁橫幅
HTML5 尺寸
網頁橫幅_統雄社群
850px*85px 網頁橫幅,這是在螢幕解析度多元化、瀏覽器縮放功能彈性化後的可個人化尺寸。
臉書 facebook 個人網頁頂圖尺寸
850*315 px,臉書 facebook 個人網頁頂圖尺寸。
 
800*250 px,臉書 facebook 社團網頁頂圖尺寸。

Core Logo 核心標誌設計

核心標誌是指識別標幟系統中最基礎的部分,同時是可以和其他物件組合的部分。

核心標誌視覺設計元素構想

對閱覽者,是先看到視覺結構、再導引出視覺意涵;而對設計者,是先確認視覺意涵、再發展出視覺結構,兩者在設計時,是平行創意的。

統雄老師的標誌視覺結構

統雄老師的「TX 社群」核心標誌,由標準字與標準圖共同組成,並採立體重疊造型,文字凸在底座之上。

視覺意涵

標準圖:從「統」字取意,「統」有統一、一致、圓滿的引申涵義,所以採用「同心圓」造型。

標準字:使用「統雄」的英文「TX」。

注意:識別系統的「識別」就表現在「意涵」設計上。

 

 

視覺動力

借意地球立體運動,文字作圓弧變形之個人化,配合圖形以營造圓球型的立體感。 

視覺色彩

因本社群目標是研究與教學,所以採用具備理性的藍色,以及強調對比而配合其互補色黃色,作為雙主色。

色彩獨立性測試:灰階版

統雄老師的標誌-灰階版設計同時考慮「色彩獨立性」,在以黑白/灰階顯示時,也能保留視覺識別能力。

1.2 代版:變形技增強版。

「TX 社群」核心標誌二代版「TX 社群」核心標誌 1.2 代版,主要是變形技增強版。

因為並沒有改變設計的基本統一元素:即結構與意涵,故稱為 1.2 代版。

同代而只有變化元素調整者,還是視為共同存在,視需求而可靈活應用。

手繪版

吳統雄」的個人大頭貼以上是使用繪圖軟體所設計的幾何造型版,線條嚴謹,適合第一標誌,表達較正式的用途,如代表「統雄社群」「統雄主題網站」等。

相對於幾何造型,使用手工繪製的標誌會更具個人化、更有輕鬆感,必要時可作為第二標誌,如代表「吳統雄」個人的大頭貼。

這種大頭貼,可用在各種社交網站、部落格,如臉書等的個人網頁上。

創意標誌核心標誌設計實作範例


圖示的類型與規格  Icons Definition and Standards

圖示有2個意義:第一、是一種常用、共用、表達特定意義、尺寸較小、型式簡單、類似象形文字的繪圖。就此意義而言,可用各種圖形格式設計。

第二、是一種檔案格式,以.ico為副檔名,在微軟系統中,是可執行物件(程式、選單、網頁行為…)所搭配的視覺指定格式。高級繪圖軟體均可支援此種格式。

自創圖示設計

 

網路常用分享圖示庫

 

Favicon.ico網站識別圖示 Favicon.ico

網站設計中最重要的 .ico圖示就是網站識別圖示 Favicon.ico,具備全球性固定規格16*16 px 像素。

Favicon stands for "Favorite Icon" that highlights your URL while ico is a Window's graphic format.

Favicon.ico is a 16*16 graphic such as "TxFavicon".

An introduction is at:

http://www.thesitewizard.com/archive/favicon.sHTML

There are many online generators that help you to convert gif into ico such as:

http://www.favicon.cc/

Favicon: ISS for TX URL 統雄網群網址圖示

16*16

統雄網路社群:多元學習‧獨立人格 A combination of "T" and "X".

網址圖示是瀏覽器網址所呈現的特殊規格,由於尺寸小,所以當一般專用標誌較大時,就必須另行設計。

統雄老師的設計理念,是由"T""X",以前景、後景重疊的方式重疊組成。又因為原始淺黃色在面積太小時會看不見,所以改用金黃色。


創意標幟範例創意標幟範例

識別標幟系統與標準字實作識別標幟系統與標準字實作


參考連結

標誌設計 http://www.thelogofactory.com/logo-design-tips/

全球最佳品牌標誌 http://www.interbrand.com/en/best-global-brands/best-global-brands-2008/best-global-brands-2011.aspx

全球最佳零售業品牌標誌 http://www.interbrand.com/en/BestRetailBrands/2011.aspx

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page  
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題