企业官网建设流程全解析

做图标做到第三个小时，我突然发现自己一直在用椭圆选框工具画圆：先画一个正圆选区，再填充颜色，改尺寸时按 Ctrl+T 拉大，边缘立刻糊成一圈毛边。那会儿我刚跟着一套系统课啃 Photoshop 基础，形状工具在工具栏里就摆在选框工具下面，我愣是把它当成了“画画的笔”，从没认真点开过属性面板。后来被返工逼着回头补课，才弄明白 Photoshop 的形状工具根本不是“画图工具”，它是一套矢量图形系统——和选区、画笔、图层样式是两套完全不同的逻辑。这篇就把我这一年多用形状工具做图标、做 UI 组件、做扁平插画踩过的路整理一遍，从三种模式的区别、属性面板里那些没标名字的开关，到布尔运算的层级陷阱和描边模糊的成因。适合刚学完基础操作、能画但画不利索的人，也适合用了几年但一直靠选区硬凑的老手对照看看。

1. 别再用椭圆选区画圆了：形状工具的三种模式先搞清楚

形状工具组在工具栏上按 U 调出，连按 Shift+U 可以在矩形、圆角矩形、椭圆、多边形、直线、自定形状之间循环切换。这六个工具长得不一样，但底下跑的是同一套东西：你画的是一条路径，Photoshop 在路径外面套了一层填充和描边。很多人卡在第一步，是因为画布顶部选项栏最左边那三个小图标——形状、路径、像素——从来没点过。它们决定了同样拖出一个矩形，你到底得到了什么。

1.1 形状、路径、像素，同一个工具三种“人格”

选“形状”模式，拖出来的东西在图层列表里长这样：缩略图右下角有个小方块图标，图层名后面跟着“形状 1”。这种图层里的内容是可编辑的矢量，双击缩略图能改填充色，用白箭头能拖锚点，按 Ctrl+T 放大十倍也不会有锯齿，因为它存的是数学描述而不是像素点。选“路径”模式，画布上只出现一条线，不填充不描边，图层列表里什么都不多，它会挂在当前图层的路径里，等你后续拿来转选区、做矢量蒙版、或者当钢笔的辅助线。选“像素”模式，Photoshop 会直接把图形用当前前景色糊在图层上，画完就定型，改形状只能靠历史记录或者重新画。

新手最常见的错误是默认停在“像素”模式上画了一堆图标，做到后期要统一改圆角、改颜色，发现全得重画。我自己的习惯是：只要这个图形有 1% 的可能性需要修改，就用形状模式。只有在做一些纹理、笔刷底纹、需要大量像素级涂抹的时候，我才会切到像素模式，而且会先新建一个空图层再画。

这三种模式不是互斥的。形状画完之后，右键图层可以“栅格化”变成像素，也可以复制一份再栅格化保留原件；路径模式下画的东西，画完在属性面板右侧点一下“形状”按钮，它立刻变成形状图层。路径和选区之间还能互相转换，这个后面第 6 章细说。

1.2 什么时候必须用形状图层，什么时候反而该用像素

判断标准就一条：这个元素会不会被缩放、被复用、被批量改色。做 UI 界面、做 App 图标、做网页按钮、做扁平插画的几何构成，一律形状图层。因为这些场景里客户改主色的概率接近百分之百，形状图层双击填充色就能全局换色，一秒钟的事；如果当初画成了像素，你得用魔棒选一遍再填充，边缘还会留下半透明的脏边。

反过来，做照片合成、做手绘质感、做纹理叠加的时候，形状模式反而不方便，因为它太“干净”了——你想要的噪点、笔触、不规则边缘，它都给不了。这时候老老实实用画笔和像素图层，别为了“可编辑”的执念把简单事变复杂。

还有个容易被忽略的中间态：形状图层可以整体转成智能对象。转完之后它能跟着自由变换做透视、做变形，同时内部的矢量信息不丢，双击进去还能改。做需要斜切或者做非等比拉伸的图形时，我经常走这条路。

2. 属性面板里的隐藏开关：填充、描边与圆角

形状工具真正的工作区不在画布上，在顶部选项栏右侧那个属性面板里（新版把它挪到了右侧面板组）。大部分人只用到最左边的 W 和 H 两个数字，然后就开始用 Ctrl+T 手拖。其实面板往下拉，填充、描边、描边选项、路径选项这几块，才是决定你画出来的东西“像不像专业做的”的关键。

2.1 填充和描边为什么是两条独立的线

形状图层的填充和描边在属性面板里是两个独立模块，各有自己的颜色块和开关。这个设计背后是矢量绘图的基本模型：一个图形 = 内部区域 + 边界线。你在 Illustrator 里画东西也是这个逻辑。

