专栏首页纯洁的微笑正经的我,做了个不正经的项目 —— Pornhub 风格 Logo 生成器

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

这两天一个朋友做了一款非常有意思的开源软件,我试用了一下感觉挺好玩,分享给大家。

在线试用了一下这款开源软件,给自己生成了一个 Logo ,大家看看效果:

当然也可以定制格式、颜色、字体大小,后期作者计划实现 YouTube 风格。

一股满满的极客风,是不是很有趣,下面为作者的开发经历,值得学习。

TL;DR

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

目前项目已经上线:https://logoly.pro/

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

欢迎各位前来试用 && 求 Star !


昨晚,我花了 5 个小时,在肝一个项目,如今,让他成功上线,我便向大家介绍一下他。

突发的灵感

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

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

  1. 设计简单:很多带吉祥物的 Logo 就不适合我了,因为要去准备吉祥物的图片。
  2. 辨识度高:单纯的简单并没有太多的用处, Logo 需要让用户能够记住

经过一番筛选,PornHub 的 Logo 进入到我的视线。

设计产品

在开发之前,我先进行了产品方面的考虑,看看我需要做哪些功能,哪些不做,最终得到了这样一个清单:

要做的项目

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

不做的项目

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

后续迭代实现的

  1. 其他简单的 Logo:比如 Youtube.

设计布局

在完成了产品的功能,我又进行了布局的设计,这次我用的是 Adobe XD,最近很喜欢用这个工具来设计产品的界面,非常的方便。最终设计完成的版本如下:

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

找库

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

在完成了基本的界面后,就是涉及到的一些库的使用了,这里要感谢前端生态圈的繁荣,我从 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

-END-

本文分享自微信公众号 - 纯洁的微笑(keeppuresmile),作者:Bestony

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 人生第一个过万 Star 的 github 项目诞生

    写 Spring Boot 开源项目走入第三个年头,终于有一个开源项目要破万 Star 了,请各位读者大人批评指正。

    纯洁的微笑
  • 人工智能发展史

    我一直很好奇人工智能是如何提出来的,它背后有什么样的故事,在人工智能发展的这60年的时间中,又经历了什么?为什么现在才是人工智能的爆发点,未来人工智能又将走向何...

    纯洁的微笑
  • 我将实时疫情数据爬取下来并做了展示

    今天是全中国按下暂停键的第 25 天,在全中国按下暂停键的日子里,主人翁每天早上睁眼第一件事就是打开手机看着疫情实时数据的变化,看看每一条催泪的新闻。揪着的心却...

    纯洁的微笑
  • 正经的我,做了个不正经的项目

    今天逛「掘金」的时候,发现一个特别有趣的项目,所以我跟作者申请了一下授权,把项目分享给大家看看。

    GitHubDaily
  • 正经的我,做了个不正经的项目

    今天逛「掘金」的时候,发现一个特别有趣的项目,所以我跟作者申请了一下授权,把项目分享给大家看看。

    五分钟学算法
  • 谷歌新Logo如何做到只有305字节

    谷歌换logo已经有一段时间了,对于更换Logo的问题,大家讨论的最多的是到底新老Logo哪个更好看。

    哲洛不闹
  • 你也想用上这别具一格的网站 Logo 吗,赶紧进来手把手教会你!

    有时我们会在网络上或日常生活中看到一些模仿各大知名网站风格 Logo 的图标 ,但对于没有平面设计能力的普通网友来说,想制作出类似效果的 Logo 门槛还是有点...

    iMike
  • go:文件路径相关

    超级大猪
  • JavaScript数据结构与算法-Array

    例如:1 ^ 1 = 0 、 2 ^ 2 = 0、 0 ^ 1 = 1 、1 ^ 1 ^ 2 ^ 3 ^ 2 ^ 4 ^ 3 = 4

    FinGet
  • 数据猿对话丨聚合数据郭劼:数据只有在流通过程中被充分应用,价值才能最大化

    作数据流通的中转站,聚合数据以API形式为互联网和移动互联网(企业和个人)开发人员提供了最好、最便捷的服务。有了聚合数据,开发者再也不用担心对各种类型数据的采集...

    数据猿

扫码关注云+社区

领取腾讯云代金券