無痛學習簡易的版面概念

無痛學習簡易的版面概念

關於版面率、留白率、網格等基本觀念。

不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息。


大綱
1. 排版是什麼?
2. 版面率
3. 留白率
4. 網格系統
5. 打破網格

排版是什麼?

不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即讓版面更加美觀的畫面配置。考量畫面中的所有元素的配置,包含文案的取捨、配色、位置安排、資訊呈現等等。

Design by Jhane Chou / 文字排版

明確的設計目標,正確傳達訊息

想傳達的感受?是否契合主題?符合受眾?所有考量都在明確的設計目標中,運用視覺手法傳達訊息。

可考慮以下條件,做出適合的版面規劃:

  • 此設計的目的是什麼?
  • 最有效的版面配置?
  • 是否好閱讀資訊?
2019–2020 Poster Collection by Ying-Yu Lu

版面率

版面率的高低可影響整體視覺的感受。

by Bloglovin

版面率:版心在整個頁面中佔的比例

首先,我們需要理解何謂「版心」及「頁邊距」。

  • 版心:頁面內容的擺放空間
  • 頁邊距:版心到整個頁面的空間

了解以上的概念後,就能簡易判斷不同視覺的版面率。

版面率的高低可營造不同的感覺

  • 版面率高:豐富、活潑、大膽
  • 版面率低:輕鬆、簡約、優雅
Design by Jhane Chou
by Bloglovin
Design by Jhane Chou

留白率

留白率的高低能夠版面的氣質。

by Analogue Life

畫面中的負空間

頁面內容以外的區域,皆可視為留白的區域。內容越多的版面,留白率越低;反之則越高。

留白率的高低可營造不同的感覺

  • 留白率低:活潑、親民感
  • 留白率高:典雅、距離感
by Analogue Life
by Analogue Life
by Analogue Life
Bianca Flora by Adam Ridgeway

網格系統

網格系統能讓版面穩定,也使人能短時間讀懂資訊。

Works of Roger Schami by Delux Studio

嚴謹而富有節奏的理性之美

最基礎的做法為運用數理,將版心劃分為多個大小一致、間距統一的網格。網格的數量與尺寸沒有限制,以個人的經驗為依據。

視不同的載體需求,將網格作些許調整

考量書籍閱讀的視覺集中、以及裝訂方式可攤平的程度,將網格做些許調整。此外,將網格沿用在版面設計中,可讓多個畫面時達到統一的效果。

Non-Fiction Journal: 01 Power by Passport Design Bureau
World goetheanum forum 2019 by Christine lange
Affiche woe by Matthieu salvaggio
Cube tube2 2k height by Matthieu salvaggio

打破網格

熟悉網格後,可嘗試打破網格的框架,讓版面的呈現意想不到的動態感。

Anonymous Book by Anonymous Singapore
北斎 ―富士を超えて―美術館・博物館・ミュージアムなら、インターネットミュージアム
ART EVENT OF LYUDAO HUMAN RIGHTS 2018 by Bo-Wei Wang, Bo-Yue Wangby Josh Schaub
by Machìnaby Pa-i-ka

文章同步發佈平台&支持,可前往不同平台進行拍手支持,或透過下方的 Like 讚賞(註冊 Liker 完全免費)讓創作者獲得額外收入!

.MediumMatters
Freelancer
新增 iPad Pro 生產力工具
Writing
✍ Medium Feature pages 與 Tag 搭配
Life
感覺,有些話一定得說出來
Aesthetics
終於完成第一波星座系列插圖
Writing
✍ Medium Format Text 內文格式
Freelancer
製作設計報價書
Aesthetics
蒸汽龐克 & 賽博龐克探討與反思
Aesthetics
從臨摹開始學習繪畫創作

Share

設計法則:圖地反轉及負空間

設計法則:圖地反轉及負空間

運用錯視與留白,讓設計更迷人。

利用錯視,將我們想傳遞的內容,置入於畫面中,不直白告訴觀看者訊息,而是讓觀看者自己去發現,達到互動與傳遞的效果。

本篇建議與書評《觀看的方式 Ways of seeing》一起服用。


大綱
1. 圖地反轉是什麼
2. 容易被視為圖的對象
3. 負空間
4. 負空間的運用案例
5. 最後的碎碎唸

圖地反轉是什麼?

魯賓之杯-丹麥心理學家魯賓(E.Rubin. 1886-1951)

圖地反轉 Figure–ground Illusion 是一種視覺錯覺原理

在上圖中(魯賓之杯)可見到「杯子」及兩個對稱的「側臉」。

