--- 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)