透明背景png在UI设计中有何妙用

现在很多海报、Banner、网页都喜欢用透明效果作为背景，在增添页面的对照感和可读性的同时对整体的效果妨碍又不大，可谓一举两得。这篇好文，列举了12种透明效果背景的设计方法，收!
01. 使乱七八糟的背景变得流畅
利用插图和有质感的模范背景，能加上个性去设计。但是同时，很可能会变得乱七八糟，使文字无法阅读。作为解决的方法，可以重叠一个半透明的背景。
下面这个例子，将漂亮的红酒酿造图案作为背景利用的宣传活动海报。如果，没有半透明的白色滤色片的话，设计的就很过分，文字文本(特别小的字体)将无法阅读。
即使在显示背景，白色图层的使用也要注意，插图的颜色和调整下降的点也需要引起注意。PhotoShop或者是Illustrator中将不透明度试着从0%到100%自己调整看看吧。
还有一个例子，下面的明信片，将风景画渐隐，添加上朴素而又华丽的圆形背景，将文字文本重叠上去。
02. 尝试着让文字更加显眼
照片是一个受欢迎的背景，不论是商品海报还是网站的标题、社交媒体用的设计，打印印刷和WEB项目这两方面都可以使用。只是，由于照片的构图，色调，明度的原因，不是很容易就能找到令人满意的文字文本放置的位置。
下面的例子，由于文字的原因(黑白照片变得难以看见)，半透明的形状互相重叠。另外，透明度不同的图层互相重叠，独一无二的效果就显示出来了。
接下来是另一个参考案例，下面的网页设计使用了白色透明图层来重叠，将文字放在单色照片的上面来显示。
这个手法是利用了色彩的反转。例如，半透明的黑色图层和白色的文字文本什么的。
03. 像空气一样干净的展示
当用于设计的配件已经决定，可以通过利用杂志的版面设计来体现出简单的空间和范围。例如下面的这个网页设计，占大部分半透明的背景层，流畅整齐的字体组合，通过有组织的布局，产生简约的风格。(在这里有一个下载的链接，可以下一些素材，我先把地址放在这里，以后再来翻译。 【完全免费可商用，60种美丽的字体下载!2015年版】)
下面的一套商品目录，用三原色的半透明图层和一张照片相互重叠，然后再加入少量的文字文本，表现出了一种简约而不简单的风格。
04. 将读者的注意力集中起来
设计成半透明的背景图层将其全部覆盖，也不一定非要是四方形。半透明图层上添加一个小小的窗户，通过调整透明度，在那里设计出特定的部分，将读者的注意力集中到那里。
下面的这个例子，就是通过将纯色背景挖出文字的形状来达到集中视觉(英文：Focal Point)的一个效果，海报上的登场人物高明的集中在恰当的位置。
而接下来的这个设计，全部是由三角形的半透明图层布置起来的。将视线诱导到女性的脸部，成为视觉的焦点。
05. 让内容变得显眼
包装箱，罩子上的封面等设计，在内容上都使用了透明的图层，这样就会使其变得非常的有吸引力。
下面的这个杂志设计，在透明清晰的封面上，添加上了白色文字的LOGO。通过这种方法，让他产生光泽，强调出下面的图像照片。
下面的两个样品，就是在食品包装上运用到了【透明】效果这样的一个技巧。让人第一眼，就能分辨出各种各样的豆子在包装内，色泽和豆子的形状都能不费功夫的区分出的食品包装设计。
下面的这个设计，在法国的咖啡馆café called Voyageur du Temps(法语中【时间旅行者】的意思)中被利用于朴素的纸袋上。稍稍有一点透明可以看见内容，通过添加具有年份气息的宇宙地图，将品牌魅力成功的塑造出来了。
06. 尝试着让图层重叠
半透明的背景设计的优点在于，可以使复数的背景图层相互重叠，版面的深度、颜色和照片、形状等不同的图层叠加在一起，产生出一种引人注目的效果。
下面的这个海报设计，具有象征性的人像照片，将版面的层次感给表现出来了，同时追加上了文字半透明图层效果。其结果诞生出了一种对比感强烈，有生气的有层次感的版面设计。
下面这一个设计案例，表现出了一种将图像照片和半透明的颜色层，几何学的样式叠加起来的设计效果。
、
07. 稍稍展现出一点质感
乱七八糟的背景细节用半透明的图层覆盖，这种技巧最初是持反对意见的，但你可以添加一点点的独特的设计，来让他变得更加有魅力。
下面的这个服装商店广告banne，将主要的文字文本挖空，格子背景的花纹隐约可见。同时能够看见整个背景，表现出一种风格整体统一的设计感。
下面这个设计案例，图层文字互相重叠，使其更容易看见，它结合了一些之前介绍过的技巧。绿色的圆形与照片互相重叠，照片的细节你也可以看到。
08. 添加透明渐变图层
利用透明图层，可以添加很多颜色来进行设计。相较于单色的背景设计，半透明可以给人带来一种柔软的印象。
下面这个设计案例，利用柔和的半透明中间色将其放在文字的下方。特别是半透明渐变的那个区域真是绝妙的组合。
在另一个设计案例中，将渐变色利用在移动端的用户界面设计上。在这里使用了鲜艳的配色，文字文本和背景透明的保守的方法。
09. 利用独特的混合效果
很多设计应用中，在透明图层上利用混合模式的功能，将颜色，照片和其他一些设计要素混合在一起。通常这种技术，图层重叠和照片组合的使用方法，可以和之前的设计技巧组合起来。
下面这个设计，纸张的纹理是手绘草图、旧照片、墨水污渍重叠混合起来的，复古风格的数字拼贴海报。因此是将很多的设计要素组合起来，利用半透明图层，将这些要素全部融合到一起的设计。
下面的这个海报设计，如何将每种颜色融合来引起我们的注意，和文字文本一起使用，也是一种流行的混合方法。
10. 强化品牌推广
在项目设计的背景下，你是不需要稍候补充的。品牌和颜色作为视觉要素，例如LOGO标志，可以将品牌理念传递出来。
下面的这个设计是GOOGLE的年终报告设计，在这里就采用了鲜艳的配色和半透明的背景图层。
下面的这个网页设计，如果要通过他的配色方案和几何形状可以联想到它的LOGO，你必须要创建一个半透明背景层和图形要素。
11. 强调特定的范围
特别是使用了文字文本和其他设计要素的生动的半透明彩色背景层，可以更好的强调。
在下面的这个广告设计中，灵活运用半透明红色图层，和黑白的人物图像做出对比，将图像中的SALE强调出来了。
在这里也使用了红色半透明图层，将人们的视线集中到网站的特定区域。
12. 展现有趣的构图
最后，有可能是很常见的表现手法，但重点是在创意上。透明度的调整方法，透明图层可以运用在任何设计方法上，他是一个多功能的工具。接下来让我们看看独特的设计方案。
下面这些，一个轻微的印象将成为决定性因素，是书的封面的概念设计。通过蓝色的渐变图层只露出文字文本顶端的一部分，来表现出鱼翅从海面上露出来的样子。
下面这张通过在老音乐电影海报下面，强调一个具有代表性的电影画面，用白色的字符文本作为背景，电影标题创造出雨的形状，同时传递多个意思，将意思组合表达出来。
下面这些是电影节海报设计，颜色鲜艳的半透明圆形添加上去，同时连接上两个完全不同的照片，组合产生了新的魅力。
最后
半透明图层有时候虽然也觉得它很麻烦，但是有时候它也会让配图那些变得更为精致，以上12个万能小技巧，你记住了吗?

