您现在的位置： 萬盛學電腦網 >> 軟體知識 > >> 影像處理 >> Fireworks 教學
Fireworks 繪製極簡風格 RSS 訂閱圖標：從圓角矩形到精致質感
RSS 圖標是資訊流產品的標準識別符。本教學演示如何在 Fireworks 中通過矢量非破壞工作流，構建一枚具備玻璃質感底座、標準 RSS 機構圖形、倒影投影的精致圖標，全程可編輯、可縮放、可主題色一鍵換膚。
效果預覽
標準化製作流程 (12 步)
- 基礎底座：** 圓角矩形工具繪製 150×150px，圓角半徑 24px (約 16% 邊長)，填充垂直線性漸層
#FF6B00 → #E85A00 → #FF6B00(RSS 標準橙系)。調整漸層手柄對齊視覺重心。 - 頂部高光面：** 複製底座 → 原位貼上 (Ctrl+Shift+V) → 填充改白色實心 → 不透明度 30% → 平面化 (Ctrl+Shift+Z) → 矩形選區工具刪除下半部 → 保留頂部 1/3 高光帶。
- 邊框高光：** 再複製底座 → 填充無、筆觸 1px 白色 → 平面化 → 選區工具羽化 60px → 分別刪除上下邊緣 → 形成中部通亮、兩端虛化的環狀高光。調試時建議背景改黑色對比。
- 外描邊陰影：** 複製底座 → 尺寸擴大至 152×152px (四周各擴 1px) → 圖層移至最底 (Ctrl+Shift+↓) → 填充深橙
#B84500，模擬邊緣厚度陰影。 - RSS 機構圖形 (核心)：**
- 繪製三個同心圓/圓環：實心圓 (半徑 12px)、圓環 1 (內半徑 20px 外半徑 24px)、圓環 2 (內半徑 32px 外半徑 36px)。
- 三者中心對齊 (對齊面板一鍵)。
- 調整圓環控制點：拖動內/外控制柄，將圓環切割為 四分之一圓弧 (保留右上象限)，形成標準 RSS 無線電波圖騰。
- 三圖形同添「內發光」：顏色白，模式「疊加」，模糊 3px，不透明度 50%，統一發光質感。
- 底部投影：** 群組上述所有圖層 → 複製群組 → 平面化 → 垂直翻轉 → 橢圓選區工具羽化 80px 刪除上部 → 保留底部倒影漸變 → 不透明度 70% → 置於最底層。
- 地面接觸陰影：** 橢圓工具繪製扁橢圓 (高 3px，寬 80%)，填充黑，羽化 2px，置於倒影下方，不透明度 20%。
主題色一鍵換膚系統
將「底座漸層」「邊框陰影」「RSS 圖形填充」三處色標綁定至同一「共享漸層」或「樣式」，修改主色相 (Hue) 即可全局換膚：
- 科技藍：
#007AFF → #0056CC → #007AFF - 社交綠：
#34C759 → #28A745 → #34C759 - 內容紅：
#FF3B30 → #CC2E25 → #FF3B30 - 品牌紫：
#AF52DE → #8E3FC2 → #AF52DE
導出規範
- 尺寸規範：`16@1x` `32@2x` `48@3x` `64@4x` `128@large` `256@store`。
- 格式：PNG-24 (透明) / WebP 無損 / SVG (僅矢量骨架，質感需位圖)。
- 命名：`rss-icon_{color}_{size}@{scale}.{ext}`。
- 上一篇軟件知識： Fireworks 打造青花瓷質感按鈕：從矢量花紋到釉面光澤的完整工作流
- 下一篇軟件知識： Fireworks 製作逼真「梵高之光」特效：混合模式與扭曲工具的藝術化運用
推薦文章
- Fireworks MX 新增功能介紹（三）：動態數據圖象、導航欄、彈出選單增強
- Fireworks CS5 繪製 3D 網格線教學
- Fireworks 教學：GIF 動態 Banner 平滑變色製作全程
- Fireworks + Xara3D 高效製作 3D 立體字體設計
- Fireworks CS5 視窗與面板管理：自訂工作區、停靠/浮動、圖示化摺疊技…
- Fireworks 蒙版基礎完全指南：路徑輪廓 vs 灰度外觀雙模式深度解析
- Fireworks 打造石頭字效果：紋理填充 + 濾鏡組合模擬岩石質感
- Fireworks 完整快捷鍵大全 (工具、選單、視圖、圖層、文字、動畫等)
- Fireworks 製作簡潔清晰新聞資訊框
- Fireworks 動畫制作技巧心得：3D Primitives 擴充套件、洋蔥…
copyright © 萬盛學電腦網 all rights reserved