如何做好系统性的选择网页设计中的图片？从0开始教你如何做网页图片
时间：2023-07-25 23:54:01 | 来源：网站运营
时间：2023-07-25 23:54:01 来源：网站运营
如何做好系统性的选择网页设计中的图片？从0开始教你如何做网页图片：上周有读者留言：
如何为网页系统性的选择图片素材？这个课题太大，只有规律，没有公式能直接套用。
有的设计师，手握几十个素材站，脑子还是懵的，不知道根据什么去选图，更不知道怎么修改图片。所以你觉得网页做得不够优秀，是甲方的图丑，但真的雨你无瓜吗？
1. 甲方提供图片素材的，但素材品质Emmm……
2. 甲方不提供图片素材，需要找素材，但有的行业很难找到品质高的免费图片。
甲方提供了素材和LOGO，我们可以通过LOGO、VI色、点睛色+辅助色、延展图形，来确定配色方案，挑选适合的图片；
如果甲方没有提供VI色，可以根据行业属性、slogan文案确定配色方案，找需要的图片。
例如，博物馆类网站通常会选用红色做点睛色，医疗通常用绿色或者蓝色，律师事务所通常用蓝色或者红色，很少看到律师事务所用黑色吧（觉得找这样的律所打官司前途一片黑暗，看不到胜诉的可能，哈）服务行业：金融、货币等可以用绘制的icon、抽象的图片。
相对找素材，运用好现有素材才是更重要的。经常会遇到甲方给的图片过于小，模糊，产品拍的差，环境杂。只能尽量挑选合适的图片，并在图片优化上下功夫，有几种方法：
1. 色调统一下面4张配图，原图有冷有暖，有明有暗，我们需要以一张图片为标准，把亮度统一，冷暖色统一。（下图中作为标准的是第一张。）
× 错误示例 ×√ 正确示例 √2. 抠图加场景常用于产品图片环境乱，需要把主体物抠下来，加纯色或氛围背景。
3. 加重高光一般用于金属、机械类产品。通常要把原素材的高光进行加重处理，精修细节，突出产品材质和质感。
4. 重新绘制护肤品、美容仪类产品很少直接用原图的，都会把产品绘制一遍，绘制的方法百度一下教程很多，这里就不贴链接了。
5. 图片结构统一图片结构统一，主体物角度统一（特别是人物和产品），踩这个雷的作品很多。所以以团队板块的配图举例，这组图人物头部有大有小，留白也不一致。
× 错误示例 ×√ 正确示例 √修改后的人物头部大小和留白一致，品质感提升很多，两组人物图，面部朝向都是中间。
6. 图片走势统一一组图片在走势上也要保持一致，才能看起来更“顺眼”，例如:
7. 色彩叠加如果有的图片，实在改也不行，修也修不大出来，也没找到更适合的，可以试试把网页的点睛色叠加在图像上。色彩叠加能够帮助所有的图像保持一致的品牌感。尤其是暗色叠加，能很大提升阅读slogan/文案的几率。
这张我觉得图挺好，我就举个例子，大家懂哈8. 配图模特动作、眼神引导根据配图模特的眼神方向、身体动作造型进行文字排版，把用户引导到文案信息上，示例：
将slogan加在人物肢体方向上人物面部转向slogan丝巾飘动的方向引导访客浏览“集团介绍”图片并不是选好做好，就万事大吉了，还要兼顾网站的加载速度，是否居中等。有几个需要注意的点：
1.图片的尺寸，要尽量为偶数。原因是——在15年之前的老版本浏览器中渲染的时候，奇数很容易出现边缘模糊。（现在大部分都已经更新，这里想到了提一句。）
2.图片过大，影响网站加载速度。网站在打开时需要同时加载很多图片，图片大小，是影响网站打开速度的因素之一。造成图片文件较大的原因一般分为以下几种：色彩过于丰富、尺寸大、无压缩。把图片在肉眼很难区分出品质变化的情况下进行适当压缩，是必要做的工作。
这里附带压缩图片的教程：
https://www.uemo.net/list/post/49160/之前写过一篇推荐素材库的文章，和推荐icon的文章，素材不够的伙伴可以拿来用用：
· 用好线性icon，你就是UI街上最亮的仔
· 别人家设计师灵感不断的秘密，可能是这些稳定的素材网站
还有UEdna的网址导航，很全很强大了
http://www.ueso.net/
快来，聊5毛钱的
你有什么神奇的方法拯救图片素材？
每天10点抢U码，多重样式，免费空间，个性化域名，让你的作品在自己的个人站里闪闪发光~个人站申请地址： http://www.uedna.com/
在线咨询
