正經的我，做了個不正經的專案 —— Pornhub 風格 Logo 生成器

Logoly.Pro 是一個線上的 PornHub 風格 Logo 生成工具，可以幫助你快速生成類似 PornHub 風格的 Logo。

目前專案已經上線：https://logoly.pro/ 程式碼也已開源：https://github.com/bestony/logoly

歡迎各位前來試用 && 求 Star !

---

昨晚，我花了 5 個小時，在肝一個專案，如今，讓它成功上線，我便向大家介紹一下它。

突發的靈感

我自己平時經常要做一些業餘專案，在做業餘專案的時候，就涉及到了要做 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 框架，不過，由於一開始沒有引入 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