~

海报插画背景图-优秀海报作品赏析与分析是什么?
答：模库网怎么下载在百度上搜索模库网，点击右键，选择另存为，选择你想要保存的位置点击确定即可下载网站介绍：模库网专业优质商业素材免费下载！提供海量免费素材,平面海报,广告海报素材,电商海报,背景海报,电商素材,png素材,背景图片,插图插画,UI设计模板,背景模板,网页设计模板,UI素材,UI界面,app界面,ios...

UI设计师在完成界面设计后,切图都改切哪些?
答：网页设计好后的切图是将设计稿切成便于制作成页面的图片，并完成html css布局的静态页面，有利于交互，形成良好的视觉感。通俗来讲，把一张设计图利用到切片工具，把自己所需的切成一张张小图，然后用DIV CSS完成静态页面书写，完成CSS布局。设计好的网页都需要切图，主流的是dreamweaver、photoshop软件，...

UI 设计中,你们的图层命名规则是怎样的
答：UI设计中，每一个UI设计师都有自己的独特的图层命名方法。毕竟是给自己的孩儿起名，有自己的专属特色很正常，只要方便自己方便他人就行。首先，明白我们为什么要命名 当然是方便检索啊！如果你突然请假，难道要同事在你铺满图标，让人眼花缭乱的仿佛在走迷宫一样的桌面上找到他想要的文件？那么，你可能上班...

