好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

作为编码者,美工基础是偏弱的。我们可以参考一些成熟的网页PS教程,提高自身的设计能力。套用一句话,“熟读唐诗三百首,不会作诗也会吟”。

描边的颜色: #ffe0ce

给按钮添加文字Click here。并复制之前搜索栏那块的GO文字的图层样式

My output

我的样张

Now I would like to make this Featured Area more visible. To do that I will select in my layer pallete the main shape used to create Featured Area, and I will apply a Free Transform (Ctrl + T), then I will push this button to go in “Wrap Mode”

现在要对特色区域增加一些变化。在图层面板选择特色区域的主要矩形,然后进行自由变换(Ctrl + T),然后点击“在自由变换和变形模式切换”按钮

When you will be in “Wrap Mode” a grid will show up.

这样会进入自定变形模式,会显示一个控制变形的网格

Here select this corner, and with your mouse gently drag it a little bit down

选择左下角的控制点,然后用鼠标轻轻的往下拖动一点点( 往下拖动14px )

I will do the same for the right side

选择右下角的控制点,做同样的步骤

Once you have finished press ENTER

当你做完按ENTER键确定

My result

我的结果

The final step for Featured Area will be to create some shadows. For That I select Ellipse Tool and I will create this shape

最后要对特色区域添加一些阴影,用椭圆工具添加一个椭圆

Next I will go to Filter>Blur>Gaussian Blur and I will choose for radius 10px, then I will select Rectangular Marque Tool and I will make this selection

接下来点击:滤镜 > 模糊 > 高斯模糊,设置半径为10px,然后用矩形选择工具选取如下的矩形

Hit DELETE Button on your keyboard then press Ctrl + D to unload the selection

按键盘上的DELETE键删除选区的内容,然后Ctrl+D取消选区

Here’s my result:

这是我的结果:

Next I would like to add a shadow at the bottom of the curved shape. Unfortunately I can’t create a nice shadow using the “standard way” – ellipse tool, that’s why I will use the Brush Tool.

All you have to do is to create a new layer on your Layer Palette (Ctrl + Alt + Shift + N) chose a rounded brush, a black color and follow the edge of your shape.

接下来,我想在弯曲形状的底部添加一个阴影。不幸的是我不太会使用"标准方法"——椭圆工具,去创建一个好看的阴影。因此我会使用画笔工具去画阴影。

创建一个新图层在你的图层面板 (Ctrl + Alt + Shift + N)上,选择圆角的画笔,黑色,沿着弯曲形状的边缘画一条黑线。

Now apply a gaussian blur (Filter>Blur>Gaussian Blur) with a radius of 12px

My result – a nice and soft shadow.

现在添加高斯模糊(滤镜 > 模糊 > 高斯模糊),半径设置为12px

我的结果 - 一个漂亮柔和的阴影

Step 3 – Creating the Content Area

This one is really easy to create. First with Rectangle Tool I will create this shape:

步骤3 - 创建内容区域

这部分非常容易。首先用矩形工具创建一个矩形 (47,416,926,464),颜色: #d6e1c7

接下来,用矩形工具在左侧新建一个灰色的矩形(47,416,25,70),颜色: #acb69e

用直接选择工具选择矩形的左下角,按DELETE键删除左下角的控制点,使之成为一个阴影三角形

同同样的方法在右侧新建矩形(948,416,25,70),删除右下角控制点,成为另一边的阴影三角形

Then with type tool I will add some text

然后用文字工具添加一些文本, 标题文字的颜色: #4a5340

在标题和内容之间,用直线工具添加白色的水平分割线,不透明度设置为50%

在两栏之间添加阴影分隔符,和特色区域文字和图片之间的分割符做法类似

Content area is finished now.

内容区域就完成了

Step 4 – The Footer

This one, again is quite easy to create because is a replica of the Featured Area. I have used the same techniques used to create Featured Area.

步骤4 - 页脚

这部分,非常容易制作因为和特色区域一模一样。我要用和特色区域相同的技术去制作它

因为是类似,就直接复制特色区域的相关图层,移到合适的位置,点击:编辑 > 变换 > 垂直翻转,再进行合适的微调。

With Type Tool I will add some text and with Rectangle Tool I will create some forms for “Newsletter”. The orange buttons are using the same layer styles like the button from Featured Area. If you have followed me when I have created Featured Area you will be able to create the Footer also.

用文字工具添加一些文本,用矩形工具添加一些Newsletter的文本框,桔黄色按钮是用和特色区域的按钮的同样的图层样式。如果你是一直跟着我做完特色区域,那你一定也能完成页脚区域

页脚区域:

标题文字:颜色: #98a289

文本框:用矩形工具画矩形,图层样式直接复制头部区域文本框的图层样式

文本框文字:直接复制头部区域文本框文字,修改文字后,移到合适的位置

按钮:用矩形工具画矩形,图层样式直接复制头部区域按钮的图层样式

按钮文字:直接复制头部区域按钮文字,修改文字后,移到合适的位置

阴影分割符:直接复制内容区域的阴影分隔符,移到合适的位置

下面是我最终的结果:

心得:

本教程的特色是利用变形模式,完成折纸特效

更多PS网页设计教程V——如何在Photoshop中创建一个商业网站布局 相关文章请关注PHP中文网!

查看更多关于PS网页设计教程V——如何在Photoshop中创建一个商业网站布局的详细内容...

  阅读:43次