百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

怎样解决图片不清晰的问题

myzbx 2025-02-07 18:32 20 浏览

文章:图片不清晰还咋做设计

来自公众号:研习设


“清晰度”是指人眼宏观看到的图像的清晰程度,是由系统和设备的客观性能的综合结果造成的人们对最终图像的主观感觉。所以就会产生两个人对一张图片清晰度的认知不同,虽然是主观的感受,但也不是不能用客观的标准来衡量,所以就需要先了解有关清晰度的三要素——位图、像素、分辨率。


图片的格式很多,但总体上可以分为位图和矢量图两大类,在我们平时接触的图片当中,大多数属于位图,位图是由数千个,有时甚至是百万个微小的像素组成。


像素是指由一个数字序列表示的图像中的一个最小单位,通俗来讲也就是构成图像的最小单位,称为像素。

在photoshop中用放大镜工具,把图片放大到一定程度就能看到这样的像素方块。

注:一个像素只有一个颜色,像素没有实际大小,只是一个计量单位。

相信很多80后的同学都玩过魂斗罗、超级玛丽等一些电子游戏,里面的画风就是像素风格,是因为当时的游戏硬件性能不够完善,所以游戏画面就会出现很多小方格,而现在像素风格又成为了时下比较流行的一种游戏形式和设计风格,比如:我的世界、FlappyBrid。


我们常说清晰度不够,其实也就是分辨率不够。而提到分辨率,就一定会涉及到像素,图像的分辨率是指单位长度中像素的总和,也就是指像素的密度。相同尺寸的画面,分辨率越高,其像素的密度越大(像素格越多),图像的细腻程度也越细,清晰度也就越高。反之,分辨率越低,像素密度就会越小(像素格越少),图像会越粗糙,清晰度越低。

通过两个图片我们简单了解一下像素与分辨率的关系:

上方是两个相同尺寸的图片,第一张图片分辨率较高,包含的像素数量较多,所以会比较清晰,能看清细节部分,而第二张图片包含的像素数量较少,细节不清晰,画面相对就模糊。


在photoshop软件当中,有两个分辨率的设置单位:像素/英寸和像素/厘米,顾名思义也就是每英寸(厘米)长度中有多少个像素,那么首先我们需要了解英寸和厘米的关系,厘米是公制单位,也就是国际通用的单位,是现在绝大对数使用的单位制,英寸是英制单位,源自英国的度量衡单位制,1英寸等于2.54厘米,根据这个数值就可以在两个分辨率之间进行转换。


也就是在我们新建画布的时候,用72像素/英寸或28.346像素/厘米所得到的画面是一样的,所以两者单位之间并没有差别,在工作中使用哪一种都可以,常用的是像素/英寸。

换算成网站链接:

http://www.gaitubao.com/tools/pixel2cm.html

比如我们新建一个画面尺寸为2.54cm×2.54cm,像素为30像素/英寸,我们知道1英寸=2.54厘米,也就是每2.54厘米长度中有30个像素,整个画面的像素为30×30=900个像素。

再举个例子:比如我们新建一个画面尺寸为800像素×1200像素,像素为72像素/英寸,那么整个画面就是800×1200=960000个像素。

通俗来讲,一个房间只有4个座位能容纳4个人,另一个有12个座位能容纳12个人,这和像素分辨率的关系是一样的,也就是说照片里的信息越多也就意味着图片的精细度越高越接近真实人眼看到的景象。


PPI表示设备上点的密度,也就是每英寸有多少个像素,比如我们电脑的显示器,主要用于网页设计的设置。

photoshop中我们看到网页的默认设置分辨率为72ppi,是因为最早的图形设计是在mac电脑上进行的,mac本身的显示器分辨率就是72ppi,所以这里我们选择默认的分辨率就可以了。


DPI表示印刷品点的密度,也就是打印时候每英寸多少个墨点,常用于印刷品的设置。


在ps当中打印分辨率默认是300ppi,实际上dpi和ppi很多时候也是混用的,没必要去纠结,所以一般情况下打印分辨率设置为300ppi就可以了。


我们把鼠标放到图片上会自然显示出图片尺寸与大小,第一张图片是400×400像素,第二张图片是800×800像素,前面我们说过了,一个图片中像素越多越清晰,所以这两张照片第二张更清晰。

看这两个图有什么区别?尺寸都一样10×10,唯一的不同的是大小,图1是8.24KB,图2是8.32KB,可能有的同学会说图2的清晰度大于图1,可是事实上是两个图片都是10×10个像素格,所以它们清晰度是相同的。

