数字营销
加载的结果……
预览
点击图片查看全面．
步骤1:创建一个新的Photoshop文档
转到文件>新建，设置你的选项如下所示，并点击确定。注意背景内容选项被设置为透明的，它会自动为我们创建一个透明的层，默认命名为“layer 1”。
步骤2:设置背景样式
让我们创建一个光滑的背景，将补充我们的价目表。使用油漆桶工具(G)填充透明的“第一层”图层，与任何你想要的颜色。
然后双击图层面板中的图层打开图层样式对话框窗口。
添加一个光滑的深灰色到浅灰色垂直梯度叠加。
下面是我们的背景:
步骤3:建立中间价格列
我们将总共构建3个价格列，中间的价格列将比其他两个价格列略大，以便为用户选择提供最佳方案。这是一种流行的定价表设计模式，其中建议的定价计划比其他计划更有特色。
选择圆角矩形工具(U)，确保你在形状图层模式(查看选项栏再次检查)，半径为10px，画一个大小为200x330px的矩形。
双击图层面板中的圆角矩形图层，打开图层样式对话框窗口。给圆角矩形一个内发光，一个渐变叠加，一个描边。
内发光
渐变叠加
中风
图层样式的结果如下所示:
我们现在要为定价计划名称创建一个小圆角矩形，它将成为一个环绕的3D ribbon(另一个流行的网页设计趋势)。
在价格列的顶部，用圆角矩形工具创建一个半径为5px，尺寸为130x40px的圆角矩形。
给小矩形一个投影和渐变叠加。
阴影
渐变叠加
使用钢笔工具(P)在小圆角矩形的两侧绘制小对角褶叶(如下所示)。
这将使它看起来好像是围绕着价格列。
用水平文字工具(T)，用你自己选择的字体(20px，白色为文本颜色)，写下平面图的名字(在本例中，平面图名为“Standard”)。我使用的字体是Myriad Pro，但你可以使用任何你想要的字体。
给文本层一个漂亮的，平滑的阴影和灰色的颜色覆盖。
阴影
颜色叠加
接下来，在计划名称下面添加价格细节(如下所示)。对所有的文本使用相同的字体是个好主意，只是样式不同而已。
给文本一个灰色的颜色叠加和一个漂亮的投影。
现在，在这个价格之下，我们将设计一份包含在“标准”计划中的功能清单。
在每个列表项下面，画2条高为1px的直线。使第一行比背景暗，另一行比背景浅，这将创建一个很好的嵌入效果(一个流行的技术，边界和分隔)。
接下来，让我们创建一个现代和圆滑的网页按钮。用圆角矩形工具(U)，半径为5px，在定价栏的底部创建一个100x38px的矩形。
给按钮一个投影，一个渐变叠加和一个描边。
阴影
渐变叠加
中风
为了使按钮有光泽，我们必须在顶部给它一个玻璃反射。
我将向你展示一个简单的技巧，你可以在许多平面设计的情况下使用。
首先，在图层面板中按ctrl / cmd点击按钮层的缩略图，在它周围加载一个选区。
现在，选择矩形选框工具(M)。在选项栏中，选择矩形选框工具与选择相交模式。在当前选区的上半部分绘制选区，这将减少选区，从而只选中按钮的上半部分。
创建一个新图层，用油漆桶工具(G)，用白色填充选区。
降低新图层的不透明度为10%。
现在我们将在web按钮上添加一个顶部描边。为顶部描边创建一个新图层。近距离放大，更容易看到您的工作。
画一条浅灰色的线，如下图所示。
用水平文字工具添加一些文字，如“Sign Up”或“Join Us”。我使用了所有的大写字母，并设置了一个黑色的阴影。
现在我们已经完成了其中一个价格列。
步骤3:创建其他价格列
现在我们已经创建了一个价格列，我们可以简单地复制它，并对副本进行修改。
首先，在图层面板中，选择除背景图层外的所有图层，并将它们放入一个图层组(图层>组图层)。
然后复制图层组2次，并将它们并排排列(如下所示)。修改新列的详细信息，使它们彼此不同。
第四步:放大中间价格栏
为了使中间的列突出，在图层面板中单击它的图层组，使它成为活动层，然后使用自由变换(Ctrl/Cmd + T)将其放大。确保中间一列的图层组在其他图层组之上。
为了使盒子更明显，修改按钮和价格的渐变叠加层效果与任何你想要的颜色。
我用了蓝色。
第五步:最后的润色
我将向您展示如何在价格列下添加一些漂亮的阴影。选择椭圆工具(U)绘制一个黑色的，短而宽的椭圆，如下图所示:
为了软化形状，使用滤镜>模糊>高斯模糊。4px半径应该足够了。
把阴影层放在背景层的上方。
复制形状两次，这样每个价格列都有3个阴影。将形状放置在每一列下面。
教程汇总
我们刚刚到达教程的末尾。我希望你喜欢它，如果你有任何问题，请在下方评论!
我们涵盖了许多简单和流行的网页设计技术，如创建光滑的网页按钮，创建环绕横幅(为价格计划的标题)，以及更多。
下载源文件
- modern_sleek_pricingtable(zip, 0.12 mb)
WebFX职业
加入我们的使命，为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。
