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

Photoshop
梦工厂《驯龙记》艺术设计图曝光
Photoshop新手教程:USM锐化滤镜让照片变清晰
Photoshop教程:渐变效果的清爽色调照片
PS调色教程:富有诗情画意的桂林山水
PS+AI高级教程:超酷的人物混合插画教程
PS教程:智慧型图层不失真缩放图片
Adobe bridge还原Adobe初始设定值
Photoshop CS4拥有摘取和缩图目录功能
作品欣赏:被PS变身为吸血鬼的明星们
Photoshop教程:绘制油漆桶小图标
Photoshop合成图片教程:水雾玻璃后的人像
PS调色教程:黑白效果颓废风格帅哥图片
Photoshop制作精美的漫画诗意签名
Photoshop制作精美的帅哥插画签名
Photoshop制作古典风格文字照片签名
Photoshop签名教程:沉恨细思古典漫画
视觉设计:淘宝UED合成图片的制作过程
Photoshop打造超炫的古典立体花纹文字
Photoshop画笔绘制发光的魔法盒子
photoshop Camera RAW开启D300的Raw

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


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