当前位置: 首页 > 图文教程 > 平面设计 > Photoshop > Photoshop教程:制作汽车网站首屏效果图

Photoshop
PhotoShop教程:利用真人照片制作卡通漫画
PhotoShop教程:滤镜工具打造光之旋涡
PhotoShop教程:立体字效果制作四步骤
PhotoShop教程:制作透明蓝色的效果文字
PhotoShop教程:制作双头男怪物效果
Photoshop教程:打造光彩夺目人体发光效果
Photoshop教程:打造韩国网页卡通文字
Photoshop教程:利用钢笔工具制作漫画效果
Photoshop教程:制作金发诱人少女效果
Photoshop教程:打造末来3D性感机器美女
photoshop教程:双重画笔工具画出流畅的虚线
photoshop教程:设计一枝绚丽的金色玫瑰
photoshop教程:Rykovich个性艺术插画
photoshop教程:制作星光闪烁的城市夜景
photoshop教程:合成恐怖猫女之夜
photoshop教程:制作化石人像
photoshop教程:合成骑仙鹤的仙女
photoshop教程:图片合成沉思的天使
photoshop教程:图片合成创造性的爆炸封面效果
photoshop教程:打造日本卡哇依非主流照片

Photoshop教程:制作汽车网站首屏效果图


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-27   浏览: 226 ::
收藏到网摘: n/a

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

<a href='http://www.RuanChen.Com/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-软晨学习网
素材图片

  看看效果图:

<a href='http://www.RuanChen.Com/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-软晨学习网
效果图

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

<a href='http://www.RuanChen.Com/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-软晨学习网
图1  

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

<a href='http://www.RuanChen.Com/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-软晨学习网
图2  

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

<a href='http://www.RuanChen.Com/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-软晨学习网
图3  

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

<a href='http://www.RuanChen.Com/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-软晨学习网
图4 

 

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

<a href='http://www.RuanChen.Com/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-软晨学习网
图5 

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

<a href='http://www.RuanChen.Com/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-软晨学习网
图6

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

<a href='http://www.RuanChen.Com/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-软晨学习网
图7  

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

<a href='http://www.RuanChen.Com/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-软晨学习网
图8

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

<a href='http://www.RuanChen.Com/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-软晨学习网
图9  

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

<a href='http://www.RuanChen.Com/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-软晨学习网
图10

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

<a href='http://www.RuanChen.Com/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-软晨学习网
图11 

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

<a href='http://www.RuanChen.Com/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-软晨学习网
图12

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

<a href='http://www.RuanChen.Com/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-软晨学习网
效果图