美文网首页
一款可以快速将图片生成html的小工具---慧切图

一款可以快速将图片生成html的小工具---慧切图

作者: nilhave | 来源:发表于2018-01-30 01:08 被阅读3326次

年关将至,活动页面大量聚集。产品运营设计技术同学叫苦不迭。

最近做了款产品慧切图,可以帮助产品和运营同学迅速得根据图片生成一张页面。希望可以帮助大家。下面是工具的详细使用说明。

附加推荐另外一个产品:appHome-灵感之家

第一步:上传文件

点击开始使用,上传psd、png、jpg格式的图片

第二步:分割图片

现在可以对界面进行五马分尸(分割)了。如何分割呢?点击标尺栏(就是0-1024,0-1536的灰色条了)可以添加分割线(红线),可以双击取消,也可以移动,如果分割线位置不是很满意的话。如下图,图片已经被残忍地分割成了九大块。

第三步:配置

1、首先在页面配置Tab中,可以可以切换页面类型,添加页面标题,以及页面描述!

2、分割完成后,在图片配置Tab中,也会显示与分割份数相同的配置项。如上,图片被分割成九份,图片配置项也就有九项。每一项都可以配置链接,可以跳转任意有效地址。如图,我们在2018狗年大吉(也就是区块5)处添加了一个链接。

第四步:提交

完成一系列配置之后,点击提交按钮,生成页面便开始了。生成成功之后,我们会来到我的界面。我的界面中,便是我们生成的页面列表了。点击页面名称以及页面路径,均可以查看生成的页面。如果想在手机端预览,那么生成二维码扫描查看会是一个很好的选择。

点开链接之后,发现,哎呀这个还不是原来的图片吗?那这个有什么用呢?

1、在2018狗年大吉处,点击可以跳转链接,其他地方点击无效,这就是成功的设置了跳转了。

2、图片被分割成多份,有利于页面加载。一张1MB的图片与九张100KB的图片,页面打开的速度上当然是后者更加有优势。

第五步:完成

页面已经完成,做你想做的事情吧!

相关文章

  • 一款可以快速将图片生成html的小工具---慧切图

    年关将至,活动页面大量聚集。产品运营设计技术同学叫苦不迭。 最近做了款产品慧切图,可以帮助产品和运营同学迅速得根据...

  • #第二十七天#生成Sprite 雪碧图方法

    1、使用exe小工具,csdn上有人分享,可以通过选择图片自动生成雪碧图,优点是选择图片方便,缺点是需要安装,并且...

  • 一款mac端切图、压缩图片小工具

    写了一款mac端切图、压缩图片的小工具,有需要请自取 链接:https://pan.baidu.com/s/1r6...

  • 自己写个小工具——图片水印生成器

    自己写个小工具——图片水印生成器 自己写个小工具——图片水印生成器介绍安装使用说明其他TODO LIST 介绍 做...

  • coder技能-ps切图

    可以使用裁剪工具中的切片工具来逐一裁剪想要的图,然后批量生成图片 可以使用参考线来切图,然后使用基于参考线来切图,...

  • 一键生成丰富多样的照片墙

    今天给大家带来一款图片处理神器一键生成照片小工具 ▍推荐说明 我们经常被朋友圈那些拼接而成版式丰富多样的图片惊艳到...

  • 推荐一款工具类的小程序

    传图识字小工具 功能1:一款智能扫描助手,它可以快速识别图片上的文字,帮助你将其转换成电子版。 功能2:随意将你所...

  • Video GIF Creator for Mac(视频转gif

    Video GIF Creator for Mac是一款运行在Mac平台上的视频转gif软件,可以快速将将视频或图...

  • 2016-3-9 记录

    PHOTOSHOP 什么是切图 分析UI:组织html结构,需要的图片(前景,背景) 制作雪碧图 图片优化 htm...

  • HTML生成图片

    本章介绍一下如何把HTML转成图片,主要思路是用html2canvas这个插件生成把页面生成canvas,然后用c...

网友评论

      本文标题:一款可以快速将图片生成html的小工具---慧切图

      本文链接:https://www.haomeiwen.com/subject/alpwdttx.html