目前專案已經上線:https://logoly.pro/ (直擊“檢視原文”訪問)
程式碼也已開源:https://github.com/bestony/logoly
歡迎各位前來試用 && 求 Star !
昨晚,我花了 5 個小時,在肝一個專案,如今,讓它成功上線,我便向大家介紹一下它。
突發的靈感
我自己平時經常要做一些業餘專案,在做業餘專案的時候,就涉及到了要做 Logo ,但是作為一個沒有設計感的程式員,在做 Logo 時總是會做出一些很醜的 Logo ,於是痛定思痛,想想有沒有什麼有用的工具可以幫助我生成好看的 Logo。對於我來說,也不需要太過複雜,能夠滿足我自己的要求就行。
那麼這就要求這個 Logo 有一些特點
經過一番篩選,PornHub 的 Logo 進入到我的視線。
設計產品
在開發之前,我先進行了產品方面的考慮,看看我需要做哪些功能,哪些不做,最終得到了這樣一個清單:
要做的專案
不做的專案
後續迭代實現的
設計佈局
在完成了產品的功能,我又進行了佈局的設計,這次我用的是 Adobe XD,最近很喜歡用這個工具來設計產品的介面,非常的方便。最終設計完成的版本如下:
設計完成後,就要開始準備開始編碼了。
找庫
一開始,我考慮使用一些 UI 框架,不過,由於一開始沒有引入 UI 框架,快寫完了才發現基本不需要元件庫,乾脆將錯就錯,這樣用了。
在完成了基本的介面後,就是涉及到的一些庫的使用了,這裡要感謝前端生態圈的繁榮,我從 Picas[3] 和 Carbon[4] 的原始碼裡找到了我想要用的庫。
其他我用到的庫還有
上線
在完成了開發後,將程式碼上傳到 Github,準備部署。
在前面提到,我考慮用 Netlify 進行部署,這裡非常方便,在 Netlify 上直接建立專案,選擇你的專案,然後填入命令即可。
並配置一下域名,將自己的域名設定為主域名:
稍等一會,就會自動為你的域名簽註 Let’s Encrypt 的證書。
最後
關於這個專案的故事,我已經說完了所有我能想到的了,接下來,就是你的提問時間了,歡迎你針對專案對我提問,無論是產品、設計、編碼,都可以~
希望大家能夠給這個專案一個 Star: https://github.com/bestony/logoly