UI图标：利用形状工具绘制扁平化长阴影图标，掌握现代UI设计流行趋势

甜姐姐出品适合初学者PS形状工具长阴影Flat

大家好，我是甜姐姐。今天我们来做一个「扁平化长阴影」风格的UI图标。这个风格你肯定见过：图标干干净净，阴影像被太阳斜着照到一样，拉出一条长长的影子，整体看起来就很高级。

高级感的本质是什么？

不是把效果加满，也不是滤镜堆到飞起。高级感更像化妆：底子干净、结构清楚、色彩克制。长阴影的核心就两点：几何要准 + 明暗要克制。

一、开工前：新建画布 + 网格对齐（让你少走弯路）

1. 新建文件：Ctrl+N（Mac是Cmd+N）
   建议：512×512px 或 1024×1024px，分辨率72即可（做UI不需要300）。
2. 打开对齐辅助：
   视图 > 显示 > 网格，再去 视图 > 对齐到 > 网格。
   这一步就像给你装了“自动停靠”，画形状会贼稳。
3. 设置网格密度：编辑 > 首选项 > 参考线、网格和切片
   建议：网格线间隔10px，细分1。

二、用形状工具画「底板」：扁平化的干净底子

扁平化图标一般都有个底板（圆角方、圆形都行），就像给主体垫了个舞台。

1. 选圆角矩形工具（快捷键：U，不对就按Shift+U切换）。
2. 顶部选项栏把模式设为形状（不是像素！）。
3. 画一个圆角方：比如360×360px，圆角建议48px左右。
   颜色给一个舒服的纯色，比如：#3D7CFF（你也可以换成品牌色）。
4. 对齐到画布居中：
   Ctrl+A 全选画布 → 移动工具V → 顶部点水平居中、垂直居中 → 再 Ctrl+D 取消选区。

甜姐姐小提醒：形状图层是“矢量”的，后面怎么放大都不糊；如果你用像素画，放大就跟没睡醒似的糊一片。

三、画主体图形：用形状叠加做一个简单图标

参考素材你可以随便选：比如信封、对话气泡、铃铛、书签……今天甜姐姐示范一个“纸飞机/发送”的简化图形，结构好理解。

1. 用钢笔工具P，模式选形状，填充用白色#FFFFFF。
2. 在底板上画一个几何纸飞机：尽量用直线点，少用曲线（扁平风更干脆）。
3. 需要调整点：用直接选择工具A，拖锚点就像拽橡皮泥一样微调形状。
4. 如果主体由多个形状组成（比如机翼+尾翼），建议用：
   路径操作里的合并形状，最后变成一个整体，方便做阴影。

常见误区：主体线条太细、细节太碎。做图标不是画插画哈，细节一多，小尺寸直接糊成一坨“蚊子腿”。建议尽量用大块面表达。

四、重点来了：做「长阴影」——看起来很厉害，其实挺简单

长阴影的逻辑很生活：太阳从左上照过来，影子就往右下跑，而且越远越淡。我们用“复制+斜移+合并+裁切”来做，稳、快、好控。

目标效果：主体右下方向一条整齐的长阴影，边缘干净，透明度克制。

1. 复制主体形状
   
   ：选中主体图层（纸飞机）→ Ctrl+J 复制一层。
2. 把复制层变成阴影色
   
   ：把填充改成黑色或深蓝黑（比如#000000）。
3. 开始“拉影子”
   
   （两种方法选一种）：
   A. 手动稳妥法：选移动工具V，按住Shift（保持45°方向）+ 方向键右和下各点几下，移动一点点。
   然后：Alt+拖拽复制（或Ctrl+J再移动）重复多次，直到影子够长。
   B. 快速批量法：复制一次后按Ctrl+Alt+Shift+T（重复变换复制），影子就像排队一样嗖嗖出来。
4. 把这一串阴影合并
   
   ：选中所有阴影层 → Ctrl+E 合并（或先编组再合并）。
5. 做“裁切”让阴影只在底板里
   
   ：把阴影层放在底板上方，Alt+点击两层之间，建立剪贴蒙版（阴影只显示在底板范围内）。
6. 调透明度
   
   ：阴影层不透明度建议15%~35%。想更高级就宁可淡一点。
7. 做渐隐
   
   （关键的高级感）：给阴影层添加蒙版（图层面板底部小矩形圆点）。
   选渐变工具G，选择黑到透明，从影子末端往主体方向拉一下。
   你会发现阴影远处更淡，瞬间“像真的”。

甜姐姐参数建议：长阴影方向常用45°；阴影长度大概是主体的1.5~2.5倍；不透明度别超过40%，不然很“脏”。

五、加一点点“光感”：边缘高光（但要克制！）

扁平化不是完全没层次，我们可以加一丢丢高光，让它更“精致”，但别做成塑料质感。

1. 复制底板一层：选底板 → Ctrl+J。
2. 双击图层打开图层样式 → 勾选描边：
   位置：内部；大小：2px；颜色：白色；不透明度：10%~20%。
3. 如果觉得“太显眼”，就把该层不透明度降到50%~70%。

六、配色小套路：让扁平风更耐看

很多人的图标不高级，问题出在颜色“用力过猛”。甜姐姐给你一个简单好用的思路：

• 底板
  
  用稍微偏亮的纯色（别荧光）。
• 主体
  
  尽量用白色或更深的同色系。
• 阴影
  
  不要纯黑怼上去，可以用深蓝灰（更柔和）。

一组稳妥配色示例：
底板：#3D7CFF；主体：#FFFFFF；阴影：#0B1B3A（不透明度25%）

七、导出：别辛苦画完最后导出糊了

1. 检查边缘：放大到200%看看有没有锯齿、脏边。
2. 导出PNG：文件 > 导出 > 导出为 → PNG（透明背景按需求）。
3. 做多尺寸：建议导出1x/2x/3x（比如64、128、192）。

最后收个尾：高级感的终极大招是「克制」

今天这个长阴影图标，你学会的其实不只是“怎么拉一条影子”，而是：形要准、光要顺、色要稳。效果宁可少一点、淡一点，也不要一股脑全堆上去——堆多了就像妆太浓，反而显得用力。

练习建议：你可以用同一套底板和阴影规则，连续做3个图标（比如：信封/铃铛/爱心），统一圆角、统一阴影角度和透明度，你的UI立刻就“成套了”，贼专业。

我是甜姐姐，我们下次继续把PS玩得又稳又好看。