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

Photoshop
Photoshop教程:制作照片局部焦点相框
Photoshop画笔制作性感美女梦想特效
PS自定义图案和蒙版为照片添加好看网格
Photoshop入门:制作照片轮廓线描特效
Photoshop入门实例:真实的白云绿草地
Photoshop处理照片:花卉照片添加光线
Photoshop实例教程:速度足球
Photoshop实例:绘制精致的高光泽小锁图标
Photoshop入门实例:光泽的网页Enter按钮
PS教程:性感美女头发轻松变色
Photoshop文字特效教程:旧黄金特效字
Photoshop教程:制作夜上海俱乐部灯光文字
Photoshop合成照片:神秘的古堡
Photoshop笔刷下载:令人惊奇的PS笔刷
Photoshop绘制高光感的方形购物网页按钮
参考:优秀Logo设计思想分析
Photoshop放大照片但照片质量不降低
Photoshop文字制作教程:金属质感的文字
Photoshop实例:绘制漂亮宇宙星球
PS实例教程:模糊美女变真实清晰

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


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