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

Photoshop
照片处理 Photoshop打造照片阳春白雪效果
Photoshop调色教程 偏色宝宝照片肤色调整
利用Photoshop曲线和抽出简单几步扣图法
Photoshop CS3新增黑白转换命令原理剖析
用Photoshop为信封盖上奥运中国印
Photoshop调色教程:怀旧色调效果简单打造
Photoshop处理阴天拍摄的照片
用PS制作搞笑大头Q版人物
很简单的两种PS抠图方法
Photoshop简单打造怀旧色调效果
用Photoshop去除美丽插画中的碍眼文字
使用Photoshop绘制一幅浪漫的夏夜壁纸
Photoshop简单制作蕾丝边框
PS简单制作"波谱艺术"照片效果
Fireworks教程:制作逼真梵高之光特效
Photoshop简单打造流行的糖水MM照片
Photoshop打造V.ONai风格的非主流照片教程
Photoshop处理家庭儿童照片数码的方法
用Photoshop简单调制柔和色调漂亮签名照片
入门:Photoshop简单绘制Vista风格网页按钮

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


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