如何製作LOGO 設計＋網站配色（網頁設計流程）？ | 犬哥網站

使用Canva 製作網站Logo Skiptocontent 不論架設任何類型的網站，通常有一個象徵品牌的Logo，是不可或缺的一塊。

對於許多新手站長來說，自己從零開始「Logo設計」而且要做的好看，難度其實算滿高的。

這篇文章，我會帶你製作網站Logo，打造漂亮的網站圖標，也會分享優質的配色軟體，讓網站整體視覺更加一致性＋美觀。

最後，也會使用WordPress網站，示範網站Logo上傳＆色系嵌入的教學。

文章流程如下，準備好就開始吧：） 1.如何架設網站？2.使用Canva製作網站Logo3.進行頁面裁切＋去背4.規劃網站配色5.優質主題推薦6.上傳網站Logo＆使用配色常見問題WordPress學習資源 完整影片教學 如何製作LOGO設計＋網站配色（網頁設計流程）？ 1.如何架設網站？ 如果你是新手入門，第一次學習自架網站，可參考Bluehost主機教學，完成個人網域申請＋主機租用＋WordPress網站建置。

使用Bluehost的好處，一來是費用便宜比較沒負擔，二來是介面簡單容易上手，是最推薦新手使用的一款入門主機。

假設你對網站速度or穩定性有更高的要求，可參考A2Hosting的TurboBoost方案，或是Cloudways雲代管主機（VPS主機），雖然費用會稍微高一些，但這兩台的速度會更快。

這些都是優質WordPress主機，各有不同的使用場景，相關比較可參考WordPress優質主機。

等個人網域申請＋主機租用＋WordPress網站建置，都處理完畢之後，就能來進行本文的教學啦：） 2.使用Canva製作網站Logo Canva線上設計平台 能夠免費製作Logo的網站很多，但多數國外的Logo製作平台並無支援中文字體，所以如果你有這方面需求，會建議找有支援的。

這裡推薦使用Canva，它是一家來自雪梨的軟體設計平台，可讓使用者自行在線上設計Logo、海報、簡報、社群媒體封面、印刷品等..，而且有提供免費版使用（也支援中文字體）。

使用Canva設計網站Logo 接下來，我們開始製作網站Logo囉。

前往Canva，找到「標誌」分類，逐步進入設計面板。

使用Canva設計網站Logo 左側會看到很多Logo模板可使用，套用模板後選取Logo，然後點「取消群組」。

會這樣做是因為，有許多站長喜歡橫式的Logo，所以只有先解散群組，才能進行拖曳。

Canva選擇模板＆取消群組 接著，就可設計網站Logo啦，像我就把原來直的排版改成橫的，然後字都靠左對齊，再調整最重要的字體部分。

Canva有支援很多中文字體，像是思源黑體、王漢宗系列等..，在搜尋欄輸入「中文」就會發現有很多可以用了。

設計Logo相關樣式 再來，會看到原來Logo圖標是一個船錨，但我示範的行業是賣傢俱的，感覺就是有點對不上來，所以需更換一下圖標。

點選下圖左側的「元素」，可搜尋你的服務（或商品）關鍵字，像是我就輸入「沙發」就出現一堆了，但有些素材是付費版才能使用的。

點選素材就會出現在右側視覺區，可調整圖標大小＆圖標顏色。

更換網站Logo圖標 備註：除了黑色版的Logo，通常會建議再設計一個白色版的Logo，之後可用在網站背景較深的地方，白色Logo才會比較明顯。

完成後就能下載啦，但免費版Canva沒有提供去背圖片，所以需自行去背（下面章節會教學）。

匯出製作好的Logo圖檔 下載後Canva會詢問是否註冊會員，會建議進行註冊，這樣你的設計才會保存下來，下次需修改再來上面調整就好。

註冊Canva會員，保存已設計完成的圖片 最後來看一下設計完成的Logo，太棒了！網站終於有漂亮的Logo可以用啦！ 網站Logo設計＋製作成功 3.進行頁面裁切＋去背 從Canva下載的網站Logo，可能圖片會有點大加上並沒有去背，所以需用修圖軟體調整一下。

我自己常用的是PhotoShop處理，上傳網站圖片時也會使用裁剪部分用「裁切工具」、去背部分用「魔術棒」，這是滿快處理好的方法。

更多圖片上傳優化流程。

但如果你不太會使用修圖軟體也沒關係，這裡我分享一個線上去背小工具RemoveBG（但裁切還是要靠自己），這款工具非常直覺簡單，我教大家如何用。

前往RemoveBG，把圖片拖曳至網頁中。

