首页 > 办公 > Photoshop > 正文

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

2024-08-21 23:23:05
字体:
来源:转载
供稿:网友

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

 

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 

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表