「AI 已經能畫出你想要的畫面了，但要如何讓這些圖片符合你的網站調性？又該如何把它們變成吸睛的網站主視覺呢？這一堂課，我們將深入探索 AI 圖像的風格奧秘，並教你把 AI 圖完美應用到你的網站上，讓網站的『門面』質感爆棚！」
1. 常見藝術風格解析：讓你的網站擁有獨特氣質！
不同的 AI 模型和 Prompt 組合，可以生成各種風格的圖像。了解這些風格，有助於你更好地引導 AI，並選擇最適合你網站的視覺語言。
- 寫實風格 (Photorealistic)：
- 特徵： 圖片看起來像真實照片，有細膩的光影、紋理和細節。
- 適用網站： 產品展示、人物形象、風景攝影、新聞媒體。
- 常用 Prompt 關鍵字： photorealistic, ultra realistic, 8K, highly detailed, cinematic lighting.
- 卡通/插畫風格 (Cartoon/Illustration)：
- 特徵： 線條簡潔、色彩鮮明、形象可愛或誇張。
- 適用網站： 兒童相關、趣味性內容、軟性服務、部落格插圖。
- 常用 Prompt 關鍵字： cartoon style, flat design, anime style, vector art, cute.
- 賽博龐克風格 (Cyberpunk)：
- 特徵： 高科技、低生活、霓虹燈、未來城市、陰暗與高科技對比。
- 適用網站： 科技產品、遊戲、概念藝術、新創公司。
- 常用 Prompt 關鍵字： cyberpunk, neon lights, futuristic city, dystopian, techwear.
- 油畫/水彩風格 (Oil Painting/Watercolor)：
- 特徵： 筆觸明顯、色彩厚重或暈染，藝術感強烈。
- 適用網站： 藝術畫廊、文創產品、設計師作品集、高質感品牌。
- 常用 Prompt 關鍵字： oil painting, watercolor, impressionist, brush strokes, art by [知名畫家]。
- 極簡主義風格 (Minimalist)：
- 特徵： 簡潔、留白多、色彩單純、強調線條和形狀。
- 適用網站： 精品品牌、設計公司、簡約生活、應用程式介紹。
- 常用 Prompt 關鍵字： minimalist, clean lines, flat colors, simple, abstract.
實作：在 Leonardo AI 中選擇適合網站的風格模型
Leonardo AI 提供多種基於 Stable Diffusion 的「模型 (Model)」，這些模型已經被訓練成擅長生成特定風格的圖像。
- 在 Leonardo AI 的「AI Image Generation」頁面。
- 在右側的「AI Models」區塊，點擊「Select a Model」。
- 瀏覽不同的模型：
- Leonardo Diffusion XL / Leonardo Diffusion： 綜合型，可以生成多種風格，品質穩定。
- Absolute Reality： 擅長生成高品質的寫實照片。
- DreamShaper： 偏向藝術性和插畫風格。
- Anime Pastel Dream： 專門用於生成動漫風格。
- 嘗試： 選擇一個你認為適合你網站風格的模型，然後輸入你的 Prompt 進行生成，看看效果如何。
2. 網站主視覺的設計原則：讓 AI 圖發揮最大效益！
生成了漂亮的 AI 圖，還要懂得如何把它應用到網站上，才能發揮最大效益。
- 符合品牌調性：
- 你的網站是活潑、科技、專業還是溫馨？選擇的 AI 圖像風格、色彩、內容都應該與品牌精神一致。
- 思考： 你的目標客群是誰？他們喜歡什麼樣的視覺？
- 主題明確，一眼抓住焦點：
- 主視覺要清楚傳達網站的核心資訊或服務。避免畫面元素過多、訊息混亂。
- 引導使用者行為：
- 好的主視覺應該能引導訪客繼續瀏覽，例如圖片的視線方向可以指向 CTA (Call To Action) 按鈕。
- 考慮網站版面與比例：
- 網站主視覺通常需要特定的長寬比，例如電腦版首圖常用 16:9 或更寬的 21:9。
- 行動版則可能需要直向比例的圖片。
- 實作 (Leonardo AI)： 在「Image Dimensions (圖像尺寸)」選擇預設的比例，或點擊鎖頭圖示解除鎖定，自定義寬高。
3. AI 圖像在網站的應用場景：讓 AI 成為你的設計師！
AI 圖像不只可以用來做首頁主視覺，它還有許多應用場景：
- 首頁主視覺 (Hero Image)： 網站的第一印象，吸引訪客停留。
- 產品情境圖： 讓顧客想像產品在真實生活中的應用，提升購買慾。
- Banner/廣告圖： 針對特定活動或促銷設計，吸引點擊。
- 部落格封面圖/文章插圖： 讓文章更生動有趣，提升點擊率。
- 服務介紹圖： 視覺化呈現服務內容，方便理解。
- 背景紋理或圖案： 利用 Tiling 功能生成無縫背景。
實作：嘗試為你的網站生成主視覺
- 思考你的網站主題和品牌調性。
- 例如：你是賣手工咖啡豆的電商，網站風格是溫馨、自然。
- 擬定 Prompt：
- Prompt： A cozy coffee shop interior, warm lighting, natural wood elements, a steaming cup of coffee on a table, soft bokeh background, photorealistic, inviting atmosphere. (溫馨的咖啡館內部，暖色調燈光，自然木質元素，桌上有一杯熱咖啡，柔和散景背景，寫實風格，溫馨氛圍。)
- Negative Prompt： blurry, low quality, deformed, text, ugly.
- 選擇模型： 選擇 Absolute Reality 或 Leonardo Diffusion。
- 設定尺寸： 考慮網站主視覺的寬比例，例如 1920×1080 (但會消耗較多點數，免費版可以先從 1024×576 或 1280×720 嘗試)。
- 生成並挑選： 生成多張圖片，選擇最符合你網站主題和品質的。
4. 圖像編輯與後期處理：讓 AI 圖更完美！
即使 AI 生成的圖片很棒，通常還是需要進行一些微調，讓它更適合網站使用。
- 裁剪與縮放： 調整圖片尺寸以適應網站版面。
- 工具： Photoshop, Photopea (線上免費版), GIMP (免費桌面軟體) 或 WordPress 內建的圖片編輯器。
- 色彩調整： 調整亮度、對比度、飽和度，讓圖片更符合網站的整體色調。
- 文字疊加： 如果需要在主視覺上添加標題、標語或 CTA 按鈕，可以利用設計軟體或 Canva 進行疊加。
- AI 圖像的微調技巧 (Leonardo AI)：
- Inpainting/Outpainting： AI Canvas 功能，可以擦除或擴展圖片內容。例如，圖片背景不夠寬，可以用 Outpainting 讓 AI 自動延伸。
- Upscale (放大)： 如果生成的圖片尺寸不夠大，可以透過 Upscale 功能放大，同時提升細節。在生成圖片後，點擊圖片下方的「Upscale」按鈕。
- 透明背景： 如果你需要一個物體或人物的透明背景圖 (例如放在其他背景上)，可以使用 remove.bg 等線上工具移除背景。
本單元小結：
太棒了！你已經掌握了 AI 圖像的風格選擇，並學會如何將這些 AI 生成的精美圖片，完美應用到你的網站主視覺上！從現在起，你的網站不再需要昂貴的設計師，也能擁有專業級的視覺呈現。
下一單元，我們要探討一個非常重要的議題：「AI 圖像的版權與倫理」，以及 AI 圖像生成工具的最新趨勢，讓你用得安心又符合規範！
別忘了： 視覺設計是個不斷嘗試和學習的過程！多嘗試不同的 Prompt 和調整，你會發現更多驚喜。有任何疑問，歡迎在下方留言討論喔！