分辨图片的清晰度最主要的还是要凭自身的主观感受,也就是看,根据实际需要而判断图片清晰度是否可用,比如下载好的图片,放到设计的画面中,以100%的大小观察,如果噪点过多,甚至像素纹理比较明显,那就说明它的清晰度不够,这个度靠设计经验去把握。


原图72分辨率——100%尺寸查看图片——清晰

改为300分辨率——100%尺寸查看图片——细节不清晰

一张图片分辨率是72像素/英寸,如果我们直接把它的分辨率调整为300像素/英寸,它的清晰度反而会变得模糊。因为原本每英寸有72个像素,而现在每英寸有300个像素,多出来的信息就是软件通过复制旁边的颜色而产生的,由于不能准确模拟像素位置的色值和明暗,图像就会变得模糊。

设计一个DM,分辨率给出500dpi,印刷出来的效果会更清晰吗?

在印刷中,相对于大部分打印机来说,300-350dpi就已经是极限了,这个时候人眼已经不能分辨像素颗粒的精度了。所以当你设置500dpi甚至更高的时候,打印的效果是一样的,更高的分辨率只会增加机器的负荷和处理时间,所以,通常冲印或印刷的分辨率均设置为300dpi。


首先我们需要了解一下,什么样的图片是有救的,什么样的图片是没救的。

这张图像素是足够的,稍微不清晰,画面色调比较平,黑白灰的层次不够,雾气比较重,但是它属于有救的图片,只要稍加调整就会提高它的清晰度。

这张图很模糊,几乎看不清画面中的内容,我们很难还原它的真实感,这类照片也属于没有办法还原清晰度的,但是不代表这张图片是不好的,有可能是摄影师刻意而为之,追求一种模糊的意境。

这张图片像素本身像素不够多,出现比较重的马赛克的现象,所以是不能还原清晰度的。

调整清晰度的办法多种多样,今天我们介绍常用的几个——Camera Raw滤镜当中的对比度、清晰度、锐化,分别简单的了解一下。


图1为原图,图2是把对比度值调整到最大值,可以看出原本暗的部分更暗了,原本亮的地方也更亮了,黑白对比更加强烈。图3是把对比度降到最低值,和原图相比,色调整体发灰,黑白灰的层次不明显了。大家可以在ps中自己做一下这个实验,可以看出对比度的调整是可以影响照片全局的。


图1是原图,图2清晰度增加为100%,可以看出手上的纹理边缘部分锐化得很重,增加清晰度其实就是增加物体边缘的反差,让轮廓和纹理更加清晰,细节增加很多,这也就是当你清晰度调整过大时候画面显得有些脏的原因,而图3清晰度为-100%,细节不见了,反而有种我们平时修照片磨皮的效果。


数量:决定了锐化的强度,增加边缘的反差,数量值越大锐化的程度越明显。

半径:决定了锐化的范围,半径越大,作用的区域就越广,一般使用默认值。

细节:决定了画面中细微的地方会不会被锐化,数值越大越多微小反差的边缘也会被锐化。

蒙版:识别不需要锐化的区域(比如:天空),实现局部锐化。

两个色块代表两个像素,我们给它进行锐化处理,放大两个像素的衔接处,可以发现边缘部分多出了很多锐利的竖条,所以可以知道锐化只是作用于边缘处。

图1是原图,图2我们适当地进行锐化处理,让建筑物更清晰,属于合理的锐化程度,而图3锐化数量与细节都很大,画面上的噪点就很多,我们在给图片锐化时要注意不能一味的追求清晰的质感,不然整个画面会显得很燥,过犹不及。锐化数值是由图片大小,内容,输出媒介等很多因素决定的,锐化这个工具是相对来说比较复杂的,一切根据实际情况而定。


调整下面图片的清晰度

1.首先我们以100%的数值查看图片,可以观察到小猴子的毛发不是很清晰,画面雾气比较重,显得灰蒙蒙的。

2.在Camera Raw滤镜中,有一个去除薄雾的工具,数量给+40,先去除画面的雾气。

3.对比度+10,丰富画面整体明暗的层次,清晰度+23,猴子的轮廓和毛发更加清晰。

4.锐化数量28,半径不变,细节不变,蒙版20,提升清晰度。

5.最后调整一下画面的自然饱和度+21。

原图

调整后

调整前后对比

相关推荐

一键生成高颜值图表!让你的文字瞬间有画面感,职场人必备!

