如何在不到一分钟的时间内将您的Photoshop设计转换为CSS代码

CSS的Photoshop

自CS6版本问世以来,Adobe在Photoshop中实现了一个非常有用的选项,可用于布局和开发Web设计。 该操作是 非常简单 最重要的是 。 通过该应用程序,我们将能够生成级联样式表,以我们的形状和文本层为参考。 该过程就像开发我们的模型,复制元素的代码版本并将其粘贴到工作表一样简单。

这是一个非常好的选择,尤其是因为它使我们能够从视觉上实时查看设计的演变。 以下是使用此选项并获得 最高性能:

尽量精确

为了获得专业的结果,建议您考虑站点的度量和比例。 设置要设计的模板的Width和Heigh值,并将其应用于模型。 复制CSS代码时,我们将放置每个元素,以每个元素与画布边缘之间的像素距离为参考。 还应考虑将要包含在设计中的大小和层次结构原因,包括每个元素的对齐方式以及每个元素之间的间距,以为用户提供最大的可读性。

使用指南和界面规则将帮助您构建一个整洁,干净的模板,使其所有元素完美对齐。

网络照相馆

配置每个元素的所有特征

复制CSS代码的选项使我们可以通过使用形状和文本层来高精度地设计网站。 每层的内容将被复制到剪贴板,我们可以将其快速粘贴到样式表中。 从形状图层捕获以下设置的值:

  • 大小
  • 位置
  • 描边颜色
  • 填充颜​​色(包括渐变)
  • 阴影

在文本层中,我们可以捕获以下值:

  • 字体系列
  • 字号
  • 字体粗细
  • 线高
  • 带下划线的
  • 删除线
  • 上标
  • 下标
  • 文字对齐

请记住这一点并设置每个值以提供您想要的样式。

处理图层组

此功能将我们的工作翻译成两种类型的类,一种用于将形状或文本层组合在一起的每个组,另一种用于这些类型之一的每一层的类。 每个组类将代表一个父div元素,该元素将包含与每个组中插入的图层相对应的子div元素。 这样,将通过引用父容器来设置子容器的顶部和左侧的值。 您应该记住,此选项不适用于智能对象,并且除非将它们分组,否则它将不能同时应用于多个图层。

转换步骤

制作完模型,自定义每个元素并按组对它们进行分组后,只需执行以下步骤:

 

  • 转到图层面板,然后选择以下两个选项之一:
    • 右键单击形状或文本图层或一组图层,然后选择 复制CSS 在上下文菜单中。
    • 选择形状或文本图层或一组图层,然后选择选项 复制CSS 在“图层”面板菜单中。
  • 将代码粘贴到样式表文档中,然后通过html5将其应用于页面。

    CSS-Photoshop1

    CSS-Photoshop2


本文内容遵循我们的原则 编辑伦理。 要报告错误,请单击 信息.

成为第一个发表评论

发表您的评论

您的电子邮件地址将不会被发表。 必填字段标有 *

*

*

  1. 负责数据:MiguelÁngelGatón
  2. 数据用途:控制垃圾邮件,注释管理。
  3. 合法性:您的同意
  4. 数据通讯:除非有法律义务,否则不会将数据传达给第三方。
  5. 数据存储:Occentus Networks(EU)托管的数据库
  6. 权利:您可以随时限制,恢复和删除您的信息。