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

Photoshop
Photoshop教程:抽出滤镜运用实例----松鼠的爱
Photoshop初级教程:活用路径工具打造奥运五环标志
Photoshop教程:变普通照片为卡通漫画人物.The Vampire
Photoshop教程:用自带滤镜打造漂亮抽丝和点阵效果
Photoshop教程:照片转逼真手绘效果
Photoshop合成教程:打造神秘之眼
PS后期:也谈去掉灰蒙蒙:风景图片处理一例
PS初学者实例教程:用图层样式做漂亮文字效果
Photoshop技巧:巧处理让风景照片焕发另类光彩
Photoshop教程:用藤蔓笔刷设计属于自己的签名
Photoshop教程:又见非主流:简单打造L.xc风格照片
Photoshop实例:快速制作边缘马赛克广告条效果
Photoshop教程:用滤镜打造色彩绚丽的高光背景
用Photoshop进行美术创作的简单技巧
Photoshop教程 :教你打造可爱粉红长毛特效字
【设计基础理论】形成视觉冲击的几种方式
【设计基础理论】平面设计理论之设计意念
Photoshop教程:漂亮卡通字母自己做
Photoshop抠图详细教程:明天你就是抠图高手
Photoshop翻译教程:打造照片转韩式矢量插画效果

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


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