首页 > 办公 > Photoshop > 正文

Photoshop设计制作华丽立体游戏网站模板

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

新建950 x 1160 大小文件,填充背景颜色#161616,使用矩形工具制作宽900、高190的矩形,并添加如下图层样式

photoshop设计制作华丽立体游戏网站模板_网页教学1

 

photoshop设计制作华丽立体游戏网站模板_网页教学2

 

photoshop设计制作华丽立体游戏网站模板_网页教学3

 

完成后的矩形效果

photoshop设计制作华丽立体游戏网站模板_网页教学4

 

导入logo文件

photoshop设计制作华丽立体游戏网站模板_网页教学5

 

导入一张光晕图片

 

|||

将图片裁剪到适当尺寸,放入游戏网站的头部,调整图片的不透明度和颜色,使其与整个蓝色背景融合在一起

photoshop设计制作华丽立体游戏网站模板_网页教学7

 

为logo标志添加背景边框,并设置填充为8%

photoshop设计制作华丽立体游戏网站模板_网页教学8

 

制作两条矩形条作为导航按钮的背景区域

photoshop设计制作华丽立体游戏网站模板_网页教学9

 

设置顶部的矩形条图层样式如下

photoshop设计制作华丽立体游戏网站模板_网页教学10

 

photoshop设计制作华丽立体游戏网站模板_网页教学11

|||

设置底部的矩形条样式如下

photoshop设计制作华丽立体游戏网站模板_网页教学12

 

 

 

为了突出立体质感,制作一个白色矩形条,高度为其一半,设置不透明度为4%

photoshop设计制作华丽立体游戏网站模板_网页教学14

 

为两条导航条添加文字,并且我们用两条1px高度的线条(一黑一白)来分割他们之前的区域

photoshop设计制作华丽立体游戏网站模板_网页教学15

|||

制作一个圆角矩形,使用如下样式,当鼠标移动到按钮上时作为按钮的背景

photoshop设计制作华丽立体游戏网站模板_网页教学16

 

 

 

如下图就是鼠标移动到news按钮时的效果了

photoshop设计制作华丽立体游戏网站模板_网页教学18

 

制作白色矩形

photoshop设计制作华丽立体游戏网站模板_网页教学19

|||

添加样式

photoshop设计制作华丽立体游戏网站模板_网页教学20

 

photoshop设计制作华丽立体游戏网站模板_网页教学21

 

photoshop设计制作华丽立体游戏网站模板_网页教学22

 

photoshop设计制作华丽立体游戏网站模板_网页教学23

|||

将完成后的矩形复制一次放到底部,将游戏图片放入两者之间

 

 

为顶部矩形上部添加白色矩形(高度为矩形的一半),设置不透明度为 3%,产生质感

photoshop设计制作华丽立体游戏网站模板_网页教学25

 

添加文字与箭头 

photoshop设计制作华丽立体游戏网站模板_网页教学26

|||

依照上面完成的区块样式制作网站的其他区块

 

放入文字与图片

 

完成后的游戏网站的整体效果如下图

 

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