图片的10种用法!

这篇文章原文来自 UI 设计师 Victor Adeyemo,他将自己走过无数弯路之后总结出来的图片使用技巧梳理成为一篇干货满满的文章,这些技巧可以应用到UI和平面排版当中,往下看看吧:
和大家一样,当作者看着这些优秀的作品的时候,会像面对着万花筒一样,看到精彩绚丽的效果,可是真等我自己做的时候,才会发现万花筒的外壳拿走之后,剩下的只是一块简单的碎片。这就是我们绝大多数人所面临的问题——我们没有从这些优秀的设计当中找到规则和共性,而不仅仅是漫无目的地欣赏。
在一次次的失败和尝试当中,作者开始记录和梳理这些成功的设计的优点,开始将经验反馈到自己的设计项目当中。这篇文章主要来分享图片这方面的经验和总结,希望这些技巧最后也能让你的设计同样优秀。

1.

作为背景

在一部分设计面中,使用贴合场景和氛围的图片作为背景,能带来更加沉浸的体验。只是需要注意的是,需要调整明暗,确保前后景的对比度要足够强。
Login Screen Redesign — Victor Adeyemo
Nature — Popsabey

2.

融入背景

同样是一种制造沉浸式视觉体验的设计技巧,通过抠图之类的技巧,让某些图片元素和整个背景融为一体,图片和背景的无缝衔接能够给人以一种奇妙的视觉体验。
Lippear Website — Victor Adeyemo
Bloom. Vladimir Biondic

3.

紧密拼接

让高素质的图片紧密无缝地拼接、并排排版,能够制造出一种无缝切高级的视觉效果,高清的图片通常包含着丰富的视觉信息量,并排拼接起来之后,能够制造出致密的信息量,让整个版面呈现出信息的疏密节奏变化。
Discover Moscow
Denis lomov

4.

添加色块投影

同样是一种增加信息层级,消减单调的方法,这种方式百搭而易用,在绝大多数的风格现代的平面排版和UI界面当中,这种小技巧都可以使用,快速提升界面的视觉效果。
Anastasia Yastrebkova
Natalia Smoczyńska

5.

前景/背景添加图案和形状

图案和形状看起来很简单,单独使用的时候确实也很容易显得单调,但是当它作为装饰元素和图片组合在一起的时候,能够快速地构建出颇为不错的装饰效果和视觉张力。
ursae. majorizzz
Bloom Hair — Web design

6.

增加文本、图案、图形

在图片的前景或者背景叠加文本、图案和不规则图形,也同样可以快速增加信息的层级,添加的时候可以不用严格意义上在图片的范畴内,可以错位,可以部分叠加,这样的布局设计更加有趣。
Lifestyle. Vladimir Biondic
Confidence. Vladimir Biondic
Emilia Brewster Website — Halo Lab

7.

剪贴蒙板

这也是最近这些年比较流行且非常使用的一种技巧,使用剪贴蒙版来将图片约束在文本或者图形的外轮廓当中,这上一种增加形式感、有趣的传递信息的方式。
About Page — Joonas Virtanen
Portfolio site — Krista

8.

间距足够窄

控制图片之间的间距足够窄,能够让整个布局显得紧凑而富有凝聚感,图片的聚合能够让整片图片区域显得丰富又集中。
Inbox App — Ben Tortorelli
Unsplash Retro — Sebastian Jungbluth


9.

双色调

在图片上叠加色彩,或者说将图片制作为单色调的配色,能够产生类似黑白照片一般更强的形体感,增加视觉主体的视觉效果,同时借用不同的色彩来营造统一的氛围和情绪。
Colour Me timbers -Johan Adam Horn
iLearn LMS — Neil Lawson
同时,还可以选择为部分的图片叠加色彩,这样的处理方法更加有趣,增加了信息层级。
Website Design — Brian Rodenburg
Search Art Direction — John Adam

10.

裁切形状

虽然绝大多数的图片都是矩形的,但是将图片裁切为其他的图形会让整个设计显得非常新颖。
Welch & Smith — Halo lab
Bloom Website
好了,本期分享结束了,建议可以收藏并转发哦,以备需要之日调用,记得给设长,设为星标,这样就不会错过更多知识啦。
转自:UI范(id:uifan1)
原文作者:Victor Adeyemo
- END -
(0)

