視覺識別標幟系統 橫幅與透明檔 gif, png 實作
Visual Identity Systems Practice Banner and Transparent gif, png

當代實用美術/視覺設計
印象派 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

PhotoImpact實作 

橫幅設計的實作,包括範本修改法,與完全自創個人化法

下先介述範本修改法,以 PhotoImpact 的橫幅元件設計師為設計製作工具。

Banner Design

橫幅設計:元件設計師法

橫幅在網站中幾乎必用,雜誌使用橫幅比較有代表性的如:National Geography,讀者文摘等。

>Web

>Objects Designer

>Banner and others

Note: Size of the standard web banner is : 600*80

The following size is for DTP A4 output.  

配合「多元」學習理念,選擇彩虹造型。

應有預留嵌入標誌的區域。

框底簡單,色彩使用網站識別主色:理性的藍、黃互補色。

使用「元件設計師」

Modify the title.

如果是頁內橫幅,可以使用範本字;如果是封面、或強調各種自由使用,則另外加字。

使用「元件設計師」

Modify the colors.

Export it to a file for further uses.

匯出為物件。

Personalization 個人化改造

The original output looks like the following.

最好不要完全使用範本,而作個人化改造,如加上標誌。

物件組合

Chang the width to fit the page.

Use a blank file as the background.

Add a logo on it.

>Button

You have to use <arrow> to merge objects. 

使用jpg檔,以避免產生透明重疊。

〉魔術棒

〉右鍵

在空白處點選、再〈改選未選取部分〉,則可選到物件、進行組合。

物件組合

加上圖片字,完成組合。

使用「元件設計師」


gif 檔案輸出的提示 gif, png File Processing/ 透明檔案 gif, png 處理技巧

數位美工最常用的就是 gif, png 檔案格式,其特殊技巧介述如下。

gif 可分作一般有背景檔案、和透明背景檔案。

gif 透明背景檔案最適合作「組合」,並因其可具備透明特性,可以縮小檔案容量,因此適合製作「gif 動畫」。 

gif File Characteristics/  gif 檔與影像類型

影像類型包括:黑白、灰階、16色、256色、和全彩。

擅長美工線條,不是自然色,為了節省檔案空間,所以許多檔不一定是「全彩」類型。

但當前各種影像處理軟體編輯,預設對象都是全彩類型,遇到非全彩類型,便無法從事大部分編修,無法在檔案上應用各種工具。

所以必須先作影像類型轉換: 

〉格式

〉影像類型

RGB 全彩

進一步解說可參考 PhotoImpact進階篇的「檔案轉換」。

gif Transparent File Output/  gif 透明檔案輸出

Since we are going to practice the use of gif files, we will export it to gif program.

However, it is also a good idea to export it into ufo files (the 2nd choice) or jpg files that are more flexible for advanced post production.

See Advanced Skills of PhotoImpact for more info. 

使用「元件設計師」

Export it to gif file and make the background transparent.

使用「元件設計師」


Converting gif Transparent File/ gif 透明檔案處理

有背景的檔案不能直接以另存方式轉為,必須先開一個透明檔的「基底影像」,再將有背景檔案中的圖片,以物件的方式轉貼過去。

Color palette 透明檔與寫字

不要在透明檔上直接寫字,效果可能不佳。

將組合完成之圖案透明檔轉為 jpg檔,再寫字。

Color palette Color palette 色盤缺色

When you are going to merge GIF files you want to use a empty file for the base image. If you paste one GIF file to another GIF file, it likely causes color loss since the conflict of the number of color index. An example is as follows.

用2個以上gif  組合,要先開一個全彩空白基底,分別加上去。否則互相組合,可能色盤數合計不足,發生缺色現象。

使用「元件設計師」

Color palette Reduce Size with gif/ 避免縮小 gif

Transparent gif非「全彩」影像類型之gif 檔,縮小會變形。

先轉換為「全彩」再縮小,不過,最好重新以設計程式輸出所需尺寸。 


橫幅設計:完全自創個人化法

先個別設計標誌、背景底框、加選擇性物件,然後進行組合。

範例:主題意涵:多元學習,嚮往智者樂水,故以「水」為識別標誌的背景風格,以水之藍色為主色。

橫幅設計:完全自創個人化法

由標誌、背景底框、加魚組成,標誌是第二主色:黃色;故魚採用第二主色之鄰近色:金黃色;而珊瑚為次鄰近色:紅系列之粉紅色。

標誌、背景底框、加

大型橫幅,魚與珊瑚之比例可加大。

亦可再進一步作為動畫展示。


數位繪圖/數位美工範本分享資源

介紹數位繪圖/數位美工範本,分享資源如下。

透明檔元件網站

free png images: http://freepngimages.com/christmas-bell-gold-transparent-background/
pngimg: http://pngimg.com/
png all: http://www.pngall.com/ 
imagesbuddy: http://www.imagesbuddy.com/ 

造型元件網站

free icons png: http://www.freeiconspng.com/ 
find icons: http://findicons.com/
icon finder: https://www.iconfinder.com/ 
iconsDB: http://www.iconsdb.com/blue-icons/triangle-icon.HTML 

More info at "Logo Design" 視覺識別標幟系統與標準字設計 

視覺識別系統物件橫幅視覺識別系統化設計範例

視覺識別系統物件其他視覺識別系統物件範例 

回頁首 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
同類別內相關主題