当前位置:首页>ps实例教程>ps网页设计>网页模板>教程内容

Photoshop设计动漫游戏网站模板(8)

来源:未知 作者:admin 学习:6636人次

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

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

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

完成后的矩形效果

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

导入LOGO文件

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

导入一张光晕图片

 


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

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

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

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

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

Photoshop设计制作华丽立体游戏网站模板_bbs.16xx8.com9

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

Photoshop设计制作华丽立体游戏网站模板_bbs.16xx8.com10

Photoshop设计制作华丽立体游戏网站模板_bbs.16xx8.com11


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

Photoshop设计制作华丽立体游戏网站模板_bbs.16xx8.com12

 

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

Photoshop设计制作华丽立体游戏网站模板_bbs.16xx8.com14

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

Photoshop设计制作华丽立体游戏网站模板_bbs.16xx8.com15


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

Photoshop设计制作华丽立体游戏网站模板_bbs.16xx8.com16

 

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

Photoshop设计制作华丽立体游戏网站模板_bbs.16xx8.com18

制作白色矩形

Photoshop设计制作华丽立体游戏网站模板_bbs.16xx8.com19


添加样式

Photoshop设计制作华丽立体游戏网站模板_bbs.16xx8.com20

Photoshop设计制作华丽立体游戏网站模板_bbs.16xx8.com21

Photoshop设计制作华丽立体游戏网站模板_bbs.16xx8.com22

Photoshop设计制作华丽立体游戏网站模板_bbs.16xx8.com23


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

 

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

Photoshop设计制作华丽立体游戏网站模板_bbs.16xx8.com25

添加文字与箭头 

Photoshop设计制作华丽立体游戏网站模板_bbs.16xx8.com26


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

 

放入文字与图片

 

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

 



学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
暂无评论,交个作业支持一下吧~

关注大神微博加入>>

网友求助,请回答!