纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页photoshop教程图片处理

设计一款绚丽的游戏风格主题网页 PS专题网页制作教程

专题网页制作教程   2021-06-28 我要评论
PS专题网页制作教程:设计一款绚丽的游戏风格主题网页教程重点是网页头版的设计需要根据客户的要求确定好页面要表现的内容;然后搜集相关的素材根据自己的创意发挥把画面做得绚丽有视觉冲击效果即可 最终效果

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

既然主题”全球争霸赛“很明确那我们就可以围绕这个去进行专题的构思了首先还是在脑海里想象下所要打造的一个大概的场景 各路英豪争夺全球第一反映到游戏中自然也就是各门派的英雄去争夺武林盟主的感觉可以把英雄围绕四周中间放一个类似奖牌的物品那么大致的场景及场面基调也就可以定下来了我们还是先提炼一下关键词

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

根据联想到的这些关键词我们就可以进行素材的搜索啦这个页面用的主要是游戏内提供的人物和场景原画素材外部素材没有到太多我这里只罗列一下所用到的游戏内部的素材

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

1、我们开始打造场景

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

2、这里主要就是对原画进行了一个压暗四周提亮中间的处理之所以这样处理就是因为可以使中间的主题部分充分突出我们来一步步看下怎么达到现在的效果

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

3、首先对原画的两边进行模糊处理增加一些景深效果方法是可以先把原画转为智能对象然后添加高斯模糊数值5左右再对滤镜的蒙版进行擦除把不需要模糊的地方擦掉

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

4、适当降低亮度和饱和度加大画面对比度减少原画本身色彩过多过艳给后期调色带来的不便

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

5、给画面添加红黄色调是页面暗处偏红棕亮出微微偏黄

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

6、再次压暗整个画面

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

7、提亮天空部分利用白色柔性画笔在天空处涂抹模式叠加

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

8、给中间部分打光这里主要分为3层最下面一层是偏红色范围最大;中间一层偏黄色范围比红色部分略小;最上面的一层自然是白色也就是光源的位置范围最小这一步相当于给画面添加一个光源光线从中间到四周逐渐减弱 Tips: 这里在对画面进行压暗处理的时候并没有对画面本身具有的火球、爆炸火焰等进行相应处理这些本身的火光后期可以利用所以不用进行压暗在处理的时候应该在蒙版上擦除这一部分框内蒙版上的黑色区域即为火光部分保留

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

9、这里主要教大家来制作这种标题的效果

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

10、先对文字按照主次关系进行排版这里同样最好采用居中的形式“全球争霸赛”这几个字是同事之前做好的变形我这里直接拿来用了文字变形不是本次教程的重点所以这里不做详细介绍感兴趣的可以看下畅游VC关于文字变形的教程 文字排好之后就用钢笔工具在文字的下面层勾出黑底轮廓这个可以有多种形式画工比较好的同学可以勾出非常牛逼的底这里我只做了轻微的处理(很显然我不是画工非常好的同学)给边角处加了一些出来的尖使其看起来显得比较尖锐

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

11、给文字的底做效果叠加材质给底部选择一个偏棕色的色值这里用的是#2e2320然后主要是斜面和浮雕处理

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

12、应用斜面和浮雕时要注意“方法和深度”的值建议大家自己去不断调节体验一下变化之处我这边通常用到这个效果的时候是分别选为“平滑”和“1000”可以使斜面的分割清晰而且不会出现杂边 下面的高光和阴影通过不断看效果图去调整样式调整完之后找一张墙壁的素材叠加到底部再根据叠加之后的效果做相应调整即可

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

13、给文字做效果方法类似主要也是图层样式然后加墙壁材质叠加这里用不同的颜色来区分下主标和副标后期可以用白色柔性画笔去给文字加些高光直接涂抹叠加即可(这里不再详述)

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