界面设计中的那些版式-图版篇
答：在网页设计中有时候会见到这种方式,其实在手机、平板等UI设计中我们完全可以套用。 运用图片的穿插来区分背景和产品或形象的层次感,处理完的界面更加富有生命力。放大需要突出的主形象,把它作为第一焦点展现在用户的眼前,有种强烈的“面对面”感受。 在APP中采用将图片局部突出出来,能拉开信息的层次,将需要突出的图片...

appui模板-如何用UI设计软件做app页面
答：视觉设计(APPUI)规范文档怎么写? 在创业公司工作的这几年中,很多工作都要涉及到视觉设计,但一般公司不会那么细,在我脑海中分为三种: 1.平面设计师:限于2d广告设计,比如名片、海报、宣传画册、单页等等,做出来的UI可执行性很低,很多和原生系统相斥,工程师会很头疼。无规范可言。 2.UI设计师:限于软件UI的...

UI设计师需要掌握的界面设计工具
答：AdobeAfterEffects简称“AE”是Adobe公司推出的一款关于图形和视频处理的界面设计工具，如今动效设计在UI界面设计中的应用已经越来越广泛，而且国内许多公司开始重视动效设计了，所以作为UI设计师，也应该掌握一些动效设计。动效在UI设计中的应用其实比我们想象中的还要强大，好的动效设计可以给用户提供一个良好的...

PS保存PNG透明图片怎样才能避免出现白边
答：主要是存储为web格式的时候选择的文件格式不合适导致的，不应该选择png-8，而是应该选择png-24。选择png-8如果图片中有半透明的像素导出的时候，会自动添加一个白色的衬底这个和gif类似。选择png-24则会显示半透明的效果。

UI日常-切图切图怎么破?
答：比如，有些颜色在白色背景下不显示，有些颜色即使和设计师给的色值一样但是，实现后发现效果差强人意。所以App设计中，设计师如果要用阴影的话可以选择直接切给开发。3..9切图.9.png是png格式，.9为命名后缀的非失真性压缩位图图形。他的原理是安卓环境下，实现标记区域的局部拉升，多用于聊天框、...

PS改进IOS设计流程的30个窍门
答：设计是一个漫长和痛苦的过程,期间可以用点技巧来减少痛苦,30+ tips to improve your iOS design workflow (in Photoshop)一文总结30个实用的技巧可以借鉴和学习。 ———–以下为译文———- 在本文中我(英文原作者)总结了在photoshop中设计ios软件时所遵守的方法。许多的技巧适用于一般的UI设计。注意:文中所提到...

用PS设计APP过程中改进IOS设计流程的30个密诀
答：在本文中我(英文原作者)总结了在photoshop中设计ios软件时所遵守的方法。许多的技巧适用于一般的UI设计。注意:文中所提到的快捷键针对于Windows;Mac 用户可,Cmd对应Crtl键,Opt对应Alt键。1.保持尺寸为偶数你是首先针对Retina屏幕设计然后再对标准分辨率的进行缩小是吧?为了在标准分辨率下像素仍然保持完美的呈现,你需要...