photoshop使用技巧
在本教程中，我将引导您完成在Photoshop中创建复杂的Web元素样式的过程，但不要在完成的网站中使用单个图像文件。 完成后，您将拥有一个页面布局，其中包含您在上方预览图像中看到的所有UI元素，仅使用CSS3，Base64代码和字体图标。
通过创建“无图像”设计，您可以将加载时间和HTTP请求计数保持在绝对最低限度，同时在UI元素中实现最高程度的灵活性。 纯代码UI元素可以通过CSS轻松快速地进行调整，而无需手动编辑和重新导出静态图像就可以。
为了实现这一切，我们将使用四个关键资源：
- CSSHat
由Source制作的Photoshop插件，可直接从Photoshop图层生成CSS3。
- PNGHat
Photoshop插件，也由Source制作 ，可将任何图像转换为Base64代码。
- 减
CSS预处理程序，使编码工作轻松了成倍[ *]。
- 字体真棒
流行的基于字体的图标集合。
*如果愿意，可以使用其他预处理器。
通过将这些元素放在一起，可以生成实际上与原始PSD相同的纯代码设计：
本教程将分为两部分：
- 该设计。
- 代码生成。
在第一部分中，我们将演示创建CSS3和Base64友好设计时可以在Photoshop中使用的技术类型。 尽管这些天我们可以用纯代码实现很多事情，但是我们还不能完全翻译您在Photoshop中可能找到的所有内容。 因此，在出发时一定要牢记“要做”和“不要做”。
让我们开始简要概述CSSHat和PNGHat，这是我们将用来生成CSS3和Base64代码的Photoshop插件。
CSSHat和PNGHat简介
CSSHat
安装了CSSHat插件后，您可以单击Photoshop文档中的任何层，CSSHat窗口将立即为您输出生产就绪的代码。
CSSHat主要从图层样式设置中进行解释，因此您应该旨在通过图层样式而不是Photoshop的替代方法来添加渐变和边框。
CSSHat可以解释的Photoshop属性：
- 渐变/纯色填充层
- 渐变叠加
- 阴影
- 文字层
- 内心的阴影
- 内部发光
- 外发光
- 颜色叠加
- 中风
- 边框半径
- 不透明度
CSSHat可以输出的代码
- 符合标准CSS3，包括渐变，阴影，文本阴影等。
- 供应商前缀（可选）
- 宽度和高度（以
px（可选） - 字体属性：
font-family，font-size，font-weight (bold/normal)，font-style - 使用LESSHat mixins更少
- Sass / SCSS与Compass mixins
- 带有Nib mixins的手写笔
- IE9的SVG渐变
- 包装到以Photoshop图层命名的类（可选）
- CSS圈子
- 框阴影和文本阴影
CSSHat无法使用的功能：
- 诸如乘法和叠加之类的混合模式-始终将阴影等的混合模式设置为正常。
- 模式叠加-我们将使用PNGHat处理背景图像代码生成。
- 每边单独的边框属性-由于Photoshop只能统一设置边框的所有边。
- CSS三角形
- 数字字体粗细设置，例如100、700等。
PNGHat
PNGHat可以做很多事情。 退房 如何使用PNGHat将Photoshop资产导出到Web以获得插件的完整摘要 。
在本教程中，我们将使用它来生成Base64代码 ，该代码将形成设计的背景图像。 您很快就会看到这在实践中如何工作。
将图像转换为Base64后，您将获得一个文本字符串，然后可以将其直接合并到CSS中。 图像中的数据越多，字符串越长，因此，Base64最适合于几乎没有颜色的简单平铺图像。
入门
为了使事情顺利进行，您需要做一些事情。
Photoshop插件
首先，您应该安装CSSHat和PNGHat插件。
如果您无法购买CSSHat的副本，则仍然可以继续使用并使用Photoshop内置的“复制CSS”功能，可以在右键单击任何层后从上下文菜单中选择该功能。
但是，在这种情况下，您将必须为绝对定位，z-index，尺寸和类名之类的内容手动删除不需要的默认代码。 它也不能处理多个阴影和渐变以及CSSHat的生成，并且不能生成LESS，Sass / SCSS或Stylus就绪代码。
如果您不能购买PNGHat，则可以手动导出背景图像，然后通过在线转换器将其放入，例如： http ://webcodertools.com/imagetobase64converter
我也强烈推荐Source中的第三个插件Subtle Patterns 。 添加的此插件为Photoshop添加了数百种图案的库，每个图案都可以作为图案叠加立即应用于任何图层。
作为使用“微妙模式”插件的替代方法，您可以浏览模式并免费下载。
注意：我知道您可能想知道-Source 的很多内容，这是赞助帖子吗？ 不会。事实是，我早在开始为Tuts +撰写文章之前就购买了Source的整个产品系列，由于它们增加了我的工作时间，我非常喜欢其中的每一个。 我建议使用这些插件，因为我对整个套件的亲切印象深刻。
字体真棒＆Roboto
我们将通过Font Awesome将一些图标放入您的设计中，因此您需要下载字体并将其安装到系统上。
我们常规文本的字体选择是Roboto，因此您也需要安装它。 您可以从Google Webfonts中获取它 。
新的PSD和背景图片
在大小创建一个新的Photoshop文档1600px X 2180px 。 双击默认的“背景”层将其解锁，然后保存您的PSD。
在“ 微妙图案”窗口（或网站）中，搜索缎纹编织 。 找到它后，在选择“ 背景”层的情况下，单击图案的图块以将其自动应用为图案叠加层。
现在，您应该在画布上看到一些细微的灰度垂直线。 我们选择此模式非常适合转换为Base64，因为它使用的颜色很少，并且大小仅为24px x 12px，这意味着它将生成相对较小的代码字符串。
添加顶部装饰
为了帮助构建页面框架，请在画布顶部创建一个矩形，以全宽和8px高的高度运行。 为其提供以下属性：
填充颜色： #dddddd
不透明度： 50%
图层样式>内部阴影：
- 混合模式：
Normal - 颜色：
#c8c8c8 - 不透明度：
100% - 角度：
-90 - 距离：
2 - 大小：
4
图层样式>阴影：
- 混合模式：
Normal - 颜色：
#ffffff - 不透明度：
100% - 角度：
90 - 距离：
2 - 大小：
1
您的“顶部装饰”应如下所示：
创建菜单
通过创建此菜单，我们将看到可以使用渐变，阴影和笔触创建的一些效果。 我们正在寻找一个干净的凸起菜单，该菜单位于嵌入式包装纸中。
1.菜单包装
首先，我们将创建用于保存菜单的插入包装器。 在画布上以1200px宽x 61px高的高度创建一个中心对齐的圆角矩形。 设置以下属性：
填充颜色： #f9f9f9请注意，即使此矩形上会出现渐变，我们仍然希望将填充颜色设置为后备颜色。
属性>活动形状属性> 角半径： 12px
图层样式>内部阴影：
- 混合模式：
Normal - 颜色：
#000000 - 不透明度：
15% - 角度：
90 - 距离：
1 - 大小：
10
图层样式>渐变叠加：
- 颜色>位置，0％：
#ffffff - 颜色>位置，100％：
#f3f3f3 - 风格：
Linear
图层样式>阴影：
- 混合模式：
Normal - 颜色：
#ffffff - 不透明度：
100% - 角度：
90 - 距离：
1 - 大小：
2
您的菜单包装器现在应如下所示：
2.菜单背景
在菜单包装上方创建第二个圆角矩形， 1190px宽度为1190px ，高度为50px ，其左上角比菜单包装的左上角靠右5px 。 添加以下属性：
填充颜色： #ffffff
属性>活动形状属性> 角半径：10 10px
图层样式>描边：
- 大小：
1 - 职位：
outside - 颜色：
#e4e4e4
图层样式>渐变叠加：
- 颜色>位置，0％：
#e5e5e5 - 颜色>位置，100％：
#ffffff - 风格：
Linear
图层样式>阴影：
- 混合模式：
Normal - 颜色：
#c1c1c1 - 不透明度：
100% - 角度：
90 - 距离：
3 - 大小：
4
您现在应该拥有：
3.添加菜单项
创建另一个矩形，这次在130px宽51px高，直接在你的“菜单背景”栏的顶部。 给它这个渐变叠加：
图层样式>渐变叠加：
- 颜色>位置，0％：
#efefef - 颜色>位置，25％：
#e4e4e4 - 颜色>位置，100％：
#fcfcfc - 风格：
Linear
现在添加一些占位符文本：输入单词“ Page”并将其放置在菜单项的中间，并进行以下设置：
字符>字体：机械手 Roboto, Regular
字符>字体大小：18 18px
角色>颜色： #5c5c5c
图层样式>阴影：
- 混合模式：
Normal - 颜色：
#ffffff - 不透明度：
100% - 角度：
90 - 距离：
1 - 大小：
0
您的菜单项应如下所示：
4.创建“当前”菜单项样式
复制菜单项的矩形和文本，然后将其向右移动，使其紧邻原始菜单。 编辑文本，使其显示为“当前”。
将矩形的图层样式属性设置为：
图层样式>描边：
- 大小：
1 - 职位：
outside - 颜色：
#e62d4ee4e4e4
图层样式>内部阴影：
- 混合模式：
Normal - 颜色：
#faabb9 - 不透明度：
60% - 角度：
90 - 距离：
3 - 大小：
5
图层样式>渐变叠加：
- 颜色>位置，0％：
#ef3d5d - 颜色>位置，25％：
#dc2345 - 颜色>位置，100％：
#fc6c86 - 风格：
Linear
图层样式>阴影：
- 混合模式：
Normal - 颜色：
#cc2241 - 不透明度：
100% - 角度：
90 - 距离：
1 - 大小：
0
然后将您的文本颜色和阴影设置更改为：
字符>颜色： #ffffff
图层样式>阴影：
- 混合模式：
Normal - 颜色：
#b50020 - 不透明度：
100% - 角度：
90 - 距离：
1 - 大小：
0
完成上述操作后，请对原始“菜单项”进行更多复制，然后将其放置在“当前菜单项”的右侧。 我们这样做是为了查看菜单项样式彼此齐平放置时的外观，以确保从一项到另一项之间有足够的视觉分隔。
不幸的是，Photoshop无法设置“ border-left”之类的内容，因此我们不能直接在菜单项矩形上设置左右边框。 但是，我们仍然需要模拟效果，以便我们可以在每个项目之间创建分隔。 使用Photoshop的线条工具在菜单项之间绘制一些1px宽的垂直线，并将其填充颜色设置为#dddddd
具备所有这些元素之后，您应该具有：
添加主要文字
如果您正在为客户使用这种布局，则可以在该区域中添加其主要兴趣挂钩或号召性用语。 就本教程而言，添加以下四行，所有行均位于页面的中心：
- 你知道吗
- 有你的Photoshop
- 和你的
- 纯粹的代码呢？
给第一行和第三行进行以下设置：
字符>字体：机械手 Roboto, Thin
字符>字体大小： 48px 像素
角色>颜色： #6b6b6b
然后为第二和第四行提供以下设置：
字符>字体： Roboto, Bold
字符>字体大小： 80px
角色>颜色： #ef3d5d
您的文本现在应如下所示：
添加信息面板
1.创建面板背景
下面的正文中，创建一个圆角矩形1200px的宽665px高。 进行以下设置：
填充颜色： #ffffff
属性>实时形状属性> 角半径： 15px
图层样式>描边：
- 大小：
1 - 位置：
inside - 颜色：
#d8d8d8
图层样式>阴影：
- 混合模式：
Normal - 颜色：
#c1c1c1 - 不透明度：
27% - 角度：
90 - 距离：
3 - 大小：
4
2.创建面板标题背景
然后，在面板背景顶部下方60px处，创建另一个圆角矩形。 它应该是1230px宽和70px高。 将其在画布上居中，以便在面板背景的任一侧突出15px 。 为其提供以下属性：
填充颜色： #ef3d5d
属性>活动形状属性> 角半径：10 10px
图层样式>内部阴影：
- 混合模式：
Normal - 颜色：
#de2a4a - 不透明度：
60% - 角度：
90 - 距离：
0 - 大小：
5
图层样式>渐变叠加：
- 颜色>位置，0％：
#ef2c4f - 颜色>位置，10％：
#dc2345 - 颜色>位置，100％：
#fc6c86 - 风格：
Linear
图层样式>阴影：
- 混合模式：
Normal - 颜色：
#cc2241 - 不透明度：
100% - 角度：
90 - 距离：
3 - 大小：
0
3.创建面板标题背景的第二个阴影
我们已经在刚刚创建的矩形上设置了阴影，这将为其提供微妙的3D效果。 但是我们还希望有第二个阴影，看起来像筒灯投射的实际阴影。 因为我们已经“用完”了现有矩形的阴影属性，所以我们需要创建第二个矩形以向其应用第二个阴影。
复制您的面板背景矩形并将其拖到“图层”面板中的原始矩形下方，然后清除其现有的图层样式。 将其命名为“ panelheadershadow”，以便您可以轻松区分这两层。 为其提供以下投影设置：
图层样式>阴影：
- 混合模式：
Normal - 颜色：
#000000 - 不透明度：
27% - 角度：
90 - 距离：
5 - 大小：
3
4.创建面板标题文本
直接在面板标题背景的中间输入“此教程：”，然后为文本提供以下设置：
字符>字体：机械手 Roboto, Regular
字符>字体大小：24 24px
字符>颜色： #ffffff
图层样式>阴影：
- 混合模式：
Normal - 颜色：
#b50020 - 不透明度：
100% - 角度：
90 - 距离：
1 - 大小：
0
5.创建面板文本
最后，添加以下文本行：
- 了解如何在Photoshop中进行设计和输出
标准就绪的纯CSS3 + Base64代码。
这意味着没有图像和最少的HTTP
要求超高效的加载。 - CSSHat + PNGHat + LESS + FontAwesome
将第一批文本设置为：
字符>字体：机械手 Roboto, Thin
字符>字体大小： 36px 像素
角色>颜色： #6b6b6b
第二段文字为：
字符>字体： Roboto, Black
字符>字体大小： 48px 像素
角色>颜色： #6b6b6b
然后突出显示每个“ +”符号并将其颜色设置为： #ef3d5d
您现在应该拥有一个信息面板，如下所示：
添加大向下箭头
这是我们将开始使用Font Awesome的地方。 我们将放置“ fa-down-arrow”图标，并使用它代替图像。
最简单的方法是通过转到Font Awesome速查表将适当的“字母”放入缓存。 找到“ fa-down-arrow”图标，然后突出显示小图像预览并按CTRL / CMD + C
返回画布，使用文本工具放置光标，然后粘贴刚刚复制的字符。 首先，您会看到一个有趣的小矩形，上面有一个十字，因此请将您的设置更改为：
字符>字体： FontAwesome
字符>字体大小： 200px 像素
角色>颜色： #6b6b6b
确保箭头在画布上居中，并将图层的不透明度设置为30% 。 您现在应该拥有一个很酷的箭头：
添加“开始”按钮
1.按钮背景和第二个阴影
创建一个新的圆角矩形，宽420px x高105px 。 该按钮将使用与“面板标题背景”完全相同的图层样式属性，因此您可以简单地复制这些图层样式。 右键单击面板标题背景的图层，然后选择“复制图层样式”，然后右键单击新的按钮图层，然后选择“粘贴图层样式”。
就像我们在面板标题背景上所做的一样，我们想要为此按钮创建另一个矩形，该矩形可以应用第二个阴影。 复制您的按钮图层并将其拖动到图层面板中原始图层的下方，然后将其重命名为“ button shadow ” 。 从先前创建的“ panelheadershadow”层复制该层样式，然后将其粘贴到新的“ button shadow ”层上。
2.按钮圆圈和向右箭头
我们将在按钮上添加一个小圆圈，看起来像一个小凹陷，然后在其上方设置一个向右的白色箭头。
在按钮上方以47px x 47px创建一个圆圈（椭圆）。 对其进行定位，使其与按钮背景的顶部，左侧和底部边缘的距离相等，然后为其提供此渐变叠加：
图层样式>渐变叠加：
- 颜色>位置，0％：
#f04f6c - 颜色>位置，100％：
#e32d4f - 风格：
Linear
为了创建向右的箭头，我们将再次使用FontAwesome。 回到备忘单 ，这次复制fa-caret-right图标。 在画布上，使用文本工具将光标放置在刚创建的圆上，然后粘贴到Font Awesome图标/字符中。 为其提供以下属性：
字符>字体： FontAwesome
字符>字体大小： 36px 像素
字符>颜色： #ffffff
将新创建的白色箭头置于其上方的圆的中心。
3.创建按钮文本
在按钮的顶部，圆圈和箭头的右侧，键入“开始教程”，然后为文本提供以下设置：
字符>字体：机械手 Roboto, Regular
字符>字体大小： 36px 像素
字符>颜色： #ffffff
该文本使用与“面板标题文本”相同的阴影，因此您可以从该文本复制样式并将其粘贴到此图层上。
现在，您应该拥有一个如下所示的按钮：
添加底部修剪
现在，我们将添加设计的最后一个元素，在底部进行一些修剪以完成对空间的框架。 对这个元素进行编码后，我们将使用单独的顶部和底部边框设置，但是由于Photoshop无法做到这一点，我们将再次使用形状工具，以便获得正确的颜色。
在开始按钮下方，创建一个填充色为#dddddd的矩形，该矩形的#dddddd为5px并拉伸页面的整个宽度。 复制新矩形并将其向下移动10 10px以便两个矩形之间有5 5px间隙。
在画布的中心并在两条灰色线/矩形上方，绘制一个40px x 40px的圆，并为其提供以下属性：
填充颜色： #f2f2f2
图层样式>描边：
- 大小：
5 - 位置：
inside - 颜色：
#dddddd
图层样式>渐变叠加：
- 颜色>位置，40％：
#dddddd - 颜色>位置，45％：
#f2f2f2 - 风格：
Radial
请特别注意渐变叠加设置，因为它们与我们之前使用的设置不同。 色标放置在40％和45％处，而不是0％和100％，并且我们使用的是径向渐变而不是线性渐变。 连同边框/笔触，这产生了由较大的灰色圆圈包围的小灰色圆圈的效果。
您的底部装饰应如下所示：
全做完了！
现在，您应该已经完成了PSD设计，可以100％准备将其转换为纯CSS3和Base64代码：
接下来
在本教程的以下部分中：
- 您将为设计设置HTML。
- 您还将使用免费的Windows＆Mac应用Prepros设置一个简单的，自动编译的 LESS项目（无命令行）。
- 我们将合并LESSHat和Normalize.less
- 然后通过FontAwesome.less也可以访问Font Awesome。
- 您将把背景图像转换为Base64并将其合并到您的LESS代码中。
- 之后，将所有设计元素转换为CSS3，并将它们添加到您的LESS代码中。
- 最后，您可以向后靠在椅子上，对自己留下深刻的印象
那一会儿见！
photoshop使用技巧
扫一扫
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
