PS网页设计教程XXIII——创建一个售卖iPhone5应用程序的网站

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

I will create another shape like in the following image. Click on the image to see the result better.

按照下图创建另一个圆角矩形 （91，383，918，290） 。单击图片以看得更加清楚

Here is the layer style i have used for the last shape.

这是我给刚才的形状添加图层样式

渐变编辑器的颜色： #242424，#b8b8b8，#4c4c4c

I will duplicate this layer and i will add one more time some noise

我要复制这个图层， 转换为智能对象 ，并添加一些杂色

Then i with Pen tool i will create the following shape. Please use the same layer style as above.

然后我要用钢笔工具创建如下的形状。用和上面一样的图层样式

对于不善于用钢笔工具的，可以参考以下步骤

用圆角矩形工具新建一个圆角矩形，半径设置为12px

在该图层上右键，选择栅格化图层。用矩形选框工具选择圆角矩形的下半部，按Delete键删除，再按Ctrl+D取消选区

给它添加和上个圆角矩形一样的图层样式，把渐变样式中的反向勾去，并修改渐变编辑器的右侧的颜色为： #828282

Duplicate this shape, and select both layers in your layer palette. Once you have both layer selected press on CTRL+E to merge the layer into a single one. With Eraser tool delete the bottom part of the shape. make sure you have a smooth round brush selected.

复制该形状，在图层面板中选择这些图层。当你选择这些图层后，按CTRL+E合并这些图层到一个图层。用橡皮工具擦除形状的底部。确保你选择了一个光滑的圆画笔

用了我上一步的过程之后，这一步就可以跳过了

With Rounded Rectangle Tool i will create a new shape. I will use the same indented layer styles

用 圆角矩形工具 我要创建一个新的圆角矩形 （108，405，884，250） 。我要用相同的内嵌图层样式

Here you have the layer styles one more time.

设置填充为0% ，添加如下你用的多次的图层样式

颜色叠加的颜色： #3e3c3d

I will create a simple shadow. To create this shadow i recommend you to create a new layer, place it under the big shape, and then with Brush tool start drawing very smoothly until you are happy with the result.

我要创建一个简单的阴影。为了创建阴影，你可以新建一个图层，摆放它到大的形状的下方，然后用画笔工具画一个光滑的阴影直到你满意为止。

I will add some dark shape, and some text.

我要添加一些深色的形状，和一些文本

第一行的圆角矩形颜色： #191919，第一行的文字的颜色： #b0b0b0

第二行的圆角矩形颜色： #222222，第二行的文字的颜色： #b7b7b7

第三行的圆角矩形颜色： #292929，第三行的文字的颜色： #bcbcbc

每个矩形都添加和菜单文字相同的图层样式

Then i will add some icons.

然后添加一些图标， 给第一排的图标添加#b0b0b0的颜色叠加，给第二排图标添加#b7b7b7的颜色叠加，给第三排图标添加#bcbcbc的颜色叠加

Bellow you can see the icons placed on the right side, and in the same time you can see some lines between each category.

你可以看到图标摆放到正确的地方，同时你可以看到在每个分类之间有一些直线

Bellow you can see the final result. I hope you like this layout.

下面是你看到的最终成果。我希望你会喜欢这个布局

后记：

为这个设计师击节叫好，巧妙的运用色彩实现了3D效果。该设计师运用色彩和PS技巧随心所欲，苦了翻译的人，在没有源文件的情况下，对某些步骤还得推敲一番，好在有之前翻译的教程中的经验在，有些步骤还是能复原的，或者是近似的去实现它。

更多PS网页设计教程XXIII——创建一个售卖iPhone 5应用程序的网站相关文章请关注PHP中文网！

查看更多关于PS网页设计教程XXIII——创建一个售卖iPhone5应用程序的网站的详细内容...