相关推荐

  • UI设计|五大视觉元素,以及如何使用它们的5个技巧

    是什么让一个网站变得好看?漂亮的设计需要遵循最终的设计规则吗? 答案:是的,但你必须知道如何发现它们包含的重复可视化UI元素. 在这篇文章中,您将了解: 五大主要视觉元素 如何识别它们(带示例) 关于 ...

  • 嫌弃PPT背景太单调,这个思路助你获得1000种解决方案

    职领office达人学院第794个原创技巧 每当我们制作PPT的时候,总会觉得背景比较难处理,在单调和繁复之间徘徊,不知抉择.   如何保障背景兼具简洁和层次感,提升演示的丰富性呢?   这里为小伙伴 ...

  • 10个实现炫酷UI设计效果的CSS生成工具

    昨天 英文 | https://mattkarski.medium.com/10-amazing-css-generators-for-ui-design-1f790791c4e7 翻译 | 小爱 根 ...

  • 外观设计的基本概念

    专利侵权诉讼实务教程 第17期  作者:大岭 第二章  外观设计专利保护范围的确定 1 外观设计专利基本概念 为了确定外观设计的保护范围,首先需要根据专利审查指南的规定,明确以下概念. 1.2 外观设 ...

  • SUMIFS的10种用法

    SUMIFS 我们一起来看看吧! 数据源(注意:图片大小限制,实际明细数据很多): 我们从简单开始,慢慢介绍 1.空调的金额合计 =SUMIFS(C:C,A:A,"空调") 对应的 ...

  • 爽玩垃圾:淘汰的老旧电脑别扔,分享旧电脑的10种用法,让每个垃圾佬都能开心玩垃圾,支持『环保』

    创作立场声明:总结了10种利用老旧电脑的方法,希望各位垃圾佬玩得开心~ 之前几篇捡垃圾貌似阅读量挺多的,还上了社区排行榜,感谢各位的支持~这期又是来玩垃圾啦~ 开篇碎碎念 平时喜欢捡垃圾,在某鱼收了不 ...

  • 玉屏风颗粒的10种用法

    玉屏风颗粒,是最早出现在新冠肺炎诊疗指南中推荐的中成药之一,用于提高机体免疫力. 除此之外,玉屏风颗粒还蕴含了众多用法,可用于10种不同病症. 玉屏风颗粒的组方 玉屏风颗粒由防风.炙黄芪.白术三味中药 ...

  • 【函数003】-SUMIFS的10种用法帮你整理好了

    想必大家也是眼睛疲劳了,所以我们今天讲讲函数 主题就是SUMIFS函数! 你可能觉得SUMIFS很简单 但是,真的学会了吗? SUMIFS 我们一起来看看吧! 数据源(注意:图片大小限制,实际明细数据 ...

  • 紫微关于“忌”的10种用法

    紫微斗数是一门以宫象星相结合论命的禄命术,可以推算人一生的吉凶变化,其中宫定范围,星定性状,四化定吉凶契机.其中四化方面,又以禄忌为重中之重,因为禄代表开始,忌代表结束,所以禄忌一定,事物的发展方向基 ...

  • Excel中Alt键的10种用法,简单易懂,易学易用

    [温馨提示]亲爱的朋友,阅读之前请您点击[关注],您的支持将是我最大的动力! 在Excel中快捷键小伙伴们不陌生,操作中也会经常用到,可以提高我们的工作效率,使用起来也简单方便.今天阿钟老师分享几个A ...

  • 雌激素经常用,这 10 种用法你都掌握了吗?

    女性体内常见的雌激素包括有雌二醇 (E2).雌酮 (E1) 和雌三醇 (E3),雌激素在女性内分泌和生殖健康方面发挥着重要的作用. 雌激素在妇科领域的具体使用 1. 激素补充治疗:使用 GnRH-a ...

  • VLOOKUP函数最常用的10种用法,你会几种?

    VLOOKUP函数是工作中最常用的一种查找函数,掌握好VLOOKUP函数能够极大提高工作的效率.VLOOKUP函数用于首列查找并返回指定列的值,字母"V"表示垂直方向.VLOOKU ...

  • 鱼腥草,药食2用,10种用法,可用于肺炎、肺脓疡、尿路炎等14种病症

    鱼腥草,药食2用,10种用法,可用于肺炎.肺脓疡.尿路炎等14种病症 鱼腥草三白草科植物蕺菜的干燥地上部分.夏季茎叶茂盛花穗多时采割,除去杂质,晒干.生于山地.沟边.塘边.田梗或林下湿地.主产于江苏. ...