Photoshop制作商务公司网站模版(5)

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

ps做网页卷边图片

效果 1) 利用圆角矩形 工具 建立一条 路径 ;使用转换点 工具 移动左上角 路径 节点,使其产生卷页的 形状 副标题 2) 用任意一种色彩填充工作 路径 ;再复制下半部分;对其添加 图层 样式 ,如图所示 副标题 3) 用任意一种色彩绘制一个圆角矩形;将其 图层 移至红色矩

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

Photoshop制作商务公司网站模版(5)插图

新建900×850大小文件,双击背景图层,取消背景图层的锁定
再次双击背景图层,然后添加如下图层样式

Photoshop制作商务公司网站模版(5)插图(1)

开始制作导航按钮!
使用圆角矩形工具,设置半径为10px,拖动出如下图三个形状,随后用多边形套锁工具删除一个左下角区域,如下图所示

Photoshop制作商务公司网站模版(5)插图(2)

随后用椭圆选区工具制作箭头,制作步骤是,先画一正圆选区,然后删除白色区域,再将选区减少2px~3px,为圆填充白色

Photoshop制作商务公司网站模版(5)插图(3)

使用photoshop箭头形状制作箭头,完成后如下

Photoshop制作商务公司网站模版(5)插图(4)

                                       
将导航按钮进行复制,并合并达到一个图层中,添加一个如下的阴影样式,再加入按钮文字

Photoshop制作商务公司网站模版(5)插图(5)

完成后图

Photoshop制作商务公司网站模版(5)插图(6)

为了让页面增加一些变化的效果,使其看上去不呆板,我们导入一些图片与斑迹笔刷

Photoshop制作商务公司网站模版(5)插图(7)

在图片下放置一个图层,用来放上联系方式,这样看上去是不是有点小创意?

Photoshop制作商务公司网站模版(5)插图(8)

为新图层的圆角矩形添加样式

Photoshop制作商务公司网站模版(5)插图(9)

Photoshop制作商务公司网站模版(5)插图(10)

Photoshop制作商务公司网站模版(5)插图(11)

放入联系文字

Photoshop制作商务公司网站模版(5)插图(12)

                                       
将之前做好的公司LOGO标志导入

Photoshop制作商务公司网站模版(5)插图(13)

放一张咖啡图片,在其下制作网页的主要区域

Photoshop制作商务公司网站模版(5)插图(14)

为上面的选区填充白色,随后设置不透明度为40%

Photoshop制作商务公司网站模版(5)插图(15)

加入文字

Photoshop制作商务公司网站模版(5)插图(16)

为了充实页面内容我们开始设置版面的摆放位置
如下图这种图片显示方式十分得体,由于我们的公司网站颜色比较单一,所以在版面上就不能过于保守

Photoshop制作商务公司网站模版(5)插图(17)

制作两个主要版块区域,填充颜色使用#eae9e4 ,边框颜色为#838274

Photoshop制作商务公司网站模版(5)插图(18)

加入图片与文字以及按钮,整个页面中的按钮我们都使用同样的风格

Photoshop制作商务公司网站模版(5)插图(19)

                                       
制作搜索条区域

Photoshop制作商务公司网站模版(5)插图(20)

制作公司网站的新闻区域

Photoshop制作商务公司网站模版(5)插图(21)

完成公司网站后的整体效果如下

Photoshop制作商务公司网站模版(5)插图


制作搜索条区域

Photoshop制作商务公司网站模版(5)插图(20)

制作公司网站的新闻区域

Photoshop制作商务公司网站模版(5)插图(21)

完成公司网站后的整体效果如下

Photoshop制作商务公司网站模版(5)插图

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

Photoshop制作商务公司网站模版(5)插图

新建900×850大小文件,双击背景图层,取消背景图层的锁定
再次双击背景图层,然后添加如下图层样式

Photoshop制作商务公司网站模版(5)插图(1)

开始制作导航按钮!
使用圆角矩形工具,设置半径为10px,拖动出如下图三个形状,随后用多边形套锁工具删除一个左下角区域,如下图所示

Photoshop制作商务公司网站模版(5)插图(2)

随后用椭圆选区工具制作箭头,制作步骤是,先画一正圆选区,然后删除白色区域,再将选区减少2px~3px,为圆填充白色

Photoshop制作商务公司网站模版(5)插图(3)

使用photoshop箭头形状制作箭头,完成后如下

Photoshop制作商务公司网站模版(5)插图(4)

                                       
将导航按钮进行复制,并合并达到一个图层中,添加一个如下的阴影样式,再加入按钮文字

Photoshop制作商务公司网站模版(5)插图(5)

