当前位置: 首页 > 图文教程 > 平面设计 > Photoshop > Photoshop教程:灰色调商务公司网站模版

Photoshop
Photoshop CS3入门:动画面板怎么打开
PS教程:为网页制作一个漂亮的文件夹图标
Photoshop教程:紫红色调学生妹妹
Photoshop鼠绘和蔼可亲的老奶奶
Photoshop教程:性感红发美女
Photoshop入门教程:图层混合模式
初学者想学习Photoshop的几个途径
Photoshop教程:制作简洁的蓝色导航框
Photoshop制作网站教程:简洁商业网站
Photoshop实例教程:设计商业数码网站
PS曲线为照片快速美白实例教程
PhotoShop曲线给偏色照片校正色彩
Photoshop经典教程:照片转手绘教程
Photoshop实例:创建常见的网站导航按钮
PS把PSD网站模板切图为XHTML+CSS的网页
Photoshop调色教程:性感美女靓丽质感肌肤
Photoshop绘制精美质感的电视机图标
PS抠图实例:红色婚纱照片抠图教程
Photoshop制作DVD电影商店网站模板
Photoshop教程:简洁的有光泽的网站导航

Photoshop教程:灰色调商务公司网站模版


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

本教程设计的公司灰色调网站,但是在布局方面就感觉十分大胆与随意,与国内很多企业公司网站的风格完全背离,也可以看出不同国家的文化的体现,不过整体来说还是很不错的页面设计,这样的设计感觉颜色体现了公司网站需要的沉稳但布局又不缺少活跃气份的部分。

 

Business Layout #2 Tutorial: Final Result 

新建900x850大小文件,双击背景图层,取消背景图层的锁定

再次双击背景图层,然后添加如下图层样式

Business Layout #2 image 1 

开始制作导航按钮!

使用圆角矩形工具,设置半径为10px,拖动出如下图三个形状,随后用多边形套锁工具删除一个左下角区域,如下图所示

Business Layout #2 image 2 

随后用椭圆选区工具制作箭头,制作步骤是,先画一正圆选区,然后删除白色区域,再将选区减少2px~3px,为圆填充白色

Business Layout #2 image 3 

使用photoshop箭头形状制作箭头,完成后如下

Business Layout #2 image 4 

将导航按钮进行复制,并合并达到一个图层中,添加一个如下的阴影样式,再加入按钮文字

Business Layout #2 image 5 

完成后图

Business Layout #2 image 6 

为了让页面增加一些变化的效果,使其看上去不呆板,我们导入一些图片与斑迹笔刷

Business Layout #2 image 7 

在图片下放置一个图层,用来放上联系方式,这样看上去是不是有点小创意?

Business Layout #2 image 8 

为新图层的圆角矩形添加样式

Business Layout #2 image 9

Business Layout #2 image 10

Business Layout #2 image 11 

放入联系文字

Business Layout #2 image 12 

将之前做好的公司LOGO标志导入

Business Layout #2 image 13 

放一张咖啡图片,在其下制作网页的主要区域

Business Layout #2 image 14 

为上面的选区填充白色,随后设置不透明度为40%

Business Layout #2 image 15 

加入文字

Business Layout #2 image 16 

为了充实页面内容我们开始设置版面的摆放位置

如下图这种图片显示方式十分得体,由于我们的公司网站颜色比较单一,所以在版面上就不能过于保守

Business Layout #2 image 17 

制作两个主要版块区域,填充颜色使用#eae9e4 ,边框颜色为#838274

Business Layout #2 image 18 

加入图片与文字以及按钮,整个页面中的按钮我们都使用同样的风格

Business Layout #2 image 19 

制作搜索条区域

Business Layout #2 image 20 

制作公司网站的新闻区域

Business Layout #2 image 21 

完成公司网站后的整体效果如下

Business Layout #2 Tutorial: Final Result