我們無法同時理解多個的視覺對象,當下會優先選擇最好理解的對象,優先理解的對象稱為「圖 Figure」,其餘的對象稱為「地 Ground」。

Design by Jhane Chou

「圖、地」沒有明確的角色區別

因為每個人優先注意的對象不同,有人第一眼看見杯子,也有人第一眼看見側臉;每一次的注目,都會讓圖、地的關係隨著意識而改變

這讓「圖」與「地」的關係顯得曖昧難分,也因不同的情形導致圖地的關係交換,此現象稱為「圖地反轉 Figure–ground Illusion」。


容易被視為圖的對象

關鍵就在於第一印象,越引人注意的越容易被視為圖。

通常會作為圖 Figure 的特性

真正有趣的地方在於…

那種曖昧不清的關係,讓人想嘗試理解圖中所隱含的真正涵義。

它讓你分不清楚誰才是主角,有時呈現的每個角色都很重要,像是事物的一體兩面。

例如太極的陰與陽,就是很經典的圖地反轉案例。

Yin & Yang Kitties by Tony Babel

負空間

負空間 Negative Space 將訊息隱藏在畫面中

可將「負空間 Negative Space」理解為留白空間。

「圖地反轉」也具備「負空間」的特性哦。

兼顧兩者很難,不如讓其中一方成為真正的主角,將訊息隱藏在畫面中。

角色之間的空隙所形成的負空間,與畫面的正空間相對。負空間有效填補了正空間的局限性,並且有助於畫面的平衡感,為畫面增加更多的想像空間。

你不需要將所有細節全盤托出,留下線索即可。

利用這樣的效果,將我們想傳遞的內容,置入於畫面中,不直接說出訊息,而是讓觀看者自己發現,達到互動與傳遞的效果。


負空間的運用案例

by Oichoc
by Jonimajer
by Rokas Aleliunas
by Mikyung Lee
by Jekaterina Budryte

最後的碎碎唸

該讓圖像「直白地傳達訊息」還是「有更多地想像空間」?這些考量因不同的設計情境而異。

然而,就如同《雅量》所描述的:

同樣的一件衣料,每個人卻有不同的感覺。

那位朋友連忙把衣料用紙包好,她覺得衣料就是衣料,不是棋盤,也不是稿紙,更不是綠豆糕。

因為每個人的性格與生活環境不同,不同人所關注的對象,也會有些許差異,這才是我們所要傳遞的精隨。

文章同步發佈平台&支持,可前往不同平台進行拍手支持,或透過下方的 Like 讚賞(註冊 Liker 完全免費)讓創作者獲得額外收入!

.MediumMatters
Aesthetics
PS|設計光影灑落 Mockup
Life
26 歲的回顧
Aesthetics
設計作品集規劃建議
Product
LINE 原創主題|未歸檔 ── 平安夜
Life
關於臉部基礎保養這件小事
Aesthetics
設計資源與參考統整(二)
Product
LINE 原創主題|豆芽 ── 岩之森
Aesthetics
設計師必須具備的草稿繪製能力

Share

接案設計師的工作流程

接案設計師的工作流程

從委託、設計、提案至請款的五大階段。

接案設計師不只是「會設計」而已,更需要學會與客戶溝通,甚至是基本的文件處理,以下分享實際的工作流程。


大綱
1. 前言
2. 初步諮詢 / 提供報價
3. 簽訂合約
4. 支付訂金 / 開始合作
5. 設計執行(專案執行)
6. 支付尾款 / 交稿結案
7. 最後的碎碎唸

前言

僅為個人想法,每個人的經驗與看法不同,保持開放與互相學習的心態吧!工作流程一直都有呈現在工作室官網中,不只是給自己看,更能讓客戶理解整個過程,可知道下個階段需要準備什麼,或是如何進行。雙方也能有個基本的依據。

Design by Jhane Chou

初步諮詢 / 提供報價

依據客戶提供的需求,進行初步的規劃,並提供報價書。

Design by Jhane Chou

1.1|不同性質的專案

從平面、識別、介面、動畫等等,依據不同性質的專案,有對應的需求內容。客戶大多寄信詢問,少數為通話,極少數是透過社群的訊息。

我偏好寄信,除了能夾帶檔案,也方便留存紀錄。

1.2|開會討論

第一次會實際與客戶見面討論,讓彼此有初步的印象,也能在會議過程中理解客戶對於專業的尊重程度;之後多為線上開會。

大部分客戶會在開會時介紹公司,但在會前依然會先做好功課,至少對客戶背景與產品內容有基本的了解。

