首页 > 办公 > Photoshop > 正文

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

2024-08-21 23:23:05
字体:
来源:转载
供稿:网友

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

futuristic layout #2 tutorial: final result

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

futuristic layout #2 image 1

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

futuristic layout #2 image 2 

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

 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与导航文字。加此信息网页设计(webjx.com)发布目的是为了防止你变懒!webjx.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 

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

futuristic layout #2 image 24 

添加内容

futuristic layout #2 image 25 

|||

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

futuristic layout #2 image 26 

最后完成的网站页面如下

futuristic layout #2 tutorial: final result 

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表