使用图层样式和智能对象创建Photoshop图形

在本教程中,我们将为8izz(一个虚构的iPhone应用程序)的网站设计图形。我将探索如何使用Photoshop的图层样式和智能对象来创建干净的企业图形元素,您可以为自己的设计项目重新定位,包括网站的演示区域和订单按钮;分隔符分割网站内容;以及带有自定义圆角的媒体播放器。

下面,您可以看到该网站的完整模型。您可以在本教程的整个过程中看到要构建的各个元素的特写。

The complete design for the fictitious 8izz app. In this tutorial, we will explore how to recreate some of its design elements

虚构的8izz应用程序的完整设计。在本教程中,我们将探索如何重新创建其一些设计元素

1.演示区域

我们首先在模型顶部创建灰色表示区域。我们还将为iPhone图形创建一个虚假的自定义投影。

让我们通过打开一个新的Photoshop文档来开始我们的布局。选择文件>新建或使用其中之一Cmd + N.要么Ctrl + N.,取决于您是在Mac OS X还是Windows中工作。

将宽度设置为1200像素,将高度设置为1800像素(我们将使用所有图层的像素,除了文本,我们将使用点)。设置12列网格:我建议使用Nathan Smith的960网格模板,您可以从中免费下载他的网站。 (安装说明包含在下载中。)您可以通过以下方式激活或停用网格Cmd / Ctrl +;捷径。

下一步是向演示区域添加背景图案。我正在使用免费的vertical_cloth模式微妙的模式网站,但你可以使用自己的一个。打开图像,选择>全部,选择“编辑”>“定义图案”,然后单击“确定”。

