Photoshop设计网页游戏UI的专题页棕色系网页教程

2016-03-19 01:50 16 1 收藏

有了下面这个Photoshop设计网页游戏UI的专题页棕色系网页教程教程，不懂Photoshop设计网页游戏UI的专题页棕色系网页教程的也能装懂了，赶紧get起来装逼一下吧！

【 tulaoshi.com - PS 】

来源：畅游VC 作者：畅游VC
教程重点是网页头版的设计，需要根据客户的要求确定好页面要表现的内容；然后搜集相关的素材，根据自己的创意发挥，把画面做得绚丽，有视觉冲击效果即可。
最终效果

既然主题”全球争霸赛“很明确，那我们就可以围绕这个去进行专题的构思了。首先，还是在脑海里想象下所要打造的一个大概的场景。

各路英豪争夺全球第一，反映到游戏中自然也就是各门派的英雄去争夺武林盟主的感觉，可以把英雄围绕四周，中间放一个类似奖牌的物品，那么大致的场景及场面基调也就可以定下来了。我们还是先提炼一下关键词。

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

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

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

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

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

6、再次压暗整个画面。

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

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/ps/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/ps/）8、给中间部分打光，这里主要分为3层，最下面一层是偏红色，范围最大；中间一层偏黄色，范围比红色部分略小；最上面的一层自然是白色，也就是光源的位置，范围最小。这一步相当于给画面添加一个光源，光线从中间到四周逐渐减弱。

Tips:
这里在对画面进行压暗处理的时候，并没有对画面本身具有的火球、爆炸火焰等进行相应处理，这些本身的火光后期可以利用，所以不用进行压暗，在处理的时候应该在蒙版上擦除这一部分。框内蒙版上的黑色区域即为火光部分，保留。

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

12下一页

来源:http://www.tulaoshi.com/n/20160319/1900917.html

上一篇： PS设计网页产品展示类蓝色系主页教程
下一篇： Photoshop设计简洁大方干净的网页界面设计教程

看过《Photoshop设计网页游戏UI的专题页棕色系网页教程》的人还看了以下文章更多>>

怎样设计网页

标签： Web开发

在网页设计的认识上，许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件，就能搞好网页设计了。其实网页设计是一个感性思考与理性分析相结合的复杂的过程，它的方向取决于设计的任务，它的实现依赖于网页的制作。正所谓“功夫在诗外”，网页设计中最重要的东西，并非在软件的应用上，而是在我们对网页设计的理解以及设计制...

用核心路径法设计网页专题页面

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

译者注：文章的原名为Designing Screens Using Cores and Paths。本文作者受到城市规划中交通需求线的启发，提出了网站设计的核心-路径法。区别于通常采用的从框架到主页以及导航的方式，核心-路径法让设计者从核心内容入手，由内而外来设计。这个打破常规的方法能够在网站中创造最直接的路径，以便用户找到核心内容。链接原文：http://boxes...

详细解析游戏网页的专题设计思路

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

这一次介绍快速专题制作的一个方法，只是给大家提供其中的一个小思路，并不一定适用每一个专题，如果在你紧急的情况下，不妨试试这个。当接到一个紧急需求的时候，设计师脑子里一定在抱怨不爽了。因为设计要用赶出来的话，是很难有优秀的作品的。但有时候不得不面对现实，需求方急着要，我们也只能加快速度设计。把脑子里有的设计形式全都...

怎样设计网页？怎样制作网页？

标签： Web开发

在网页设计的认识上，许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件，就能搞好网页设计了。其实网页设计是一个感性思考与理性分析相结合的复杂的过程，它的方向取决于设计的任务，它的实现依赖于网页的制作。正所谓功夫在诗外，网页设计中最重要的东西，并非在软件的应用上，而是在我们对网页设计的理解以及设计...

PS设计网页：立体效果图标阴影网页设计教程

标签： PS PS基础 ps平面设计教程 ps去水印教程

最终效果这里是作品预览图. 点击此处预览全图. 新建PSD文件 1 开始创建文档(Ctrl+N); 高和宽均为 1200 像素 . 使背景图层可编辑 2 按照默认设置, Photoshop将会锁定背景图层因此你不能进行编辑.为了使它可编辑, 在图层面板双击背景图层 (如果图层面板未激活,按下F7触发). 另外一种方法, 你可以在背景层上击右键,选择 “背景图层”...

查看更多精彩>>