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

Photoshop
Photoshop 美女脸部细腻的质感肤色
Photoshop 柔美简洁的彩带壁纸
Photoshop 调出偏暗儿童照片的怀旧色调
Photoshop 调出人物照片淡淡的粉青色
photoshop 合成长青苔的真人石像
Photoshop 打造一张飞翔的天使插画
photoshop 利用外挂及曲线打造人物光滑的肤色
Photoshop 打造一款超酷的金属管相框
Photoshop 长满青草的沙丘字效果
photoshop 经典合成另类的美女和牛奶场景
Photoshop 调出照片淡黄色怀旧效果
Photoshop 简单的蓝色纹理立体字
Photoshop 打造一张潮流风格女孩桌面
Photoshop 快速制作蓝色冷光文字
Photoshop 文字特效教程 五彩发光文字
Photoshop 打造一张个性签名老照片效果
Photoshop 调出外景照片金色的黄昏效果
Photoshop 一张潮流风格手枪插画
3500元DIY打造140米安逸窝 (惊呆了,看着都幸福)
photoshop 简单两步调出照片清爽的淡红色

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


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