填充可以是纯色、渐变、图案，也可以直接关掉（点颜色块旁边那个小方块图标切换）。描边同理，但描边多了几个只有描边才有的参数。理解了“两条线独立”这件事，很多效果就自然出来了：想要空心图标，填充关掉只留描边；想要描边图标变实心，填充打开、描边关掉；想要那种双色图标，描边深色、填充浅色。

一个实操细节：描边的颜色块和填充的颜色块挨得很近，点错是常事。我的做法是先把填充定好，再去调描边，因为填充面积大、视觉主导，先定主色不容易反复。

2.2 描边对齐、端点、角点：决定图标边缘干不干净

描边模块里有一排小图标，从左到右是宽度输入框、对齐方式、端点、角点、虚线开关。这三组参数不写清楚，做出来的图标永远差一口气。

对齐方式有三个：内部、居中、外部。它决定描边的宽度是往里吃、往两边平分、还是往外扩。举例：一个 100×100 的矩形，描边 4px。选内部，实际占地还是 100×100，描边吃掉内部 4px；选外部，占地变成 108×108；选居中，占地 104×104，内外各 2px。

做图标的时候我一律选“内部”。因为图标要装进固定的容器里，选外部会让实际尺寸超出你设的 W/H，排布的时候一堆元素会错位两三像素，肉眼看不出来但整体就是歪的。

端点只对开放路径生效，比如直线、不闭合的多边形。平头、圆头、方头三种。给按钮画一条分割线、给插画画一根细杆，圆头比方头柔和很多，方头的“方”指的是超出端点半个线宽，做等宽线段的拼接时用它能让两段线严丝合缝。

角点决定折角的样子：尖角、圆角、斜角。默认尖角。如果描边很粗，尖角会往外戳出一根很长的尖刺（专业叫法是斜接限制），这时候切成圆角或者斜角就正常了。做几何插画的时候，圆角角点几乎是我的默认选项，因为尖角在粗描边下太扎眼。

2.3 虚线描边与偏移量

描边模块最右边那个虚线按钮点开，会出来一排预设，从密到疏。真正要控制节奏，得点“更多选项”，里面有虚线、间隙、偏移三个值。虚线是每一段的长度，间隙是段与段之间的空白，偏移是起点从哪里开始。

这套参数最实用的地方是做环形进度条和边框虚线。做进度条时，把形状的填充关掉、描边加粗、虚线设成 “长度 = 弧长 × 进度、间隙 = 一个超大数”，就能用一条路径模拟出百分比进度。做卡片边框虚线时，间隙设成虚线的 1.5 到 2 倍视觉最舒服，设成 1 倍会显得很急。

2.4 圆角半径的独立控制

圆角矩形的属性面板里有圆角半径输入框，默认四个角联动。输入框右边有个链接图标，点一下取消链接，就会展开成四个独立输入框，分别对应左上、右上、右下、左下。做那种“只有一侧是圆角”的卡片、只有底部圆角的标签页，全靠这个。

另一个办法是画完之后，用白箭头（直接选择工具）在画布上直接拖圆角控制点，能实时看到半径变化。这个方法更直观，但对精度要求高的 UI 稿反而不好用，因为你看不到具体数值。

提醒一句：圆角半径超过形状短边一半的时候，Photoshop 会自动把半径截断到一半，这时候你再往上加数字也没用，圆角不会再变大。

3. 布尔运算：在一个形状图层里“雕刻”复杂图形

一个图标里往往有挖空、有叠加、有相交。新手的第一反应是画多个形状图层然后调透明度或者用橡皮擦，老手的做法是用布尔运算，在同一个形状图层内部完成所有加减。这样做的最大好处是：整个图标还是矢量，还能整体缩放，还能一次性改色。

3.1 五种运算模式的真实含义

画完第一个形状后，选项栏里会出现四个运算按钮，加上默认状态一共五种：

关键在于理解“顶层”这两个字。减去顶层指的是后画的图形去减先画的图形，所以顺序反了，结果会完全不一样。我见过太多人抱怨“减不掉”，其实是先画了要减掉的那个小圆，再画大圆，方向反了。

3.2 路径层级顺序决定结果，画反了要重来

在同一个形状图层里，每条子路径是有上下层级的，这个层级记录在图层面板缩略图里看不见，但用路径选择工具（黑箭头）点选时能在属性面板看到路径的排列。合并形状的时候，Photoshop 是从下往上叠加的，减法是上层减下层。

画反了也不是没救。用黑箭头选中那条子路径，按 Ctrl+[ 或者 Ctrl+] 可以上下调整层级，调完运算结果立刻刷新。这招我在拼复杂图标的时候用得特别多，因为构图时很难一开始就规划好谁先谁后，多半是画完发现不对，再调层级补救。