完成后图

Photoshop制作商务公司网站模版(5)插图(6)

为了让页面增加一些变化的效果,使其看上去不呆板,我们导入一些图片与斑迹笔刷

Photoshop制作商务公司网站模版(5)插图(7)

在图片下放置一个图层,用来放上联系方式,这样看上去是不是有点小创意?

Photoshop制作商务公司网站模版(5)插图(8)

为新图层的圆角矩形添加样式

Photoshop制作商务公司网站模版(5)插图(9)

Photoshop制作商务公司网站模版(5)插图(10)

Photoshop制作商务公司网站模版(5)插图(11)

放入联系文字

Photoshop制作商务公司网站模版(5)插图(12)

                                       
将之前做好的公司LOGO标志导入

Photoshop制作商务公司网站模版(5)插图(13)

放一张咖啡图片,在其下制作网页的主要区域

Photoshop制作商务公司网站模版(5)插图(14)

为上面的选区填充白色,随后设置不透明度为40%

Photoshop制作商务公司网站模版(5)插图(15)

加入文字

Photoshop制作商务公司网站模版(5)插图(16)

为了充实页面内容我们开始设置版面的摆放位置

如下图这种图片显示方式十分得体,由于我们的公司网站颜色比较单一,所以在版面上就不能过于保守

Photoshop制作商务公司网站模版(5)插图(17)

制作两个主要版块区域,填充颜色使用#eae9e4 ,边框颜色为#838274

Photoshop制作商务公司网站模版(5)插图(18)

加入图片与文字以及按钮,整个页面中的按钮我们都使用同样的风格

Photoshop制作商务公司网站模版(5)插图(19)

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

Photoshop制作商务公司网站模版(5)插图

新建900×850大小文件,双击背景图层,取消背景图层的锁定
再次双击背景图层,然后添加如下图层样式

Photoshop制作商务公司网站模版(5)插图(1)

开始制作导航按钮!
使用圆角矩形工具,设置半径为10px,拖动出如下图三个形状,随后用多边形套锁工具删除一个左下角区域,如下图所示

Photoshop制作商务公司网站模版(5)插图(2)

随后用椭圆选区工具制作箭头,制作步骤是,先画一正圆选区,然后删除白色区域,再将选区减少2px~3px,为圆填充白色

Photoshop制作商务公司网站模版(5)插图(3)

使用photoshop箭头形状制作箭头,完成后如下

Photoshop制作商务公司网站模版(5)插图(4)

                                       
将导航按钮进行复制,并合并达到一个图层中,添加一个如下的阴影样式,再加入按钮文字

Photoshop制作商务公司网站模版(5)插图(5)

完成后图

Photoshop制作商务公司网站模版(5)插图(6)

为了让页面增加一些变化的效果,使其看上去不呆板,我们导入一些图片与斑迹笔刷

Photoshop制作商务公司网站模版(5)插图(7)

在图片下放置一个图层,用来放上联系方式,这样看上去是不是有点小创意?

Photoshop制作商务公司网站模版(5)插图(8)

为新图层的圆角矩形添加样式

Photoshop制作商务公司网站模版(5)插图(9)

Photoshop制作商务公司网站模版(5)插图(10)

Photoshop制作商务公司网站模版(5)插图(11)

放入联系文字

Photoshop制作商务公司网站模版(5)插图(12)

                                       
将之前做好的公司LOGO标志导入

Photoshop制作商务公司网站模版(5)插图(13)

放一张咖啡图片,在其下制作网页的主要区域

Photoshop制作商务公司网站模版(5)插图(14)

为上面的选区填充白色,随后设置不透明度为40%

Photoshop制作商务公司网站模版(5)插图(15)

加入文字

Photoshop制作商务公司网站模版(5)插图(16)

为了充实页面内容我们开始设置版面的摆放位置
如下图这种图片显示方式十分得体,由于我们的公司网站颜色比较单一,所以在版面上就不能过于保守

Photoshop制作商务公司网站模版(5)插图(17)

制作两个主要版块区域,填充颜色使用#eae9e4 ,边框颜色为#838274

Photoshop制作商务公司网站模版(5)插图(18)

加入图片与文字以及按钮,整个页面中的按钮我们都使用同样的风格

Photoshop制作商务公司网站模版(5)插图(19)

                                       
制作搜索条区域

Photoshop制作商务公司网站模版(5)插图(20)

制作公司网站的新闻区域

Photoshop制作商务公司网站模版(5)插图(21)

完成公司网站后的整体效果如下

Photoshop制作商务公司网站模版(5)插图

作者: 791650988

为您推荐

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@wangzhan.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部