PS教程丨游戏网页设计小技巧〔I〕「附调色三部曲」

时间：2023-09-26 03:54:01 | 来源：网站运营

时间：2023-09-26 03:54:01 来源：网站运营

PS教程丨游戏网页设计小技巧〔I〕「附调色三部曲」：饿师兄：「设计本无对错之分，绿色笑脸仅代表可能会更好。本人设计水平有限，根据自己的工作日常，汇总了一些关于游戏网页设计方面的小技巧。说得不对的或者有需要补充的欢迎大家评论，共同进步！」

1. 书法标题排版时尽量拆开每一个字去排

左图的文字为输入法直接输出，右图则是每一个字拆开单独去排版，对比之下右侧的文字通过大小和位置上的变化，使得排版更加错落有致，整体性更强。「也更能表达出作者想吃鸡腿的决心」

2. 在合适的场景给素材增加溢出的暖光

右图中心的暖光起到画龙点睛的作用，会让浏览者感觉到画面更加鲜活温暖，毕竟有阳光的地方总是充满生机。

3. 段落性的内容排版，请优先考虑易读性

字号、颜色、行距等等，都是基于能够让浏览者更易阅读的角度出发；在设计时考虑给出重点文字及链接文字的配色方案，让文字层级更加明朗。

4. 让交互元素更加生动

结合游戏本身，对页面中的交互元素进行更加形象化的设计，不仅可以增加页面的趣味性，也可以直接刺激浏览者的点击欲望。

5. 文字叠加材质时避免出现过曝现象

同样的材质，文字颜色取自同一色系，但饱和度和明度上的差异，导致最终呈现效果的差异。材质过曝不一定只由文字的色彩决定，有时也跟材质的叠加模式有关，这个平衡点需不断尝试。

6. 适当地增加前景有助于拉开空间感

右图中通过添加两侧前景的树无疑让画面的纵深感更强了，通过这样的处理，能让浏览者明显感觉到右图中的人物离我们更远一些。

7. 背光时可尝试给文字增加透光效果

右图中，文字增加透光效果后能让人感觉到文字与整体画面的联系。文字是受到背光影响的，感觉呼吸性更强了，而不是直愣愣地丢在画面中。

8. 多人组合时，利用周围环境元素去进行人物层次的区分

多人组合时，如果不人为地进行层次区分，会给人感觉素材重叠严重，画面平坦没有景深。合理地利用周围环境中的光、云、烟雾等元素，可以很好地对画面的主体元素进行层次上的区分。

9. 竖排文字时要注意正确的阅读顺序

古文中文字竖向排版时，阅读方向为从上至下，从右到左。通常情况下还是按照正常的阅读顺序去进行排版。「PS直排文字工具输入时也能体现」

10. 学会给场景中的素材添加环境色

未经的原画怎样才能跟场景融合？添加环境色是必不可少的。不知道应该怎么添加？建议你找找类似场景的照片去进一步观察。

11. 适当弱化部分场景可以让你的主体更加突出

这部分很好理解，网页是传达信息的，不止是单纯让你关注画面的。弱化场景后，人物、文字以及按钮能，都能得到进一步的突出。「模糊是比较常用的一种方法」

12. 给文字做效果时应首先基于文字的识别度

同样的文字效果，右图暗色背景下要明显好于左图亮色背景，左图考虑的不应该是如果让文字更有质感，而是先搞清楚文字配什么颜色识别度更高。

13. 试着让画面中的元素关联起来

右图中通过添加人物投影，让人物和圆盘之间产生了联系。虽然只是一个很不起眼的小细节，但是往往就是这些小细节，决定了你画面的高度。

14. 修饰类元素不要影响主体的识别度

绿叶、花瓣、碎石、火焰等类型的元素，只是起到进一步烘托氛围的作用，切勿本末倒置，让其抢了主体的风头。

15. 尽可能让LOGO能够清晰地展现

---

• 调整素材的明暗

这步比较简单，直接看下图：

没有变化？仔细看人物的面部。这里用曲线做了微微提亮的处理， 建议在调整的时候采用微调，有时过度调整会导致素材质量的降低及失真。

• 给素材添加大环境色

何为大环境色？就是你的素材所处的大环境下的颜色， 比如，夜色中适当添加冷色，火热战场适当添加暖色。看下图：

这一步我个人通常是先在素材的图层之上加一个纯色的柔光层：

这个柔光层的目的是什么？它只是给素材一个大致的很弱的环境色， 在饱和度和明暗上不能过分的影响原始素材，只是让素材对环境色有微微的体现。 所以，上图中的黄色区域为建议的取色区域。

然后再利用“色彩平衡”对素材进行细调， 阴影、中间调和高光分别对应素材的暗部、中间部和亮部。 「注：这里调整的数值也不宜过大，通常情况下建议在+-10以内，一边观察，一边调整」

• 利用柔性画笔对素材受光和背光进一步调整

想让你的素材跟背景看起来融合，这一步是必不可少的； 只有通过分析来判定素材在场景中的受光和背光，并且手动去打造， 才能让你的素材在场景中看起来不那么生硬。

注：打光的方法请移步至畅游vc的主页,「VC教程」如何快速打造逆光场景， 这里就不再赘述了，感兴趣的朋友可以前去查阅。

不止是游戏或者合成，对一些偏品牌类的图片进行处理， 也是类似的方法，最重要的摸清楚你想要的是什么调性。

上图我想做成一种日式风格，通过观察一些日式风的照片，可以大致把握的一些特点： 低饱和，对比较弱，画面看起来特别素，给人一种“苍白”的感觉。 方向有了，其他就只是操作的问题，记住： 调整时微调，边观察边调整，宁可多次操作，不要一次就过「度」。

• 渐变映射

渐变映射的原理是什么呢？我们通过一个例子来讲解

不知道上面的表达大家能不能看懂？ 其实渐变映射利用的是原图的明暗关系，「跟原图本身的颜色多彩没有关系」

将画面中的暗部、中间调、亮部依次赋予你所定义的渐变范围。