因為是自己對客戶,會邊開邊做紀錄會議(至少記錄重要的關鍵詞或內容)如果是與夥伴一起對客戶,那麼可以分工讓其中一人專心做會議紀錄。

我習慣先做好不同專案的基本問答,可以加速初步溝通的速度。

1.3|估價單/報價單

避免提供客戶粗略的估價,就算是估價也會好好地將重要的項目列進去,避免疑慮與誤會。若是提供報價單,則會盡可能將內容與細項寫清楚,包含時程安排、付款方式等等。

訂金何時給?尾款何時給?這些都要寫得清清楚楚。

延伸:設計報價書升級再進化


簽訂合約

雙方確認規格、報價與時程無誤之後,即可簽訂合約。

Design by Jhane Chou

這與一般在公司上班的情況不同,在公司裡只要做好設計就好。當你是自行接案或是與夥伴一起接案,就必須清楚設計委託的合約該如何處理。


支付訂金 / 開始合作

客戶支付專案的部分費用作為訂金,收到訂金即正式展開合作。

Design by Jhane Chou

3.1|收到訂金才動工

很重要、很重要、很重要。除非你抱持著「就算最後做白工也沒關係」的心態,不然一般都不建議直接動工。尤其某些性質的專案時間很長,可能要一兩個月以後才能拿到款項;所以還是先收取訂金吧!

訂金的%數沒有一定(個人習慣50%),通常兩方說好即可。也有客戶希望將款項分為不同階段,並配合驗收(驗收過了即可收取該階段的款項)。

有收到訂金,就算專案沒完成(不是設計造成的緣故)都至少有拿到部分費用。

3.2|合作

會再檢視一次客戶是否有遺漏的資料未提供,若無法即時提供,就必須安排並估算好相應的時程。

通常在規劃專案時程,會評估「緩衝」時間以備不時之需。

設計執行(專案執行)

依據專案的需求與規劃,開始執行專案。

Design by Jhane Chou

每一次的提案、溝通,都要保留信件紀錄留存的習慣。在這階段也會搭配共用文件讓雙方知道目前狀況,或是內容的更新。提案能不能順利通過,考驗設計師的設計及表達能力囉,有時不只是做出美美的設計,而是符合客戶需求的設計。


支付尾款 / 交稿結案

最終的設計定案,客戶支付尾款,我方交稿結案。

Design by Jhane Chou

先支付尾款,再交付設計?還是先交付設計,再支付尾款?

這沒有一定的答案,完全為雙方說好的情形。部分公司的匯款日會固定和發薪日相同,有的則是說匯就匯!

這部分可再前期詢問清楚,以免等不到天降甘霖。


最後的碎碎唸

接案設計師不只是「會設計」而已~

文章同步發佈平台&支持,可前往不同平台進行拍手支持,或透過下方的 Like 讚賞(註冊 Liker 完全免費)讓創作者獲得額外收入!

.MediumMatters
Product
LINE 原創主題|豆芽 ── 暮光
Life
領養臭美的紀錄
Writing
✍ Medium Feature pages 與 Tag 搭配
Life
用你喜歡的方式活著
精選文章
書評《每一天的覺醒》
Aesthetics
私藏創作配色方式
Aesthetics
AI|使用重新上色圖稿製作多種配色
Freelancer
LINE 原創主題月收益突破 5 位數

Share

繪製插圖的感想

繪製插圖的感想

分享我如何從無到有繪製插畫/設計。

本篇建議搭配服用:

我也想要有源源不絕的創作力!最後一段會分享簡易的流程。


大綱
1. 前言
2. 我想…任何事情皆難在「起頭」
3. 關於靈感/創作力
4. 很容易慣用某種表現形式?
5. 時間啊時間
6. 嘗試喜歡且不擅長的,並試圖了解它
7. 簡易流程

前言

我喜歡為自己訂下許多小目標,每次完成就會有「達成任務」的滿足感,還能不斷地進步,拉近心中理想的距離。

Screenshot & Design by Jhane Chou

一直有思考「如果沒接到」我想要做的案子,那麼我該如何維生?就算能持續做下去好了,我也會想休息或偷懶,於是在今年底訂下「上架兩百個有品質的主題」的目標(創造假被動收入)預計在明年中以前完成。

不只是主題,也有其他的項目需要達成。
也很剛好地,有好幾個月沒有接案收入。

原創主題

Deerlight Hand Drawn — Travel

雖說好像是為了錢而這麼做,但這項目標執行到現在,好像無法只為了錢(其實靠主題不適合被動收入啦!)得考量許多許多,顧及品質與符合不同客群,於是變相成為「畫插畫」的練習了?

