腾讯云服务器优惠活动华纳云香港服务器

不用PS直接在线生成透明圆角图片工具推荐

魏艾斯博客更新博文都要加上图片,最近感觉自己博文列表的图片不够美观,而别人的博文列表图片是带有圆角的,和矩形图片相比圆角图片看上去比较美观,于是也想照着操作一下。经过一番搜索果然找到了几款在线生成透明圆角圆角图片工具,不敢独享,把实现过程分享在本文中,希望能帮到有需要的朋友们。

为什么 web 图片要使用透明圆角图片?

1、相机和手机拍出来的照片都是四方的,看多了会觉得非常呆板。为了让图片效果更美观一些于是就有了圆角图片的出现,相比之下使用圆角图片会有更好的装饰性,而且还有亲和力。2、圆角图片制作的过程一般通过如 PS、FW 这样的设计软件来实现,但是操作起来比较麻烦。

3、透明圆角的图片经常用于 APP,游戏的 LOGO 图标,这样的圆角在手机上显示出来会非常美观好看。

一、aTool 在线工具

这款工具在度娘搜索结果中排名第一,可见还是有很多人在使用的。本工具可以很轻松的将任意图片生成圆角图片,可以指定图片的圆角大小,且图片大小完全不限制。

使用方法很简单,打开上面官网地址,点击“选择文件”上传图片,圆角尺寸默认 50,老魏一般改成 5,改完后在下图右侧绿色背景区域(红框内)点击一下(或者点击“生成”按钮),左侧都能预览到最终效果,满意后点击“下载圆角图片”,就下载到本地电脑上了。

不用PS直接在线生成透明圆角图片工具推荐-第1张-boke112百科(boke112.com)

aTool 在线工具的缺点就是只能生成.png 格式文件,比如原图是 jpg 图片,那么最后生成的 png 图片尺寸会挺大,即使用 tinypng 压缩后也不会小多少。

二、RoundPic在线工具

RoundPic 的使用方法和上面的 aTool 差不多,也是把图片上传上去(或者粘贴网上图片地址),点击“选择文件”,再点击“round it!”

不用PS直接在线生成透明圆角图片工具推荐-第2张-boke112百科(boke112.com)

再为上传的图片选择哪几个角要圆角化,选择不同程度的圆角化,自定义圆角的背景颜色,以及对图片的高度和宽度、约束比例、图片质量、选择生成 png 格式等等。

不用PS直接在线生成透明圆角图片工具推荐-第3张-boke112百科(boke112.com)

RoundPic 在功能上比 aTool 工具多出好多功能,也挺实用的。如果你只生成 png 图片那么用 aTool 工具就行,如果生成 jpg 图片较多那么还是用 RoundPic 吧。

RoundPic 缺点目前没发现,就是写这篇文章测试图片的时候遇到过几次网站无法打开,可能是服务器响应不及时吧。

老魏个人平时用 aTool 工具比较多,喜欢大气的界面。而且仅仅几秒钟就能做出一张圆角 MM 图片,既美观又实用。

不用PS直接在线生成透明圆角图片工具推荐-第4张-boke112百科(boke112.com)

用上面圆角图片生成工具再结合 tinypng(TinyPNG 和 WordPress 图片压缩插件:Compress JPEG & PNG images)可以生成尺寸小又美观的圆角 web 图片,对于网页确实能起到一定的美化作用。

目前互联网上圆角图片的在线生成功能几乎都是使用 PHP GD 库完成,此类在线圆角图片工具的共同缺点是最后生成的圆角图片带有具有一定程度的锯齿,这一点只要使用 PHP GD 的都无法避免。

这种在线工具对于类似魏艾斯博客的使用要求已经足够好用了,以上两款在线工具的好处是不需要注册、登录的麻烦,上传和生成速度也挺快,生成的圆角图片也让人满意。

站长有话说

如果只是单纯需要在网页上显示图片的圆角的话,懿古今认为通过 CSS 代码来控制可能会更加简单一些,比如使用图片的 border-radius 属性来控制会更加简单和高效,而且还可以控制某一个角变圆角。当然,不管是什么方法,关键是要达到目的,毕竟适合自己的办法才是好办法。

赞 (0) 打赏
版权声明:本文为投稿文章,感谢 魏艾斯博客 的投稿,版权归原作者所有!发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请联系我们,确认后马上更正或删除,谢谢!
wu