如何创建一个色彩丰富的商务网页设计

原文

How to create a colorful business web layout

Hello. This step by step tutorial will teach you how to create a very nice colorful business layout.

大家好， 这个逐步完成的教程将会教你如何创建一个非常漂亮的多彩商务设计。

For start you will need to create a new document. I will set the background of the document to #efefef

首先，你需要创建一个一写的文档。我会将背景色设置为 #efefef。

I will select Rectangle Tool, and i will make a big gray shape.

我会选择矩形工具，然后做出一个大的灰色图形。

Then for this shape i will add the following layer styles

然后设置这个图形的层样式。图中英文参考如下：

Drop Shadow: 下拉阴影

Inner Shadow: 内部阴影

Structure: 结构

Blend Mode: 混合(配色)模式

Color Dodge: 颜色减淡

Multiply: 镶嵌

Opacity: 透明度

Angle: 角度

Use Global Light: 使用全局高光

Distance:距离

Spread: 扩散

Size: 尺寸

Quality: 材质

Contour: 轮廓(边框)

Anti-aliased: 抗锯齿

Noise: 噪音

Layer Knocks Out Drop Shadow: 层覆盖下拉阴影

Make Default: 做默认选择

Reset to Default: 重置为默认选择

Color Overlay: 色彩覆盖

Normal: 一般

In the middle of the previous shape i will add another one but this time i will use Rounded Rectangle Tool. Over this shape i will add a image with a nice bokeh effect.

在前一个图形的中间， 我会添加另外一个图形，但是这一次我会使用 圆角矩形工具。在这个图形上面田间一个漂亮的bokeh效果的图片。

Also for this image i will add some layer styles.

在这个图片上也要添加一些层样式。

名词解释：

Inner Glow: 内发光

Technique: 技巧

Softer: 柔和

Source: 光源

Center: 中心

Edge: 边缘

Choke: 阻塞

Jitter: 抖动

Stroke: 笔锋（发光渲染）

Elements: 元素

Position: 位置

Outside: 外侧

Under the big image with this nice colorful layout i will create 4 different shapes. Try to use different colors.

下面这幅大图中，将会创建并使用四个不一样的拥有漂亮的色彩设计的图形。

Now i will create another layer ( press on CTRL+SHIFT+ALT+N ) and over this layer i will use Brush Tool with a smooth round tip to make the following drawing. It is easier to make a selection of the orange shape before you add the drawing with brush tool.

现在创建另外一个层，快捷键是Ctrl+Shift+Alt+N，然后在这个层上使用笔刷工具，选择平滑圆形提示来制作下面的样子。

在用笔刷工具添加这个效果之前，选择一个橙色图形会使一切变的很容易。

Then for this layer i will change the blending mode to overlay, and in the same time i will change the opacity to 50%.

然后将这个层的覆盖改为混合模式，同时把透明度改为50%。

I will duplicate this layer with this nice lightning effect, and i will place it over the other shapes. Click on the following image to see better what i am talking about.

将刚刚做出来的漂亮闪光效果的层复制并覆盖在另外三个图形上。这样就能有下面的效果了。

On top of the web layout i will create a new shape.

在页面的顶端创建一个新的图形。

I will use the following layer styles.

使用一下的层样式。

名词解释：

Gradient: 渐进

Reverse: 反转

Style: 样式

Linear: 线性

Align with Layer: 与层对齐

Presets: 预设

Smoothness: 平滑

Location: 定位

Fill Type: 填充类型

Then i will create a small circle with Ellipse Tool。

然后用 椭圆形工具 创建一个小圆圈。

For this small circle i will add the following layer styles。

为这个小圆圈添加下面的层样式。

Now it is very important to delete the bottom half of the circle. To delete the bottom part first you need to right click on the layer inside your layer palette, and then with Rectangular Marquee Tool make a selection over the bottom part of the circle. After that press on Delete on your keyboard.

Another way is to use the Eraser Tool, after you rasterize the shape.

现在，非常重要的一点是删掉这个小圆圈的下半边。首先，在 层调色板 里右键点击这个层，然后使用 矩形选取工具 选取这个圆圈的下半边并按下键盘的 Delete 键。

另一种方式是使用 橡皮擦（擦除）工具。

If you don’t have already a membership with us i recommend you to signup now ( You can find the subscription button on the top of the website ) and you can download the following set of icons:Download 512 Vector icons

Open the .ai files inside illustrator, and then select each icon you want to use.

The steps are very simple:

Go to Adobe illustrator.
Select the icon.
Press on CTRL+C ( Copy )
Return to Adobe Photoshop
Press on CTRL+V ( Paste )

Do the same for all the icons

如果你没有我们的会员资格那么建议你现在就注册，这样你就能下来这些图标了。（可能是收费的）

在Illustrator中打开这些.ai文件，然后选择你想要的图标，直接复制到PS中。

For all these icons i will add the following layer styles.

所有的图标都是用以下的层样式。

Between the buttons, i will add some vertical dividers. I will use Line Tool to add the lines.

在按钮之间使用 直线工具 添加一些纵向的分割线。

Then for each line i will add the following layer styles.

为这些线设定层样式。

The next step is to add a simple text logo. If you want another logos you can try to use the3D Creator which helps you to convert each 2D shape into a very nice 3D shape.

下一步是添加简单的文本标识。如果你想要其他的标识的话可以使用上面的链接，这个页面可以把二维的图形转换成三维图形。

On the bottom of the slideshow i will add another shape with Rounded Rectangle Tool.

在中间大的联动图下面添加N图连动的按钮，用 圆角矩形工具 添加一个图形作为按钮的框。

I will add the following layer styles.

为按钮框添加如下层样式。

Then i will add some circles which are made with Ellipse Tool. I will use the same layer styles i have used for the top vector icons.

然后用 椭圆形工具 添加一些圆圈，让这些圆圈具有和顶部矢量图标相同的层样式。

With Ellipse Tool, i will create a new shape.

使用 椭圆形工具 创建一个新的图形。

Then i will load the selection for the orange shape.

然后选择下面的橙色图形。

And then i will make sure the white circle is rasterized, and i will delete the outer part of the white shape. Your result should be the following one.

然后确认下图白色的部分保留了，而橙色矩形之外的圆圈都被删掉了。这样就可以得到以下的样子。

For this white corner i will add the following layer styles。

对这个圆圈剩余的部分应用如下层样式。

Blending Options: 混合选项

General Blending: 一般混合

Advanced Blending: 高级混合

Fill Opacity: 填充透明度

Channels: 通道

Knockout: 突出

Blend Interior Effects as Group: 将混合内部效果作为组

Blend Clipped Layers as Group: 将混合裁剪的层作为组

Transparency Shapes Layer: 透明图形层

Layer Mask Hides Effects: 层遮罩隐藏效果

Vector Mask Hides Effects: 矢量遮罩隐藏效果

Underlying Layer: 底层

I will duplicate all the corners, and i will move them over each box.

将这个图形覆盖到所有彩色图形上。

Then i will add another icons, and some text.

然后添加一些图标和文本。

On the bottom of the shapes i will add some lines ( please click on the image to see better ) , and of course some text.

在图形的中间偏下位置添加一些直线，当然了，还有文本。

One of my last steps is to add another text with horizontal type tool.

就快完成了，使用 水平类的工具再添加一些文本。

This is my final result. I hope you like it. You can use this web layout not only for a business layout. With slight modifications you can use it also for a wordpress theme.

这就是最终的结果。我希望你们会喜欢。这个设计不光可以用在商务页面的设计上，只要做些简单的修改，也可以作为一个Wordpress的主题。