颜色 样式 代码 前言随着近几年 Figma 等一系列在线设计工具的崛起，相信设计师对设计系统的都有了更深的了解。其实设计系统的建设是一个非常庞大而复杂的工程。我们通过各种设计规范等对产研流程提效，但还是会经常遇到一些棘手的问题。1. 开发用的颜色/字体样式/投影等与设计稿存在差距；2. 颜色选择困难。不同设计师之间在用各种层级的文本颜色时，到底用 Gray1 还是用 Gray2，不知道该选哪一种；3. SaaS 类的产品需要根据客户的品牌色调整产品的主色，设计和开发都面临巨大的工作量；4. 设计稿的更新无法及时在开发者的代码中体现，一是因为开发首先需要拿到新的设计稿，再根据标注甚至肉眼判断区别后更新代码；另一方面，设计稿中看似简单的改动可能导致较大范围的代码改动，例如字体大小等；为了解决和优化上述的问题，Design Token 应运而生。它可以高效地解决产品设计和开发过程中的细节和风格一致性的问题，提高产研团队设计质量和协作效率。什么是 Design Token“Token”原本的意思是“令牌，指令”，与 Design 连在⼀起指“设计变量”。在工程逻辑中用于用户身份与服务器端进行验证，而在设计体系中，Design Token 则可以简单理解为封装的视觉样式参数。它通过规定样式参数，并通过一套符合设计师、工程师理解的统一的命名规则，为这些样式参数的定义名称。腾讯出品的 Design Token 应用指南：设计篇在线设计、研发协作工具和组件概念的普世化，让设计、研发效率大大提升；数字产品发展到今天，数字产品对迭代速度、个性化品质要求也越来越强。阅读文章 > 原子设计理论提出者 Brad Frost （布拉德 · 弗罗斯特）在《Atomic Design》中提到：原子设计理论从原子（Atoms）、分子（Molecules）、组织（Organisms）、模板（Templates）、页面（Pages）、标准流程（Patterns）再到更完善的设计体系（Design Systems），这一切都是为了产品设计、研发效率和一致性提供帮助。同时，它们也是传达设计原则、构成产品独特气质的基石。Design Token 就是原子级的最基础的构成要素。根据北美顶级 SaaS 企业的开源设计系统 Saleforce Lightning Design System 的解释，Design Token 是设计系统中的可视化原子，是设计属性的命名实体，使用它们代替具体编码值（如颜色的 16 进制、间距的像素值等），以便于维护一套可扩展且一致性的设计系统。可以说，Token 就是最底层的原子，本质上就是找到了组件、属性和代码之间的对应关系，统一了设计样式和前端语言，使组件和设计系统可以被快速管理。Design Token 的优势基于上述关于 Design Token 的基础解释，可以将 Design Token 的好处可总结为：设计语义-更易理解设计方案-更加一致主题皮肤-一键替换设计变更-高效维护设计成果-精准还原1. 设计语义-更易理解每一个组件的基础元素都可以用 Token 进行语义化的命名，帮助设计师和开发建立统一的描述语言。例如#91d5ff 这个色值按照传统的设计规范命名的方式，它可能叫 Blue-3。在实际应用的时候，设计师和开发并不能直接通过 Blue-3 来理解这个颜色到底是用在什么具体场景当中。而当我们通过 Token 语义的方式让它达到组件级别的精度时，它会叫：color-primary-brand-light-disable，不同的设计师和开发就能迅速的理解这个颜色应用在什么具体场景当中。2. 设计方案-更加一致当使用组件库实际运用到项目当中时，我们有时候会有不同设计师合作产出一个项目的情况。对于一些不熟悉设计规范或新加入的设计师来说，就会困惑，当使用二级文本色的时候，究竟是用 Gray2、还是 Gray3、Gray4。而这个时候，我们定义一个 Token 名称叫：color-text-secondary，这个 Token 嵌套的颜色是 ：Gray3，这样我们设计师在使用的时候，只需要选择 color-text-secondary 这个 Token 变量即可，能选择的颜色就是唯一的，这就能在一定程度上确保不同设计师在同一个场景当中的设计稿保持高度一致性。3. 主题皮肤-一键替换主题皮肤的替换可以用在两个维度，一是浅色模式和暗色模式的替换，二是不同品牌色之间的替换。我们可以将不同主题的同一个场景下的颜色使用同一个 Token 命名，例如变量名都叫：color-primary-brand-light-default，蓝色皮肤下对应的值为：#165DFF；红色皮肤对应的值为：#F53F3F。然后通过插件面板的一键操作即可完美切换。同时这种切换模式也可以带入 tokn.josn 代码（后面会具体讲如何输出 json 文件交付开发）中，与开发进行同步。4. 设计变更 高效维护还是上面的例子，当我们的二级文字颜色 color-text-secondary 需要进行变更，从 Gray-600 变为 Gray-500。如果没有“color-text-secondary”这个 Token，我们可能需要手动去选中所有用了 Gray-600 的二级文字的图层，一个一个地将它们改为 Gray-500，而当我们有了“color-text-secondary”这么一个 Token 时，我们只需要将 color-text-secondary 的值一键从 Gray-600 变为 Gray-500 便可以完成产品全局的颜色变更。进而设计师可以将 token.json 代码（后面会具体讲如何输出 json 文件交付开发）同步更新给开发 ，开发直接一键替换，线上的界面就能半自动地迅速应用到变更后的色值。5. 设计成果-精准还原设计稿能否被开发精准还原，这几乎是每一个设计师在实际项目中会遇到的问题。我们在进行设计验收的时候，即便花了很多时间进行走查，在表格上列举了很多细节问题，但最终的还原效果并不能得到保障。甚至在一些时候会感觉做验收比重新做一遍设计稿还要费劲「emo」，有的时候甚至会直接按 F12 在网页上改代码给开发提示「狗头」。例如，在常规不使用 Token 的情况下，开发同学使用的是硬代码的模式，代码编辑器无法判断这个颜色是否正确，如果开发不小心输错了一位数，就很可能导致线上运行时候的不一致。而使用了 Token 之后，开发只需要输入这个场景的 Token 名称的前缀，代码编辑器便会自动化地提示有哪几个颜色供选择就可以了，如果不正确，代码编辑器还会给出报错提示，开发同学可以在写代码的过程中完成基础的检验工作，这样一来，设计师的成果便能够一定程度上的精准还原，设计师验收的工作量也会小很多。在设计系统中应用 Design Token上面讲了这么多理论，接下来开始实战，准备好～1. 提炼 Token 组成元素Design Token 是构成设计语言的基本构建块，是设计系统中最核心、最基础的影响视觉风格的元素。根据 Figma Tokens 插件默认提供的面板中，可以将分别以下组成元素：Color 颜色、Shadow 投影、Typography 字体样式、Size 尺寸、Space 间距、Border Radius 描边圆角、Border Width 描边宽度、Opacity 透明度等2. 定义 Token 命名规则关于 Token 的命名规则，不同的团队有不同的定义方式，但其本质都是为了提高产品的一致性和工作效率。因此在对 Token 命名规则进行分类整理时，设计需要与开发同事达成一致，以确保能够更好地落地。在制定自己产品的 Token 命名规则前，带大家看一下大厂的 Design Token 都是怎么命名的腾讯文档 Token 变量表：https://mp.weixin.qq.com/s/sRRPlsxaUZj7220PLoFiRw腾讯 TDesign 开源设计系统 Token：https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_light.less:root,:root[theme-mode="light"] {// 文字 & 图标 颜色--td-font-white-1: rgba(255, 255, 255, 100%);--td-font-white-2: rgba(255, 255, 255, 55%);--td-font-white-3: rgba(255, 255, 255, 35%);--td-font-white-4: rgba(255, 255, 255, 22%);--td-font-gray-1: rgba(0, 0, 0, 90%);--td-font-gray-2: rgba(0, 0, 0, 60%);--td-font-gray-3: rgba(0, 0, 0, 40%);--td-font-gray-4: rgba(0, 0, 0, 26%);// 基础颜色--td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作--td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告--td-error-color: var(--td-error-color-6); // 色彩-功能-失败--td-success-color: var(--td-success-color-5); // 色彩-功能-成功// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态--td-brand-color-hover: var(--td-brand-color-7); // hover 态--td-brand-color-focus: var(--td-brand-color-2); // focus 态，包括鼠标和键盘--td-brand-color-active: var(--td-brand-color-9); // 点击态--td-brand-color-disabled: var(--td-brand-color-3); // 禁用态--td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态// 警告色扩展--td-warning-color-hover: var(--td-warning-color-4);--td-warning-color-focus: var(--td-warning-color-2);--td-warning-color-active: var(--td-warning-color-6);--td-warning-color-disabled: var(--td-warning-color-3);--td-warning-color-light: var(--td-warning-color-1);// 失败/错误色扩展--td-error-color-hover: var(--td-error-color-5);--td-error-color-focus: var(--td-error-color-2);--td-error-color-active: var(--td-error-color-7);--td-error-color-disabled: var(--td-error-color-3);--td-error-color-light: var(--td-error-color-1);// 成功色扩展--td-success-color-hover: var(--td-success-color-4);--td-success-color-focus: var(--td-success-color-2);--td-success-color-active: var(--td-success-color-6);--td-success-color-disabled: var(--td-success-color-3);--td-success-color-light: var(--td-success-color-1);// 遮罩--td-mask-active: rgba(0, 0, 0, 60%); // 遮罩-弹出--td-mask-disabled: rgba(255, 255, 255, 60%); // 遮罩-禁用// 文本颜色--td-text-color-primary: var(--td-font-gray-1); // 色彩-文字-主要--td-text-color-secondary: var(--td-font-gray-2); // 色彩-文字-次要--td-text-color-placeholder: var(--td-font-gray-3); // 色彩-文字-占位符/说明--td-text-color-disabled: var(--td-font-gray-4); // 色彩-文字-禁用--td-text-color-anti: #fff; // 色彩-文字-反色--td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌--td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接// 分割线--td-border-level-1-color: var(--td-gray-color-3);--td-component-stroke: var(--td-gray-color-3);// 边框--td-border-level-2-color: var(--td-gray-color-4);--td-component-border: var(--td-gray-color-4);// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边--td-shadow-inset-top: inset 0 .5px 0 #dcdcdc;--td-shadow-inset-right: inset .5px 0 0 #dcdcdc;--td-shadow-inset-bottom: inset 0 -.5px 0 #dcdcdc;--td-shadow-inset-left: inset -.5px 0 0 #dcdcdc;// table 特定阴影--td-table-shadow-color: rgba(0, 0, 0, 8%);// 滚动条颜色--td-scrollbar-color: rgba(0, 0, 0, 10%);}Element-Plus：https://element-plus.org/zh-CN/--el-bg-color: #ffffff;--el-bg-color-page: #ffffff;--el-bg-color-overlay: #ffffff;--el-text-color-primary: #303133;--el-text-color-regular: #606266;--el-text-color-secondary: #909399;--el-text-color-placeholder: #a8abb2;--el-text-color-disabled: #c0c4cc;--el-border-color: #dcdfe6;--el-border-color-light: #e4e7ed;--el-border-color-lighter: #ebeef5;--el-border-color-extra-light: #f2f6fc;--el-border-color-dark: #d4d7de;--el-border-color-darker: #cdd0d6;Ant Design：https://ant.design/components/overview-cn/html {--ant-primary-color: #1890ff;--ant-primary-color-hover: #40a9ff;--ant-primary-color-active: #096dd9;--ant-primary-color-outline: rgba(24, 144, 255, .2);--ant-primary-1: #e6f7ff;--ant-primary-2: #bae7ff;--ant-primary-3: #91d5ff;--ant-primary-4: #69c0ff;--ant-primary-5: #40a9ff;--ant-primary-6: #1890ff;--ant-primary-7: #096dd9;--ant-primary-color-deprecated-pure: ;--ant-primary-color-deprecated-l-35: #cbe6ff;--ant-primary-color-deprecated-l-20: #7ec1ff;--ant-primary-color-deprecated-t-20: #46a6ff;--ant-primary-color-deprecated-t-50: #8cc8ff;--ant-primary-color-deprecated-f-12: rgba(24, 144, 255, .12);--ant-primary-color-active-deprecated-f-30: rgba(230, 247, 255, .3);--ant-primary-color-active-deprecated-d-02: #dcf4ff;以上截取的部分 Token 基本是在 Github 上开源社区能找到相关的代码。如果我们想要找一个非开源的设计系统的 Token 怎么找呢？这里以飞书为例，个人觉得飞书整体的配色非常舒适，想要研究一下其中的 Token 是怎么制定的。首先打开飞书网页，按 F12，选中任意元素，便可在“样式”中找到飞书产品所有的 Token 是如何命名，以及可以分析研究其中的色彩运用规律。飞书 Token：www.feishu.cn--bg-base: var(--N100);--bg-base-raw: var(--N100-raw);--bg-body: var(--N00);--bg-body-raw: var(--N00-raw);--bg-body-overlay: var(--N50);--bg-body-overlay-raw: var(--N50-raw);--bg-content-base: #f8f9fa;--bg-content-base-raw: 248,249,250;--bg-filler: var(--N200);--bg-filler-raw: var(--N200-raw);--bg-float: var(--N00);--bg-float-raw: var(--N00-raw);--bg-float-base: var(--N100);--bg-float-base-raw: var(--N100-raw);--bg-float-overlay: var(--N50);--bg-float-overlay-raw: var(--N50-raw);--bg-float-push: rgba(var(--N00-raw),0.8);--bg-mask: rgba(0,0,0,0.4);--bg-mask-raw: 0,0,0;Token 命名规则总结通过上面的大厂 Token 参考我们可以分析出一些普适性的规则：1. 单词之间用“-”分隔；2. Token 前缀可自定义添加自己产品的简称，例如：“–el-xx”、“–ant-xx”、“–td-xx”；3. Token 可以套 Token，例如：–td-brand-color-hover: var(–td-brand-color-7)；3. 整理 Design Token 资产表分析完各个大厂的 Token 规则之后，接下来正式开始对自己产品的 Design Token 开始建设，首先便是整理一份 Design Token 资产表，可以用文档、表格等形式整理。这里以 TDesign 为例，需要包含 3 列：Token、Value、Describe。这份 Token 资产表整理好之后，可以在设计团队内部进行评审，通过之后再与开发进行对齐。来源： https://tdesign.tencent.com/design/color通过工具创建 Token 并联动设计文件以上主要讲的是在思维层面 Design Token 是怎么推导的，接下来重点讲一下怎么借助一些实用的工具将 Design Token 实现自动/半自动化的落地。这里主要推荐的工具是 Figma Tokens 插件，它是一款基于 Figma 的插件，相对于 Figma 右侧面板原生自带的样式外，能够实现多层级的 Token 管理，同时插件内容能够与 Figma 设计文件实现实时联动。1. 安装并运行插件插件安装地址：https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens安装完成后，在 Figma 文件中打开 Figma Tokens 插件面板，并点击“Get started”，开始创建。2. 创建 Token 变量在 Color 分类处点击“+”号，将之前整理的 Design Token 资产表里的内容一个一个录入进插件当中。如何实现 Token “套娃”呢？例如我们需要创建一个“–td-brand-color”，值为“–td-brand-color-8”，只需要在 Color 值的输入框输入“{–td-brand-color-8}”或“$–td-brand-color-8”，这里通过和开发沟通，推荐使用“{ }”大括号的形式进行赋值。全部 Token 创建完成之后，点击“Create Styles”便可将插件中的样式生成到 Figma 右侧的样式面板中。同时，插件中的修改也能够与样式进行实时同步。3. 通过 JSON 代码快捷导入 Token上面的方法是需要根据 Token 对照表，通过手动的方式一个一个录入 Token，如果团队的设计师有一点代码功底，或者前端同学能够提前介入进来，直接根据 Token 对照表写一份 JSON 文件，那么也可以直接通过复制 JSON 文件里面对应到代码粘贴到 Figma Tokens 的插件当中，能够直接读取代码生成 Token 样式，并联动 Figma 文件。4. 导入 Figma 文件中已有的样式除了使用 Figma Tokens 插件一个一个创建样式以外，插件还支持从我们的 Figma 文件中已经有样式导入，我们也可以点击“Import”，再勾选“Color”、“Text”、“Shadows”一键导入文件中的样式并生成 Token。向研发交付 Design Token1. 输出 Token.json 代码文件点击顶部“JSON”，再点击“Export”，即可将插件面板的创建的 Token 导出为一个 token.json 文件，将 json 文件交付给开发，开发便可使用。若开发不知道如何使用，可以分享这个 Figma Tokens 作者发布在 Github 上的代码稍加学习，便知道如何使用了。github 地址： https://github.com/six7/figma-tokens-example-tailwindcss2. 如何更新 Token当之前定义好的 Design Token 需要增删改时，插件官方推荐的更新同步方式主要有 JSON、 http://JSONBin.io 、URL、GitHub 等几种方式，具体可查阅官方文档： https://docs.tokens.studio/sync/sync 。由于后面集中同步方式涉及到一些小门槛，这里简单介绍第一种最为通俗的更新方式就是直接通过更新 JSON 文件，可以在企业 IM 中和研发创建一个共享空间，每次 Token 有更新只需要将导出的 JSON 文件替换原有的文件即可，开发再应用新的 JSON 文件，便可实现高效便捷的更新 Token。使用 Design Token 在产品中一键换肤在一些 To B SaaS 产品当中，产品的主色可能会跟随客户公司的品牌色进行调整。使用 Design Token 便能够便捷高效地实现一键换肤。1. 首先我们会定义一个“global”基础主题，在这里将所有后面不同皮肤的颜色都写入进来；2. 在“blue”和“red”主题皮肤下，品牌色命名都为：“tr-color-primary-brand-light-default”，但是他们两个皮肤的值不同，一个是 global 中的“{–color-blue-light-6}”，一个是 global 中的“{–color-red-light-6}”；3. 在蓝色皮肤下将“blue”勾选，切换至红色皮肤，只需要勾选“red”，即可实现文件内的所有变量全局替换，同时 Figma 右侧的样式也能实时联动。结语近几年，越来越多的团队开始搭建自己公司产品的设计系统 Design System 赋能到具体产品中落地。我所在的团队也在建设一套适用于自己公司业务的设计系统，在推动设计系统落地时，便运用了 Design Token 进行落地，极大提高了公司设计和研发团队的协作效率。Design Token 给 Design System 带来了新的方式和新的可能，未来希望能够不断扩大 Design Token 的应用价值，赋能到更多的业务和产品当中，让设计系统的应用变得更便捷、更高效。我是设计师波波 Bobby He，深耕 B 端体验设计，持续学习输出中，欢迎关注私信与我交流～参考文章https://mp.weixin.qq.com/s/9LJT89vqjdVwsafDckh6Pwhttps://blog.prototypr.io/design-tokens-with-figma-aef25c42430fhttps://didoo.medium.com/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aahttps://uxdesign.cc/design-tokens-cheatsheet-927fc1404099https://docs.tokens.studio大厂出品！腾讯开源企业级设计体系 TDesignTDesign 是来自腾讯内部近 300 名设计师与开发者共同打造，经由 500+ 项目使用、验证和锤炼过的企业级设计体系， 秉承包容、多元、进化、连接的价值观，TDesign 期望与用户、行业及合作伙伴等一起打造具有竞争力的产品体验。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/design-token-2
图标 套色 样式 前言SVG 格式图标在软件界面中有广泛应用，它与生俱来的矢量属性，使其在高分辨率屏幕上的表现非常完美。SVG 是一个基于 XML 标记语言的开放网络标准格式，拥有跨设备多平台的兼容效果。前面我们有分享过一篇关于 WPS 图标的文章《探索 WPS 3000 个图标设计背后的故事》，得到了很多网友的积极反馈。相信界面设计的小伙伴们都很熟悉 SVG 格式了，这次，我有一个棒的想法想分享给大家：利用 SVG 图标套色，来完成不同界面的适配。如何重新设计3000个图标？来看金山团队的实战案例！项目背景近些年，WPS 组件页在完善基础功能的同时，增加了许多新功能。阅读文章 > 什么是 SVG 图标套色？图标套色的简单来说就是利用 SVG 格式的文本属性，使用 XML 格式标准，在 SVG 文档中增加 CSS 样式，通过修改 CSS 样式属性，精准控制 SVG 格式图标颜色，通过修改透明度控制图形显示与否，从而变换图标的风格外观。基本原理：修改 SVG 的样式，生成不同风格的图标用处一：颜色适配这里有几个插件，都用到了“保存”、“打印”这些功能。因为主题色不同，即使是同样外形的图标，还是需要根据主题色的不同输出适配各个插件的图标。采用图标套色的方法，就可以避免这类图标资源的重复输出。相同功能需要两套不同主题色的图标用处二：皮肤适配现在多数软件一般都有皮肤功能，不同用户需求，衍生出风格各异的皮肤，各种颜色，深浅不一，一套图标满足不了所有，为了视觉效果需要对每个皮肤输出特定颜色、风格的图标。图标数量如果很多，投入的成本将随皮肤数量呈几何倍增加，图标套色就可以很好的解决这类问题，只需要通过修改图标颜色和风格即可适配。通过修改映射配置，可以得到不同颜色的图标套色方法我们先看看图标套色之后的效果：修改映射配置，可以得到线、面不同风格的图标简单来说，实现这种效果有下方五个步骤:套色方法五个步骤以下方几个图标来做示例：SVG 示例图标第一步，确定图标线、面风格设计师将图标线、面风格确定下来，并保证两者效果上可以兼容，即轮廓一致。同时兼容线、面两种风格效果第二步，定义图标颜色在确定了图标的风格之后，将图标中用到的 7 种颜色，根据一深一浅再拆分为 14 种（具体几种颜色可根据图标设计需要来定），深色用于填充线性图形，浅色用于填充面性图形。根据线、面风格需要，定义图标的颜色第三步，给颜色定义样式名给 14 种颜色，分别定义好 CSS 样式名（样式名遵循 CSS 规则即可）。给颜色定义样式名第四步，给 SVG 图标添加 CSS 内部样式SVG 格式图标默认是没有 CSS 样式，需要手动将 CSS 内部样式添加到 SVG 文档中，并将 SVG 路径颜色与 CSS 样式名关联起来。给 SVG 添加 CSS 样式第五步，样式属性配置机制添加内部样式之后，需要开发小哥哥在软件中增加对 SVG 图标 CSS 样式属性的映射机制。修改映射机制配置文件中 CSS 样式属性，就可以控制图标风格变化。修改配置代码即可改变图标颜色完成了以上五个步骤，通过修改软件中的映射机制配置文件，就可以改变图标风格。应用案例了解了步骤方法，我们以 WPS 为例来讲解图标套色在实际案例中的应用：案例一：前面有提到我们的四大组件，WPS 由文字、表格、演示、PDF 四组件组成。每个组件都有各自的主题色，文字主题色为蓝色，表格绿色，演示橘黄色，PDF 红色。多数图标都含有主题色，但外形是一样的，因各组件主题色不同而导致了很多图标的重复输出。套色用处之一的颜色适配，可以让图标变色以适应不同的组件色，避免图标的重复。不同主题色图标的变换效果案例二：WPS 有推出多个风格各异的皮肤，因为图标数量的关系，无法每个皮肤都输出一套图标，目前只能使用默认的线性图标。也因时间和维护成本而导致图标风格的单一。套色用处之二的皮肤适配，能使图标改变风格以适应不同的皮肤，既能满足图标风格多样，又能满足时间和维护成本的可控。不同风格图标的变换效果案例三：深色模式的配色与浅色模式大相径庭，图标使用的颜色也截然不同，适配需要输出两套图标资源，因不同深浅色模式而导致的图标资源重复输出。WPS 组件功能区的图标有几千个，输出和维护都很费精力。套色用处之二的皮肤适配，在深浅色模式下也能适用，改变图标颜色以适应不同的深浅色模式，避免图标的重复输出。深浅色模式下图标的变换效果总结通过以上的案例不难发现，SVG 图标套色技术的价值，主要有以下几个方面：1. 时间和维护成本的降低利用图标套色方法，设计师只需要输出一套图标资源，就完成了多组件、多风格、深浅色模式适配。开发小哥哥也可以删掉适配用的冗余代码，提升了图标的管理和软件运行效率；2. 个性化需求的满足后期可以增加自定义扩展，让用户配置图标风格，更好地满足个性化需求；3. 服务器资源的节约更少图标资源，更小压缩包，更少空间和宽带的占用。采用新技术，帮助设计、开发更好地完成多场景适配，降低了整体流程的执行难度，为项目节省了大量时间，避免过多精力投入在重复工作中，为最终完成目标创造了有利条件。同时也解放了生产力，有了更多的时间可以去关注高价值的项目。工作中经常能遇到重复的内容，这都有提升和优化的空间，寻找更高效的方法，让工作变得轻松简单。记得关注我们，下次还有更多好玩、有趣的内容分享给你～实战案例！WPS 2021 年度设计改版完整复盘随着用户使用 WPS Office 的场景逐渐多样化、对产品的体验要求也逐渐提高，我们在视觉层面上围绕着「以用户为中心」开始了一次全新的视觉改版：追求简洁、高效、一致的办公环境，精心打造极致的办公体验。阅读文章 > 欢迎关注作者微信公众号：「CED设计团队」本篇来源：优设网原文地址：https://www.uisdc.com/svg-icon
组件 变体 样式 组件库是一个强大的提效工具，对于设计师和开发来说有了统一的标准，输出的效率也会大大提高。随着设计工具的不断发展，Figma 逐渐成为各大公司的主流设计软件。Figma 强大的组件库能力，非常适合团队设计系统的建设与应用。相比 Sketch，Figma 在 Auto layout、变体和实例等方面极大的提升了组件库的设计灵活度和效率。看完本文你将会学到：1. Sketch 与 Figma 组件库的区别2. Figma 组件库搭建经验分享基础样式：字体（分层分级技巧）、颜色（分组排列规则）、阴影（分类、三层阴影）等组件与变体：组件分类结构化原则、变体创建命名技巧、优化变体层级、组件预览展开还是合并、开关的使用和组件的链接等组件文档：文档结构层级组件库发布、使用、更新3. Figma 组件库搭建 Tips 分享先简单聊一下为什么要做组件库？组件库是将界面设计中的具有通用性和标准规范的基础元素和重复出现的控件进行归纳整理，通过对控件进行分类和命名，最终形成一个可快速复用，便捷维护的资源库。对于设计师和开发来说，简单上手，可复用强，稳定且高效的组件库是非常有必要的。组件库更像是一个强大的工具库，既能提高团队的协作效率，也能保证团队设计输出的统一性、高效性和延续性。相对 Sketch，Figma 组件库有哪些特点？在 Figma 之前，我们都习惯了用 Sketch 创建组件库。但当开始使用 Figma 后，发现 Figma 不仅继承了 Sketch 组件库的优点，并且更加灵活和强大。举一个简单的例子，如果想要修改组件的文本样式或者不同组件的颜色时，在 Sketch 中，就必须提前做好所有可能的文本/图层样式，非常的费时费力。但 Figma 强大的实例 Instances 功能，无须提前做好所有的样式，可以直接在实例上修改字体、颜色、描边、投影等，但又不会干扰到父级的样式，而修改父级的样式又能修改全局，非常的方便。又比如想要去切换一个按钮的状态，或者是否带图标时，Figma 强大的变体功能可以将这些属性进行分类整合在一起，组件调用更便捷，这都是 Sketch 组件不具备的功能。除了实例、变体功能外，跨团队使用组件库（样式、组件）、实时更新、组件库的主题颜色一键切换、组件可以增加提示语等功能，都是 Sketch 不具备的。Figma 组件库搭建提到组件库，不得不提到原子构建理论。Atomic Design（原子设计）是构建 Design System 的核心指导理论。化学中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。上万字干货！设计师必读的原子设计完整指南「我们不设计页面，我们设计构成元素的系统。阅读文章 > 2013 年 Brad Forst 将此理论运用在界面设计中，形成一套设计系统，包含 5 个层面：原子、分子、组织、模板、页面。那么对应设计系统来说，我们的颜色、字体、图标以及按钮、标签等都会对应到相应的原子和分子，通过组件之间的搭配组合，最终构成页面。组件库的基础构成按照原子设计理论的思路，首先需要将组件库的类型进行分类，然后再从基础和核心的元素入手，进行元素、组件、模块的搭建。组件库一般由基础样式、控件和组件文档构成。基础样式包括颜色样式、文字样式、效果样式（主要是阴影），组件主要就是控件（相当于 Sketch 的 Symbols），组件文档相当于对组件的样式和状态的展示说明。1. 组件库：基础样式搭建我们可以直接在文档里创建样式库，简单且灵活。当然更建议大家单独创建一个全局样式的文件，包括颜色、文字、效果等，这样做的好处是在以后进行项目切换时，可以很方便快速的进行配置和替换，且可以共用一份原始的组件，高效且有关联性。这里要跟大家提一个概念 Design Token。Design Token 是存储样式值（如色值、字重、阴影、圆角等）的载体。Design Token 最重要的意义是做到设计与研发的样式完全打通，进行无损耗的沟通，增强系统的可维护性，同时可以约束设计侧的样式数量。但是 Figma 本身对 Token 的支持不够全面，比如圆角等，所以需要自研插件来弥补这些不足。全局样式：颜色样式颜色是页面整体风格表现的重要基本元素，它可以建立品牌的识别性，梳理页面的视觉层级关系，突出内容并平衡其他视觉元素。建议大家可以按照功能和属性，将颜色进行分组分类命名，比如主色、浅主色、中性色和功能色等，并将默认、悬浮、点击、禁用等颜色放在一组，方便大家使用。全局样式：文字样式在文字样式中会包括：字号、字重、行高和字距等。在创建文字样式前，将文字样式分为段落样式和文本样式加以区别。将产品内的一些文字梯度以及功能描述等用表格的形式进行整理，并分别创建相应的字号和字重。需要注意的是不要单纯的将名称命名为 T0、T1 等纯符号性的名称，可以在后面加上适当的描述，比如 T0 辅助、T1 标准等文案，同时也可以在描述里添加对应的使用说明，这样当鼠标悬浮在这个样式上，会给用户带来提示性的预览。这种办法同样适用于颜色、阴影等全局样式，会更加方便大家调用且能够很好的解除新用户的使用疑虑。全局样式：效果样式效果样式一般来说主要是常用的阴影样式，比如外阴影、内阴影等。阴影值应该遵循现实物理世界中物体的特性。因此在阴影的设定上采用了三层阴影的表达方式，让阴影更加柔和，更符合真实光源下的物体状态。物体的高度直接影响阴影，离地面越高阴影越大，模糊值越高，反之相反。同时，为了让组件库阴影层级更加丰富通用，我们将阴影层级划分了 S 类和 L 类两个层级。S 类阴影用于通过交互后出现的场景，其内容带来上下文信息切换，需要抢占用户注意力，更需要提供明确的边界，主要用于基础组件。L 类阴影往往用于多个共存的列表，更加强调整体的柔和性，主要用于导航、首页、模版等业务场景。同时为了能让大家更加清晰的区分阴影的层级，会将常用的一些组件和场景填充在一个表格中，方便大家查阅。2. Component 组件Component 组件相当于 Sketch 的 Symbol。不同之处在于 Component 比 Symbol 更灵活更强大，我们可以用更少的组件做更多的事情，接下来会通过以下几个方面来简要介绍一下 Figma 中组件的相关知识。Auto layout：创建组件能用尽用Auto layout 是 Figma 非常强大的一个功能，创建带有自动布局的组件，通过组合这些响应组件，可以创建可跨多种设备类型工作的设计。在创建组件的时候，一定要把这个功能很好的应用，这样对于组件的拓展和应用会非常灵活。比如常用的按钮、对话框、Toast 等等组件，能用尽用。组件结构化：寻找操作更容易结构化的基本原则是：方便检索控件（Components）、方便编辑控件、清晰地传达控件分组和状态。建议在团队或公司中定义好组件的结构，可依照自己相关的业务，将一些通用性较强的基础组件进行划分。将组件按照属性和状态放在不同的页面里，而不是将所有组件全部堆叠在一个页面。比如数据输入类下面，将常用的输入框、单复选、上传等放置到一起，这使得以下操作变得更容易：在资源面板中查找组件、相关组件之间的交换、提高公司内团队资源库的使用率。强大的变体功能：构建组件库的灵魂和精髓谈到组件，不得不提到 Figma 强大的变体功能。用户可以通过变体功能更加方便和灵活的调用组件库，这相对于 Sketch 来说，简直是好用太多。当你创建组件并建立起你的设计系统时，你会发现需要一些彼此相似的组件，而只有微小的差别。例如：多个按钮的组件，有不同状态和尺寸的独立组件，以及明暗模式或者有无 icon 等，都可以用变体的形式去创建。超好用的变体功能——理解属性和值的概念很重要大家在创建变体的时候经常会有一些困惑，尤其是对于状态非常繁杂的组件，简直是无从下手，尤其是对于属性 Property 和值 Variant 更是觉得很模糊。这里有一些经验分享给大家:首先要了解下一相关的概念，属性 Property：是组件的可变方面。例如：一个按钮组件的属性可以是尺寸、状态，或是否有 icon，可以将其理解为分类。值 Variant：是每个属性可用的不同选项。例如：状态属性可以有默认、悬浮、点击和禁用等，可以将其理解为分类下的参数。然后再了解一下 Figma 的命名规则，Figma 使用斜线命名系统来组织资产面板和实例菜单中的组件。组件名称中的每一个”/”都会创建一个层次。第一个”/”之前的文字将成为组件集的名称，这里需要着重注意一下。比如名称为 Button/Primary/Large/Default/False 的按钮组件将有以下属性和值。组件名称/值/值/值/值。变体名称遵循这个结构，Property1=value, Property2=value, Property3=value。分门别类：变体创建的精髓掌握好命名规则就掌握了变体创建的精髓。教给大家一个非常好用的方法，在创建变体前，首先把需要创建变体的组件进行分类，并统一放在一个草稿上，比如说按钮的尺寸、状态、有无图标等。然后将对应的分类写出相应的值，比如尺寸对应的值就是 m 和 s，状态对应的就是默认、悬浮、点击等。分类好以后，按照上面所述属性和值的对应关系，分别将这些属性和值一一对应填在草稿上。然后再根据 Figma 的命名规则，将所有组件的名称命名完成，比如 Button/m/默认/no/yes，然后就可以直接创建了。化繁为简：优化变体层级Figma 的变体功能很强大，可以进行很多样式的排列组合。但是我们也发现在创建变体的时候，如果按照每个状态、种类进行划分的时候，整个组件会非常的繁杂臃肿。比如 Popover，会发现在创建它的各种状态时会非常麻烦，除了箭头在各个方向的位置外，还要考虑里面元素的组合，比如纯文本、标题+文本、标题+图文、文本+按钮等等，这样组合起来的组件会非常的臃肿，也不利于设计师去选择。所以我们要学会层级的梳理，比如可以将箭头、按钮、标题图文进行一个分布组合，然后再将这些组合成一个新的组件，通过嵌套的层级关系去调整每个层级的位置关系或者剔除某些不需要的层级。组件链接：组件跳一跳，规则全知道创建好组件以后，可以给每个组件都添加相关的链接，这个链接可以添加到组件的描述中，这样开发人员和设计人员就可以在 Inspect 中点击相关的按钮直接跳转链接了，简直不要太好用。比如组件文档链接（可以查看详细的交互规则）、线上的开发地址（可以查看线上的样式），以及直接点击右上角的跳转按钮跳转到组件文档。这样就打通了所有线上线下的样式规则，非常方便用户查阅和使用。资源预览：展开还是合并更好？相信大家在调用组件的时候都会发现一个问题，有的变体预览是展开显示的，有的变体预览是合并在一起的，那么这个分类办法到底是怎么去划分的呢？通常来说需要大家一眼就能选择，减少用户思考的，可以考虑分开建设变体，比如常见的按钮。我们只需要预览图下的各种形态就能找到想要调用的按钮类型。如果按钮全部的集合到一个变体中，那么大家看到的只有一个按钮，对于用户来说会增加判断和选择的时间，是很不方便的。但是对于一些大家理解起来比较容易且展开后的变体样式非常多的的组件，比如 toast、表格，不需要将其各种变体分别的罗列出来，引导用户点击进去，再选择就好了。开关：怎么这么好用大家在建设组件的时候都会发现一个问题，有的组件是开关显示的，有的是下拉显示的。这是因为如果你有一个只有两个可能选项的属性，Figma 会自动将 true/false、yes/no 和 on/off 都识别为开关。所以大家在做变体的时候，尽可能的将这种只有两个可能属性的选项显示为开关，减少用户的操作流程。组件文档：组件类型和状态的展示说明为了方便大家能够清晰知道组件的相关属性和类别，可以为每个组件创建一个组件文档，方便大家查阅和调用。这对于刚接触到这个组件的人来说非常友好。组件文档的结构一般是由组件名称、母文档链接（交互说明）、基本样式、主要组件和相关组件构组成。在这个文档里可以查看组件的类别和相关状态，以及组成这个组件用到的其他组件，并且通过链接都可以跳转到相应的组件，非常方便。组件库：发布、更新、使用可以将组件库发布到团队的资源库。如果要跨文件使用组件，只能通过专业版团队的团队库发布和使用。当每次有更新发布样式或主组件时，Figma 将自动通知到每一个成员，点击更新即可应用。管理员可以提前默认设置将哪些组件库开启哦，减少了新用户每次进入页面还要重新选择。在 Assets 面板下，可以通过搜索的方式找到需要调用的组件；也可以通过展开菜单的方式找到需要的组件。将需要使用的组件直接拖动至文件中，便可使用。推荐大家使用搜索的方法，效率会更高。组织版：更加强大的功能体验对于组织版来说，我觉得比较好用的功能就是组件统计和分支。Figma 组织版可以统计组件数量、使用团队、调用次数等，这对于组件的使用情况统计来说，非常的方便和直观。分支功能可以让每个成员单独创建主文件的分支，可以在其中探索对文件或库的样式、组件和其他方面的更改，而不会影响主文件。当更改感到满意时，你可以查看分支并将其与主文件合并。所以对于团队来说，组织版的这两个功能还是非常实用的。Figma 组件库搭建 Tips：全是干货，一目了然为了确保值与属性相匹配，每个组件都需要有相同数量的斜线。如果你有一个只有两个可能选项的属性，Figma 将 true/false、yes/no 和 on/off 都识别为开关。修复值的冲突错误：如果任何变体的值组合完全相同，Figma 会让你知道存在冲突。即使变体本身在视觉上不同，也会看到这个错误。Figma 将使用左上角的变体作为默认变体，此变体将代表资产面板中的整个组件集。如果你不确定某个组件集有哪些变体，或者它们的原始样式，你可以在原始文件中查看组件集。使用·或者_可隐藏不需要展示的组件。组件内部预设元素只能减少，要增加需拆解。不要将组件完全拆解、嵌套元素都支持修改。使用 Autolay out，对齐自适应更智能。使用全局样式，一键修改更方便。跨文件使用组件，只能通过专业版团队的团队库发布和使用组件。结语组件库是一个强大的提效工具，对于设计师和开发来说有了统一的标准，输出的效率也会大大提高。对于团队来说能很好的提升产品的品牌感和体验，尤其在 Figma 强大特性的帮助下，将发挥更大的作用。同时我们也一定要学会整体思考、善于总结，不断优化和完善组件的细节，将组件库的特性发挥到最大。由于篇幅有限，关于组件库某些内容介绍的不够全面，如果有不严谨、错误的地方还望大家给与指正，欢迎大家一起学习和讨论。用一篇文章，从零开始帮你用好 Figma 的组件库功能对于设计系统，我们最熟悉和常用的应该就是设计组件了，即 UI kits，包括输入框、按钮、文字、链接、下拉菜单等等。阅读文章 > 欢迎关注作者的微信公众号：「百度MEUX」本篇来源：优设网原文地址：https://www.uisdc.com/figma-building-a-component-library
图层 样式 画笔 最终效果1、还是在稿纸上画草稿，拍照导入AI（这个草稿跟最终稿有点不一样，用钢笔勾线的时候临时改变了想法，把一些装饰去掉了）2、AI钢笔工具勾出字型并分别填色，有些小地方作了一些调整。3、打开PS，新建文件2000*1320px，分辨率为300，背景填充#5a6279.在AI里选中一个笔画ctrl+c复制，回到PS，ctrl+v粘贴，弹出的窗口选形状图层-确定，把刚才勾好的笔画分别复制粘贴过来，摆放好位置（可以先复制整个字型到PS降低不透明度作为位置参考），重新填充颜色和重命名。观察了一下，决定在后面加个圆形，让它的整体感更强一些。4、找到神这个组里面的横撇图层，我们先从横撇这个图层给它做立体感，添加斜面浮雕-描边-投影-投影。5、立体感有了，需要给它加点颜色。ctrl+shift+alt+n（下面如有重复快捷键时省略）新建一层，用系统自带的柔边圆画笔工具，在如下位置画几下。画笔可调到合适大小来画（按键盘上的左中括号【和右中括号】）。图层模式为叠加，ctrl+alt+g（下面重复快捷键时省略）剪切蒙版。6、神字的其他笔画可以复制横撇这个图层样式，先选中横撇这个图层，右键-拷贝图层样式-再选择其他笔画图层-右键-粘贴图层样式。7、神字的竖这一笔也是粘贴刚才的图层样式，双击图层样式，作一些小修改，让它有一些变化。8、给它加一点光影，新建两层，分别命名为：阴影（图层模式-正片叠底，颜色#8a5225），亮部（图层模式-叠加，颜色#8a5225），用画笔在竖的重叠的地方和右上面画几笔，剪切蒙版。9、把神字中间的宝石部分做出来。找到这个图层，添加图层样式-内阴影-投影。10、在这个层上，我们用钢笔工具，形状模式，颜色#8f501c，勾出一个三角形，剪切蒙版，命名暗部；再新建一层，命名为亮部，用画笔，颜色#f7e6c5，在右上角和左下角画几笔，作为高光和反光，剪切蒙版。11、觉得有点单调，决定给它加一个边，在这个层的上面新建一层，ctrl+单击这个层，调出选区，填充颜色#dd6919 ，选择-修改-收缩-收缩量为5-确定，按ｄｅｌｅｔｅ，删除，得到一个边。12、同样也给这个边添加图层样式-斜面浮雕，在它的上面新建两层，亮部（图层样式-叠加，颜色#fffde2）和暗部（图层样式-正片叠底，颜色# 7e3203），用画笔在如下位置涂几下。13、做到中间的蓝宝石了，找到这个图层，添加图层样式-斜面浮雕-描边-内发光-阴影-阴影。14、光感不够，需要压暗一下下面，在这个层上新建一个图层，颜色# 185c5c，图层样式为正片叠底，不透明度为61%，在蓝宝石的下面画几下，复制蓝宝石图层（alt+选中这个图层往上拖），把图层样式其它选项删除，填充为0，修改下斜面浮雕；这时有一点光感了，但是质感不够通透，我们在这个图层上再新建一层，图层模式为叠加，颜色# 6ceeef，用画笔在右上角和左下角的边缘处画一两下，作为高光和反光。15、神字宝石的部分就做完了，另外两个宝石也是一样的做法，这里就不重复了。16、把竖上的圆环也做下，添加图层样式-斜面浮雕-投影。17、给圆环加强一下光影，新建两个层，重命名为暗部（图层模式-正片叠底，颜色# 7e3203）和亮部（图层模式-叠加，颜色# f7e5c4），跟上面的添加亮部和暗部的做法一样，用画笔工具来画，再剪切蒙版。18、神字的效果有一点了，但明暗对比不够强烈，缺少了一些质感，我们先从神字的右边处理，在这个图层上新建两层：亮部（叠加）和暗部（正片叠底），用画笔在如下位置画几下，在网上找到一张素材，叠加在上面，图层模式为叠加，不透明度是20%，示意如下。19、其它笔画也是跟着调整一下。20、再做女字，女字我们就以第一笔撇为例。撇又分为两个图层，一个是撇，一个是撇的边。在撇图层，新建一层，命名为明暗部，颜色#777683，放大画笔在左下角画几笔，再缩小一点画笔，颜色#f6edda，在右上角也画几下，剪切蒙版。21、给它添加图层样式-内阴影-阴影，营造一种通透的感觉。22、在素材网站上搜索金粉，金沙等关键词，找到类似这样的素材，图层模式为滤色，放在刚才明暗层的上面，剪切蒙版。23、撇的边也增加立体效果，添加图层样式-斜面浮雕-描边-投影。24、再新建一层，给加强一下明暗关系，颜色# 965513，用画笔在边的上面和下面画几下。25、撇就做好了，用同样的方法做其他笔画的边。26、大圆弧效果。找到大圆弧图层，添加图层样式-斜面浮雕-描边-投影。27、立体感不够，按住alt+选中大圆弧图层往上拖，得到一个复制层，填充为0，修改图层样式-斜面浮雕-内阴影。
图层 样式 参数 今天的文章，将会教你用Photoshop来制作一枚翠玉质感的图标，制作重点是PS的图层样式的运用，下面是效果图，喜欢的同学可以一起练习哦。使用工具：Photoshop教程难度：初级效果图：素材图标：具体操作：1、新建一个800 x 800像素、分辨率为300像素的画布2、创建纯色的图层，填充颜色为：#f2f453、新建圆角矩形，参数如下。填充颜色为：cad6b74、按快捷键“ctrl＋t”对圆角矩形进行变形—膨胀—对齐，变形程度进行微调（调节成自己想要的效果）5、给图形添加“图层样式—投影”，加两次投影。第一次：第二次：（等高线数值不要变）6、给图形添加“图层样式—内阴影”，加3次内阴影第一次，参数如下：第二次，参数如下：第三次，参数如下：7、添加“图层样式—内发光”，参数如下：8、给图形添加“图层样式—斜面和浮雕”，参数如下：9、接下来我们来制作玉石效果，玉石肯定是要有纹理的。所以我们新建图层，选择“滤镜—渲染—云彩”，并将图层的混合样式改成“线性加深”（这个图层混合模式，根据你自己的效果添加，你也可以用颜色加深等等10、创建剪切蒙版，快捷键ctrl＋alt＋g11、接下来随意找一个小图标，放到玉石的上面，你也可以找个蝴蝶或者其它的。12、将“填充”修改至“0%”在图上看不到刚导入图标的图案，效果如图13、给“小图标”添加“图层样式—斜面和浮雕” 参数如下：14、给“小图标”添加“图层样式—内阴影” 参数如下：15、给“小图标”添加“图层样式—投影” 参数如下：16、最后给“小图标”也创建剪贴蒙版，用“曲线”调节一下亮度（此操作根据个人喜好调节即可）效果如下所示：以上的出现的数值和颜色，大家可以根据自己喜爱的效果去调，不一定一定要按照我的，重要的是最后的效果。来源：致设计
图层 样式 文字 本文的文字效果都是用图层样式来完成的。首先选择好想要的文字，然后用多个图层样式，分别加上纹理、渐变、描边、投影、发光效果等；最后在底部加上适合的边框和背景。最终效果1、新建文件。打开PS软件，按Ctrl + N 新建文件，尺寸为1680 * 993像素，分辨率为72像素/英寸，然后点确定。2、填充背景色。把前景色设置为黑色，选择油漆桶工具，在背景上点击一下填充黑色。3、输入文字。在工具箱选择“横排文字工具”，然后在属性栏选择好字体，字体大小需要设置大一点，颜色为红色；在画布上点击一下输入文字，文字加好后按Ctrl + T 变形，稍微变斜一点。4、设置图层样式。点击图层面板下面的图层样式按钮，选择投影，参数及效果如下图。5、复制文字图层。按Ctrl + J 把当前文字图层复制一层，然后在文字缩略图后面鼠标右键选择“清除图层样式”，过程如下图。
图层 样式 字体 用图层样式制作金属字，最重要的就是要有耐心，因为图层样式设置参数并不太多，不过数值控制非常重要，不同大小的文字或图形用到的数值不同，设置的时候需要慢慢去尝试。最终效果一、新建1000*800px大小的文档，我们复制背景图层，给“背景副本”图层油漆桶填充颜色#452c16。二、PS打开图案素材，编辑--定义图案即可。三、我们给“背景副本”图层添加图层样式--图案叠加。四、我们打开“花纹”素材，摆放好位置，改图层模式为叠加。五、打上字体“THink”，这里字体选择的是“False Positive BRK”，颜色#b37a37，大小430pt。六、复制字体图层，得到“字体副本”图层，改图层填充0%。七、给“THink”图层添加图层样式如下。八、给“THink副本”图层添加图层样式如下。九、我们在两个字体图层中间新建图层“样式”，按住ctrl键点击字体图层，得到字体选区。十、设置前景色为#ffac19，背景色为#432c17，在“样式”图层上执行滤镜--渲染--云彩。十一、ctrl+D取消选区，继续执行滤镜--素描--半调图案，设置如下。十二、我们将“样式”图层模式改为柔光，不透明度90%。十三、选择画笔工具，设置画笔如下。十四、在“THink”图层上新建图层“星光”，右击字体图层，选择创建工作路径。十五、设置前景色为#fff1d8，右击描边路径，确保你在“星光”图层上操作，改图层模式为亮光。十六、到这基本完成了，最后我加上一些小字，字体颜色#ffe9e1，模式柔光，样式投影。最终效果：
图层 步骤 样式 原教程是由来自拥有超过15年经验的平面设计师Enrique Elicabe的分享！P大点S的笔碳之师翻译重制！在这个教程中，我们将向大家解释，如何使用 Photoshop 中的图层样式，快速创建一个金属文本效果。这是一个新手教程，大神可以绕路了！所用素材资源Strasua字体来自 dafont 的分享！CustomContoursMK.shc 等高线预设来自 Enrique Elicabe 的分享！Dark_Pattern.pat 自定义图案来自 Enrique Elicabe 的分享！（等高线预设和自定义图案是打包在一起的，两个链接是一样的，下载一个就可以了）点击下载PSD文档+素材包提取码：kih2下面，我们开始！一. 如何创建背景步骤1创建一个新文档（“ 文件”>“新建”）。• 宽度：850像素• 高度：500像素• 分辨率：72 PPI步骤2• 复制背景（转到图层>复制图层>确定）并将新图层重命名为“ 背景图案 ”。步骤3• 现在我们要为背景图层添加纹理。• 双击 “ 背景图案图层 ”以打开图层样式窗口。转到图案叠加，然后单击在图案框中 ，选择新增暗花纹。按确定。步骤4• 为了使背景看起来更好，我们将添加一个内阴影。您必须双击背景图案图层，并在出现图层样式窗口后，设置以下值。二. 如何创建文本并对齐它步骤1• 使用Strasua字体键入单词“Metalkid” 。• 字体大小设置在100px。步骤2• 使用“ 移动工具”，选择文本图层和背景图层，然后单击 顶部菜单上的对齐命令以使文本居中。• 水平对齐：中心• 垂直对齐：中心三. 如何创建文本效果步骤1在文本中添加图层样式 – 你必须在“ 图层”菜单中右键单击图层，然后选择“ 混合选项”。确保使用以下值并按“ 确定”。步骤2让我们从文字效果开始吧！首先，我们将添加一些阴影来将文本与背景分开。转到图层样式>投影并使用下图中显示的值。步骤3现在我们将创建一个渐变叠加层，它将为金属效果提供基础。再次打开“图层样式”并将“ 渐变叠加” 设置修改为以下值。单击渐变条并使用以下设置创建渐变提示：要在渐变中创建新点，必须在渐变条下单击。单击每个色标可以修改 位置和颜色。• 第一个颜色：#0d1117 • 位置：0％• 第二个颜色：#a0a0a0 • 位置：25％• 第三个颜色：#161a20 • 位置：50％• 第四个颜色：#a0a0a0 • 位置：75％• 第五个颜色：#0d1117 • 位置：110％效果如下：步骤4转到图层样式>内发光，并使用下面显示的设置使边缘变亮。步骤5要开始创建3D外观，请转到图层样式>斜角和浮雕，然后使用以下值。现在，我们安装我们所提供的等高线预设。点击光泽等高线的下拉图标，然后选择名为“ CustomContourMK01 ” 的等高线。效果如下：步骤6现在我们将强调高光和阴影，以使金属效果更真实。转到图层样式>光泽，并使用下面显示的设置。单击等高线的下拉图标，然后选择名为“ CustomContourMK02 ” 的轮廓并按OK。步骤7它差不多完成了。在最后一步中，我们将强调边缘和角落，使文本具有最终的3D外观。转到图层样式>描边，并使用下图中显示的值。单击 渐变条 并使用以下设置创建渐变：• 第一个颜色：#1a1b1e • 位置：0％• 第二个颜色：#7f7f7f • 位置：50％• 第三个颜色：#1a1b1e • 位置：100％最终效果如下：
图层 步骤 样式 1.从创建图层样式开始吧步骤1首先, 我们将会为此文本的效果创建五个图层样式。然后我们将会把这些图层样式保存起来然后在一起的使用。首先, 下载素材文件, 并将其解压缩到任何文件夹中。之后, 打开背景素材。请注意, 我将此图像设置为300dpi, 这非常适合本教程。（喜欢多少分辨率就设置多少）步骤3我使用本教程素材中的 energy patterns的预设（预设要在图案叠加里面才看的见）。要安装它, 你可以直接打开PS的时候往里面拖。如果没有用的话那你百度一下如何安装预设吧！你可以很容易地在网上找到取代它的预设。我建议添加高斯模糊和紫色映射渐变的图像, 如果你想它看起来和我的图像一样。双击 “FLASH” 图层以打开 “图层样式” 面板。然后使用以下设置来添加图案叠加:混合模式: 正常不透明度: 100%模式: 图案叠加 (在 zip 文件中的预设可用)缩放: 25%与图层的链接: 打开之后, 单击 “紧贴原点” 以重置纹理位置。步骤5使用以下设置添加描边:大小: 1像素位置: 外部混合模式: 正常不透明度: 100%叠印: 关闭填充类型: 颜色色值: #9cbfff步骤7使用以下设置添加外发光:混合模式: 正常不透明度: 26%杂色: 0%颜色: #0066ff方法: 柔和扩展: 3%大小:49 像素等高线: 线性消除锯齿: 关闭范围: 100%抖动: 0%步骤9转到 “图层” 面板, 右键单击 “FLASH” 图层, 然后选择 “清除图层” 样式。然后双击它再次打开图层样式面板。然后, 使用以下设置添加 “颜色叠加”:混合模式: 正常颜色: #ffffff不透明度: 100%步骤11使用以下设置添加外发光:混合模式: 正常不透明度: 100%杂色: 0%颜色: #0078ff方法: 柔和扩展: 3%大小: 9 像素等高线: 线性消除锯齿: 关闭范围: 95%抖动: 0%然后, 点击新建样式, 并将其命名为闪电样式 b。步骤3现在选择文本工具 (t), 并将文本大小设置为 69 pt。然后将文本的对齐方式设置为 “居中对齐”。步骤4按ctrl+ a 选择整个图像。然后选择移动工具 (v) 并将文本与文档的中心对齐。之后, 按 ctrl-d 取消选择所有内容。步骤5现在, 将文本图层重命名为 e. text, 然后转到 “窗口” > “样式” 以打开 “样式” 面板。然后, 查找之前创建的闪电样式 a, 然后单击它将样式应用于文本。步骤6按住 “ctrl” 并单击文本图层的缩略图, 在其周围创建一个选区。然后转到 “窗口” > “路径” 以打开 “路径” 面板。之后, 单击 “路径” 面板右上角的小图标, 然后以1.0 px 的容差 “创建工作路径”。步骤7现在我们要使用之前安装的画笔。然后你可以通过改变画笔大小，方向啊啥的来进行使用！（作者说了一大堆我觉得没啥用所以）现在选择画笔工具 (b), 右键单击图像上的任意位置以打开画笔选项。然后选择闪电高清画笔刷1, 并将其大小更改为300像素。步骤8按ctrl- shift-n 创建一个新图层。将其命名为 “闪电画笔图层”, 然后单击 “确定”。之后, 按 d 重置前景和背景色, 然后按 x 切换它们。步骤9再次转到 “路径” 面板, 然后右键单击 “工作路径”。选择 “描边路径”, 然后在 “工具” 选项上选择 “画笔”。然后取消选中 “模拟压力”, 然后单击 “确定”。步骤10将闪电图层移动到文本的下面。然后, 右键单击 “闪电画笔层”, 然后选择 “转换为智能对象”。然后将闪电风格 b 应用到它。步骤11现在选择 e. text 图层并将其转换为智能对象。然后将闪电样式 c 应用到它。步骤12创建一个新图层并将其命名为 e. 文本背景。然后选择硬圆画笔, 并将其大小更改为 4 px。之后, 转到 “路径” 面板, 右键单击 “工作路径”, 像以前一样对其进行描边。（这一步是为了给文本创建轮廓，如何给他一个运动模糊的效果来模拟水平运动）步骤13双击 e. 文本背景图层以打开 “图层样式” 面板。然后使用以下设置添加外发光:混合模式: 正常不透明度: 100%杂色: 0%颜色: #ffffff方法: 柔和扩展: 3%大小:13 像素等高线: 线性消除锯齿: 关闭范围: 100%抖动: 0%然后, 单击 “确定” 关闭 “图层样式” 面板。步骤14现在, 将 e. text 背景转换为智能对象。然后转到 “滤镜” > “运动模糊”, 添加具有0º角度和 281 px 距离的运动模糊。步骤15添加另一个运动模糊的角度为 0º, 距离为 120 px。步骤16现在将闪电样式 b 应用于 e. 文本背景图层。然后再次将其转换为智能对象。之后, 将闪电样式 d 应用于新的智能对象。步骤17现在, 我们将使用 zip 文件中的第二个画笔。与第一个画笔不同的是, 此画笔在应用时不会更改方向, 但它的大小会稍有变化。你可以在网上找到任何光束笔刷来取代它。就像第一个一样, 然后您可以自由地打开 “画笔设置” 面板, 查看我所做的所有调整。现在再次选择 e. text 图层。然后按ctrl-shift-n 并命名新的图层 e. 光束层。然后, 选择画笔工具 (b) 并选择 “闪电刷 2″。步骤18转到 “路径” 面板, 然后再次对 “工作路径”描边。然后将 e. 耀斑层转换为智能对象, 并对其应用闪电样式 e。然后, 再次将 e. 耀斑层转换为智能对象。步骤19选择 e. text 图层, 然后转到 “风格化” > “油画”。然后使用以下设置设置 “油画” 参数描边样式: 0.7清洁度: 0.0缩放: 0.1硬毛刷细节：0.0光照：关步骤20选择 e. 光束图层, 然后转到 “滤镜” > “运动模糊”, 以添加角度为0º、距离为 23 px 的运动模糊。之后, 选择除 “背景” 以外的所有图层, 并将其转换为一个智能对象。步骤21将智能对象重命名为 “源文本效果”。然后转到 “窗口” > “调整”, 然后单击 “渐变映射” 图标。之后, 右键单击 “渐变映射” 图层, 然后选择 “创建剪裁蒙版”。如果图像上的颜色看起来不一样, 请不要担心。步骤22双击 “渐变映射” 图层的缩略图以打开 “属性” 面板。然后单击渐变栏编辑颜色。我们将添加五个颜色到渐变栏。使用以下设置创建渐变:第一个颜色: #0d0105 位置: 0%第二个颜色: #4e0009 位置: 13%第三个颜色: #ff0000 位置: 52%第四个颜色: #ffd738 位置: 78%第五个颜色: #ffffff 位置: 100%步骤23选择 “源文本效果”, 然后按 ctrll-t 进行变换。然后让它小5%。步骤24转到 “滤镜” > “锐化” > 智能锐化, 并使用以下设置:数量: 110%半径: 0.4 像素降低杂色: 0%移去: 镜头模糊步骤25转到 “路径” 面板并删除 “工作路径”。然后返回到 “操作” 面板, 然后单击 “停止录制” 图标以完成操作。原文地址：envatotuts+原文作者：Anderson Luiz译文地址：UI中国译文作者：米夏小雨
图层 效果 样式 本教程主要使用Photoshop制作时尚荧光质感的艺术字教程，字体的效果非常的炫酷，感兴趣的朋友让我们一起来学习吧。先看看效果图1、打开PS新建画布尽量大一些(我选择的是1600X1000)填充白色2、接下来我们来为其添加渐变填充，数值模式如下3、OK接下来我们在图层中键入字体。字体尽量选择厚重一点的。效果比较好4、好的，接下来我们右键文字图层点击混合选项为其添加图层样式(其实效果也主要是靠图层样式来实现的)大家一定要注意每一个图层样式的数值与模式5、好的，这一步做完呢，我们的效果应该是这个样子的。6、接下来我们添加小标题，字体随意。书写完之后呢，一样的我们为其添加图层样式。7、OK，做完这一步呢我们的效果应该是这样的最后呢我们只需要找一些光晕的素材点缀一下就可以了
图层 步骤 样式 在开始制作之前呢，首先确定好自己要做的内容有哪些，大致的一个风格。然后去寻找参考，看看其他作者如何在作品中将自己的想法展现出来。这里我选择相机、天气、日历、相册、设置、信息、视频和地图。内容和风格确定了，参考也找的的差不多了，对于自己要做的东西有一个比较清晰的思路之后，先在草图上将自己大致的想法画出来，然后才用软件将想法构建完善。这里做的几个图标都是比较简单的，基本上可以用图层样式来实现所有的效果。因为是拟物风格，所以在图标制作的过程当中，要注意体积和光影的表达。通过颜色的选择、相似的装饰元素使整体风格看起来更加统一和谐。先看看效果图教程步骤草图一、相机图标步骤 01 建立文档并制作背景新建文档，大小2000x800px，分辨率72;新建图层，命名背景，填充前景色#d6d6dd步骤 02 制作底座新建300x300px的圆角矩形，圆角半径60px，命名底座，添加图层样式制造体积感步骤 03 制作镜头外圆新建228x228px的圆形，命名【外圆1】，添加图层样式复制外圆1，修改大小190x19px，命名【外圆2】，添加图层样式将外圆1，外圆2编组命名【外圆】步骤 04 镜头内部新建大小162×162 px的圆形，命名【内圆1】复制3个，大小分别修改为130x130px、90x90px、56x56px分别命名为【内圆2】、【内圆3】、【内圆4】再按顺序添加以下图层样式步骤 05 制作玻璃球新建大小24x24px的圆形，颜色#000000，复制一个备用添加蒙版，擦去上半部分，添加图层样式将复制的圆形颜色改为#ffffff，调整不透明度10%，添加蒙版，擦出一个月牙形状步骤 06 制作镜头高光按住CTRL+左键点击【外圆1】图层缩略图得到圆形选区新建一个图层，用柔边圆笔刷(大概400px)在圆形选区的上半部分轻轻拍一下，颜色#ffffff，不透明度20%用布尔运算做出图中图形(三个图层)，颜色#ffffff，不透明度30%添加蒙版将边缘擦的模糊一点，让边缘过渡看起来自然一些在较大的两个图像上添加图层样式步骤 07 添加装饰性元素新建100×300 px的矩形，颜色#d43131，调整图层顺序使它在底座上方，做剪贴蒙版选个字体打一些装饰性的文字啥的至此，相机就做完啦~(做完记得将相机的都编成一个组)二、日历图标步骤 01 制作底座和日历基本形状将相机底座复制一个，新建228x 224 px大小的圆角矩形，圆角半径24，命名【底页1】，添加图层样式复制底页1，命名【底页2】，修改投影大小，相对底页1上移2px复制底页2，命名底页3，相对底页2上移2px。
图层 文本 样式 最终效果一、 如何创建背景1、创建一个新的900 x 675px文档。将前景颜色设置为#2c353c，将背景颜色设置为#191919。选择“ 渐变工具”，选择“ 前景到背景”渐变填充，然后单击“ 线性渐变”图标。然后，单击并从文档的左下角拖动到右上角以创建背景渐变。2、将纹理图像放在背景图层的顶部，将其图层重命名为背景纹理，将其混合模式更改为“ 正片叠底”，然后转到“ 图像”>“调整”>“去色”。二、创建文本图层1、使用Intrepid ExtraBold字体在创建文本。颜色为#e5eaec，大小为230 pt。2、复制文本图层四次。然后，将最后三个复制图层的填充值更改为0。三、如何创建描边图层1、双击原始文本图层以使用以下设置应用描边效果。2、复制原始文本图层，将复制图层重命名为“Stroke 1”，右键单击它并选择“ 栅格化图层样式”，然后将其“ 填充”值更改为0。复制“Stroke 1”图层，将副本重命名为“Stroke 2”，然后将其拖动到原始文本图层下方。四、如何设置主要描边图层的样式1、再次双击原始文本图层以应用更多效果。使用以下设置添加斜面和浮雕。 2、使用以下设置添加等高线。 五、如何设置文本的顶层样式1、双击“Stroke 1”图层以应用以下图层样式：使用以下设置添加斜面和浮雕。 2、使用以下设置添加等高线。 3、使用以下设置添加渐变叠加。六、如何添加投影双击“Stroke 2”图层以使用以下设置应用投影效果。七、如何设置第一个复制文本图层的样式1、双击第一个复制文本图层以应用以下图层样式：使用以下设置添加描边。2、使用以下设置添加内部阴影。3、使用以下设置添加投影。八、如何设置第二个复制文本图层的样式1、双击第二个复制文本图层以应用以下图层样式：使用以下设置添加斜面和浮雕效果。光泽等高线。2、使用以下设置等高线。3、使用以下设置添加描边效果。九、如何设置第三个复制文本图层的样式1、双击第三个复制文本图层以应用以下图层样式：使用以下设置添加斜面和浮雕效果。2、使用以下设置等高线。十、如何设置第四个复制文本层的样式1、双击第四个复制文本图层以应用以下图层样式：使用以下设置添加斜面和浮雕效果。2、使用以下设置等高线。十一、如何创建文本纹理1、将前景色和背景色设置为，黑色和白色。在所有图层的顶部创建一个新图层，将其称为“ 文本纹理”，然后转到“ 滤镜”>“渲染”>“云”。2、转到滤镜>滤镜库>画笔描边>强化的边缘，然后将边缘宽度更改为2，将边缘亮度更改为38，将平滑度更改为5。3、这将创建一个简单的纹理。4、将文本纹理图层的混合模式更改为柔光。5、按住Ctrl键并单击文本图层的缩略图以创建选择。6、在“ 文本纹理”图层仍处于选中状态的情况下，单击“ 图层”面板底部的“ 添加图层蒙版”图标以创建蒙版。十二、如何更改纹理的颜色1、单击“ 图层”面板底部的“ 创建新填充或调整图层”图标，然后选择“ 色相/饱和度”。2、单击“ 剪切到图层”图标，选中“着色”框，然后将“ 色相”值更改为 200。3、将调整图层的混合模式更改为柔光。最后，我们在背景中添加一个泼水刷，并对其进行样式设置，以及一些字母边缘的闪光，以增强最终结果的颜色。最终效果
在路上
张大湿
表哥
飞翔的企鹅
落霞与孤鹜
