在UI和排版中,让图片快速出彩的10个技巧

释放双眼,带上耳机,听听看~!
编者按:这篇文章来自 UI 规划师 Victor Adeyemo,他将自己走过无数弯路之后总结出来的图片运用技巧梳理成为一篇干货满满的文章,这些技巧能够应用到UI和平面排版傍边,往下看看吧:假如你仔细检查如今高质量的 UI 规划,会发现那些优异的规划背后有许多共通的技术和办法,你能够将它们无缝地运用到自己的 UI 和视觉规划傍边,这些办法和技巧能够让你看起来满足专业。这篇文章傍边的许多内容来源于我早期规划阶段的挫折和失败。

编者按:这篇文章来自 UI 规划师 Victor Adeyemo,他将自己走过许多弯路之后总结出来的图片运用技巧梳理成为一篇干货满满的文章,这些技巧可以应用到UI和平面排版傍边,往下看看吧:

假如你仔细查看现在高质量的 UI 规划,会发现那些优异的规划背后有许多共通的技能和方法,你可以将它们无缝地运用到自己的 UI 和视觉规划傍边,这些方法和技巧可以让你看起来满足专业。

这篇文章傍边的许多内容来历于我早期规划阶段的挫折和失利。和咱们相同,当我看着这些优异的作品的时分,会像面对着万花筒相同,看到精彩绚丽的效果,可是真等我自己做的时分,才会发现万花筒的外壳拿走之后,剩下的仅仅一块简略的碎片。这就是咱们绝大多数人所面对的问题——咱们没有从这些优异的规划傍边找到规则和共性,而不仅仅是漫无目的地赏识。

在一次次的失利和尝试傍边,我开始记录和梳理这些成功的规划的长处,开始将经验反馈到自己的规划项目傍边。这篇文章我就主要来分享我这方面的经验和总结,期望这些技巧最终也能让你的规划相同优异。

1、用图片作为布景来化解单调

在一部分UI界面中,运用贴合场景和氛围的图片作为布景,能带来更加沉浸的体会。仅仅需求注意的是,需求调整明暗,确保前后景的对比度要满足强。

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 Smoczyska

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

给TA打赏
共{{data.count}}人
人已打赏
教程分享

销量翻10倍!爆款礼物是如何设计出来的?

2021-6-29 17:17:15

教程分享

B端体验细节(二):通用性图标统一的秘诀

2021-7-1 17:16:25

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索