RemoveBG線上裁切小工具 就會發現直接去背成功了，完全快狠準沒有其他廢話，點擊下載即可。

下載去背完成的圖片 如此一來就去背成功囉，當然這畢竟是一款免費去背軟體，如果清除不夠銳利的地方，還是得靠修圖軟體後製。

4.規劃網站配色 有些站長問我要如何做網站配色，其實概念很簡單，可先從網站Logo選出「主視覺顏色」，然後再找幾個「同色相但不同明度」的顏色做搭配。

如果覺得顏色比較單調，可加1～2個色彩較鮮明的「點綴色」就可以了。

如果你覺得要自己選很麻煩，或是你的網站Logo跟我上面一樣，是設計為黑或白的素色風格，不知道該如何搭配顏色。

這裡推薦一款強大的配色軟體Coolors，這個軟體真的很猛，下面做分享。

Coolors基礎功能 前往Coolors，點擊Generate生成配色。

使用Coolors進行網站配色 會喜歡這款軟體的原因之一，是它提供的配色都頗漂亮的，我列出面板的一些功能（下圖）。

還有，如果當前配色不喜歡的話，可以按下「空白鍵」就會自動換下一組供你選擇..，超級方便吧！ Coolors配色功能介紹 刪除：刪除該顏色，會自動遞補其他顏色進來。

找不同明度：會列出同色相但不同明度的顏色，方便你選擇。

加入最愛：儲存到我的最愛，之後可以回顧。

拖曳排序：可拖曳順序。

複製：複製色碼。

鎖定：鎖定起來的顏色，就算按空白鍵，也會持續保存住。

ColorPicker顏色選擇器 ColorPicker功能，可讓你輸入單一喜愛的顏色（下圖我是輸入偏紫色的色碼），系統就會自動把相關顏色列出給你。

ColorPicker顏色選擇器 如果你有特別喜歡某一個顏色，或是客戶指定網站要有某顏色，這個功能就很好用。

ColorPicker幫你列出相關配色 Imagepicker圖片選擇器 點選Pickpalettefromphoto，然後上傳Logo，系統會幫你挑選出Logo的顏色組成。

Imagepicker圖片選擇器 上傳後會看到顏色已經列出，因為我是用素色系的，所以顏色會比較少一點。

再來就是匯出色碼啦，點選Export或是Openinthegenerator，都會看到組成色碼，就能當作網站配色的參考值囉：） 顯示Logo的配色組合（可匯出） GradientMaker顏色漸變器 點選Createagradient，這是一個漸層設計工具，有些網頁區塊想搭配漸層功能，可用這個工具提供一些很棒的想法。

使用GradientMaker創造顏色漸層 系統會推薦漂亮的漸層，點Random能隨機產生顏色，可自由調整Position方向、Opacity透明度等..，也能複製CSS程式碼。

GradientMaker顏色漸變器 好囉，以上就是Coolors網站配色軟體的功能介紹啦：） 5.優質主題推薦 WordPress有上千種佈景主題可選擇，好的主題不但外觀漂亮且功能性強，對站長來說是個強大好幫手。

我在這幾個連結內，有列出多款好用＋美觀的主題，應該會有效幫到你找到喜歡的，像是最佳主題推薦、最佳WooCommerce電商主題。

值得而外一提的是Divi這款優質的主題＋頁面編輯器，更多完整Divi中文教學（含購買安裝＋功能教學）。

它是許多網頁設計師喜愛的一款軟體，除了功能強大且有很多高質感的元素（和現成模板），就算不懂程式，也能設計漂亮的網站。

Divi 是由知名ElegantThemes公司開發，所以購買Divi並不會只有一種軟體可用，而是能享受它們公司的所有服務。

像是全功能DiviTheme佈景主題、DiviBuilder頁面編輯器、Extra主題（可用在部落格/新聞雜誌/作品集..）、Bloom電子報註冊行銷工具、Monarch社群工具等..。

以上是簡單的WordPress優質主題分享，希望你也能找到喜愛的主題：） 6.上傳網站Logo＆使用配色 有了網站Logo、網站配色、漂亮的佈景主題，接下來就是實際應用在網站上啦。

WordPress預設是有固定上傳Logo的地方，可參考WordPress後台教學，裡面有章節提到。

但有些功能性比較全面的主題，會客製化Logo上傳的位置，所以還是要依照自己的主題為主，下面我就用剛提到的Divi主題進行示範。

上傳網站Logo＆設定網站配色 前往Divi>ThemeOptions，會看到Logo就可在這上傳，至於網站色票在ColorPickersDefaultPalette可更換，之後設計頁面就能隨時拿出來用。

