0文章
0评论
0获赞

如何快速提升图片格调?彩色半调的应用

811 0

哈喽家好,我是研习设的小凹,惊不惊喜,意不意外?我终于见光了!这算是我第一次跟大家正式见面,之前我们隔着电脑,手机来观看学习教程,以后,我们就可以面对面的进行交流了。

首先请大家扪心自问一下
你真的了解彩色半调吗?
我相信一定会有人说:了解!那么不好意思,打扰了。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
首先看下,彩色半调在ps当中的位置,在滤镜当中,像素化——彩色半调,这就说明它属于根据图像的像素来进行的一种变化表现。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
滤镜——像素化——彩色半调
既然是彩色半调,那我们就分开来看,先来解释一下半调:
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
半色调是一种影印技术,通过使用不同大小或间距的点来模拟图像的连续色调,从而产生类似渐变的效果。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
举个例子,黑白报纸上的图片,认真去看,你会发现上面只有两个颜色,就是油墨的黑色和纸的白色;但如果你不认真去看,却好像有黑白灰的颜色在里面,显得很丰富。这个就是用半调网屏来实现的,它就是能控制油墨的大小和形状,利用墨点的不同和间隙的大小,产生类似灰色的那种过渡。
彩色+半调就很好理解了:
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
彩色半调就是模拟在图像的每个通道上,使用放大的半调网屏的效果,对于每个通道来说,滤镜将图像划分为矩形,也就是像素块,并用圆形替换每个矩形,圆形的大小与疏密程度是与色彩的亮度成正比的。通过上面的色块我们能看出,越亮的地方,圆点越小越稀疏,越暗的地方圆点越大越密。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
介绍一下彩色半调的参数:
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
最大半径:用来生成最大网点的半径。也就是圆点的大小,取值范围在4—127之间,半径值越小,圆点越小,数量越多,半径值越大圆点越大,数量也就会越少。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
在相同色调的矩形上,我们可以看到半径从5到30之间,圆点的变化。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
网角度:用来设置图像各个原色通道的网点角度。取值范围在-360度—360度。不同模式下,有效通道是不一样的。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
当图像模式为灰度时,只有通道1 是有效的。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
当图像模式为RGB时,只有通道123 是有效的。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
当图像模式为CMYK时,4个通道都是有效的。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
我们以最常用的RGB模式为例,不同的通道代表不同的颜色,这里我以每个通道颜色的半调圆点代替。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
通道的数值代表该通道和水平线的夹角,比如这里,红色通道为30,就代表它与水平线的夹角为30,相应的我红色半调圆点,就呈现30,绿通60,半调圆点也就是60,蓝色通道90,也是同样道理。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
所以如果在一个30%灰色的矩形上执行这组彩色半调的设置,就会得到这样一个画面(可以看到各个通道的颜色形成的一种网屏效果)。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
当通道数值相同时,这里我都给了90,也就是半调圆点没有任何角度变化,这样所有圆点就重合在一起了。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
在一个30%灰色的矩形上执行这组彩色半调的设置,就会得到这样半调画面(可以看到各个通道圆点重合,也就变成了黑色)
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
带这种波点式图样的,我们都可以用彩色半调实现,并且我们可以看到这个技法既能表现复古的感觉,又能表现时尚前卫的气质,所以大家在设计案例时,为了增加画面形式感,不妨试试这个功能。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
◇方案一◇设计一个有时尚气质的banner
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
首先版面骨架我已经搭建好了,我们一步一步给它添加彩色半调。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
先给背景图层添加彩色半调,半径:10,所有通道为60。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
在智能滤镜的蒙版上,用画笔把人物擦出来,边缘处可以处理成参差不齐的效果,这样会更自然。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
把主题文字复制一层,把底层文字向右下移动几个像素,让它有个厚度,然后给底层文字执行彩色半调,半径4,通道都是60。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
给底层文字添加一个色相饱和度,数值如图。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
这样就设计完成了。
▷BUT◁这个画面还可以怎样玩呢?
那就让它动起来
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
复制7—10个背景层,双击智能对象,设置彩色半调数值,RGB通道数值每10个递增(如图所示)。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
之后<创建帧动画>就可以做成这样旋转的动图了,有木有很酷炫?
◇方案二◇设计一个有文化属性的海报
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
海报版式搭建完成,接下来就是对主题“黑白镜像”做一系列的效果,增加画面形式感。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
首先把文字填充黑色,下方加一个白底,给文字做动感模糊,角度0,距离40。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
把文字图层和白色底合并,再执行彩色半调,半径8,通道全部90,因为刚才做了动感模糊,所以文字边缘处的圆点会渐隐式的越来越小,越来越稀疏。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
再给文字执行滤镜——画笔描边——喷溅——半径8平滑度2。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
用色彩范围把黑色的字提取出来,给它填充白色,然后添加黑色的背景。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
这步比较关键了,给4个文字层创建3D明信片效果,然后选择这4个创建好的明信片给它们合并3D图层,之后就会得到这样的画面(这步不明白的,推荐大家回看订阅号的3D教程)。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
给前三个明信片作旋转,第一个Y轴旋转45,第二个Y轴90,第三个Y轴135,第四个保持不变,最后它们呈现是“米”字结构。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
旋转一下画面的方向,把文字的角度旋转到合适角度,这样就会有一种幻影的效果,也就更符合“黑白镜像”这个主题所传达的意思。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用
最终,同样以动态形式的展现,让它转起来吧!
本篇教程主要介绍了彩色半调相关理论知识,以及如何利用彩色半调去设计画面,当然很多时候你只使用这一个滤镜是难以表现自己的想法的,这个时候你不妨去滤镜库看一看,哪种效果和彩色半调搭在一起,会产生1加1大于2的效果,这也是我们设计师应该具备的一项技能——举一反三,多去尝试不同的效果,你会得到意想不到的答案。
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用

