在线生成透明圆角图片工具 不用 ps 生成圆角图片方法

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

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

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

一、aTool 在线工具

网址:http://www.atool.org/roundcorner.php

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

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

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

二、RoundPic

网址:http://www.roundpic.com/

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

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

以上提到的功能用起来很简单,大家自己试一试就明白了。

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

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

老魏个人平时用 aTool 工具比较多,喜欢大气的界面。

看,仅仅几秒钟,老魏就做出一张圆角 MM 图片,既美观又实用。

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

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

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的碎碎念

【分享】Vue.js新手入门指南

最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学...

2553
来自专栏WeTest质量开放平台团队的专栏

Pluto - iOS 上一个高性能的排版渲染引擎

原文链接:http://wetest.qq.com/lab/view/369.html

5476
来自专栏web前端教室

风继续吹&&先行者成员:王广铎(duo 二声)的作业分析,从他的作业理解“React单向数据流”

他的作业:“分页组件”React版,写的很好,主要是思路很清晰。本来是想上周日视频课程直播的时候讲一下了,现在只能是放在文章中大概的说说了。先看截图, ? 很...

1978
来自专栏理论坞

UI(用户界面)设计规则和规范

界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具...

1483
来自专栏林德熙的博客

为何使用 DirectComposition 创建更加迷人的界面流畅丰富的动画组合不同的位图通过集成 DWM 节省内存兼容原有代码

本文主要翻译Why use DirectComposition,介绍 DirectComposition 的功能和优点。

1541
来自专栏我和未来有约会

令人激动的silverlight 3行为(behavior)效果

令人激动的silverlight 3行为(behaviors)效果 Mix09大会带来了很多的惊喜。 看完了http://videos.visitmix.com...

2925
来自专栏腾讯开源的专栏

【开源公告】通用 Web 组件化框架 Omi 正式开源

Omi 从 3.0 开始基于 preact 二次开发,完全可以共享 preact 和 react 的生态,也有了自己独特的风格和优势。

7.4K7
来自专栏我有一个梦想

UE4新手编程之创建C++项目

 虚幻4中常用的按键和快捷键 虚幻4中有一些按键和快捷键很常用,牢记它们并运动到实际的项目开发中,将会大大地提高你的工作效率和使得工作更简便快捷。下面将列举它们...

2296
来自专栏无原型不设计

Balanced-工具类App原型分享

Balanced是一款记事类的工具App,这类App在设计的时候讲究简单易用,如果操作太复杂,就不能做到记录事件的及时性和快速性。在制作原型时,这次尝试了将A...

3055
来自专栏木头编程 - moTzxx

微信小程序Ⅷ [WXSS 小知识积累]

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1751

扫码关注云+社区