哈喽,打工人们!忙碌的周中,大熊又来给你们带来一个超实用的效率神器啦!这次的宝藏网站绝对是那种用过就离不开的"真香"型产品!假设你明天就要做重要汇报,可面对一大堆密密麻麻的文字材料,你...

批量将 Word 转换为 PDF/Excel/Txt/图片等多种格式

Word文档是我们工作中经常会打交道的一种文档格式,我们也经常会有需要对Word文档进行格式转换的需求,比如将Word格式转换为PDF、将Word文档转换为Excel、将Word...

绝了!一键用AI生成高颜值动态PPT(附详细步骤+Prompt)

大家好,我是一名酷爱研究AI的产品经理,最近我有个新发现:那些花了你3天做出来的PPT,现在用AI可以1小时搞定!而且颜值还高!为什么AI做PPT比传统方式效率高10倍?我用一张图就能告诉你:AI生成...

ztext - 简单几行代码创建酷炫3D特效文字的开源JS库

把网页上的文字变成酷炫的3D风格,还能制作旋转动效,有了ztext.js,只需要几行代码。ztext能做什么ztext.js是一个能把常规的平面文字变成3D样式的前端开源代码库,让开发者...

文字内插入小图片,也太可爱了吧(文字中怎么插图片)

图文排版H5手机版秀米有小伙伴留言问添加图片的时候可不可以把图片添加到文字之间比如下面这句话中的小贴纸图片后面可以接着输入文字其实吧这就是咱们的『文字内插入小图片』功能嘛可以用来在文字内加个表情包又...

Linux环境下C++代码性能分析方法(linux怎么写c++代码)

技术背景在开发C++应用程序时,找出代码中运行缓慢的部分是进行性能优化的关键。在Linux系统上,有多种工具和方法可用于对C++代码进行性能分析,每种方法都有其特点和适用场景。实现步骤手动中断调试法在...

SVG互动图文,让你的文章更有趣!教你4种简单易学的黑科技玩法!

如果你是一个公众号创作者,那么你一定想知道如何让你的文章更加吸引人,更加有趣,更加有创意。你可能已经尝试过各种图文排版技巧,但是你是否知道,有一种黑科技可以让你的文章变得更加酷炫,更加互动,更加爆款?...

Videoscribe怎么实现实心中文汉字的手绘制作

很多朋友在制作手绘视频的时候,不知道怎么输入实心的中文汉字,之前我们已经给大家分享了怎么输入汉字的方法,但是有一点遗憾的是输出的汉字是空心的手绘展示,在视觉上并不是非常的美观。经过大家不断的探索,终于...

一款用于将文本转化成图表的现代化脚本语言

大家好,又见面了,我是GitHub精选君!今天要给大家推荐一个GitHub开源项目terrastruct/d2,该项目在GitHub有超过10.3kStar,用一句话介绍该项目就是:...

探秘 Web 水印技术(制作水印网站)

作者:fransli,腾讯PCG前端开发工程师Web水印技术在信息安全和版权保护等领域有着广泛的应用,对防止信息泄露或知识产品被侵犯有重要意义。水印根据可见性可分为可见水印和不可见水印(盲水印)...

不忍心卸载的五款神仙工具(不忍心卸载的五款神仙工具是什么)

001.效率工具uTools-装机必备的生产力工具集uTools是一款非常强大的可以装下几乎所有效率工具的电脑生产力工具集,目前拥有Windows、Mac和Linux三个版本。软件界面...

「SVG」飞花令!这份最高检工作报告“超有料”

原标题:【SVG】飞花令!这份最高检工作报告“超有料”栏目主编:秦红文字编辑:沈佳灵来源:作者:最高人民检察院...

svg|2025政府工作报告,有没有你关心的数据?

··<setattributeName="visibility"begin="click+0s"dur="1ms"fill="freeze"restart="never"to="hi...

videoscribe只能输入英文,如何输入中文文本?

videoscribe只能输入英文,如何输入中文文本?打开VideoScribe软件,打开要添加中文字体的位置。打开Photoshop并在文件中创建一个新的透明背景图层。注意:必须是透明背景层。...

五个流行的SVG在线编辑器(svg编辑工具)

随着响应网络的发展,越来越多的高质量的SVG在线编辑器被公众所熟知。SVG矢量图形也越来越受欢迎,以便在任何设备上呈现图像,甚至一些易于使用的SVG在线编辑器,可以替代PS,本文总结了五种流行的SVG...