云手机网页版 Photoshop设计游戏专题页教程

本教程为大家给出一个设计游戏专题页面的思路，在色彩搭配方面做了详细说明，在素材选择方面也做了详细说明，对于学习网页设计的小伙伴而言，是篇颇为不错的入门文章，推荐给大家。教程重点是网页头版的设计，要依据客户的要求确定好页面所要表现的内容，接着搜集相关的素材，凭借自己的创意发挥kiayun手机版登录app游戏登录入口.手机端安装.cc，将画面做得绚丽，具备视觉冲击效果便可。

最终效果

既已明确主题为“全球争霸赛”，那么我们便能围绕其展开专题之构思。首先，依旧需于脑海之中想象那即将打造的大致场景。

五湖四海的豪杰竞相角逐全球首位，映射到游戏里那便是各个门派的英雄去争逐武林盟主这般的况味，能够环绕四周安置英雄，于中间放置一个类似奖牌的物件，如此大致的情景以及场面的基调便能够确定下来，现在先提取一下关键词，我们。

依据联想到的这些关键词，我们便能够开展素材的搜索了。此页面所运用的主要是在游戏以内提供出来的人物以及场景原画素材，外部素材并未涉及太多，我在这里只是把所运用到的游戏内部的素材罗列一番。

1、我们开始打造场景。

2、这儿重点是针对原画开展了一番把四周压暗同时对中间予以提亮的操作，之所以施行这般的操作，缘由在于能够使得中间的那主体部分全面呈现而尤其凸显。我们逐一来瞧瞧怎样达成目前这般呈现方式的功效。

3、首先，对原画的两边做模糊处理，增添一些景深效果。其方法是，先将原画转化为智能对象，接着添加高斯模糊数值约为5，随后对滤镜的蒙版实施擦除，把不需要模糊的部位擦掉。

画面的亮度以及饱和度合理予以适度调低，对于对比度进行扩大增强操作，凭借如此这般做法，能够有效去减少因为原画在色彩表现方面呈现出的过多过艳状况，从而避免给后续过程中的调色工作造成不便。

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

6、再次压暗整个画面。

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

8、对中间部分进行打光处理，此处主要分为 3 层，底层颜色偏红，其范围是最大的，中间一层色泽偏黄，该范围相较红色部分略微小些，最上面的那一层是白色，此位置正是光源所处kiayun手机版登录app游戏登录入口.手机端安装.cc，范围乃最小的。这一步的作用等同于给画面增添一个光源，光线是从中间朝着四周渐渐变弱的。

Tips:

当在此处针对画面开展压暗操作之际，对于画面自身所具备的火球、爆炸火焰之类的，并未作出相应的处理，这些自体存在的火光于后期是能够加以利用的，因而无需进行压暗，在实施处理之时应当于蒙版上把这一部分给擦除。框内蒙版上面的黑色区域就是火光部分，予以保留。

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

10、先依照主次关系对文字予以排版，在此同样最好运用居中的形式。“全球争霸赛”这几个字是同事先前做好的变形，我在这儿直接拿来使用了，文字变形并非本次教程的重点，所以这儿不进行详细介绍，感兴趣的可看一下畅游VC关于文字变形的教程。

文字排好后，用钢笔工具，在文字下面的那一层，勾出黑底轮廓，这存在多种形式，那些画工较好的同学，能够勾出特别厉害的底，而我这里只是做了轻微处理，显然我并非画工很好的同学 ，给边角处添加了一些突出的尖，让它看上去显得较为尖锐。

做文字底部效果，叠加一层材质，选择一个稍稍倾向棕色具体色值为#2e2320给底部用，之后着重进行斜面和浮雕的处理。

《webgame网页游戏开发设计简明教程》

《webgame网页游戏开发设计简明教程》

下载

12、应用斜面和浮雕之际，需留意“方法和深度”的数值，建议诸位自行持续调节，去感受一下其中的变化之处。我这边在通常用到此效果时，是分别将其选为“平滑”与“1000”，如此能够让斜面的分割变得清晰，而且不会出现杂边。

下面的高光部分，以及阴影部分，是要经由不断去看效果图，进而用以调整的。在样式调整完毕之后，需找寻一张墙壁的素材，将其叠加至底部，随后依据叠加之后所呈现的效果，做与此相应的调整，如此便可。

第十三，针对文字制作效果，其方法大致相类，主要亦是凭借图层样式，再接续增添墙壁材质之叠加，于此运用各异的颜色用以区分主标与副标，到了后期能够借助白色柔性画笔为文字添加些许高光，径直实施涂抹，而后予以叠加便可（在此处不再作详尽阐述）。

14、找一些刀剑以及金属装饰，去对我们的标题做修饰，使其看起来充满对战的那种感觉，这是其中一步。这里大家容易出现一个偏差之处，有的同学或许会认为，后面的大刀是把完整的刀予以复制后又进行水平翻转的情况。事实上并非这般，鉴于刀的中间部位是被遮挡住的，且我们要觅得一把各方面特质全然契合我们所期望的刀并非轻而易举之事，故而此时我们能够拆分为两个部分来寻觅，分别去寻找自己脑海中所构想的刀柄以及刀刃，寻觅之际必定要找那种看上去颇为霸气的刀，比如说在此处由于是天龙的专题，我在找寻刀柄之时就寻得了一个带有龙头造型的刀柄，与游戏主题也能够较为贴合。

