---
# System prepended metadata

title: 圖像編排的小技巧
tags: [PhotoShop]

---

---
title: 圖像編排的小技巧
tags: PhotoShop
---

黃金比例
![](https://i.imgur.com/p6icNpX.jpg)
設計重點
![](https://i.imgur.com/OQwBpMS.png)
文案
![](https://i.imgur.com/B0Np111.png)
流程 可靠這幾個動作去定義風格
![](https://i.imgur.com/6sGlbdy.png)
範例
![](https://i.imgur.com/EHESDGL.png)
列出需求
![](https://i.imgur.com/ChcX2Yl.png)
資訊放太多會太壅擠
所以挑三個重點資訊
![](https://i.imgur.com/HkAFm4O.png)
排版 
![](https://i.imgur.com/pm2hfzy.png)
留白範圍
![](https://i.imgur.com/KzVk7sj.png)
留白窄版面率高
留白多版面率低=賣鑽戒或者高單價的手錶
給人的感受不同
![](https://i.imgur.com/w54JNPi.png)
左右邊界
網頁瀏覽千萬不要讓版面歪一邊
![](https://i.imgur.com/8i3OWoY.png)
印刷品的留白
出血裁切=列印時會用裁刀裁 所以避免歪掉會留白 要留安全的裁切邊
![](https://i.imgur.com/oOFLM2c.png)
排版-設定網格
可以提升排版效率
網頁的網格會依照960 grid system
![](https://i.imgur.com/9v7H3vr.png)
初學者常用的 切六格 (常見的圖文配置)
![](https://i.imgur.com/xtjmWh3.png)
左下像首頁 其他像內頁的排版
![](https://i.imgur.com/SSipbQb.png)
資料相同的放在一起 讓閱讀不吃力
![](https://i.imgur.com/nZVLuK7.png)
圖片文字的群組化呈現-盡量可以對照 增加可讀性
![](https://i.imgur.com/LIXGruy.png)
名片的排版 
![](https://i.imgur.com/lsKz6wd.png)
菜單的排版 中間要留白或hr去分割
![](https://i.imgur.com/tWHmpN9.png)
排版設定強弱 可利用閱讀習慣順序(上=>下 左=>右)去做編排
    不要全部文字都擺上去
![](https://i.imgur.com/6nJZbuO.png)
排版技巧-對齊
![](https://i.imgur.com/iG6nXzo.png)
對齊方式可以用 圖片跟文字邊界的對齊
![](https://i.imgur.com/CPDTeN7.png)
常見對齊方式一:
![](https://i.imgur.com/EFGZn9C.png)
常見對齊方式二:
    基本上文字對齊 都不會太醜
![](https://i.imgur.com/9Co9YNR.png)
文字可以用間距的方式對齊
![](https://i.imgur.com/8f0E8zT.png)
圖片也要有隱形的對位框
![](https://i.imgur.com/WvmF5tA.png)
安排順序
![](https://i.imgur.com/hRHQWAo.png)
網頁排版技巧-對比
![](https://i.imgur.com/TvkOz7L.png)
透過以下四種不同方式去呈現對比
![](https://i.imgur.com/GjP6hKa.png)
文案的排版 可以加入色彩的對比
    文字的排版建議行高要設定出來
    文字的寬度橫幅的話不要太滿 要適當留白
    (均分或者Z字型排列法與文字大小的對比)
![](https://i.imgur.com/f3BhqP6.png)
躍動率高的排版大多用在蘋果日報那類的報章雜誌上
![](https://i.imgur.com/HDcqrp1.png)
躍動率高吸引目光適合放首頁
    其他兩個像內頁
![](https://i.imgur.com/9PHdVfy.png)
![](https://i.imgur.com/6dzncct.png)
![](https://i.imgur.com/BeF4I0t.png)
配色要遵照主要色系去延伸風格
    才不會很突兀
![](https://i.imgur.com/96aVA19.png)
延伸色系的範例
![](https://i.imgur.com/RCOUz9r.png)
![](https://i.imgur.com/NY3kMGg.png)
垂直三分跟水平三分
![](https://i.imgur.com/6rjUuFn.png)
![](https://i.imgur.com/0vs9rTn.png)
各種裁切模式示範
![](https://i.imgur.com/4I4KBMI.png)

![](https://i.imgur.com/UagjdwC.png)
放太上面太貼邊會太擠
    可利用熔接 把上方的顏色區域擴大放字體
![](https://i.imgur.com/ZBUqUGd.png)
可以滾白邊但是看起來比較生硬
    最好的方法是壓一個白色區塊 上面輸入字
![](https://i.imgur.com/TjhZ75q.jpg)
![](https://i.imgur.com/keQAYlY.png)
可以用去背增加版面區域
![](https://i.imgur.com/PuVbw7Q.png)
配色要搭配主題
![](https://i.imgur.com/EcOmJcL.png)
![](https://i.imgur.com/5x6kZCc.png)
![](https://i.imgur.com/L0DDKgM.png)
![](https://i.imgur.com/HwnOBxI.png)
![](https://i.imgur.com/WCvuN0v.png)
包裝設計會依照產品特性
比如說 暖暖包使用暖色 運動飲料為了表示清涼選擇冷色
暗紅色的話可以表示 紅色的明度可不可以降低
淡紅色的化則是表示可不可以降低彩度
![](https://i.imgur.com/58OpdqT.png)
紫色高雅的由來是因為古代沒有紫色
所以紫色是提煉蝸牛的內臟
紫色難取得 所以有紫色都是有錢人

顏色挑選的時候常常會有盲點
可以搭配配色的方案
比如可以參考pantone的配色

配色可先使用安全的配色:
1.黑白灰來搭配單色
2.深淺的變化 (深藍+淺藍)
![](https://i.imgur.com/dXYmW6S.png)
使用文字跟字體來增加設計感
![](https://i.imgur.com/Dzb4RZw.png)
大標題跟副標題的配置參考
![](https://i.imgur.com/c0TKrnq.png)
字體給人的感覺=>比如刑事警察局不會用少女體
![](https://i.imgur.com/rv4m8e9.png)
襯線字 = 鋼筆體 只要勾來勾去的都是襯線
無襯線字 = 微軟正黑

建議使用無襯線字去當內文
![](https://i.imgur.com/EeW4zuw.png)
![](https://i.imgur.com/ctEyGbV.png)
英文也有分
![](https://i.imgur.com/ZEOi9Ew.png)
![](https://i.imgur.com/8CQEn3R.png)
使用技巧
![](https://i.imgur.com/zAo3VpZ.png)
字體家族=>   ![](https://i.imgur.com/kdBu3Sw.png)
資訊圖像化可以精簡版面 加快可讀性
![](https://i.imgur.com/RIIOWdJ.png)
![](https://i.imgur.com/0AHAZQZ.png)
比如:
![](https://i.imgur.com/qXioxYS.png)
![](https://i.imgur.com/mU4Irw0.png)
或者儀錶板類的呈現方式
![](https://i.imgur.com/xSvsouf.png)
比如政府單位很喜歡做成圖表型式
![](https://i.imgur.com/aZ2ES6T.png)
跟長官報告的化可以用圓餅圖
![](https://i.imgur.com/8g9a28t.png)