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

Photoshop
photoshop 简单合成水墨风格的美人鱼
photoshop 鼠绘漂亮的身着白色婚纱的新娘
Photoshop 简单的常用立体字
Photoshop 柔和的青黄色室内人物照片
Photoshop 调出人物照片亮丽的蓝色调
Photoshop 打造超酷的转手绘帅哥
Photoshop 制作超梦幻的情人节心形壁纸
photoshop 鼠绘瀑布下的古代美女
Photoshop 制作简洁的潮流插画
Photoshop 调出人物照片温馨的暖色调
Photoshop 快速打造紫灰色的人物照片
Photoshop 修复局部掉色的老照片
Photoshop 颓废的彩色云彩壁纸
photoshop 超强合成水面上的荒凉世界
Photoshop调色 打造清爽的淡蓝色室内人物照片
Photoshop 加强室内人像的质感并润色
Photoshop 打造颓废的黑白签名图教程
Photoshop 给人物照片加上淡淡的水墨背景
Photoshop 个性的卡通人物签名效果
Photoshop 给偏暗的人物局部美化及润色

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


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