还有一个动作叫“合并形状组件”，藏在属性面板右上角的齿轮菜单里。它把多条子路径压成一条，好处是后续用白箭头编辑时不会误选到别的子路径，坏处是压完之后就拆不回来了，所以合并之前我会先复制一份图层备着。

3.3 黑箭头和白箭头，一个选整体一个动锚点

这两个工具都在 A 键上，按 Shift+A 切换，长得几乎一样，功能差很远。

路径选择工具（黑箭头）：点一下选中一整个子路径，可以整体拖动、可以配合 Ctrl+Alt 拖动复制、可以调层级、可以按 Alt+方向键做微调。

直接选择工具（白箭头）：点中某一条子路径的某个锚点，拖动它改变形状。框选可以一次选中多个锚点。选中锚点之后属性面板会出现“转换点工具”的快捷选项，能把尖角锚点转成平滑锚点。

做圆角矩形改圆角、做多边形拖角、把一个矩形捏成梯形，全靠白箭头。我刚开始学的时候只会用黑箭头拖整体，画出来的东西全是标准几何形，一个都改不动，就是因为没意识到白箭头能进到路径里面去。

4. 从形状到矢量蒙版：把形状变成“取景框”

形状图层本身已经带了一个矢量蒙版——它的填充区域就是蒙版区域。但这个能力可以单独拿出来用：给任意一个普通图层（照片、文字、智能对象）加一个矢量蒙版，用形状或者钢笔在里面画，露出来的部分就是形状覆盖的区域。做圆形头像、做异形图片裁切、做带缺口的图片卡片，都用这一招。

4.1 矢量蒙版和图层蒙版的取舍

我的判断很粗暴：边缘要“干净”用矢量，边缘要“柔和”用图层。做一个圆形头像，用矢量蒙版；做一张照片融进背景，用图层蒙版。两者的缺点是互补的，所以经常两个一起用：先加矢量蒙版切出大形，再加图层蒙版处理里面的细节过渡。

添加矢量蒙版的方法：选中图层，按住 Ctrl 点图层面板底部的“添加图层蒙版”按钮（就是那个方块里有个圆的图标），或者菜单里“图层 > 矢量蒙版 > 显示全部”，然后用形状或钢笔在上面画。

4.2 形状图层当剪贴蒙版用

剪贴蒙版是另一套思路：让上层的内容只显示在下层形状的范围内。做法是把上层图层放到形状图层正上方，按住 Alt 点两个图层之间那条线，上层会缩进一格。做文字嵌进图形、纹理只铺在按钮上、给图标加渐变，用这个特别顺手。

和矢量蒙版比，剪贴蒙版的优势是下面那个形状还能改。改形状、改圆角、改尺寸，上面的内容自动跟着变。做需要反复调整版式的设计稿时，剪贴比蒙版灵活。缺点是层级关系多了容易乱，图层缩略图缩进一格之后不太容易一眼看清从属关系，我的习惯是给这类图层组起名字，比如“按钮-底”“按钮-渐变”。

4.3 一套可复用的 UI 组件拆解流程

拿一个带图标的按钮举例，说说我实际的搭建顺序：

1. 先用圆角矩形画底板，宽高按栅格定（比如 120×40，圆角 8），填充主色。
2. 复制这个形状图层两份，一份留着当备份，一份用来做悬停态（改颜色），一份用来做描边态。
3. 图标部分用布尔运算在一个形状图层里拼出来，比如一个“下载”图标就是矩形 + 箭头 + 底线，用合并形状处理。
4. 把图标形状拖到按钮组里，对齐用属性面板的 X/Y 数值算，不用鼠标拖。
5. 需要防止图标被拉伸的时候，把图标转成智能对象。

整个过程里没有一次用到栅格化，也没有用选区。后面要整体换成另一套配色，双击填充色块就能改完，不会出现边缘发虚的问题。

5. 我返工最多的三个坑：模糊、变形、运算失效

5.1 半像素模糊的成因与对齐边缘

刚做完的图标放到画布上看着有点“毛”，放大到 100% 看边缘是灰的、不干净，八成是半像素问题。原因很简单：形状的边缘落在了两个像素之间，Photoshop 只能把一半的像素涂满，视觉上就是一圈半透明灰边。

三个来源：一是手动拖出来的形状 W/H 和 X/Y 带小数（比如 120.5）；二是旋转、缩放之后位置偏移；三是复制的形状没对齐像素网格。

处理办法：属性面板里形状的 W/H/X/Y 全部改成整数；选项栏里有个“对齐边缘”的按钮（图标是一个像素网格），点开之后路径会吸附到像素网格上。另外在视图菜单里把“像素预览”打开，画的时候就能看到边缘干不干净。我现在的固定动作是：画完一组图形，先把所有 X/Y 手动归整成整数，再看一眼，模糊基本就没了。

