当前位置: 首页 > 图文教程 > 平面设计 > Photoshop > Photoshop设计制作华丽立体游戏网站模板

Photoshop
Photoshop 快速调出外景人物照片柔和的黄绿色
Photoshop 一个透明的玻璃花瓶
Photoshop 绘制冬季气息风格网站首页
PhotoShop 用背景橡皮擦高效抠图法
photoshop 美容教程 快速消除痘痘,完美修复MM肌肤!
photoshop 创建清新、色彩生动的网页布局
photoshop 制作心形宝盒的发光动画
photoshop 漂亮的七彩崩裂文字
Photoshop 思念的怀旧色调照片教程
photoshop 创意合成教程 幽暗森林里的绿色魔女
Photoshop 简单制作打孔文字效果
photoshop 创作一个古色古香的壁画
photoshop 木头文字效果的制作
PhotoShop 制作彩色渐变文字效果
photoshop 图片只留一抹红色视觉效果
PhotoShop 滤镜三步制作出海浪效果
photoshop 制做一个电影DVD的封面
Photoshops 笔刷工具创建平面三维效果
浅谈Photoshop中表格的制作方法
Photoshop 给偏暗的手机人物照片美白

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-27   浏览: 352 ::
收藏到网摘: n/a

新建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

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

 

放入文字与图片

 

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