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

资讯 驱动中国 网页教学网 837 次阅读 0 条评论
分享 Q

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

Photoshop网页制作教程:设计制作汽车网站头
素材图片

看看效果图:

Photoshop网页制作教程:设计制作汽车网站头
效果图

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

Photoshop网页制作教程:设计制作汽车网站头
图1

使用我们准备的风景图片。

Photoshop网页制作教程:设计制作汽车网站头
图2

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

Photoshop网页制作教程:设计制作汽车网站头
图3

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

Photoshop网页制作教程:设计制作汽车网站头
图4

#p#副标题#e#
由于白云部分的图片过于图片,我们将白云区域选中。

Photoshop网页制作教程:设计制作汽车网站头
图5

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

Photoshop网页制作教程:设计制作汽车网站头
图6

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

Photoshop网页制作教程:设计制作汽车网站头
图7

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

Photoshop网页制作教程:设计制作汽车网站头
图8

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

Photoshop网页制作教程:设计制作汽车网站头
图9

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


Photoshop网页制作教程:设计制作汽车网站头
图10

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

Photoshop网页制作教程:设计制作汽车网站头
图11

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

Photoshop网页制作教程:设计制作汽车网站头
图12

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

Photoshop网页制作教程:设计制作汽车网站头
效果图

【延伸阅读】




版权声明:本文由驱动中国整理发布,转载需注明出处与原文链接。如有疑问请联系 editor@qudong.com
本文价值 成为第一个评分的人
登录后为本文打分
网友评论0 条评论
正在回复 的评论取消
评论加载中…
🔐

登录后参与互动

评论、点赞均可赚积分
连续签到、邀请好友也有奖励 🎁

电脑端: 微信扫码登录 微信内: 一键登录

微信扫一扫

打开微信「扫一扫」,分享本文到朋友圈或好友