Design Beginner’s Guide / 設計總整合
大型 PDF 已外部化到 Google Drive： 開啟 PDF。 原始檔對照資訊保存在 repo 根目錄的
external-assets.yml。
後設資料
- 作者：socialMORE (HK)
- 發表日：~2022（依內文 IG 貼文 ID #4–#230 推估，PDF 為集結作）
- 頁數：46（橫向 A4 / Landscape）
- 語言：繁體中文（穿插英文術語）
- 來源：socialMORE 設計教育帳號的 IG 貼文系列彙整 PDF
- 風格：Tiffany green 主視覺一致；每頁皆貼上 IG 貼文編號（如 #75 色相比例 / #99 排版設計系統）便於回溯原貼
一句話濃縮
一份港式繁中的「給設計入門 / 自學者」總整合——把色彩、字體、排版、品牌、Freelance 務實知識、Adobe Illustrator 小技巧與資源網站清單集結成 7 章 46 頁的工具手冊；單頁主題式 IG 貼文重新組織為主題 → 章節 → 集結的可查閱結構。
結構摘要
依 7 章組織。每章封面後接 2–8 個主題頁。主題頁右上角通常標 IG 貼文 ID（#XXX）便於回溯原 IG 貼文。
Ch.01 色彩入門 The Color Basics（P.4–P.8）
- #111 色彩模式：RGB 三原色光（螢幕） vs CMYK 四分色（印刷）；色差成因與處理（電腦螢幕色差 / 紙張質料 / 顏色模式轉換 / 特別色 Pantone）
- #75 色相比例：60:30:10 法則——主色相 / 輔助色相 / 強調色相
- #117 色彩心理學：紅 / 粉紅 / 橙 / 黃 / 綠 / 藍 / 紫 七色的品牌應用對照（Coca-Cola / Fanta / McDonald’s / IBM / Yahoo!）
- #4 選色好幫手：Adobe Color / Pantone Studio / Nippon Colors / Brand Colors / Web Gradients
- #57 關於顏色的小技巧：AI 漸變工具（Blend Tool）建配色、Recolor Artwork 重新上色
Ch.02 字體基礎 The Typography Basics（P.10–P.15）
- #214 中文字體基本類型：四大類型——楷體 / 仿宋體 / 明體 / 黑體 + 特別字體；中宮概念（緊湊 vs 放鬆）；橫筆斜度判斷（楷體左低右高 / 仿宋略傾斜 / 明體水平）
- #143 英文字體結構：Ascender / Base Line / Descender / x-Height / Cap-Height + 字部件名（Stem / Crossbar / Arm / Stroke / Leg / Shoulder / Aperture / Bowl / Counter）
- #38 字型搭配小工具：Font in Use / Fontjoy / Font Pair / What Font
Ch.03 排版指南 Layout Design Guide（P.17–P.19）
- #173 7 個文字排版小技巧（AI 操作）：羅馬對齊（Hanging Punctuation）/ 新增最愛字型 / 變更大小寫 / 點狀 vs 區域文字框 / 行距字距快捷鍵 / 路徑選取文字 / 透明度平面化分開段落
- #99 排版設計系統：8 大視覺組織系統——軸線式 Axial / 雙邊對稱式 Bilateral / 模組式 Modular / 行進式 Transitional / 隨機式 Random / 放射式 Radial / 漣漪式 Dilatational / 網格式 Grid
- #99 中英兼備的排版指南：5 原則——統一字形結構（襯線配襯線、無襯線配無襯線）/ 字體大小和諧 / 清晰目標對象 / 注意閱讀舒適度 / 審核設計
Ch.04 品牌設計入門 Branding Design Essentials（P.21–P.22）
- #105 Mood Board 情緒板：定義 / 為何需要 / 4 步驟（訂立關鍵字 → 收集素材 → 分析素材 → 整合情緒板）
- #93 5 個 Logo 設計的基本原則：獨特性 Distinctiveness / 簡潔性 Simplicity / 比例與平衡 Proportion and Scale / 功能性 Functionality / 延伸性 Extensibility（案例：Nike 多版本 / Chanel 多版本）
Ch.05 設計師必備的務實知識 Designer’s Soft Skills（P.24–P.26）
- #32, #69 作品集攻略：重質不重量（10 件以內）/ 數碼 vs 印刷 / 建立針對性 / 注意細節質感 / 案例研究 Case Studies / 線上作品集平台比較（Wordpress / Wix / Squarespace / Issuu / Behance）/ Bestfolios / Awwwards
- #135 成為自由平面設計師前需要知道的 4 大細節：定價（避免壓低價錢） / 溝通（建立人脈） / 學習與進步（自我品牌 + 專業性 + 自律時間管理）
Ch.06 實用小技巧 Tutorials and Tips（P.28–P.37）
- #132 AI 快捷鍵：編輯 / 文字 / 顯示 / 常用工具的 Adobe-Illustrator 快捷鍵彙整
- #149 Grain Effect 顆粒紋理：illustrator 內建效果 + DIY 散落筆刷
- #158 Solid Text Effect 立體文字效果：封套扭曲 + Blend Tool + 展開的 9 步驟流程
- #224 3 Isometric Drawing Tips 等距圖形：矩形網格 → 旋轉 45° + 縮放 57.74% / 動作面板錄製 Left-Right-Top 三組變形 / 3D Extrude & Bevel
- #230 用 AI 製作手繪感插圖：粉筆炭筆鉛筆筆刷 / Roughen 粗糙效果 / 隨機散落圓點陰影 / 高斯模糊 + 顆粒紋理
- #194 Aurora 隨處可見的設計趨勢：AI 漸變工具 / Figma Layer Blur / Photoshop 圖片高斯模糊三法
- #161 隨機貼紙風背景：Photoshop 編輯 → 填充 → Pattern → Random Fill 腳本
Ch.07 資源分享 Design Resources（P.39–P.46）
- 插圖庫：Handz / Stories by Freepik / Icon8 Vector Creator / Free Illustration / SilhouetteAC / illustAC / Vecteezy / 鳥獸戯画
- 照片庫：Everypixel / Unsplash / Pixabay / Pexels / Burst / Foodiesfeed
- 圖案與紋理：Pattern ico / Wow Patterns / Hero Patterns / Free Stock Textures / Lost and Found / Wild Texture
- 圖標：Flaticon / Iconfinder / Tilda Icons / Lord icon / Iconscout / Animated Icons 2.0 by icons8
- Mockup：Mockup World / Graphic Burger / Mr Mockup / Anthony Boyd / Pixeden / Unblast
- 實用工具：Notion / Figma Jam / Ease and Wizz / Template Maker / Remove.bg / Font in Logo
- 設計靈感：Pinterest / Behance / Dribbble / World Brand Design / BP&O / Identity Designed / It’s nice that / Creative Boom / Typewolf / Typographic Posters / Notefolio / Logo Stock / JDN / Nippon Design Center / Kawacolle / Matomeno
重要段落 / 引用
- 「RGB 是屏幕顯示的最佳色彩模式…CMYK 的顏色疊加越多時，油墨的顏色會越深、越不鮮明，所以這種呈色原理亦被稱為減色原理。」（P.5）
- 「60% 主色相佔了設計中大部分顏色，中性色會比較適合用作主色相，多用於背景或主要內文。」（P.6）
- 「將你的設計轉換成黑白，能夠清楚檢閱整個設計的色彩對比度。」（P.6 TIPS 2）
- 「橫筆的斜度是判別楷體、仿宋體和明體的一個重要元素。」（P.13）
- 「字型搭配需遵守的基本原則有：和諧、對比和避免突兀。」（P.15）
- 「字體數量應控制在 2–3 種是比較合適。」（P.19，中英兼備排版指南 #1）
- 「有時候精心設計簡潔的線條和字體，比起複雜又凌亂的 Logo 更有效果。」（P.22，獨特性原則）
- 「作品集數量應控制於十項以內…大部分面試官想看到的是你近期的作品。」（P.24）
- 「假若對方把你提供的收費壓得不合理…我建議你可以不要接；這樣做只會影響行業風氣，同時你在告訴別人你的價值原來只有那麼多而已！」（P.25, Freelancer 定價段）
提取概念
新建（本次 ingest 同步建立）
- 色彩心理學 — 七色品牌應用對照（紅熱情 / 粉紅甜美 / 橙溫暖 / 黃年輕 / 綠自然 / 藍信任 / 紫高貴）+ 案例品牌
- 60-30-10法則 — 色相比例分配的基礎法則（主 / 輔 / 強調）
- 情緒板 — Mood Board，設計概念與主題方向的視覺探索工具
- 排版設計系統 — 8 大視覺組織系統（軸線 / 雙邊對稱 / 模組 / 行進 / 隨機 / 放射 / 漣漪 / 網格）
- Logo設計原則 — 5 條基本原則（獨特性 / 簡潔性 / 比例平衡 / 功能性 / 延伸性）
- 中文字體類型 — 楷 / 仿宋 / 明 / 黑 + 特別字體 + 中宮概念
- 字型搭配 — 字體配對的「和諧 / 對比 / 避免突兀」三原則 + 中英混排
- socialMORE — 香港設計教育帳號 / 本 PDF 作者
- Adobe-Illustrator — Adobe 向量繪圖軟體（AI），本書多章作為操作對象
已存在 wiki 頁（補入相關來源連結）
- 排版 — 本書 Ch.03 的「7 個文字排版小技巧」與 Ch.03 的中英兼備排版指南是介面排版的姊妹工具軸（操作層 vs 設計理論層）
- 包裝設計 — 本書 Ch.07 的「Mockup」資源軸是包裝設計呈現的工具補充
- 履歷設計 — 本書 Ch.05「作品集攻略」的「題外話 - 關於履歷 (CV)」段落（CV 以文字為主、排版簡潔易讀）
備註
- PDF 性質：是「IG 貼文集結 PDF」——非原創專書，而是把 socialMORE 經營過的 IG 貼文（依貼文編號 #4–#230 推估覆蓋約 2020–2022 區間）按主題重新編排集結。判斷：來源時效偏舊但工具型內容仍適用；資源清單部分（章 7）可能有失效連結，後續引用時需驗證。
- 港式繁中：作者為香港帳號，用詞偏港式（「向量圖庫」「軟件」「項目」「上載」），但概念可以直接套用到台灣 / 中國繁中語境。
- 與既有來源對位：本 PDF 的 Ch.03 排版指南與既有 2026-05-01-介面排版設計訣竅 形成「操作層 vs 理論層」對位——本書教 AI 軟體裡的排版操作（快捷鍵 / 對齊 / 透明度平面化），介面排版設計訣竅教 micro 易辨性 / macro 易讀性兩條軸的判斷邏輯。兩者互補。
- 未拆出的 sub-concept：色彩模式（RGB/CMYK 印刷邏輯）/ 英文字體結構（Ascender / Descender / x-height）/ 顆粒紋理 / 立體文字效果 / Isometric drawing 等技術操作密度不夠獨立成頁，留在本來源頁的「結構摘要」段；後續若有 2+ 來源涉及再評估獨立成頁。
- 資源清單：章 7 的 7 大類 50+ 站點資源不獨立成頁——是清單型內容，應留在本頁作為查閱起點，不適合拆成 wiki 概念。