现在通过转到将背景图层添加到背景图层图层>图层样式>图案叠加或者只需双击“图层”调板中的图层,然后从“图层样式”对话框中选择“图案叠加”选项。 (注意:如果您没有看到“图层样式”选项,则可能需要通过在“图层”调板中右键单击背景并从背景中选择“图层”来将背景转换为普通图层。您需要在对话框中选择vertical_cloth模式,您可以通过单击Pattern图形(如下所示)来打开一组样本。

Preparing the work surface of the presentation area with a Pattern Overlay

使用图案叠加层准备演示区域的工作表面

转到,创建一个新的图层组图层>组图层或者按Cmd / Ctrl + G.。将它放在标题上方并命名主要内容(在“图层”调板中右键单击它,然后选择“组属性”以重命名它)。在其中,创建另一个名为的组介绍

现在选择圆角矩形工具(U)。从屏幕顶部的设置栏中,将其设置为10px Radius和#606060 Color。画一个960 x 430px的形状,命名它演示基地并添加以下图层样式:

  • 投影:普通混合模式,40%不透明度,120°角度,使用全局光源,1px距离,3px尺寸(将所有其他设置保留为默认值)
  • 内阴影:正常混合模式,50%不透明度,93°角度,2px距离,3px尺寸
  • 渐变叠加:叠加混合模式,20%不透明度,从#000000到#ffffff的渐变100%不透明度(您可以通过单击“渐变”图形打开“渐变编辑器”来编辑这些设置),线性样式并与图层对齐,145°角度
  • 行程:1px尺寸,外部位置,普通混合模式,100%不透明度,#1f1f1f颜色

结果应如下所示:

The completed base for the presentation area

完成的演示区域基础

要将这些设置保存为样式,请转到“样式”调板,单击调色板底部的“创建新样式”图标,然后将其命名为基本款式。这使您可以稍后使用相同的设置,方法是选择要应用它的图层,然后从菜单中单击所需的样式。

Defining a new style from our Presentation Base graphic

从Presentation Base图形定义新样式

不要忘记将演示区域与网格对齐!

现在添加iPhone 4s模型(您可以免费下载它Pixeden)。从下载中打开iPhone-4S-black-3views-mockup.psd,选择iPhone 4S(黑色)组,然后拖放它并将其排列在Presentation Base中,留下90px左边距和45px下边距。

我们将为iPhone创建一个新的阴影,因此从iPhone 4S(黑色)组中删除阴影和反射图层(您可以通过在图层调色板中右键单击它们并选择删除图层来完成此操作)。现在选择椭圆工具(U)并创建尺寸为220px×H:7px的形状,颜色设置为#00000。通过右键单击图层并选择“转换为智能对象”选项,将此图层转换为智能对象。去滤镜>模糊>高斯模糊并将Radius设置为6px,以使其看起来像阴影。

Adding Gaussian Blur to the shadow

将高斯模糊添加到阴影中

如果要将文本添加到演示区域,可以使用水平类型工具(T)设置为Myriad Pro Semibold,48pt,Sharp来创建标题。从“图层样式”对话框中应用“投影”,设置为“正常混合模式”,“40%不透明度”,“120°角度”,“使用全局光”,“1px距离”,“3px尺寸”,“#f5f5f5颜色”。将文本与网格对齐,留下30px的左边距和20px的上边距。

现在写下正文,使用DejaVu Sans Book,夏普,12pt将它放在标题下40px。 (您可以免费下载该字体这里。)将前导设置为18pt(单击顶部栏中的图标以切换“字符”和“段落”面板,或选择窗口>字符)并使用Color#f5f5f5。

要添加图层样式,请选择标题文本图层,右键单击它并选择“复制图层样式”,然后转到当前文本图层,右键单击它并选择“粘贴图层样式”。或者,以与先前相同的方式手动创建新的图层样式。

完成的演示区域应如下所示:

The completed presentation area

完成的演示区域

2.创建订单按钮

从头开始创建按钮并不难。我们将重新创建以下设计:

The order button we will be trying to recreate

我们将尝试重新创建的订单按钮

首先在Presentation组中创建一个新组并命名它按键。将圆角矩形工具设置为10px半径和#262626颜色,绘制尺寸为90 X 70px的形状并命名为价格标签。从“图层样式”对话框中,添加“内部阴影”,“正常混合模式”,“45%不透明度”,“50°角度”,“2px距离”和“5px”。

使用Myriad Pro Bold,Sharp,24pt和Color设置为#f5f5f5添加显示价格的文本。从“图层样式”对话框中,应用以下设置:

  • 投影:普通混合模式,40%不透明度,120°角度,使用全局光,1px距离,3px尺寸
  • 内阴影:普通混合模式,25%不透明度,120°角度,使用全局光,1px距离,2px尺寸
  • 内发光:普通混合模式,15%不透明度,100%至0%不透明度和#ffffff颜色,1px尺寸

The completed price tag

完成的价格标签

要创建按钮的“在iPhone App Store上可用”部分,请使用设置为10px Radius和#d4e945 Color的圆角矩形工具。绘制尺寸为240 x 80px的形状并命名按键

我现在将向您展示一种更改此矩形圆角的精确方法。选择了按钮矢量蒙版缩略图(在“图层”调板中单击它以选择或取消选择它)。使用带有形状图层的矩形工具和添加到如下所示选择的路径区域(+),创建一个将填充角落的正方形,使其非常清晰。将此更改应用于右角。

A more precise way of changing the rounded corners of the button

更精确的更改按钮圆角的方法

对于这个按钮,我们将创建一个新模式,所以按Cmd / Ctrl + N.创建宽度为5px,高度为5px的新文件。选择铅笔工具(B),将尺寸设置为1px,将硬度设置为100%并绘制斜线,如下所示。

Defining the button's pattern and setting its Layer Style

定义按钮的图案并设置其图层样式

现在去编辑>定义图案并命名您的模式,然后返回上一个文件,将以下图层样式效果添加到“在iPhone App Store上可用”按钮:

  • 投影:乘法混合模式,15%不透明度,90°角度,1px距离,1px尺寸
  • 内阴影:普通混合模式,#fffffff颜色,90°角度,1px距离,1px尺寸
  • 斜面和浮雕:内斜面样式,平滑技术,100%深度,2px尺寸,90°角度,高光模式0%,阴影模式10%
  • 渐变叠加:乘法混合模式,30%不透明度,从#000000到#ffffff颜色的渐变100%不透明度,150%比例
  • 图案叠加:乘法混合模式,10%不透明度,并从图案样本中选择刚刚制作的图案
  • 笔划:1px尺寸,内部位置,正常混合模式和填充类型设置为渐变,100%不透明度从#8a8a8a到#767676颜色和反向选择,线性样式,90°角度

拖放Available_on_the_App_Store_(灰色).png(可从维基百科)在按钮形状的顶部并按如下方式编辑智能对象:转到选择>颜色范围,将模糊度设置为200并选择背景灰色并将其更改为#d4e945。使用相同的技术,选择白色并将其更改为#272827。

Changing the colours of the 'Available on the iPhone App Store' badge

更改“在iPhone App Store上可用”徽章的颜色

按下可调整App Store徽章的大小Cmd / Ctrl + T.或者去编辑>自由变换通过在W和H字段中键入此值,将徽章缩小到80%。居中吧。出现提示时应用转换。为了使徽章与按钮的底部完美融合,我们将使其成为剪贴蒙版。右键单击App Store徽章图层,然后选择“创建剪贴蒙版”。

现在让我们通过选择渐变工具(G)给按钮一个很好的渐变效果。从“渐变编辑器”中,将“颜色”设置为“#ffffff”,并使左侧为100%不透明度,右侧为0%不透明度。从屏幕顶部的“渐变”工具栏中选择“角度渐变”图标,并将“不透明度”设置为10%。按下创建一个新图层Shift + Cmd / Ctrl + N.。选中图层后,按住CMD / Ctrl键然后单击“按钮”图层的“矢量蒙版”缩略图,将梯度图层的动作限制为该特定形状。现在将渐变从右下角拖动到左上角。结果应如下所示:

The order button, complete with its Angle Gradient

订单按钮,带有Angle Gradient

最后,适当地定位按钮,留下20px的右下边距。

3.制作一些很棒的分隔符

接下来,我们将创建一些线性分隔符来划分设计的不同部分,如下图所示:

A custom separator in action to divide two testimonials

一个自定义分隔符,用于分隔两个推荐

创建一个新的图层组并命名分离器

我们将通过使用线条工具(U)创建水平线性形状来开始设计分隔符。对于较短的垂直分隔符,请使用尺寸1 x 960px(您可以使用1px的重量设置)和颜色设置为#585858。将其排列在文本框下方40px处,并从“图层样式”对话框中应用如下所示的“渐变叠加”设置:

The Gradient Overlay settings for the separators

分隔符的“渐变叠加”设置

复制图层,将形状颜色和渐变叠加设置更改为#101010,并将此新行放在第一个下面。

选择这两个图层并将它们转换为智能对象,并命名为此分隔符1

对于较长的水平分隔符,复制分隔符1图层(右键单击“图层”调板和“复制图层”),将副本调整为1 X 200px,将其旋转90°(同样,您可以使用编辑>自由变换路径)并复制这个。下面,您可以在完成的模型中看到这些分隔符。 (我们不会在这里讨论如何创建文本和图标。)

The completed separators in action

已完成的分隔符正在运行中

4.设计自定义媒体播放器

接下来,我们将创建一个带圆角的自定义媒体播放器图形,如下所示:

The custom player we will recreate in this tutorial

我们将在本教程中重新创建的自定义播放器

创建一个新的图层组,命名它播放机并将其放在主要内容下。

对于框架,请使用圆角矩形工具。创建尺寸为550 x 355px和#c2c2c2颜色的形状。命名图层,并应用以下图层样式设置:

  • 投影:普通混合模式,40%不透明度,120°角度,使用全局光,1px距离,3px尺寸
  • 内阴影:普通混合模式,#fffffff颜色,20%不透明度,120°角度,使用全局光,2px距离,0px尺寸
  • 斜面和浮雕:内斜面样式,平滑技术,50%深度,3px尺寸,120°角度,使用全局光线,高光模式50%
  • 渐变叠加:叠加混合模式,20%不透明度,从#000000到#ffffff的渐变100%不透明度颜色,线性样式,145°角度,100%比例
  • 行程:1px尺寸,内部位置,正常混合模式,颜色填充类型,#474947颜色

The frame in progress

正在进行的框架

要创建圆角,请绘制尺寸为26 x 28px且颜色为#585858的矩形。使用直接选择工具(A),选择右下角并将其移向矩形的中心以获得三角形。使用多边形套索工具(L)在其最长边上切割现有的斜角三角形。宽度为8px,高度为9px。 (使用下面的图像作为参考。)对帧应用相同的内阴影,渐变叠加和笔触设置。

The custom corner for the player

播放器的自定义角落

命名图层C1(如'角1'),复制三次,自由变换每个重复以适应帧的不同角落,并使它们成为帧图层的所有剪切蒙版。

创建一个新的图像持有人图层,使用与以前相同的方法。这是一个532 X 336px矩形,#262726颜色,没有图层样式。添加您想要在播放器中显示的图像(这可以是您喜欢的任何内容:我们没有提供一个)并使其成为剪贴蒙版。

在图像支架的底部,在图像上方,添加尺寸为532 X 85px的矩形,将不透明度设置为60%并命名图层文字持有人

使用Myriad Pro Bold,Sharp,14pt为播放器底部写一些叠加文字。将前导设置为18pt,将Color设置为#f5f5f5并将其置于上一层之上,使其垂直居中并留下20px的左边距。应用与我们用于价格标签的投影设置相同的投影设置。

对于播放器按钮,选择自定义形状工具(U),使用#ffffff颜色从弹出菜单中选择圆形细框,并创建尺寸为120 x 120px的形状。从“图层样式”对话框的“笔触”设置中,将“大小”设置为1px,将“位置”设置为“外部”,将“颜色”设置为“#ffffff”。使用相同的工具选择三角形状(您可能需要单击弹出菜单右侧的小箭头图标并选择全部,然后才能看到它)。使用与圆相同的设置和图层样式,创建一个31 x 36px的三角形。将这两个图层转换为智能对象,将它们居中并命名图层球员箭头

The completed player and its Layer Groups

完成的播放器及其图层组

这就是我们的定制图形完成。尝试这些技巧玩得开心!测试并使它们适应您的新设计并创造出惊人的效果。

资源

以下免费资源用于创建教程中显示的图形:

以下资源用于创建模型的其余部分,但对于教程本身不是必需的:

别忘了查看最新功能Photoshop CS6



翻译字数超限