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

投稿   魏艾斯博客  2018-06-24 12:02:07  147 人阅读  28 条评论

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

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

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

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

一、aTool 在线工具

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

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

不用PS直接在线生成透明圆角图片工具推荐 海纳百川 第1张

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

二、RoundPic在线工具

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

不用PS直接在线生成透明圆角图片工具推荐 海纳百川 第2张

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

不用PS直接在线生成透明圆角图片工具推荐 海纳百川 第3张

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

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

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

不用PS直接在线生成透明圆角图片工具推荐 海纳百川 第4张

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

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

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

站长有话说

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

历史上的今天:

文章标签: ,   ,  
原文地址:https://www.vpsss.net/6026.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 魏艾斯博客 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
魏艾斯博客

相关文章 分类热门分类热评最新问答

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 千眼网
    千眼网 @回复

    蛮有用处的!收藏下

  2. 菊
     @回复

    圆角图标感觉是亲和力要好一点

  3. 闲鱼
    闲鱼 @回复

    CSS3可能更轻松一点吧

  4. 宋子宪博客
    宋子宪博客 @回复

    不错的工具!啊

  5. 大缺缺
    大缺缺 @回复

    很方便。

  6. 明月清风
    明月清风 @回复

    原来圆角图片是这样的正确使用姿势呀!

  7. Ν Ι С Ξ
    Ν Ι С Ξ @回复

    确实css很舒服

  8. 清秋暖冬
    清秋暖冬 @回复

    我是直接把首页显示的改成圆角,一劳永逸

  9. 梁兴健
    梁兴健 @回复

    还是用css比较方便,一行代码,终身使用 [嘻嘻]

  10. 土蜂蜜百科网
    土蜂蜜百科网 @回复

    以前用过,还可以。

  11. 花胶
    花胶 @回复

    切成了圆角,感觉好看很多。

  12. 区块链
    区块链 @回复

    [偷笑] 习惯photoshop!

  13. 沈唁志
    沈唁志 @回复

    美图秀秀不就可以了

  14. Mr.Li
    Mr.Li @回复

    还是习惯ps [思考]

  15. 云顶天的世界
    云顶天的世界 @回复

    这种在线PS工具一般细节会丢失很多。

  16. 里维斯社
    里维斯社 @回复

    CSS简单点

  17. 券都有
    券都有 @回复

    谢谢分享

  18. 清风小墨
    清风小墨 @回复

    GD库一个也可以吧

  19. 靠谱学生兼职网
    靠谱学生兼职网 @回复

    工具不错。已经收藏下来

  20. BanYuner
    BanYuner @回复

    为什么不通过CSS来解决这个问题?

  21. 闲鱼
    闲鱼 @回复

    css确实更好一点

  22. Lengsir
    Lengsir @回复

    这个不错

  23. 品牌馆
    品牌馆 @回复

    这个意义不是很大

  24. 涂红伟
    涂红伟 @回复

    适合没有PS又刚好需要这种图片效果时用一下,很便捷。

  25. 一艘大轮船
    一艘大轮船 @回复

    感觉工作量大了不少,还是喜欢用ps或者改css

  26. 手机赚钱
    手机赚钱 @回复

    没什么实际作用

  27. 微网
    微网 @回复

    有点麻烦,不过确实美观不少 [嘻嘻] [嘻嘻]

  28. 鬼手六
    鬼手六 @回复

    这个大量增加博客更新的工作量,反正我不干 [嘻嘻] ..