还有一个隐蔽的坑：如果你的画布本身缩放比例不是 100%（比如 66.7%），看起来的模糊可能只是显示伪影。判断方法是切到 100% 看边缘，别在 66.7% 下判断质量。

5.2 Ctrl+T 缩放时描边和圆角会跟着变

这个坑我踩过不止一次：做好的图标按 Ctrl+T 放大到 1.5 倍，结果描边从 2px 变成了 3px，圆角半径也从 8 变成了 12，跟旁边没缩放的图标对不齐。

原因在于 Photoshop 首选项里有个“缩放描边和效果”的开关（首选项 > 常规）。勾选状态下，缩放形状图层时描边宽度和圆角半径按比例缩放；不勾选则保持不变。默认状态不同版本可能不一样，所以你得自己去看一眼。

怎么选？如果整个图标是从一套别的尺寸等比搬过来的，按比例缩放是对的，保留勾选；如果是想让描边始终保持视觉统一（比如所有图标都是 2px 描边），就得关掉这个开关。我自己的设置是关掉的，因为我做图标组的时候更看重描边一致性。

5.3 布尔运算“失效”其实是路径方向或层级问题

点了“减去顶层”，画布上什么都没变。这种情况我遇到过三种原因：

第一种，顺序反了。前面讲过，减法永远是上层减下层，如果先画了小圆再画大圆，结果是大圆减小圆，你看不出变化。解决方法是调层级，或者干脆重新按顺序画。

第二种，两条路径的绕向相反。布尔运算依赖路径的绕向判断“内部”和“外部”，从自定形状库里拖出来的图形、从 Illustrator 粘过来的路径，绕向可能和 Photoshop 自己画的不一致，运算结果就会很怪。解决方法是选中路径，在属性面板的路径选项里点“反转路径方向”试试。

第三种，你其实选错了对象。布尔运算只对同一个形状图层内的子路径生效，如果你在画布上选中的是两个独立的形状图层，点运算按钮是不会发生任何合并的。确认方法：看一眼图层面板，只有一行才是同层，两行就是两个图层。

6. 自定形状与形状的复用链路

6.1 定义自定形状与载入形状库

画好一个复杂图形之后，选中那个形状图层，菜单里“编辑 > 定义自定形状”，起个名字，它就会出现在自定形状工具的形状下拉面板里。下次直接拖出来用，尺寸可以随意定，是矢量。

导出给别人：点形状面板右上角的齿轮，选“存储形状”，会存成一个 .csh 文件。别人那边用“载入形状”就能导入。做团队协作的时候，把常用的箭头、图标底座、徽章轮廓存成一个形状库，比每次都重新画省事得多。

注意“定义自定形状”对图层类型有要求：形状图层可以直接定义，路径也行，但普通像素图层定义不了。如果菜单是灰的，先检查你选的到底是不是形状图层。

加载外部形状库的时候有个习惯要养成：别往默认的形状面板里堆。新建一个面板组，专门存自己项目用的形状，不然过两个月面板里几十个形状你自己都分不清哪个是哪个。

6.2 形状、路径、选区三者的来回转换

这三个东西在 Photoshop 里是同一种东西的三种表现形式，互相转换是日常操作：

形状 → 选区：按住 Ctrl 点形状图层缩略图，或者右键“建立选区”。做局部改色、做选区限制涂抹时用。

选区 → 路径：画好选区后，右键“建立工作路径”，会弹一个容差（0.5 到 10 像素）。容差越小路径越贴合但锚点越多，做图标这种规则图形用 0.5 到 2 就够。转换出来的路径再点属性面板的“形状”按钮，就变成了形状图层。

路径 → 形状：用钢笔或形状工具在路径模式下画完，选项栏里点“形状”，或者菜单“图层 > 新建填充图层 > 纯色”然后挂上路径。

这条链路我实际用得最多的是选区转路径再转形状：从别处拿到一个位图 logo，先魔棒或者色彩范围选出来，转成工作路径，简化锚点，再定义成自定形状。整个过程走完，一个位图元素就变成了可无限缩放的矢量件。当然，复杂的位图转出来锚点会非常多，需要手动用白箭头删减，这个只能靠耐心，没有一键完美的办法。

用久了会发现，形状工具真正的门槛不在“怎么画”，而在“画完之后还能不能改”。所有让人返工的麻烦——描边糊了、缩放变形了、颜色改不了——追根到底都是因为在某个环节把矢量信息丢掉了。所以我现在画任何东西之前，先问自己一句：这个东西以后还要不要动？要动就老老实实用形状，别图快。