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

Photoshop
photoshop做一个奥运五环
手机照片太模糊?变成手绘更漂亮
photoshop让美女肤质更加细腻
Photoshop制作神秘浪漫的美女婚纱照片
Photoshop制作超炫帆布鞋广告
Photoshop制作斑斓的字体效果
photoshop打造怀旧风格婚片
photoshop调出夏日傍晚的昏黄气息
photoshop制作缤纷心形云朵
Photoshop制作惊人的手中闪电特效
Photoshop经典合成教程:人的能量推翻汽车
photoshop撕掉照片上美女衣服
用滤镜给照片加上雨雾中的玻璃效果
滤镜运用:制作斑驳的墙壁
恬静女孩手绘效果
Photoshop用水珠材质制作柔滑水特效字
photoshop手绘穿着晚礼服的少女
设计作品欣赏:10个漂亮的黑白插画
Photoshop让可爱的宝宝变成小天使
PS合成教程:不可预见的世界末日场景

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-27   浏览: 465 ::
收藏到网摘: 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