原文地址:研习设(公众号)
作者:小凹
如何快速提升图片格调?彩色半调的应用
如何快速提升图片格调?彩色半调的应用

评论 (0)
请登录以参与评论。
立即登录

如何改进注册/登录用户体验

943 0

讲述注册给用户的好处

通常,用户在看到这样做的价值之前不愿意注册。用户通过创建帐户可以获得了什么?通过注册获得了什么好处?明确填写注册的价值,让信息清晰锐利,比如:注册以后可以免费获得一定的积分、优惠券等。

突出登录位置

当用户浏览网站时,清楚地向用户显示注册或登录的位置,特别是当登录是主要号召性用语时。

如何改进注册/登录用户体验
如何改进注册/登录用户体验

区分登录和注册

并非所有人都能快速找出登录和注册之间的区别,以不同方式显示两者。比如:通过按钮的不同样式以及动作视觉差异。在“创建帐户”页面上提供“登录”选项,在“现有用户”页面上提供“注册”链接,以便用户在操作路径更加明确目的。

自动聚焦

自动对焦于表单中的第一个输入字段。这为用户节省了点击输入字段的时间和精力。突出显示输入字段。

如何改进注册/登录用户体验
如何改进注册/登录用户体验

错误提示

显示适当且明确定义的错误消息。不要使用通用错误消息,这会让用户猜测。(提示位置应靠近错误信息的位置)

无密码登录(社交登录)

这是一种能够更快地登录的方法。用户可以在最短的时间使用到该产品。比如:越来越多的微信登录,新浪登录,二维码扫一扫等,避免输入和记住密码。

如何改进注册/登录用户体验
如何改进注册/登录用户体验

减少注册时的信息量

从用户体验的角度来看,要求使用手机号码和密码已经足够了。

在此操作过程中,不要询问用户名称、性别、出生日期或其他非必要信息等信息。这可能会引发障碍,最终可能阻止用户实现其原始目标。这些信息可以完全可以等用户注册完后期使用中引导用户进行完善相关信息。

减少过多的安全规则

有的网站注册时要求必须输入含有数字、字母、大小写、字符等。虽然要求越多安全等级越高,但是如今互联网密码安全问题,出现很少,权衡利弊建议保留两到三个密码限制。

如何改进注册/登录用户体验
如何改进注册/登录用户体验

添加显示/隐藏密码的选项

在用户体验中,既可以保障隐私性,也可以在看到输入的内容时减少错误。

添加密码强度计

可视化的密码强度更容易让用户接受。

如何改进注册/登录用户体验
如何改进注册/登录用户体验

总结

登录和注册是最常见、最简单也是最需要花费心思设计的功能模块。除了介面的视觉设计,用户体验更为重要。

原文地址:

作者:枫桥良夜

评论 (0)
请登录以参与评论。
立即登录