STAGE 02 · 工具
设计工具学习
系统掌握 Figma、Photoshop 等核心设计工具的高频操作与提效技巧，从临摹到独立产出完整网页，打通设计与交付全流程。
Figma
PART 01
把 Figma 用到熟练
Figma 是当下网页设计的主力工具。先掌握画板、图形、文字、自动布局与组件这五块核心，再做几个完整页面，效率会肉眼可见地提升。
- 画板与栅格设置
- 图形与文字排版
- 自动布局提效
- 组件与变体复用
Photoshop
PART 02
Photoshop 该学多少
网页设计不靠 PS 画界面，但图像处理离不开它。聚焦抠图、调色、合成、批处理四类高频操作即可，不必啃完所有功能。
- 抠图与蒙版技巧
- 调色与氛围处理
- 图像合成与精修
- 批处理与导出
交付
PART 03
切图与交付规范
设计稿画完不是结束，能干净地交付给前端才是。学会规范命名、按倍数切图、标注间距与字号，让协作不再扯皮。
- 图层与命名规范
- 多倍数切图导出
- 间距与字号标注
- 设计走查要点
CHAPTERS
工具学习章节
按章节掌握工具，每节配一个练习动作。
01
Figma 基础与画板栅格
认识 Figma 界面，学会新建画板、设置栅格与参考线，搭建规范的画布工作环境。
02
图形文字与自动布局
掌握图形绘制、文字排版与自动布局，让组件随内容自适应，告别手动对齐。
03
组件库与样式系统
学会建立颜色、字体、组件样式系统，一处修改全局同步，大幅提升复用效率。
04
Photoshop 图像处理
聚焦抠图、调色、合成、批处理四类高频操作，搞定网页所需的图片素材处理。
05
切图标注与交付走查
规范命名、多倍数切图、间距标注与设计走查，让设计稿干净地交到前端手里。