版面研究所05Banner設計學：8大關鍵要訣、6大主題應用，1秒抓住眼球，飆高人氣點擊率！

★第一本Banner設計專書★

海量資訊中的Banner該如何一眼被看到？
掌握設計關鍵，提高點閱商機！

8個基本知識×6大主題應用，將小尺寸設計攻略法全部告訴你
無論打造電商網頁、品牌行銷、線上廣告、社群經營、YouTube還是 LinkedIn 的個人平台經營，
透過書中Before、After的對照範例學習版面布局，提高Banner點擊率！


×訊息太多！看不到重點…….
×底色跟字體顏色太近看不到？
×日期很重要為何放那麼小？
×Banner面積太小！很難設計……
如果您在Banner設計方面遇到問題，這本書就是來解決你的問題！

把Banner張貼在大量訊息的網絡上，
當然就要一眼看到它！它！它！
因此，做出吸引對方眼球的設計很重要！
透過Before、After的對照範例學習設計要領！即使你是設計初學者，看完本書也能立即實戰，製作出成功的Banner！

◆8個基本知識
1.情報優先
2.字體選擇
3.圖文整理
4.適度裁切強化主題
5.打破常規的印象
6.操縱色彩改變氣氛
7.創造視線誘導
8.符合主題的裝飾

◆6大主題應用
1.再小也好懂的排版訣竅
2.一眼看懂資訊的文字設計法
3.即使不同的資訊，也讓人更易看懂的分組術
4.用人臉或視線打造吸睛設計
5.稍有不完美的照片，如何修正與加工
6.藉由裝飾與氛圍詮釋，打造出令人心動的設計

▼Banner適合用在哪些地方
・在網路/社群媒體等上發布的橫幅廣告
・演講簡報、Email、廣告媒介與實體活動訊息
・網路商店的橫幅廣告
・文章標題圖片

Hikaru Kato
1984年出生，出身於佐賀縣，現居福岡市。
2012年起從事網頁設計，於kanvas之名為企業製作。
官網，至今參與過的網站已經100個以上，半數都是從設計到HTML/CSS、CMS系統一條龍服務。
2020年2月起開辦網頁設計課程──網頁設計1 on 1 lesson channel，並於Twitter分享橫幅設計技巧。

網頁上的Banner在廣告中算是尺寸非常小的一種

廣告，是指將商品或服務「廣泛告知世人」的意思。

Banner會很突兀地出現在資訊量龐大的網頁上，因此必須「讓人一眼就看懂資訊」，
不花費巧思就無法吸引目光，成為無法實現目標的劣質Banner。

本書的目標是幫助各位學會「讓人一眼看懂資訊的設計」，
共分成8個基本知識與6大主題應用，介紹相關巧思與技巧。

◆前言
◆本書使用方法
◆INTRODUCTION 設計前先整理！

PART1 成功的Banner該怎麼製作？
01【層次感】迅速傳遞訊息的訣竅
02【字型】提升閱讀的字型選擇訣竅
03【排版】用易懂的版面彙整資訊
04【裁切】去除多餘，襯托產品的訣竅
05【節奏感】打破單調，避免看膩的訣竅
06【配色】操縱色彩，改變氛圍的訣竅
07【視線引導】打造順暢閱讀的訣竅
08【裝飾】用素材展現出形象
◎COLUMN_進行前必須確認！按照需求製作Banner

PART2 再小也好懂的排版訣竅
01【斜向切割】分區讓人迅速看懂資訊
02【切割兩塊】遇到條列項目、縱長圖像時很方便的排版法
03【不對稱】擺脫粗糙形象的訣竅
04【自然躍動】想打造歡樂的流行動態感時
05【活用盤子】餐飲店廣告常用技巧
06【用重疊製造立體感】照片不顯眼時
07【白窗戶】趕時間時可用的排版
◎COLUMN_變身各種形狀！切割不同尺寸Banner

PART3 一眼看懂資訊的文字設計法
01【直書】賦予單調文字節奏感
02【將文字配置得有如圖像】瞬間吸引目光
03【數字要大】最王道的吸睛手法
04【斜體】展現氣勢與速度感
05【沿著曲線配置】賦予文字柔和動態感
06【用色彩分解文字】藉繽紛顏色提高設計感
07【文字描邊】即使背景紛亂，文字也易懂！
08【增加英文字】將原稿沒有的文字，當作視覺焦點加上
09【毛筆字型】營造高級感和風
10【手寫字型】博得親切感與共感
11【框線錯位文字】清新明亮的氛圍
12【造字】創造文字，賦予衝擊感
13【植入文字】無縫連接背景與文字
◎COLUMN_知道後就如有神助！超實用的5大便利網站

PART4 即使不同的資訊，也讓人更易看懂的分組術
01【鋪設色塊】更換背景讓文字更好讀！
02【對話框】簡化文字，並配置成視覺焦點
03【緞帶】輕盈優雅的裝飾
04【圖解】用視覺圖像表現順序
05【框起來】讓混在其中的文字更好理解
06【色彩反轉】雙色調也能夠詮釋奢華感
07【按鍵】讓人想「點擊」的設計
08【拱狀】詮釋祭典、活動等的熱鬧氣氛
◎COLUMN_適合不擅設計的人！用臨摹鍛鍊手感

PART5 用人臉或視線打造吸睛設計
01【臉】利用人的習性增加吸睛度
02【人的視線】運用視線方向，引人注意文字
03【團體照】配置多人情境，呈現熱鬧感
04【手勢】運用手部動作導覽
05【遮住眼睛】調整臉部避免過度搶眼
06【從孔洞中露臉】特寫人物照可以靈活配置
◎COLUMN_絕對不可以使用的人物照構圖

PART6 稍有不完美的照片，進行修正與加工
01【調亮】加亮陰影，讓整體更清爽
02【陰影和光暈】打造物件與背景間的界線
03【剪貼簿】給予活潑的可愛感
04【邊緣透明】將商品照與文字均放大至最大限度
05【鏡面反射】美容相關商品照最好用的技巧
06【筆刷】調整半調子的裁切位置
◎COLUMN_常見的Photoshop技巧

PART7 藉由裝飾與氛圍詮釋，打造出令人心動的設計
01【三角形】有型的背景裝飾
02【引號】為稍嫌不足的標題調味
03【圓】到處都能用的萬能圖形
04【圖示】用具象徵性的圖讓人直覺意會
05【美式漫畫風】POP的漫畫風就是搶眼！
06【亮晶晶圖形】用璀璨光輝瞬間吸睛
07【花】打造各式各樣的華麗感
08【獎牌】確實表現得獎經歷與實績
09【勾號】搭配條列式文字使用
10【紙花、禮炮】演繹出超High氣氛
11【熱氣】直覺傳遞熱騰騰的美味
12【和式紋樣】詮釋傳統豪華的氛圍
13【放射線】藉由線條方向將視線引導至中央
14【春】象徵新開始的季節
15【夏】繽紛且洋溢熱帶氣息
16【秋】紅葉與豐收的季節
17【冬】用聖誕節與閃耀感塑造期待感
18【新年】表現出新年的喜慶感
◎COLUMN_交稿前應檢視的項目

◆總複習！Banner練習題
◆用關鍵色做選擇的Banner配色手帳