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

Photoshop
Photoshop 快速调出外景人物照片柔和的黄绿色
Photoshop 一个透明的玻璃花瓶
Photoshop 绘制冬季气息风格网站首页
PhotoShop 用背景橡皮擦高效抠图法
photoshop 美容教程 快速消除痘痘,完美修复MM肌肤!
photoshop 创建清新、色彩生动的网页布局
photoshop 制作心形宝盒的发光动画
photoshop 漂亮的七彩崩裂文字
Photoshop 思念的怀旧色调照片教程
photoshop 创意合成教程 幽暗森林里的绿色魔女
Photoshop 简单制作打孔文字效果
photoshop 创作一个古色古香的壁画
photoshop 木头文字效果的制作
PhotoShop 制作彩色渐变文字效果
photoshop 图片只留一抹红色视觉效果
PhotoShop 滤镜三步制作出海浪效果
photoshop 制做一个电影DVD的封面
Photoshops 笔刷工具创建平面三维效果
浅谈Photoshop中表格的制作方法
Photoshop 给偏暗的手机人物照片美白

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-27   浏览: 239 ::
收藏到网摘: 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