374 lines
9.7 KiB
Markdown
374 lines
9.7 KiB
Markdown
# FocusBuddy 图标设计教程 - Figma 完整指南
|
||
|
||
> **设计目标**: 制作"温柔专注伙伴"图标 (Design 1: Gentle Focus Buddy)
|
||
> **工具**: Figma (免费版即可)
|
||
> **时间**: 约 30-45 分钟
|
||
> **难度**: ⭐⭐☆☆☆ (适合初学者)
|
||
|
||
---
|
||
|
||
## 📋 准备工作
|
||
|
||
### 1. 注册 Figma 账号
|
||
1. 访问 [figma.com](https://www.figma.com)
|
||
2. 点击右上角 **"Sign up"** 注册免费账号
|
||
3. 可以使用 Google 账号快速登录
|
||
|
||
### 2. 创建新文件
|
||
1. 登录后点击左上角 **"+ New design file"**
|
||
2. 等待加载完成,进入空白画布
|
||
|
||
---
|
||
|
||
## 🎨 第一步: 创建画布和背景
|
||
|
||
### 1.1 创建 1024×1024 画布
|
||
|
||
1. **创建 Frame (画布框架)**
|
||
- 按键盘 `F` 键 (或点击顶部工具栏的方框图标)
|
||
- 在右侧面板找到 **"Frame"** 区域
|
||
- 在 **"W"** (宽度) 输入 `1024`
|
||
- 在 **"H"** (高度) 输入 `1024`
|
||
- 在画布上点击创建
|
||
|
||
2. **重命名 Frame**
|
||
- 双击左侧图层面板的 "Frame 1"
|
||
- 重命名为 `FocusBuddy Icon`
|
||
|
||
### 1.2 添加圆角矩形背景
|
||
|
||
1. **创建背景矩形**
|
||
- 按键盘 `R` 键选择矩形工具
|
||
- 在 Frame 内点击并拖动,创建一个完全覆盖 Frame 的矩形
|
||
- 在右侧面板确保尺寸是:
|
||
- **W**: `1024`
|
||
- **H**: `1024`
|
||
- **X**: `0`
|
||
- **Y**: `0`
|
||
|
||
2. **添加圆角**
|
||
- 选中矩形
|
||
- 在右侧找到 **"Corner radius"** (圆角半径)
|
||
- 输入 `180`
|
||
|
||
3. **添加渐变色**
|
||
- 选中矩形
|
||
- 在右侧 **"Fill"** 区域,点击颜色方块
|
||
- 点击 **"Solid"** 下拉菜单,选择 **"Linear"** (线性渐变)
|
||
- 调整渐变:
|
||
- **顶部颜色** (第一个色标): `#A7C4BC`
|
||
- **底部颜色** (第二个色标): `#88C9A1`
|
||
- 确保渐变方向是从上到下 (拖动渐变线可调整)
|
||
|
||
4. **重命名图层**
|
||
- 在左侧图层面板,双击矩形图层
|
||
- 重命名为 `Background`
|
||
|
||
---
|
||
|
||
## 🔵 第二步: 创建外圆环
|
||
|
||
### 2.1 绘制外圆环
|
||
|
||
1. **创建圆形**
|
||
- 按键盘 `O` 键 (或点击工具栏椭圆工具)
|
||
- 按住 `Shift` 键,在画布中心拖动创建正圆
|
||
- 在右侧面板设置:
|
||
- **W**: `800` (半径 400 × 2)
|
||
- **H**: `800`
|
||
- 按 `Option/Alt + H` 水平居中
|
||
- 按 `Option/Alt + V` 垂直居中
|
||
|
||
2. **设置为描边样式**
|
||
- 选中圆形
|
||
- 点击右侧 **"Fill"** 右边的 `-` 号删除填充
|
||
- 点击 **"Stroke"** 旁边的 `+` 号添加描边
|
||
- 点击描边颜色,输入 `#F8F6F2`
|
||
- 设置描边粗细:
|
||
- 在 **"Stroke"** 下方输入 `60`
|
||
- 设置透明度:
|
||
- 在右侧顶部找到 **"Layer"** 区域
|
||
- **"Opacity"** (不透明度) 调整为 `90%`
|
||
|
||
3. **重命名图层**
|
||
- 重命名为 `Outer Ring`
|
||
|
||
---
|
||
|
||
## ⚪ 第三步: 创建内圆
|
||
|
||
### 3.1 绘制内圆
|
||
|
||
1. **创建圆形**
|
||
- 按键盘 `O` 键
|
||
- 按住 `Shift` 创建正圆
|
||
- 设置尺寸:
|
||
- **W**: `560` (半径 280 × 2)
|
||
- **H**: `560`
|
||
- 居中对齐: `Option/Alt + H` 和 `Option/Alt + V`
|
||
|
||
2. **设置填充色**
|
||
- 选中圆形
|
||
- **"Fill"**: `#F8F6F2`
|
||
- **"Opacity"**: `95%`
|
||
|
||
3. **重命名图层**
|
||
- 重命名为 `Inner Circle`
|
||
|
||
---
|
||
|
||
## 😊 第四步: 绘制友好的笑脸
|
||
|
||
### 4.1 绘制左眼
|
||
|
||
1. **创建圆形**
|
||
- 按 `O` 键创建圆形
|
||
- 设置尺寸:
|
||
- **W**: `48` (半径 24 × 2)
|
||
- **H**: `48`
|
||
- 设置位置 (相对于整个 Frame):
|
||
- **X**: `428` (中心点 452 - 半径 24)
|
||
- **Y**: `456` (中心点 480 - 半径 24)
|
||
|
||
2. **设置颜色**
|
||
- **"Fill"**: `#5B6D6D`
|
||
- **"Opacity"**: `70%`
|
||
|
||
3. **重命名**: `Left Eye`
|
||
|
||
### 4.2 绘制右眼
|
||
|
||
1. **复制左眼**
|
||
- 选中左眼
|
||
- 按 `Cmd/Ctrl + D` 复制
|
||
- 设置新位置:
|
||
- **X**: `548` (中心点 572 - 半径 24)
|
||
- **Y**: 保持 `456`
|
||
|
||
2. **重命名**: `Right Eye`
|
||
|
||
### 4.3 绘制微笑曲线
|
||
|
||
1. **使用钢笔工具**
|
||
- 按键盘 `P` 键 (钢笔工具)
|
||
- 在画布上点击三个点创建曲线:
|
||
- **起点**: X: `432`, Y: `560`
|
||
- **中间控制点**: X: `512`, Y: `600`
|
||
- **终点**: X: `592`, Y: `560`
|
||
|
||
2. **调整为平滑曲线**
|
||
- 选中钢笔工具创建的路径
|
||
- 按键盘 `Enter` 键进入编辑模式
|
||
- 选中中间的点,在顶部工具栏点击 **"Bend tool"** (弯曲工具)
|
||
- 向下拖动中间点,创建向下的弧形
|
||
|
||
**提示**: 如果钢笔工具太复杂,可以使用简化方法:
|
||
- 创建椭圆 (W: `160`, H: `80`)
|
||
- 位置: X: `432`, Y: `560`
|
||
- 选中椭圆,按 `Enter` 进入编辑模式
|
||
- 选中顶部两个点并删除 (保留底部半圆)
|
||
- 旋转 180° 形成微笑
|
||
|
||
3. **设置描边样式**
|
||
- 删除填充 (点击 Fill 的 `-`)
|
||
- 添加描边 (点击 Stroke 的 `+`)
|
||
- **"Stroke"** 颜色: `#5B6D6D`
|
||
- **"Stroke"** 粗细: `16`
|
||
- **"Opacity"**: `70%`
|
||
- 在描边选项中,选择 **"Round cap"** (圆形端点)
|
||
|
||
4. **重命名**: `Smile`
|
||
|
||
---
|
||
|
||
## 🎯 第五步: 添加中心点 (可选装饰)
|
||
|
||
### 5.1 绘制中心圆点
|
||
|
||
1. **创建小圆**
|
||
- 按 `O` 键
|
||
- 创建圆形:
|
||
- **W**: `80` (半径 40 × 2)
|
||
- **H**: `80`
|
||
- 居中对齐
|
||
|
||
2. **设置颜色**
|
||
- **"Fill"**: `#A7C4BC`
|
||
- **"Opacity"**: `30%`
|
||
|
||
3. **重命名**: `Center Dot`
|
||
|
||
---
|
||
|
||
## 📐 第六步: 整理图层结构
|
||
|
||
### 6.1 调整图层顺序
|
||
|
||
在左侧图层面板,从上到下的顺序应该是:
|
||
```
|
||
FocusBuddy Icon (Frame)
|
||
├── Center Dot
|
||
├── Smile
|
||
├── Right Eye
|
||
├── Left Eye
|
||
├── Inner Circle
|
||
├── Outer Ring
|
||
└── Background
|
||
```
|
||
|
||
如果顺序不对,拖动图层调整位置。
|
||
|
||
### 6.2 创建图层分组 (可选)
|
||
|
||
1. **选中所有脸部元素**
|
||
- 按住 `Shift` 点击: Left Eye, Right Eye, Smile
|
||
- 右键点击,选择 **"Group selection"**
|
||
- 重命名为 `Face`
|
||
|
||
---
|
||
|
||
## 💾 第七步: 导出图标
|
||
|
||
### 7.1 导出 1024×1024 PNG
|
||
|
||
1. **选中整个 Frame**
|
||
- 点击左侧图层面板的 `FocusBuddy Icon`
|
||
|
||
2. **设置导出选项**
|
||
- 在右侧底部找到 **"Export"** 区域
|
||
- 点击 `+` 号添加导出设置
|
||
- 格式选择 **"PNG"**
|
||
- 倍数选择 **"1x"**
|
||
- 点击 **"Export FocusBuddy Icon"** 按钮
|
||
- 选择保存位置,保存为 `focusbuddy-icon-1024.png`
|
||
|
||
### 7.2 生成所有尺寸
|
||
|
||
1. **访问 AppIcon.co**
|
||
- 打开浏览器访问 [https://www.appicon.co](https://www.appicon.co)
|
||
|
||
2. **上传图标**
|
||
- 点击 **"Choose File"** 或拖动刚才导出的 PNG 文件
|
||
- 等待处理完成
|
||
|
||
3. **下载图标包**
|
||
- 点击 **"Download"** 按钮
|
||
- 会下载包含 iOS 和 Android 所有尺寸的图标包
|
||
|
||
---
|
||
|
||
## 🎨 调整和优化技巧
|
||
|
||
### 微调笑脸表情
|
||
|
||
如果觉得笑容太大或太小:
|
||
- 选中 `Smile` 图层
|
||
- 调整起点和终点的 Y 坐标 (往上=笑容变小,往下=笑容变大)
|
||
- 或调整中间控制点的 Y 坐标 (往上=笑容变小,往下=笑容变大)
|
||
|
||
### 调整眼睛位置
|
||
|
||
如果觉得眼睛间距太宽或太窄:
|
||
- 选中两只眼睛
|
||
- 使用键盘方向键微调位置
|
||
- 或直接修改 X 坐标值
|
||
|
||
### 改变颜色主题
|
||
|
||
如果想尝试其他配色:
|
||
1. 选中 `Background`
|
||
2. 修改渐变颜色
|
||
3. 保持柔和的莫兰迪色系风格
|
||
|
||
---
|
||
|
||
## ✅ 检查清单
|
||
|
||
完成后,检查以下项目:
|
||
|
||
- [ ] Frame 尺寸是 1024×1024
|
||
- [ ] 背景圆角半径是 180
|
||
- [ ] 背景渐变从 #A7C4BC 到 #88C9A1
|
||
- [ ] 外圆环描边粗细 60,颜色 #F8F6F2,透明度 90%
|
||
- [ ] 内圆填充 #F8F6F2,透明度 95%
|
||
- [ ] 两只眼睛大小相同,对称分布
|
||
- [ ] 微笑曲线居中,端点圆润
|
||
- [ ] 导出的 PNG 文件清晰无锯齿
|
||
|
||
---
|
||
|
||
## 🚀 下一步
|
||
|
||
1. **应用到 Flutter 项目**
|
||
- 解压 AppIcon.co 下载的文件
|
||
- iOS: 将 `AppIcon.appiconset` 文件夹放到 `ios/Runner/Assets.xcassets/`
|
||
- Android: 将对应尺寸的图标放到 `android/app/src/main/res/` 各个 `mipmap-*` 文件夹
|
||
|
||
2. **测试效果**
|
||
- 在真机或模拟器上运行应用
|
||
- 检查桌面图标显示效果
|
||
|
||
---
|
||
|
||
## 🆘 常见问题
|
||
|
||
### Q: 钢笔工具太难用怎么办?
|
||
**A**: 使用椭圆工具替代:
|
||
1. 创建椭圆 W: 160, H: 80
|
||
2. 按 Enter 进入编辑模式
|
||
3. 删除顶部两个锚点
|
||
4. 保留底部弧线即可
|
||
|
||
### Q: 图层无法居中?
|
||
**A**: 确保选中了 Frame 内的图层,然后:
|
||
- Mac: `Option + H` (水平居中), `Option + V` (垂直居中)
|
||
- Windows: `Alt + H`, `Alt + V`
|
||
- 或使用右侧 **"Alignment"** 对齐工具
|
||
|
||
### Q: 导出的图标边缘有白边?
|
||
**A**: 确保 Background 图层完全覆盖了 Frame,且没有透明间隙。
|
||
|
||
### Q: 颜色看起来不够柔和?
|
||
**A**: 检查所有元素的不透明度 (Opacity) 设置,适当降低可以让设计更柔和。
|
||
|
||
---
|
||
|
||
## 📚 扩展学习
|
||
|
||
### Figma 快捷键
|
||
|
||
| 功能 | Mac | Windows |
|
||
|------|-----|---------|
|
||
| 矩形 | R | R |
|
||
| 圆形 | O | O |
|
||
| 钢笔 | P | P |
|
||
| Frame | F | F |
|
||
| 复制 | Cmd + D | Ctrl + D |
|
||
| 水平居中 | Option + H | Alt + H |
|
||
| 垂直居中 | Option + V | Alt + V |
|
||
| 缩放视图 | Cmd + 滚轮 | Ctrl + 滚轮 |
|
||
|
||
### 推荐资源
|
||
|
||
- [Figma 官方教程](https://help.figma.com/hc/en-us/categories/360002051613-Get-started) (中文)
|
||
- [Figma 中文社区](https://www.figma.cool/)
|
||
- [YouTube: Figma 入门教程](https://www.youtube.com/results?search_query=figma+tutorial+chinese)
|
||
|
||
---
|
||
|
||
## 🎉 完成!
|
||
|
||
恭喜您完成了 FocusBuddy 图标的设计!这个图标传达了:
|
||
- ✨ **温柔友好** - 柔和的颜色和圆润的形状
|
||
- 😊 **情感支持** - 友好的笑脸象征陪伴
|
||
- 🎯 **专注** - 同心圆代表专注的中心
|
||
- 🌿 **无压力** - 莫兰迪色系带来平静感
|
||
|
||
如果有任何问题,欢迎随时提问!
|
||
|
||
---
|
||
|
||
**文档版本**: 1.0
|
||
**最后更新**: 2025年11月24日
|
||
**作者**: FocusBuddy 开发团队
|