建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 图像设计 > Photoshop教程 >

photoshop设计网页实例教程图解(3)

时间:2011-03-09 23:03来源: 作者: 点击:
最后我们加点细节。在切换菜单下方画一个1px的灰线。然后如上一步一样用蒙版的方式使左右两端渐变。现在我们就得到一条比较时尚好看的线了。 现在切换菜单就像这样。 第二十五步 现在开始设计第一个切换按钮的内容

最后我们加点细节。在切换菜单下方画一个1px的灰线。然后如上一步一样用蒙版的方式使左右两端渐变。现在我们就得到一条比较时尚好看的线了。
Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园
现在切换菜单就像这样。

第二十五步

Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园

现在开始设计第一个切换按钮的内容。我们需要一个精准设计的图像(有好看的标题和一些文字内容)。首先我们得创建这个精准的图片。这里我认为我们最好打破这个图片尖锐的棱角设计,从而创造一个多彩的效果。因此我现在画一个白色有1像素灰色边框的长方形,再给它加上细微的阴影效果。
Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园

复制这一层并用变形工具稍微旋转。重复这个操作几次
Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园

把你选好的图片导进来,放在白色长方形上面。不用担心图片会溢出,我们会修整它。选中最上层的长方形,按选择->修改->收缩 ,输入5px,确认,然后在图层管理区下方点击添加图层蒙版,这样图片就只显示选区范围。
Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园
这就是你现在图层的状态。

第二十六步

Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园

不要忘记整理图层,这里新建图层夹把图层归类。
Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园

增加一个漂亮的标题、一些文本和列表,我们的设计工作又完成一部分。现在继续下一步吧。
Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园
再组织一下图层。

第二十七步: 感谢信

Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园

我认为这一个部分要比较大的,因此我把范围限定在主区域上的一个大的盒子里面。首先创建一个大的淡灰色的大概高220像素的长方形。设置其有1像素的灰色边
Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园

然后再画一个上下左右都比它小10像素的另一个长方形。同样设置其1像素的淡灰色边框。
Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园
最后写上文本就可以了。

第二十八步

Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园

终于要做页脚啦。画一个400像素高的、深黑色的长方形。

第二十九步

Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园

第五步一样给它加亮光效果。

第三十步

Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园

下来,如图所示,在区域上方画一个10像素高的长方形,并且通过在顶端和底部各多加两条线增强细节处理。

第三十一步

Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园

创建低端部分用于放置重复的导航。你可以拷贝顶端放置导航的长方形,移动并变形使其40像素高。把它放到你画布的最低端。你要注意你可能要扩张你的画布使所有东西都有适合的位置。制约扩张画布的操作你可以这样:图像->画布大小 设置即可。

第三十二步

Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园

再次强化细节。给页脚的导航区顶端加一条白色边,这样有比较好的边框效果。

第三十三步

Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园

给页脚增加内容,你可以依据网格合理安置它们。

第三十四步

Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园

然后就是把页脚相关的图层整合起来。

最终设计

Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园
Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园
Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园
Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园
Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园
Photoshop制作网页:从零设计一个漂亮的网页_网页设计家园

做到这里,我们的设计就完成了。

最后总结

我希望你喜欢本教程并且从中或多或少学到点知识。现在是你创作的时候了。记住,只要你注重于细节,你就会创造出漂亮的网页设计,尽管你photoshop只会那么两三个工具。现在你有设计的冲动没?

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片