前言結束,進入正題~


我想…任何事情皆難在「起頭」

總是想著等一下再做吧、明天吧、下次吧;尤其是自由工作者,有時太自由反而不知所措,也越容易拖延。無形中累積好多好多事情,永遠都做不完,或者什麼事情都沒有進展,這樣的循環,真叫人難受!

對我最有效的方法,依然是一鼓作氣:就做吧!

在紙上繪製草圖、開啟檔案、制定計劃等等,先讓自己進入狀態,接著就會知道該如何進行了。

我會在心裡與內心對話:

「我…晚點再做…」
『不行!現在、立刻、馬上去做!』


關於靈感/創作力

是否常不知從何開始?或是沒有方向?沒有想法?不知道要畫什麼?

如果你完全沒有經驗,可先從臨摹(模仿)開始!若已經有經驗,甚至是具備實作的能力,卻依然缺乏靈感,那麼可能有幾種狀態 …

完全空空

遇見瓶頸

而我對於靈感 / 創作力的見解寫在這篇文章:如何保持穩定輸出


很容易慣用某種表現形式?

過於依賴某個形式的窘境,例如某些表現形式可以讓我在「短時間」做完,達到大量創作的錯覺。

因為很花時間

有了「花時間」的想法:要花好多時間才能完成一件完整的插畫,就覺得好累!

參加比賽的作品

因為不擅長電競、遊戲風,導致製作過程中耗費不少時間,為了更符合電競感,還加入了光影效果,來來回回調整才完成。

然而想要的創作或設計方向,多半偏好令人會心一笑,或是能觸及心情的成分,以及帶有微微的想像空間。雖然畫面簡單,但背後也是有不少時間堆砌,卻是我喜歡的風格,於是更願意花時間執行。

看似花時間的事情,在投入當下時,反而會感到時間過得很快!


時間啊時間

我們都知道創作、設計等等,需要輸出不少的時間。但多數人看見的,幾乎以「表象」的畫面為主,例如構圖很簡單、顏色很少、換作是我也能做到,用這些的感受去判斷創作者耗費的各種成本。

真正的時間,是由你接觸這塊領域時就開始算起了;背後的概念也是囊括你的畢生經驗與價值觀。

這些都不是無中生有的,更沒有所謂的簡單與不簡單之分。


嘗試喜歡且不擅長的,並試圖了解它

就像你喜歡某個人,雖然不擅長與他相處,卻願意好好了解他。

我擅長的

將複雜的畫面簡化再簡化,例如較純淨的風景。

甚至在一些創作中也能看到傾向乾淨的畫面。

我不擅長的

不擅長將畫面加入細節與小物,或是繪製太複雜的空間感。

每當我見到具有微世界觀的插圖,都覺得很可愛又具有一定的細節,是那種恰到好處的細節。雖然不擅長,卻很有挑戰的空間。

於是認真地拆解作品,保留我喜歡的部分,帶入我的創作中。

創作速度遠遠比擅長的慢了十倍,卻令人有成就感。


簡易流程

雖然不擅長插畫,依然有建立一個簡單的流程,供自己參考。

Design by Jhane Chou

01|決定主題

主題不用太複雜,明確的詞彙即可。

🧇 例如:聖誕節。

02|如何表現主題

我們總是想到最終呈現的模樣,雖然能明確表示你所呈現的主題,卻太過直接,二來是思考的方式缺乏鑑別度,與一般人所想的雷同。

有趣的是「過程」而非結果,請好好地記住它!

🧇 例如:聖誕節的第一印象是眾人圍繞在聖誕樹旁送禮物等等,可以轉換成,大家在布置聖誕樹的畫面,或者將時間線更提早:採買布置品。

03|風格定調

參考適合的表現風格,我會以我能做到的表現形式為主,或者有些難度但能夠花更多時間來克服的也行。

🧇 建議:參考不用找太多,而是以方向正確為目標。

04|草圖繪製

不論擅不擅長電繪,都還是建議先繪製草圖(螢幕、紙張皆可,紙張尤佳)在這階段可以盡量嘗試不同畫面。

🧇 建議:這階段的草圖很草無所謂。

05|繪製更精準的草稿

從草圖中挑選適合的,進行更細化的作業。此階段的目的是降低後續來回修改的機率。

🧇 建議:不擅長電繪的畫,越細緻的草圖,輔助性越高。

我甚至會在電腦中直接描繪自己的草稿。

06|製作數位精稿

大概是這樣,後續可能是進行配色或相關的製作細節。