14、这一步是找一些刀剑和金属装饰来对我们的标题进行修饰是他们看起来充满对战的感觉这里大家容易有一个误区:有的同学可能觉得后面的大刀是一把完整的刀进行的复制和水平翻转其实不是的因为刀的中间部分是被挡住的而我们想找一把特性完全符合我们期望的刀又不是很容易所以这个时候我们可以拆成两部分来找分别找寻自己想到的刀柄和刀刃找的时候肯定找那种看起来比较霸气的刀例如这里因为是天龙的专题我在找刀柄的时候就找了一个带龙头的刀柄跟游戏主题也可以比较贴切 刀刃呢最好是找比较宽的不是像日本武士用的那种细刀而是像过去砍头用的大刀(尼玛好血腥)看起来会比较霸气两者一结合复制翻转再经过调色和亮度对比度的调整即可得到现在的效果这里要注意调色的时候稍微往页面的整体色调上靠拢 最上方的金属修饰物是平时收集的可以从一些武器金属盔甲以及一些游戏ui上面扣取在经过加工所得这里作为装饰物也可以起到很好的作用有的同学也许会问为什么不把这个修饰物放在下面呢?原因很简单因为下面我们还要放一些文字内容正好可以放在两个刀刃之间 把其他的文字部分内容排好即可得到下图的效果

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

15、给各大高手进行打光调色处理 先把我们找的六大高手按照动作的对应关系调整大小比例和进行水平翻转以达到画面的平衡和谐这里大致介绍一下:弓箭女和葫芦娃都是属于正面微偏一点的面部有略微的朝向所以选取他(她、它)俩作为正前方主要人物;和尚和菜刀男都是属于跳跃飞起的感觉所以在排列的时候略微高于主人物而他俩姿势正好呼应真不愧为好基友;扇子男和回眸女俩人都是明显的侧身身体所占比重不大所以缩小放置最两边(谁让你俩不正面相待打入冷板凳)

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

16、这里以右半边的三位壮士来给大家进行打光的讲解首先拿葫芦娃开刀给葫芦娃添加蒙板用柔性画笔擦除膝盖以下部分在其上方创建剪切蒙版拉一个背景底色到透明的渐变使葫芦娃与画面更加融合

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

17、降低饱和度加大对比度使人物看起来更有质感(下图左)利用色彩平衡给人物添加环境色朝红黄方向去调整(下图右)

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

18、降低饱和度加大对比度使人物看起来更有质感(下图左)利用色彩平衡给人物添加环境色朝红黄方向去调整(下图右)

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

19、对人物左侧的背景再次提亮通过柔性画笔去叠加或者通过图层样式吸取环境色去调节(图左)在人物的最上方创建剪切蒙版从左上方帽檐处向右下方拉白色到透明的渐变填充调为零利用图层样式调整颜色给人物进一步增加环境色亮光使人物的受光面从左上至右下方逐渐减弱(图右)

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

20、菜刀男和回眸女的处理手法同葫芦娃类似都是降低饱和度后调色然后去打光需要注意的是距离中间光源远近不同受光程度也不一样如这里菜刀男的受光要略弱于葫芦娃而回眸女的受光最弱还有一点就是菜刀男在葫芦娃的身后会有一部分光因为打到葫芦娃的背而反射到菜刀男的左侧所以左侧的受光略强一些根据这些关系我们讲人物的受光处理好如图所示

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

21、左半边三位壮士的处理手法与右侧相同这里不再赘述最终效果如图 如果大家对于这种逆光的现象还不是很理解的话可以回去之后做一个简单的测试到家之后关上屋里的灯打开手电筒或者手机的闪光灯照向自己然后伸出自己的手对着手电筒通过改变手掌与手电和自己眼睛的距离来观察手掌的颜色和一些细节的可辨识度相信通过这个小实验可以帮助大家对于这种逆光现象有个大致的了解 上图还有一点需要注意的是近大远小近清晰远模糊的透视关系最边上的人物相对其他来说要更小一些还要稍微加点高斯模糊处理一下这样才更加真实

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页

给最终画面添加一些火花光效增加氛围

PS专题网页制作教程:设计一款绚丽的游戏风格主题网页


相关文章

猜您喜欢

  • 设计一款个性新颖的建筑立体字海报 Photoshop海报制作教程

    Photoshop海报制作教程:设计一款个性新颖的建筑立体字海报,效果图画面简洁视觉上非常大气时尚 作者把立体字做成了高楼大厦里面配上个各种装饰再加上一些城市和新年元素画面非常精彩不过要完成这样一幅作品需要一定的美术功底 最终效果 点小..
  • 怎样设计出受欢迎的网站引导页? 网页设计技巧教程学习

    网页设计技巧教程学习:怎样设计出受欢迎的网站引导页?编者按:迎客入门该大方热情还是谦卑有序?是张灯结彩还是朴素平常?对于引导页来说这都得看产品的调性今天分享一篇好文针对不同类型的软件提出切实可行的具体建议是引导页设计不可多得的好..

网友评论

Copyright 2020 www.gamerfx.net 【游戏天空】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式