Photoshopping一个独特的联系表

有一些不错的前瞻性接触形式在网络上出现，但总体形式是网络默认的泥潭风格的Web丑陋。 这必须这样做，部分原因是跨浏览器的怪癖和风格，在某些浏览器中的一些表单元素的困难。 但实际上，它不是那么困难的风格形式，它是关于设计师更多/开发比什么都懒惰。

这真是悲哀，因为形式的网站，如重要部分。 这是您为您的用户非常亲密的关注，要求对形式。 你必须为他们提供了一个地区沟通与网站的一些方法。 这始终是可取的和有价值的。 该表格的设计应该加强这方面的经验，而不是有损于它。

我觉得最好的方式得到一个伟大的形式，是把设计首先，如果没有对HTML和CSS的制约思想。 因此，让我们Photoshopping！

1。 创建背景

创建一个新的Photoshop文档表单的领域所需的大小。 我的是800 × 600px。 双击您的默认背景层点击“解锁”它。

双击该层点击打开图层样式对话框，并选择您的背景一个不错的质感。

2。 绘制形状的表格区

由于我们要创建一个基本的联系表单，我们将会有很大的“讲话泡沫”的形成区域的形状。 您可以轻松地画钢笔工具，或找到一个矢量形状在线，您可以复制和粘贴从Illustrator作为一种形状图层1。 以下是一些讲话泡沫形状余ShutterStock的发现（需要订阅）。

这里是我们现在形成文件：

让我们添加一些图层样式的形状香料了一下它：

为了获得更好的风格，让我们给演讲泡沫的阴影。 下面创建一个新的讲话泡沫层。 命令一下讲话泡沫层从它创建的形状选择。 然后填写在你的黑色新层的部分。 现在你有一个黑色塑造真正的讲话下泡沫讲话泡沫的确切形状。 套用一个小高斯模糊，我们有一个阴影。

这看起来有点阴影持平，所以让我们搞活它一点。 随着你的身影层选择，使用“经”改造（在编辑菜单上）。 你会得到一个3 × 3格处理您可以使用操纵阴影的形状。 在这里，我的药物在左下角处理位的右上角和左上角处理下来，权位。 使形状看起来有点三维。 我还放弃了对了一点阴影透明度。

3。 添加文本

这是一个联系表，以便让我们让大家知道！ 添加文本“与我联系！”下面的泡沫。 在这里，我使用了相当大的字体大小和字体议程黑。

更多层样式！ 我套用图案中风（相同背景图案），渐变和一个阴影位。

表单元素

我们随后又很好地塑造为一个两列与较短的文本字段留一半，面积较大的消息右半设计。 输入的区域都只是一个简单的轻微下跌阴影白色矩形应用。 在“标签为每个表单元素”，坐在上面，左对齐。

在提交按钮

由于“流”我们已经将这种形式时，它最有意义的把提交右下角的表格区域右边按钮。 我们得到的图层样式非常擅长这一点！ 我们的按钮，只是一个简单的一点点色彩和轻微斜面圆角矩形。 让我们在同一议程字体家族一直这样，我们用其他地方也。

下载Photoshop档案

使工作...

请继续关注！ 我将被转换成真正的上的CSS网页超过-教主下周可用的形式！