正經的我，作了個不正經的項目 —— Pornhub 風格 Logo 生成器

TL；DR

Logoly.Pro 是一個在線的 PornHub 風格 Logo 生成工具，能夠幫助你快速生成相似 PornHub 風格的 Logo

目前項目已經上線：logoly.pro/ 代碼也已開源：github.com/bestony/log…

歡迎各位前來試用 && 求 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: github.com/bestony/log…