正经的我,做了个不正经的项目:Pornhub风格Logo生成器

嵌入式ARM 2019-04-08 17:18


作者寄语:Logoly.Pro 是一个在线的 PornHub 风格 Logo 生成工具,可以帮助你快速生成类似 PornHub 风格的 Logo。


-- Bestony


文章来源:Linux中国

作者:Bestony

声明:转载此文是出于传递更多信息之目的。若有来源标注错误或侵犯了您的合法权益,请作者持权属证明与本网联系,我们将及时更正、删除,谢谢。


昨晚,我花了5个小时,肝了一个项目,如今,让它已成功上线。


突发的灵感


自己平时经常要做一些业余项目,很多时候都涉及到了要做Logo,但是作为一个没有设计感的程序员,总是会做出一些很丑的Logo,于是痛定思痛,想想有没有什么有用的工具可以帮助我生成好看的Logo。也不需要太过复杂,能够满足我自己的要求就行。


那么这就要求这个 Logo 有一些特点


1. 设计简单:很多带复杂图片的Logo就不适合我了。


2. 辨识度高
:单纯的简单并没有太多的用处,还是需要有一些让人印象深刻的地方,PornHub的Logo进入到我的视线,自此我就开始动了一些“歪心思”了。



设计产品


开发之前,先进行产品方面的考虑,最终得到了这样一个清单:


要做的项目


项目使用 Vue 开发,因为可以快速上线项目使用 Netlify 部署,这样就可以使用自己的域名,并使用 SSL,速度还要比 Github Pages 快一些。项目应当支持自定义文字,这个是最基础的功能需求,必须要做的。项目应当支持自定义颜色,毕竟可能有其他的方面,需要类似风格,但是不同的颜色的 Logo。项目应当支持自定义文字大小,毕竟我导出的是 PNG,如果不能自定义大小,大家可能会很困扰。项目应当加入 Google Analytics,加入统计,就知道有多少人用过我的项目了,也是一种成就感。项目应当加入我的个人信息,用来给我自己推广,顺便刷一波脸。社会化分享,应当有个方便的分享方法,这样才能够更好的帮助项目在前期成长。


不做的项目


自定义字体:原汁原味的 PH 风格,怎能瞎改字体呢?导出 JPG: 有了透明背景的 PNG,不透明的 JPG 的需求就没那么大了。


后续迭代实现的


其他简单的 Logo:比如 Youtube.


设计布局


产品的功能确定了,开始布局的设计,此次用的工具室Adobe XD,最近很喜欢用这个工具来设计产品的界面,非常方便。设计完成的版本如下:



设计完成后,就要开始准备开始编码了。


找库


一开始,考虑使用一些 UI 框架,不过,由于一开始没有引入 UI 框架,快写完了才发现基本不需要组件库,干脆将错就错,这样用了。


在完成了基本的界面后,就是涉及到的一些库的使用了,这里要感谢前端生态圈的繁荣,我从 Picas[3] 和 Carbon[4] 的源码里找到了我想要用的库。


◈ dom-to-image:将 Dom 元素转换成为图片,以备下载。

◈ file-save:在 Vue 组件里调用系统的下载接口,下载图片

其他我用到的库还有

◈ v-tooltips:用户提醒,之前用的 Vue-Tour,但是跳跃感太强了,所以弃用了。

◈ vue-analytics:Vue 下的 Google Analytics 工具,可以很方便的调用 GA 进行统计。

上线


在完成了开发后,将代码上传到 Github,准备部署。


在前面提到,我考虑用 Netlify 进行部署,这里非常方便,在 Netlify 上直接创建项目,选择你的项目,然后填入命令即可。



并配置一下域名,将自己的域名设置为主域名:



稍等一会,就会自动为你的域名签注 Let’s Encrypt 的证书。




Screenshot


最后


目前项目已经上线:https://logoly.pro/ (直击“查看原文”访问)

代码也已开源:https://github.com/bestony/logoly

希望大家能够给这个项目一个 Star:


Features


  • generate logo like Pornhub

  • download your own logo in PNG format

  • customize logo color

  • customize logo font size


How to Use


  1. open the Logoly website: https://logoly.pro/

  2. edit the text in the box

  3. change color & font size as you like

  4. click the Export button to download the image


TODO


  • share it on Facebook

  • customize fonts


How to Contribute


For those who want to request new features or submit bug reports, click this link to open a new issue.


For those who want to play around with this project, read the Get Started section.


At the end of this section, I suggest you read the Contributing Guide.


Requirements


  • Node.js


Get Started


  1. clone this project

  2. install dependencies with npm install at the project root directory

  3. start the development server with npm run serve

  4. make changes

  5. build with npm run build


嵌入式ARM 关注这个时代最火的嵌入式ARM,你想知道的都在这里。
评论
热门推荐
相关推荐
我要评论
0
2
点击右上角,分享到朋友圈 我知道啦
请使用浏览器分享功能 我知道啦