论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Photoshop教程
Tag:photoshop cs,照片,非主流,水晶,效果,画笔,圣诞,滤镜,艺术,手绘,蒙版,抠图,风景,特效,人像,矢量,国画,图像,数码,合成,玻璃,美女,图案,鼠绘,调色,婚纱,插画,图层,山水,漫画,透明,水粉,光线,笔刷,工具,实例,入门,人物,头发,签名,视频,壁纸,水墨,相框,海报,立体,动画,文字,换头,视频教程

PS制作汽车网站完整首页效果图教程

文章类别:Photoshop | 发表日期:2009-4-25 8:22:37

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

<a href='http://www.webjx.com/photoshop/' _fcksavedurl='http://www.webjx.com/photoshop/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-网页教学网
素材图片

  看看效果图:

<a href='http://www.webjx.com/photoshop/' _fcksavedurl='http://www.webjx.com/photoshop/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-网页教学网
效果图

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

<a href='http://www.webjx.com/photoshop/' _fcksavedurl='http://www.webjx.com/photoshop/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-网页教学网
图1  

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

<a href='http://www.webjx.com/photoshop/' _fcksavedurl='http://www.webjx.com/photoshop/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-网页教学网
图2  

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

<a href='http://www.webjx.com/photoshop/' _fcksavedurl='http://www.webjx.com/photoshop/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-网页教学网
图3  

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

<a href='http://www.webjx.com/photoshop/' _fcksavedurl='http://www.webjx.com/photoshop/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-网页教学网
图4  由于白云部分的图片过于图片,我们将白云区域选中。

<a href='http://www.webjx.com/photoshop/' _fcksavedurl='http://www.webjx.com/photoshop/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-网页教学网
图5 

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

<a href='http://www.webjx.com/photoshop/' _fcksavedurl='http://www.webjx.com/photoshop/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-网页教学网
图6 现在我们来制作真个汽车网站头部的背景主题,在PS新建立1600×600大小文件,这里我们使用1600宽的目的是主要适应一些大尺寸的浏览器,你也可以根据自己喜好设定尺寸。

<a href='http://www.webjx.com/photoshop/' _fcksavedurl='http://www.webjx.com/photoshop/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-网页教学网
图7  

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

<a href='http://www.webjx.com/photoshop/' _fcksavedurl='http://www.webjx.com/photoshop/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-网页教学网
图8 使用选区工具选中中间区域作为放置之前的汽车图片位置。

<a href='http://www.webjx.com/photoshop/' _fcksavedurl='http://www.webjx.com/photoshop/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-网页教学网
图9  

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

<a href='http://www.webjx.com/photoshop/' _fcksavedurl='http://www.webjx.com/photoshop/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-网页教学网
图10 完成阴影效果后将我们之前做的汽车图片拖入其中。

<a href='http://www.webjx.com/photoshop/' _fcksavedurl='http://www.webjx.com/photoshop/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-网页教学网
图11 

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

<a href='http://www.webjx.com/photoshop/' _fcksavedurl='http://www.webjx.com/photoshop/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-网页教学网
图12 加入文字与斜线来使页面更具变化。最后完成效果如下图:

<a href='http://www.webjx.com/photoshop/' _fcksavedurl='http://www.webjx.com/photoshop/'><u>Photoshop教程</u></a>:制作汽车网站首屏效果图-网页教学网
效果图

视频教程列表
文章教程搜索
 
Photoshop推荐教程
Photoshop热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058