上傳網站Logo＆設定網站配色 調整網站Logo大小 前往Divi>ThemeCustomizer>Header&Navigation>PrimaryMenuBar，找到LogoMaxHeight，就能調整Logo大小啦。

你也可使用裝置切換工具，看看在其他裝置呈現的感覺，找到最適合的大小即可。

調整網站Logo大小 最後，來看一下網站Logo是否有顯示在網站中。

網站Logo出現了 太棒了，這樣就有個人的網站Logo囉，加上我們也挑選了幾個適合的網站配色，就能用這些顏色，進行完整的網頁設計製作了：） 常見問題 Canva除了可製作網站Logo，還有什麼其他功能嗎？ 各種設計素材，像是海報、簡報、社群媒體封面、各種印刷品、行銷素材等..，都能在Canva上進行製作，它算是一個綜合型平台。

Canva的付費版有什麼功能？ 付費版最大好處，應該是能享用更多的免費模板＆素材庫，還有更完美的團隊協作功能，這對有規模的設計團隊，是很好的解決方案，而且費用不貴。

如何搭配出好看的網站配色？ 基本上顏色搭配，能掌握「一致性原則」，設計出來的感覺都不會太差。

可先從網站Logo選出「主視覺顏色」，然後再找幾個「同色相但不同明度」的顏色做搭配。

如果覺得顏色比較單調，可加1～2個色彩較鮮明的「點綴色」就可以了。

有推薦的網站配色工具嗎？ 可以使用Coolors，配色功能非常齊全且好看，幫助很多人得到更棒的靈感。

有推薦的WordPress佈景主題嗎？ Divi是我覺得設計介面＆網站模板，非常有質感的一款多功能主題，很多設計師也都使用這款主題架站。

更多完整Divi中文教學。

它也有內建頁面編輯器（DiviBuilder），就算不懂程式用拖曳方式，也能輕鬆設計出一個高質感網站：） WordPress學習資源 學習WordPress網站架設流程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答。

如果你沒時間自己架站、或是遇到解決不了的網站問題。

歡迎洽詢犬哥數位（WordPress網頁設計公司），請專家製作會更有效率！ 如果你偏愛自架網站，也歡迎持續關注犬哥網站Blog，我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習，也可關注YouTube頻道，幫助你更容易進入狀況。

當然，如果你在操作過程中遇到問題，也可以加入WordPress架站xSEO教學時光屋–犬哥網站，除了有網友一同幫你解惑外，犬哥團隊也會同步在社團幫助大家。

希望這些對你有所幫助，祝一切順利啦！ 關於作者 犬哥網站 我們分享WordPress架站x網路行銷知識，不需會任何程式技術，就能自己建立各種網站。

搭配豐富的網路行銷教學，幫助你被更多人看到。

趕快跟著我們的腳步，開始學習吧：） 4thoughtson“如何製作LOGO設計＋網站配色（網頁設計流程）？” 請問如果用canva網站的logo來作成自己品牌的logo會有版權問題嗎？謝謝唷 Reply 嗨，版權問題應該是不會，因為是Canva免費開放出來給大家使用的。

但如果要用它來申請商標，這就比較行不通，因為這所有權還是算Canva，除非自己有做比較大幅度的設計調整～ Reply 太感謝了～謝謝你的教學和回覆：）） Reply 多謝你的鼓勵！ Reply LeaveaCommentCancelReply發佈留言必須填寫的電子郵件地址不會公開。

必填欄位標示為*Typehere..Name* Email* Website Δ 我想要找.. 搜尋 訂閱犬哥社群 Youtube Facebook Instagram 文章分類 分類 所有文章 如何架設網站 優質主機 WordPress基礎教學 WooCommerce電商系列 SEO技巧＋網路行銷 網頁設計觀念 優質主題系列 優質外掛系列 WordPress速度性能 WordPress安全性 網站備份＋搬家 1.如何架設網站？2.使用Canva製作網站Logo3.進行頁面裁切＋去背4.規劃網站配色5.優質主題推薦6.上傳網站Logo＆使用配色常見問題WordPress學習資源 如何架站MenuToggle 架設Blog形象網站架設購物網站架設線上課程架設預約網站架設網頁硬核觀念 優質主機MenuToggle Bluehost入門主機A2Hosting中階主機Cloudways雲端主機 SEO技巧MenuToggle SEMrush排名軟體SEO軟體整理 服務項目MenuToggle 快速套版架站形象網站設計購物網站設計客製網站設計 所有文章聯絡我 影片教學影片教學 回到頂端