其實自己已經習慣某套核心的流程,只是換成各種應對的模式(笑

文章同步發佈平台&支持,可前往不同平台進行拍手支持,或透過下方的 Like 讚賞(註冊 Liker 完全免費)讓創作者獲得額外收入!

.MediumMatters
Life
改變思維,建立自我專業與自信
Life
多管閒事的長輩們,期盼你快點結婚
Aesthetics
AE|Expression Color Control
Aesthetics
聽音樂繪畫練習
Aesthetics
PS|設計光影灑落 Mockup
Aesthetics
學習素描需要知道的N件事
Aesthetics
淺談版面設計的運用
Freelancer
新增 iPad Pro 生產力工具

Share

AI|使用重新上色圖稿製作多種配色

AI|使用重新上色圖稿製作多種配色

使用 illustrator 快速製作多種配色稿!

當我們使用 Illustrator 繪製插畫,需要更改顏色時,必須一個個改變色彩。有沒有更快的方法呢?當然有!


大綱
1. 準備好設計稿
2. 選取想更改色彩的物件
3. 重新上色圖稿
4. 重新編輯色彩
5. 最後的碎碎唸

01|準備好設計稿

在 Illustrator 中繪製好設計稿。

Screenshot & Design by Jhane Chou

我繪製的插圖會依據自訂的配色系統,可見到畫面中用的色彩,即為工作區域左側獨立出的幾項色彩,這麼做的好處是能讓畫面的色彩具有規範,且更換色調時也能保持一致。

關於配色相關文章可參考:


02|選取想更改色彩的物件

由於我想一次調整所有色彩,直接使用快捷鍵 Ctrl + A 或 ⌘ + A,將所有圖層選取。

Screenshot & Design by Jhane Chou

03|重新上色圖稿

點擊控制列類似圓形色票的圖示(下圖黃圈處)。

Screenshot & Design by Jhane Chou

點擊「重新上色圖稿」後,可彈出的該面版,再點擊「編輯」按鈕(下圖黃圈處)。

Screenshot & Design by Jhane Chou

04|重新編輯色彩

在編輯畫面中,可見到你的設計稿所使用的所有色彩。

Screenshot & Design by Jhane Chou

以示範的設計圖為例:

還記得我們上幾步提到的顏色規則嘛?若你的顏色又多又雜,那麼在編輯模式中就會看到許多顏色散落在色盤中。

以下有兩種常用的方式可重新上色圖稿。

第一種:更改單個色彩

適合微調畫面中的某個色彩,你可以選擇色盤中的任一色彩,長按並拖曳至你想改變的色彩。

例如,我想將南瓜的陰影色,改成帶有紫色的色彩。

Screenshot & Design by Jhane Chou

點選色盤上對應的色彩,拖曳至我想改變的顏色,即可改變單個色彩。

Screenshot & Design by Jhane Chou

第二種:更改多個色彩,也就是改變整個畫面的色調

看完第一種方式,你可能會想:如果我想調整色調怎麼辦呢?一個個調不就跟自己去調整每個形狀的色彩一樣重工?

這時我們可以「連結色彩調和顏色」講白點,類似於鎖定的作用。

點擊「連結色彩調和顏色」的圖示(下圖黃圈處)可見到不同色彩之間的連接線變成實線(未連結之前的線條為虛線)。

Screenshot & Design by Jhane Chou

接著,長按並拖曳任一色彩,將會看到所有色彩跟著連動。

Screenshot & Design by Jhane Chou

依然可調整單個色彩的距離色盤中央的「距離」可見到色彩變的更加飽和或是灰暗,也可以改變色盤呈現的模式。

Screenshot & Design by Jhane Chou

最後的碎碎唸

其實是為了繪製多個 LINE 主題而發現這個功能的!只要色彩在初期規劃好,重新上色時就不容易失敗,也可以在短時間內得到良好成效。

偷偷宣傳我的主題賣場

文章同步發佈平台&支持,可前往不同平台進行拍手支持,或透過下方的 Like 讚賞(註冊 Liker 完全免費)讓創作者獲得額外收入!

.MediumMatters
Life
關於,我在台北生活的開銷與生活(一)
Aesthetics
運用插畫練習,提升設計能力
Life
影評《鬼入侵 The Haunting Of Hill House》無雷心得
Life
書評《秒睡》
Aesthetics
設計優秀的作品集
Freelancer
接案不需要表現得這麼飢渴
Freelancer
拓展不同領域,保持學習的習慣
Product
LINE 原創主題|豆芽 ── 暮光

Share