要找的刀刃呀，最好是窄的要比较宽阔的那种，可不是日本武士所使用的那般细细的刀具样子，而是类似往昔砍头时运用的大大的刀具，（哎呀，这怪血腥吓人的），看上去好像会显得较为有气势，把这两者一并结合起来，进行复制然后翻转，接着再经由调色以及亮度和对比度的调节，便能获得当下的这种效果。在这里要留意的是，调色之际稍微朝着页面的整体色调方面去靠近。

位于最上方的金属修饰物，是平常收集而来的，它能够从一些武器、金属盔甲以及一些游戏ui上面扣抠取，经过加工后得到，在此处当作装饰物，也能够发挥出很好的作用。有同学或许会发问，为何不将这个修饰物放置在下面呢？缘由十分简单，由于下面我们还要放置一些文字内容，恰好能够放置在两个刀刃之间。

把其他的文字部分内容排好，即可得到下图的效果。

15、给各大高手进行打光调色处理。

首先，将我们所寻得的六位高手根据动作的对应关联，调整其大小比例，再者，对其进行水平翻转，借此达成画面的平衡与和谐。大致在此介绍一下，弓箭女这般模样，是属于正面稍微偏向一点点的那种，其面部有着略微的朝向，因而选取她这人作为正前方之主要人物；葫芦娃也是如此，属于正面微偏一点的情况，面部有略微的朝向，故而就也选取他作为正前方主要人物；和尚呈现出一种跳跃飞起的感觉，处在这样的状态；菜刀男同样是属于跳跃飞起的感觉，凭借此状；所以和尚和菜刀男在排列的时候，位置是略微高于主人物的，而且他俩的姿势恰好能够相互呼应，真不愧被称作好基友；扇子男明显是侧身的姿态，身体所占的比重不大，基于此点；回眸女也是明显的侧身，身体所占比重不大，因这缘故；所以扇子男和回眸女都缩小放置在最两边（谁让你俩不正面相待，打入冷板凳）。

这里，以右半边的三位壮士，来给大伙作打光的阐释云手机网页版，打头阵盯上葫芦娃，给葫芦娃添上蒙板，拿柔性画笔，擦掉膝盖以下的部分，在其上方，构建剪切蒙版，拽出一个自背景底色至透明的渐变，促使葫芦娃跟画面愈加贴合。

17、将饱和度予以降低，把对比度进行加大，以此让人物看上去更具质感（呈现于下图左处）。运用色彩平衡给人物增添环境之色，朝着红黄这一方向予以调整（呈现于下图右处）。

首先，将饱和度予以降低，接着，把对比度予以加大，以此让人物整体看起来更具质感，呈现于下图左边示例。然后，借助色彩平衡这个方式来给人物增添环境色，并且朝着红色与黄色这样的方向去进行调整，此为下图右边示例。

将人物左侧的背景再度提亮，借助柔性画笔予以叠加，或者经由图层样式吸取环境色来进行调节（图左）。于人物的最上方创建剪切蒙版，自左上方帽檐处朝右下方拉白色至透明的渐变，把填充设为零，运用图层样式调整颜色给人物进一步增添环境色亮光，致使人物的受光面从左上朝着右下方逐步减弱（图右）。

20、菜刀男和回眸女的处理手法跟葫芦娃相类似，都是先降低饱和度，接着调色，之后去进行打光，要注意的是，距离中间光源远近存在差异，受光程度也并不相同，像这里菜刀男的受光要比葫芦娃略微弱一些，而回眸女的受光最为弱。另外还有一点，就是菜刀男处于葫芦娃的身后，会有一部分光因为打到葫芦娃的背而反射到菜刀男的左侧，所以左侧的受光略强一点。依据这些关系，我们将人物的受光处理好如图所示。

21、左侧那三位壮士的处理方式跟右侧是一样的，此处就不再详细叙述了，最后的呈现效果就如同图中所示。

要是大家对这种逆光情形缺乏足够理解，无妨回去做个简易测试。回到家后，先把屋里灯关上，接着打开手电筒亦或手机闪光灯朝着自己照射，随后伸出一手，冲着手电筒去，借由变动手掌与手电筒以及自身眼睛之间的距离，进而观察手掌颜色及某些细节的可辨识度怎么个情况。相信经由这个小实验能够助力大家对这种逆光现象形成大致了解。还有一点要留意的是，上图存在近大远小、近清晰远模糊的透视关联，最边上的人物相较于其他人物而言更小些，还需略微增添高斯模糊进行处理，如此才会更显真实。

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

上述这些情况，便是利用那PS去开展设计制作，从而达成炫酷的游戏专题的全部相关内容了，期望大家伙都能够心生喜爱之情，能够给诸位提供一个有关设计的思路。