专栏名称: 互联网er的早读课
专注互联网产品、用研、交互、设计、运营领域精选内容。信息爆炸的社会,每天用心的去读一篇文章,也许胜过你的走马观花。每早八点,我们等你。
目录
51好读  ›  专栏  ›  互联网er的早读课

为什么别人就能设计出高大上的页面?

互联网er的早读课  · 公众号  · 科技媒体  · 2017-02-21 08:25

正文

数十万互联网从业者的共同关注!


作者:可可洛。作者授权早读课转载。
公众号:优秀网页设计(ID:youshege)。
编辑:Dva


最近小编分享大神网页作品中出现了许多大背景设计,无论是landing-page页面设计,还是App界面设计,这俨然已经成为网页设计的一大趋势,最重要的是这种背景式页面让整个作品变得高大上,对于我们来说前提条件是自然是选好图片,并适当进行二次设计调整。


想要作品像设计大神们一样,处理图片时你可以试试这几个方法:

1.色彩叠加于图片上

首先你可以简单处理,选择使用带透明度的白色或黑色进行覆盖,可以帮助你的文字与背景产生一定的对比。



另外一种处理方法是使用品牌主色,在选择背景图片时,可以适当选择对比色系,这样的话页面既可以与品牌产生联系,又能够确保有足够的色调差别,产生力量感,能够加强品牌推广。  


记住要看看你的背景图像的组成,找到最佳的裁剪区域。 确保您的文字覆盖图像在正确的地方(如海洋和土地在这种情况下)较浅的文字覆盖较暗的区域,反之亦然,方便阅读。  


2.几何图形的强调形式


这种处理形式一般与背景模糊、色彩叠加等形式共存,在背景之上置于几何图形,无论是对比强烈或是同类色彩都能够增加整个页面的层次感和设计感,同时还会起到强调特定范围的作用,引导用户进行特定操作。



另外一种方法是使用几何形对背景进行网页切割,打破传统的设计布局,能够对网页布局起到很好的再创意设计。

3.对图片进行模糊化处理


模糊背景(blurred backgrounds)是一个很常见的设计手法,在网页设计中屡见不鲜,模糊背景能使整个设计的基调看上去更加柔美。操作简单,无论是整体模糊、渐变模糊,无需更多修饰,也能营造出干净自然的视觉效果。

4. 使用栅格化图片背景


源于国际主义平面设计风格的栅格背景设计多用于展示产品图片较多的网站,例如摄影网站、设计师作品网站等,使用这种构图布局能够使作品充满秩序感和理性,勒·柯布西埃指出秩序是真正的生命之钥,如果你觉得这种规范化的设计会让作品呆板、没有生机,可以通过个别的空白单元格或者局部空缺进行创意设计。

5. 图片的非对称性处理


栅栅格化在设计中大量使用,或许你可以反其道而行之,对图片使用非对称性处理来吸引用户的注意力。背景不必是完美的整体,可以只是其中的一个元素或者若干元素的组合,以某种排列形式与文字形成完美的平衡。



某一侧的图片切割后以色彩填充,既起到留白的作用,又能以非对称的形式展示文字,或者只是某一个简洁的产品置于干净的画面上,产品图像与文本产生呼应,达成视觉上的平衡。


在小编分享的一系列背景式网页设计作品时,发现评论最多的一定会有“你的图片得好看”“浏览器提供的图片太少”“甲方舍不得买好看图片的版权”,今天小编就来个情人节大放送,分享一些又好看又可以免费商用的图片网站,让你一次收藏个够!


Pexels

网站地址:https://www.pexels.com/


Pexels 上的所有图片都是采用 Creative Commons Zero (CC0) 授权,这也就是说我们能够随意复制、使用、修改、展示这些图片,并应用于商业用途,且不需要任何许可和标记来源。简而言之,随便你使用这些高质量图片。


Magdeleine

网站地址:http://magdeleine.co/browse/



Magdeleine是一个每天分享免费高分辨率照片的网站,可以通过色彩来查找图片,对一些使用品牌色的网页选图会比较有优势,因为该网站是手动选图,因此图片质量较高,也是一个很好的灵感迸发之所。


New Old Stock

网站地址:http://nos.twnsnd.co/


New Old Stock也是一个非常有特色的图片网站,收录了大量高质量的复古图片,这种小众的图片背景一定会让你的网页变得很酷对不对。


Foodiesfeed

网站地址:https://foodiesfeed.com/



Foodiesfeed是主打美食图片的分享网站,同样也是免费商用,仅有一个条件禁止销售和二次销售,小编认为这对我们只是取用背景来说是完全适用的。如果这并不是你的菜,它还拥有一些辅助“技能”,Food Photography Magazine 中收录不少主题性的食物杂志,除了能看到一些摆盘、颜色搭配技巧外,还能发现更特别的拍摄手法。相信这会提高你的朋友圈晒图水平。

StockSnap

网站地址:https://stocksnap.io/



StockSnap.io 的网站目的很简单,希望能为寻找美丽图片的使用者提供一个完整且丰富的资料库,网站每天都会从摄影师上传的相片里,找出高品质、高解析度的照片并更新至网站,让其他人可以免费下载、运用。


资源这么多,一定能够选出一张既让你满意又让甲方爸爸开心的图片,如果没有,带着甲方爸爸来找小编/微笑。对了,记得给甲方爸爸普及一下留白的美。


投稿邮箱:[email protected]

本文由作者授权早读课发表,转载请联系作者。


优秀人才不缺工作机会,只缺适合自己的好机会。但是他们往往没有精力从海量机会中找到最适合的那个。

100offer 会对平台上的人才和企业进行严格筛选,让「最好的人才」和「最好的公司」相遇。 

扫描下方二维码,注册 100offer,谈谈你对下一份工作的期待。一周内,收到 5-10 个满足你要求的好机会