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

Photoshop
photoshop教程:在LAB模式下用曲线调整偏色照片
photoshop教程:简单打造古典竹简签名
Photoshop教程:打造酷酷豹纹的文件夹图标
Photoshop基础教程:虚线的终极应用
Photoshop基础教程:制作清爽漂亮的矢量泡泡
Photoshop CS3教程:星光闪闪_逐帧动画基础实例
Photoshop初学者实例教程:制作漂亮的自定义笔刷和形状
Photoshop初学者实例教程:快速自制星光笔刷
Photoshop核心概念:图层的应用基础教程
photoshop教程:配合数位板绘制蓝色幻梦美男漫画
Photoshop初学者实例教程:三步打造照片为逼真金箔画
Photoshop初学者实例教程:奥运五环的制作过程
photoshop CS3基础教程:逐帧动画实例:旋转和缩放的花特效
Photoshop合成教程:庆祝国庆打造设计宣传招贴画
Photoshop基础教程:打造迪斯尼卡通照片为漂亮荧光线描效果
Photoshop基础教程:打造光影笔刷绚丽效果
Photoshop教程:运用抽出和通道抠出蒲公英
Photoshop教程:打造专业摄影移轴镜头特效
Photoshop调色实例教程:打造暗色调旋舞门效果
Photoshop教程:路径工具制作飘逸的飘带

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


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

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

 

放入文字与图片

 

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