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

數位出版/網路文創:識別標幟系統篇-知識美學/數位美學之建構方法

當前數位美工的最常應用就是視覺識別標幟系統，通常包括：標誌 (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

橫幅在網站中幾乎必用，或是使用頂圖以包括橫幅的應用。雜誌使用橫幅比較有代表性的如：National Geography,讀者文摘等。

橫幅設計的實作，包括軟體內建範本修改法、網路或線上分享範本法，與完全自創個人化法。

PhotoImpact實作

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

Banner Design

橫幅設計：元件設計師法

>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, 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 透明檔案處理

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

透明檔與寫字

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

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

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 組合，要先開一個全彩空白基底，分別加上去。否則互相組合，可能色盤數合計不足，發生缺色現象。