正经的我 做了个不正经的项目 —— Pornhub 气势派头 Logo 生成器

Logoly.Pro 是一个在线的 PornHub 气势派头 Logo 生成工具，可以资助你快速生成类似 PornHub 气势派头的 Logo。-- BestonyLogoly.Pro 是一个在线的 PornHub 气势派头 Logo 生成工具，可以资助你快速生成类似 PornHub 气势派头的 Logo。现在项目已经上线： https://logoly.pro/ （点击“相识更多”） 代码也已开源： https://github.com/bestony/logoly接待列位前来试用 && 求 Star !昨晚，我花了 5 个小时，在肝一个项目，如今，让它乐成上线，我便向大家先容一下它。

突发的灵感我自己平时经常要做一些业余项目，在做业余项目的时候，就涉及到了要做 Logo ，可是作为一个没有设计感的法式员，在做 Logo 时总是会做出一些很丑的 Logo ，于是痛定思痛，想想有没有什么有用的工具可以资助我生成悦目的 Logo。对于我来说，也不需要太过庞大，能够满足我自己的要求就行。

那么这就要求这个 Logo 有一些特点设计简朴：许多带祥瑞物的 Logo 就不适合我了，因为要去准备祥瑞物的图片。辨识度高：单纯的简朴并没有太多的用处， Logo 需要让用户能够记着经由一番筛选，PornHub 的 Logo 进入到我的视线。

设计产物在开发之前，我先举行了产物方面的思量，看看我需要做哪些功效，哪些不做，最终获得了这样一个清单：要做的项目项目使用 Vue 开发，因为可以快速上线项目使用 Netlify 部署，这样就可以使用自己的域名，并使用 SSL，速度还要比 Github Pages 快一些。项目应当支持自界说文字，这个是最基础的功效需求，必须要做的。项目应当支持自界说颜色，究竟可能有其他的方面，需要类似气势派头，可是差别的颜色的 Logo项目应当支持自界说文字巨细，究竟我导出的是 PNG，如果不能自界说巨细，大家可能会很困扰。

项目应当加入 Google Analytics，加入统计，就知道有几多人用过我的项目了，也是一种成就感。项目应当加入我的小我私家信息，用来给我自己推广，顺便刷一波脸。社会化分享，应当有个利便的分享方法，这样才气够更好的资助项目在前期发展。

不做的项目自界说字体：原汁原味的 PH 气势派头，怎能瞎改字体呢？导出 JPG： 有了透明配景的 PNG，不透明的 JPG 的需求就没那么大了。后续迭代实现的其他简朴的 Logo：好比 Youtube.设计结构在完成了产物的功效，我又举行了结构的设计，这次我用的是 Adobe XD，最近很喜欢用这个工具来设计产物的界面，很是的利便。最终设计完成的版本如下：设计完成后，就要开始准备开始编码了。找库一开始，我思量使用一些 UI 框架，不外，由于一开始没有引入 UI 框架，快写完了才发现基本不需要组件库，爽性将错就错，这样用了。

在完成了基本的界面后，就是涉及到的一些库的使用了，这里要谢谢前端生态圈的繁荣，我从 Picas 和 Carbon 的源码里找到了我想要用的库。dom-to-image：将 Dom 元素转换成为图片，以备下载。file-save：在 Vue 组件里挪用系统的下载接口，下载图片其他我用到的库另有v-tooltips：用户提醒，之前用的 Vue-Tour,可是跳跃感太强了，所以弃用了。vue-analytics：Vue 下的 Google Analytics 工具，可以很利便的挪用 GA 举行统计。

上线在完成了开发后，将代码上传到 Github，准备部署。在前面提到，我思量用 Netlify 举行部署，这里很是利便，在 Netlify 上直接建立项目，选择你的项目，然后填入下令即可。并设置一下域名，将自己的域名设置为主域名：稍等一会，就会自动为你的域名签注 Let’s Encrypt 的证书。

最后关于这个项目的故事，我已经说完了所有我能想到的了，接下来，就是你的提问时间了，接待你针对项目对我提问，无论是产物、设计、编码，都可以~希望大家能够给这个项目一个 Star： https://github.com/bestony/logoly点击“相识更多”可会见文内链接。

本文来源：金年会-www.hhhtlyx.com