当前位置: 首页 > 图文教程 > 平面设计 > Photoshop > PS教程:制作未来主义的汽车类网站模板

Photoshop
Photoshop教程:解析房产网站banner图片的制作
Photoshop教程:使用画笔工具绘制中国水墨图
Photoshop教程:用画笔工具制作涂鸦效果
Photoshop教程:设计高尔夫球邀请赛海报
PhotoShop教程:制作雪茄烟头点燃的效果和烟雾
PhotoShop教程:制作合成城市夜空中蝙蝠侠效果
Photoshop教程:打造水晶风格音符图标的制作方法
Photoshop调色教程:调出照片经典暗光金色调效果
PS给人物打造超酷质感黑金皮肤
Photoshop教程:制作一匹火焰宝马
Photoshop教程:调出偏黄照片鲜丽动漫色调
Photoshop教程:制造青草特效文字
PhotoShop教程:合成可爱的梨子脸部表情
PhotoShop教程:利用模特照片制作艺术海报
PhotoShop教程:滤镜工具制作漂亮的放射光效果
PhotoShop教程:合成断壁残垣中的少女
PhotoShop教程:制作立体金属铁链
PhotoShop教程:打造坠落的燃烧着的飞机
Photoshop教程:打造“爱护地球家园”海报
Photoshop教程:制作海边度假休闲宣传海报

Photoshop 中的 PS教程:制作未来主义的汽车类网站模板


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

Photoshop设计制作未来主义的超酷汽车类网站模板,最终效果如下:

Futuristic Layout #2 Tutorial: Final Result

新建850x850px大小黑色背景,用多边形套锁工具勾选如下图区域

Futuristic Layout #2 image 1

填充白色,其间依然保持选框选中状态下添加蒙板,随后转换到“通道”图层中会看到一个“图层蒙板0通道”的图层,将其选中,其他不要选

Futuristic Layout #2 image 2 

随后使用“滤镜 >  模糊 > 镜头模糊”,设置半径为10,完成后如下图。本文是网页教学www.RuanChen收集整理或者原创内容,转载请注明出处!

 Futuristic Layout #2 image 3

按ctrl+l 打开“色阶”面板。调整如下图所示,这样你会看到之前的棱角很厉害的多边形变成圆角多边形,对于做网站这种做法十分有用,可以用在很多场合,请大家熟练掌握

Futuristic Layout #2 image 4 

Futuristic Layout #2 image 5 

按ctrl的同时点通道中的“图层蒙板0通道”图层,使其产生选区,随后切换到图层,新建图层并删除之前的图层,填充白色,使用如下图图层样式

Futuristic Layout #2 image 6 

Futuristic Layout #2 image 7

Futuristic Layout #2 image 8

Futuristic Layout #2 image 9 

完成效果如下

Futuristic Layout #2 image 10 

使用矩形在形状的上部绘制如下颜色矩形,不透明度为10%

Futuristic Layout #2 image 11 

使用#232323 和 #383838 颜色制作1px分割线,如下红色选中的部分

Futuristic Layout #2 image 12 

加入LOGO与导航文字。加此信息软晨学习网(RuanChen.Com)发布目的是为了防止你变懒!RuanChen.Com不主张采集!

Futuristic Layout #2 image 13 

制作如下两个蓝色的圆,颜色为#1a88e4

Futuristic Layout #2 image 14 

为圆设置“滤镜 > 模糊 > 镜头模糊”设置成近似如下样子即可

Futuristic Layout #2 image 15 

制作光线形状区域

Futuristic Layout #2 image 16 

模糊形状到15px,同时调整渐变!

Futuristic Layout #2 image 17 

用颜色#1a88e4 添加导航线条

Futuristic Layout #2 image 18 

使用圆角矩形,半径设置为10,在导航下建立一个大的区域,并添加如下图层样式

Futuristic Layout #2 image 19

Futuristic Layout #2 image 20 

Futuristic Layout #2 image 21 

增加文字与图片信息

Futuristic Layout #2 image 22 

添加一些箭头小图标,样式如下

Futuristic Layout #2 image 23 

同样方法在做一个区域。看到本信息说明该文是通过网页教学(RuanChen.Com)整理发布的,请不要删掉!

Futuristic Layout #2 image 24 

添加内容

Futuristic Layout #2 image 25 

将头部导航垂直反转作为底部

Futuristic Layout #2 image 26 

最后完成的网站页面如下

Futuristic Layout #2 Tutorial: Final Result