Photoshop网页制作教程:设计制作汽车网站头部流程

2016-01-29 18:15 33 1 收藏

Photoshop网页制作教程:设计制作汽车网站头部流程,本例我们介绍运用PS设计制作一个汽车类网站头部的过程,先将素材图片图片进行抠图、合成、调整,然后制作出网页的背景,将制作好的素材图拖入,最后加上导航凹槽线条、文字以及斜线作装饰完成最终效果,希望能给朋友们带来帮助~~

【 tulaoshi.com - PS 】

在学习中遇到问题可以到 论坛 发贴交流!

首先选择一张汽车的图片素材

Photoshop网页制作教程:设计制作汽车网站头部流程_中国

在PS中将汽车图片的上部去除

Photoshop网页制作教程:设计制作汽车网站头部流程_中国

使用我们准备的风景图片

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

Photoshop网页制作教程:设计制作汽车网站头部流程_中国

[next]

将风景图片拖动到汽车图层之后作为背景

Photoshop网页制作教程:设计制作汽车网站头部流程_中国

为了使图片更真实,我们要把车窗部分扣出,并将其不透明度调整为80%,这样车窗就能出现真实透明效果的感觉了

Photoshop网页制作教程:设计制作汽车网站头部流程_中国

由于白云部分的图片过于图片,我们将白云区域选中

Photoshop网页制作教程:设计制作汽车网站头部流程_中国

[next]

新建一个图层,期间保证之前选中的白云区域状态,随后在区域上添加从上到小的渐变效果,颜色为#4271fc 到#9da6fb ,并设置不透明度为95%,这样就能隐约看出下面的白云轮廓了

Photoshop网页制作教程:设计制作汽车网站头部流程_中国

现在我们来制作真个汽车网站头部的背景主题,在PS新建立1600×600大小文件,这里我们使用1600宽的目的是主要适应一些大尺寸的浏览器,你也可以根据自己喜好设定尺寸

Photoshop网页制作教程:设计制作汽车网站头部流程_中国

设置PS的前景色为#121212 ,背景色为#474748 ,从上往下在背景图层中拉出渐变色,随后添加顶部绿色渐变区块与底部灰色渐变区块

Photoshop网页制作教程:设计制作汽车网站头部流程_中国

使用选区工具选中中间区域作为放置之前的汽车图片位置

Photoshop网页制作教程:设计制作汽车网站头部流程_中国

你需要将选中的区域单独截取出来,因为我们要为其添加阴影图层样式

Photoshop网页制作教程:设计制作汽车网站头部流程_中国

[next]

完成阴影效果后将我们之前做的汽车图片拖入其中

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

Photoshop网页制作教程:设计制作汽车网站头部流程_中国

添加汽车网站的导航凹槽线条

Photoshop网页制作教程:设计制作汽车网站头部流程_中国

加入文字与斜线来使页面更具变化。最后完成效果如下图

Photoshop网页制作教程:设计制作汽车网站头部流程_中国

来源:http://www.tulaoshi.com/n/20160129/1505037.html

延伸阅读
汽车网站一般都要高端大气的设计,但怎么高端怎样大气呢?今天我们整理20个豪华汽车、摩托车网页设计作品,或许你能从中获取灵感哦!在下面这些汽车网页设计例子中,最主要特征就是把名车以大banner展示,并且尽量使用全屏式或全屏背景的网页设计,这样出来的网页比较大气呢!其次使用一些视差滚动的网页设计技术,提升整体网站视觉效果,更多细节...
来源:艺流影像 作者:山村老师 效果图看似比较简单,其实部分细节的制作是比较复杂的。如车身上的火焰,需要多次用滤镜等做出轮廓,然后再调成火焰的颜色。其它的火焰也需要自己慢慢变形处理做成符合需求的。 最终效果 1、打开Photoshop,创建一个新的文档。请用黑色和红色的组合(#160000)背景。然后用一个没有背景的汽车的形象。对于...
确定网站主题 做网站,首先必须要解决的就是网站内容问题,即确定网站的主题。美国《个人电脑》杂志(PC Magazine)评出了99年度排名前100位的全美知名网站的十类题材:第1类:网上求职;第2类:网上聊天/即时信息/ICQ;第3类:网上社区/讨论/邮件列表;第4类:计算机技术;第5类:网页/网站开发;第6类:娱乐网站;第7类:旅行;第8类:参考/资...
甲方眼中的大气长什么样,今天让你看个够!今天分享一组优秀的汽车,噢,不,豪车系网站,几乎每一个都是高端大气的顶尖范例,童鞋们可以进来学习一下,给汽车网站做设计,有哪些共同点可供借鉴。 起亚 Sportage 玛莎拉蒂Alfieri概念车 阿尔法罗密欧 4C 大众汽车 斯柯达Yeti The Forgotten Roadtrip 雪铁龙C4 Cactus ...
标签: PS PS基础
最终效果图 ipad电脑图片 #3a3a3a,#111111。以增加背景的层次感。 新建图层,用矩形工具拉出一个矩形框,使用渐变来填充矩形框。 用矩形选择工具选中ipad显示屏区域,添加一些好看的图片进去 文本区域看起来很单调,最好的方法是加入一些按钮与图标等,这里先加入以个圆角矩形按钮 加入一些图标 ...

经验教程

256

收藏

30
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部