浅谈H5背景图片处理技巧

时间：2016-10-18 0

我们在做H5时，有了文案，有了图片元素，却常常纠结于背景的设计。毕竟，背景图片是十分需要把控一个“度”，太夺目与太低调都不是最好的，以下笔者就和大家简单聊聊H5背景图片的处理技巧。

纯色背景：

纯色背景的操作最为简单，只需要在H5编辑器调节背景图片的颜色、透明度即可，注意以下两大原则：

一是统一性，同一部H5中，背景主色调适宜统一使用，就算不一样的，也要是同类或近似的颜色，如青配天蓝、墨绿配浅绿、红色与橙红或紫红、黄色与草绿色或橙黄色等，尽量保持作品的协调；

二是反差性，与背景上的图片和文字补色配合，如红与绿、青与橙、黑与白等，因为背景需要起一个衬托的作用，为了更好地突显出背景上的图片和文字，使其形成鲜明的对比，确保内容能得到清晰的呈现。

纹理背景：

有时纯色背景不免令人感到单调无味，若加入一些纹理设计，效果可就截然不同了。纹理也是我们常用的背景素材，纹理好处多多，提升画面背景的质感，呈现一种别致的美。规律性的平铺纹理能活跃整个页面，随性不规则的纹理能给人一种潇洒不受束缚的自由之感，简约优雅的纹理可以把页面中的其他元素衬托得更有吸引力。

现在凡科微传单的H5编辑器在页面背景新增了叠加纹理的功能，可以通过调整背景色、前景色来适应不同的设计风格，大家可以多加尝试。

插图背景：

利用插图作背景会显得更有个性，如果你需要选择自己拍摄的照片作为背景图，考虑到不同手机的性能、网速等，为了让H5加载顺畅，最好先用tinypng、智图之类的工具压缩一下你的照片，并且进行适当的裁剪，尺寸以640x1136px为佳，不要把画面里的主体内容放在太偏下或者偏上的位置，否则可能出现内容显示不全的情况。另外，在网络上搜索背景图也是不错的选择，除了昵图网、花瓣网，以下再推荐外国几个好用的图片素材库给大家。

1、Behance

2、Dribbble

3、Pexels

4、Visual Hunt

5、Picjumbo

透明背景：

然而，无论你是用哪种背景，也难免会因为构图、色调、明度等原因，出现背景与图片元素不协调，或者找不到合适的文案摆放位置的情况。此时，你可以重叠一个透明的背景，不仅能解决上述问题，让内容更加突显更加强调，还能烘托和渲染柔软的气氛，呈现有趣的分割构图，使整个页面显得更有格调和层次感。以下给出几个利用了透明背景的案例让大家感受透明图层的魅力。

以上H5背景图片处理技巧，大家不妨尝试混搭使用，多借鉴多实践，熟能生巧，相信你一定能轻松驾驭H5背景图片的设计。

TAG：H5背景图片

小清新助攻

热门文章

© 2011 - 2020 钛锋网 TMTForum.com 沪ICP备15013635号