ytc/FocusBuddy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f8c4a189207333e020bbf49d0bcb6075f505e335
FocusBuddy/FIGMA_ICON_TUTORIAL_CN.md
ytc1012 005ad8ddf2 icon，权限
2025-11-24 18:36:55 +08:00

9.7 KiB
Raw Blame History

FocusBuddy 图标设计教程 - Figma 完整指南

设计目标: 制作"温柔专注伙伴"图标 (Design 1: Gentle Focus Buddy) 工具: Figma (免费版即可) 时间: 约 30-45 分钟 难度: ⭐⭐☆☆☆ (适合初学者)

📋 准备工作

1. 注册 Figma 账号

  1. 访问 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

  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 + 滚轮

推荐资源

🎉 完成!

恭喜您完成了 FocusBuddy 图标的设计!这个图标传达了:

  • ✨ 温柔友好 - 柔和的颜色和圆润的形状
  • 😊 情感支持 - 友好的笑脸象征陪伴
  • 🎯 专注 - 同心圆代表专注的中心
  • 🌿 无压力 - 莫兰迪色系带来平静感

如果有任何问题,欢迎随时提问!

文档版本: 1.0 最后更新: 2025年11月24日 作者: FocusBuddy 开发团队

Reference in New Issue View Git Blame Copy Permalink