当前位置: 首页 > 图文教程 > 平面设计 > Photoshop > Photoshop制作web2.0风格软件开发公司网站模版

Photoshop
photoshop教程:简单帮你调偏绿色照片
Photoshop外挂教程:KPT滤镜详解之Gradient Lab
Photoshop外挂教程:KPT滤镜详解之Hyper Tiling
Photoshop教程:打造美丽变幻线特效
Adobe Photoshop CS4 最新界面截图先睹为快
Photoshop教程:调出淡淡单色色调
Photoshop CS3教程:路径工具给图片加上漂亮流动光线
Photoshop教程:改善手机低像素照片的方法
Photoshop初学者实例教程:制作市场份额饼形图
Photoshop教程:打造金属反射文字特效
Photoshop教程:用极坐标滤镜制作放射线文字
Photoshop教程:用滤镜打造奇异水波纹效果
Photoshop教程:用滤镜制作逼真光照岩石效果
Photoshop教程:运用滤镜打造高温玻璃爆裂效果
Photoshop教程:半调图案滤镜打造漂亮的梦幻图案
Photoshop教程:路径描边制作漂亮的曲线
Photoshop教程:创意合成打造漂亮毕业纪念册
Photoshop教程:制作不规则须毛边框的方法
photoshop教程:将MM调成银发美女
Photoshop+数位板教程:绘制幽暗深谷插画

Photoshop制作web2.0风格软件开发公司网站模版


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-27   浏览: 575 ::
收藏到网摘: n/a

软件开发公司网站需要的是专业性的视觉效果,所以在本文中的页面设计并没有使用过于鲜艳的颜色,而是用比较酷的一排金属按钮来完成页面的视觉效果。

最终效果:

Web 2.0 Software Development Layout Tutorial: Final Result

新建760x770大小PS文件,设置前景色为#e8e8e8,新建图层,随后用油漆捅工具在新建的图层上制作渐变色,颜色从#e8e8e8到透明,如下图设置

Web 2.0 Software Development Layout image 1 

随后用油漆桶从下往上拉条渐变线,效果如下图

Web 2.0 Software Development Layout image 2  

用圆角矩形工具,半径为7px

Web 2.0 Software Development Layout image 3 

随后制作下图这些圆角矩形形状

Web 2.0 Software Development Layout image 4  

使用椭圆工具制作下面四个正圆(按shift建绘制正圆)

Web 2.0 Software Development Layout image 5 

为四个圆添加图层样式

Web 2.0 Software Development Layout image 6

Web 2.0 Software Development Layout image 7

Web 2.0 Software Development Layout image 8

Web 2.0 Software Development Layout image 9

Web 2.0 Software Development Layout image 10 

结果如下

Web 2.0 Software Development Layout image 11 

现在我再制作四个黑色的圆放在之前的图层上,如下

Web 2.0 Software Development Layout image 12 

为黑色的圆添加图层样式

Web 2.0 Software Development Layout image 13

Web 2.0 Software Development Layout image 14 

Web 2.0 Software Development Layout image 15

Web 2.0 Software Development Layout image 16

Web 2.0 Software Development Layout image 17 

这是完成后的按钮效果

Web 2.0 Software Development Layout image 18 

选中按钮的所有图层

Web 2.0 Software Development Layout image 19 

将所有图层复制一次

Web 2.0 Software Development Layout image 20 

选中复制出的所有图层,随后按ctrl+e合并为一个图层

Web 2.0 Software Development Layout image 21 

编辑 > 变换路径 > 垂直翻转,然后将复制出的按钮移动到原按钮的下方

Web 2.0 Software Development Layout image 22 

我们这么做的目的是为了制作按钮的倒影效果,这里倒影的制作方法很简单,我先选择如下的笔刷

Web 2.0 Software Development Layout image 23 

随后我对下面的按钮进行笔刷涂沫

Web 2.0 Software Development Layout image 24 

最后设置不透明度为20%就完成了倒影的制作

Web 2.0 Software Development Layout image 25 

我再加入一些icon的小图标作为装饰

Web 2.0 Software Development Layout image 26 

现在开始制作导航条部分

Web 2.0 Software Development Layout image 27 

加入导航文字与LOGO

Web 2.0 Software Development Layout image 28 

随后为导航文字制作鼠标移动上时的效果图

Web 2.0 Software Development Layout image 29 

在上面的黑色圆角矩形图层上按右键选择”删格图层“,这样完全转换为象素图,而没有路径边框了

Web 2.0 Software Development Layout image 30 

用选区工具去掉下面的多余部分

Web 2.0 Software Development Layout image 31 

按钮效果图如下

Web 2.0 Software Development Layout image 32 

文字与内容的添加并没有什么可叙述的,完成后如下

Web 2.0 Software Development Layout image 33

这里我们要为我们的软件包装图片制做一个促销的图标,用多变形工具,设置如下

Web 2.0 Software Development Layout image 34 

制作一个白色的多边形,随后加一些文字

Web 2.0 Software Development Layout image 35 

使用笔刷做对页面一些修饰

Web 2.0 Software Development Layout image 36 

Web 2.0 Software Development Layout image 37 

Web 2.0 Software Development Layout image 38 

最终完成的软件网站效果页面如下

Web 2.0 Software Development Layout Tutorial: Final Result