博客已经两个月没有更新了,我去干啥了?这次不是偷懒,去搞了个大活!
连续做了几款图片导出工具后,这次决定做一个复杂点的,覆盖场景更丰富点的图片美化工具。
为什么需要图片美化工具?
日常分享到社交媒体的图片如果不加修饰,显示效果不佳。而且还可能因为图片尺寸不合适,导致显示不全。如果我们随意截图发到朋友圈或者社交平台, 导致图片大小不一致,排列错乱,毫无美感。更不会引起别人的关注。特别是对于品牌的宣传,统一的图片风格更容易在视觉上加深对受众的印象。
结合前面的经验,技术实现上已经没什么障碍了。 这种产品的唯一的挑战是 UI 设计,和部分功能的 UX。产品的审美一定要在线,才能吸引别人来使用你的工具。
名称 | 链接 | 图片 |
---|---|---|
封面图生成 | spacexcode.com/coverview | |
文字卡片生成 | spacexcode.com/memocard | |
代码图片生成 | spacexcode.com/codeimage |
所以我也是借鉴各种已有的相关产品,前期做了很多的调研。才渐渐确定了目前的软件设计。经常多次迭代,算是 1.0 版本吧,有了多款模型之后, 决定正式发布上线,对外推广。
这个产品的核心就是提供不同设备和场景下的模型,根据用户的喜好配置参数,然后导出适用不同平台尺寸的图片。
整个界面分为三大块,按左 - 中 - 右的布局,页面全屏显示,不出现滚动条。左边为模型和框架的选择、参数的配置区域,中间是预览和一些功能 按钮,右边是对图片的布局和变换样式的选择。
常见图片美化工具都有哪些功能?
- 为提供的图片增加背景、阴影和圆角效果;
- 改变尺寸,导出为社交平台匹配的尺寸大小;
- 给图片增加设备的外壳,为图片增加场景化的效果;
- 一键给打开的浏览器窗口截图,方便快捷,并且提供画布手动修改图片区域和大小;
- 美化后的 图片直接复制,粘贴在常用的富文本编辑器,或微信、QQ、钉钉等聊天工具框中。甚至还可以直接在微博、推特、掘金沸点等社交平台分享框中直接粘贴操作,之后会自动以图片的格式显示;
相较于市面上其它产品,我的工具加了一些亮点功能:
- 本地保存当前制作图片的所有配置,方便下次直接使用;
- 调用浏览器的屏幕分享接口实现快速截图后直接使用该图片(通过浏览器的 getDisplayMedia 接口);
- 丰富的套壳设备模型,涵盖手机,平板、台式电脑、笔记本、手表等设备类型;
- 预设了丰富的背景颜色、背景图片、还有通过代码生成的背景图。
后续迭代计划:
- 丰富模型库,提供更多的场景覆盖
- 部分 UI 组件美化,例如滑动组件,一直不满意它的样式
- 社区搭建,方便大家使用交流
独立开发一款产品真的很费心力,需要充当多面手。但是如果做成之后收到大家的关注和使用,感觉一定会很棒!这也是支撑我一路做下来的动力。
先做成一件事,这是我接下来不断付诸实践的目标。如果你也在从事开发工作,对自己的职业很迷茫,可以看看这篇文章:W.I.N第二曲线手册。 也许会有所收获。