by Mr.Wuli 10 月 2, 2017 | 網站經營 |
最近生活步調稍微有些改變，想說空出來的時間就順手修改一下網頁；但真的太久沒有製作網頁了，乾脆在正式開始做之前複習一下製作網站流程。
又那麼剛好..最近 udemy 在特價，隨手就買了一些教學影片來看看別人都怎麼教的？然後順便整理一下寫寫筆記
本篇目錄 :
關於製作網頁的技能與軟體面
Photo Shop or Affinity Photo
illustrator or Affinity Desitner
HTML ＆ CSS
Deramweaver or Coda
關於製作網頁的技能與軟體面：
說到做網頁大家會想到什麼呢？「那麼難的東西我才學不會呢！」、「感覺需要英文很強？」.. 其實一開始我也是這樣覺得的，對於英文很爛的自己來說，要學會寫語法這件事，一直是我遲遲不敢去學寫程式的一個障礙。
但是好加在剛開始學製作做網頁的時候 Adobe 有個叫 Dreamweaver 的軟體，在界面上有中文的選單，在製作時也可以省去很多網頁語法的編輯，即使是不會英文的人，也可以輕鬆的製作一個簡單的網站。
但一但深入接觸網頁製作後，才發現… 原來做網頁不是只要學會一套軟體就夠了！在一個網站裡其實有很多元素，包含照片、文字、還有排版的美感要注意、以及按鈕功能性還有規劃便利的選單導覽 .. 等等。真的是一門很深的學問啊！（但幸運的事.. 做網頁與設計，比製作音樂省多了！）
今天這篇文章想跟大家簡單的分享一下，自己在學習網頁製作的這段時間以來，關於製作網頁技能的想法以及工具軟體的介紹。
Photo Shop or Affinity Photo
對於多數的人來說，一個網頁中如果只有文字是一件很無聊的事！因此不管是商品相片還是背景圖示的點綴可以說是在所難免的。（但如果文字間距與排版顧好的話，還是很有質感的～ ；關於這一點日本人真的很厲害！）
在製作網頁的時候你可能會需要一些相片以及圖像的素材，幸運的話，你可以在網路上找到一些免費授權又符合你需求的圖片。但多數免費的圖片可能都不符合你的需求；而且真的要購買的話.. 又要花很多時間去挑選照片><
所以這個時候…還是自己照最快對吧！
雖然說自己照的照片是比較符合原本的概念，但如果照片一不小心沒有拍好的話，難免還是會需要用到像 Photo Shop 或是 Affinity Photo 這樣的軟體來進行編修。不論時構圖的重新剪裁也好、或是色調的調整，上述的兩套軟體都是很好的工具。
修圖軟體可以辦到的事
把不需要的元素去除（例如不小心拍到的路人）
調整相片的亮度與對比 （把陰天修成大晴天）
將平凡的照片加上個性特效 （如 Instagram 的相片特效）
在相片上添加文字或製作文字特效 （例如海報的製作）
適合學習繪圖軟體的人
攝影師 or 對攝影有興趣的人
網頁設計師 or 部落客
一般使用者 （喜歡學習新技能的人）
ILLUSTRATOR or Affinity Designer or Cocoo
Illustrator 跟 Affinity Designer 等軟體比較偏向「向量檔案」的編輯，經常應用在 插畫 、 網站架構草考製作、平面雜誌、文宣等設計上。如果你想製作一些教學文章、或是影片，也可以用 Illustrator 以及 Affinity Designer 來做一些設計上的輔助。
但如果你覺得這類軟體太難上手，也可以試著用 Word 或是 Excel 來製作網站的草稿。雖然在功能的精細度、活用度上比不上 Illustrator 跟 Affinity Desinger ，但卻適合新手在電腦上製作簡單的網頁草稿。
另外還有一套線上的網站草稿製作網站 ”Cocoo”，頁面設計得非常簡單，有興趣的人可以嘗試看看。（它是有收費的唷！）
HTML ＆ CSS
等你製作好網站草稿後，差不多就可以開始著手進行網站內部的程式語法撰寫了（也是就是 Coding 的部分）。
HTML 與 CSS 是作為一個網頁製作新手，必須要了解的其中兩種基礎語法.. 雖然說第一次接觸時，可能會覺得有點頭暈、想放棄；但只要有心，人人都可以是網頁設計師！（想想周星馳說過話.. 燃燒你的小宇宙吧）
註：英文好不好，跟會不會編寫程式碼，其實並沒有你想像的影響那麼大，現在很多軟體都可以協助你去記那些編碼、甚至是幫你輸入，你只要還沒有瞎、看得懂英文字母就沒有可以了！
Dreamweaver or Coda
如果你跟我一樣英文不好的話，可以考慮使用 Dreamweaver 或是 Coda 這兩套網頁製作軟體。Dreamweaver 是 Adobe 旗下的產品，使用的人多、網路上的教學與資源也多；價格的部分採月租制度，長期下來製作成本會稍微高一點。Cada 的話可以買斷，適合打算深度研究、又想節省軟體費用的人。
另外，有些人研究了一陣子後，可能就會比較偏向使用「程式編碼」來製作網站，不需要 Dreamweaver 或是 Coda 這樣的輔助軟體。
Cafe Time
以上就是關於網頁製作入門的一些基礎知識，希望幫助大家對於網頁製作的基本常識、以及所需的工具，能有一個初步的了解。未來我也會繼續持續整理、撰寫一些有關於網站製作的資訊。歡迎一起學習的人與我交流～
那就 … 下次見。
by Mr.Wuli 12 月 10, 2015 | 軟體推薦 |
在前面幾篇文章中都有介紹到 Affinity 這套軟體，算算從購買到現在已經用了快九個月了，基本上多數的需求都可以在 Affinity 上獲得解決；唯一的問題就是在跟印刷廠對檔案的時候無法正常轉換 Ai 檔，之前也是透過朋友的 Adobe 軟體才順利轉出 illustrator 檔。
但如果只是在 Mac 上作業的話基本上倒是蠻便利的！多數的 Ai \ PSD 黨都可以正常開啟瀏覽、修改。 如果你是自己創業、或是有一個自己的網站、部落格，經常會有繪圖、修照片的機會，真的非常推薦這套軟體；有興趣的朋友可以趁著現在有限時優惠時下載購買！更加划算唷～～
關於 Affinity Designer
Affinity Designer 是一套視覺設計用的向量繪圖軟體，適用於插畫、海報、型錄、書籍、網頁…等設計。擁有足以披敵 Adobe illustrator 繪圖功能，以及極簡易懂的 UI 設計，如果你曾經用過 illustrator 的話，應該可以在短時間內上手 Affinity Designer 這套軟體！
Affinity Designer 的幾個重點特色
◎ 極致的柔軟性
教學分享
VIDEO
購買連結
快去更新、下載吧！Affinity Designer Affinity Photo
by Mr.Wuli 12 月 6, 2015 | 軟體推薦 |
以前剛開始寫網誌的時候，都是 “想到什麼寫什麼..“ ，比如說今天想寫一篇教學…就會直接登入網站寫在後台的文字編輯區域，導致常常會因為 WordPress 的語法漏洞，寫出很多問題。（像是字型跑掉..照片破格之類的..）後來開始爬文下載一些網誌撰寫軟體，嘗試離線編輯，在最後文章完成時再一併上傳內文以及圖片。
使用離線編輯軟體的小缺點
在使用離線編輯軟體的時期中，我用過很多不同的軟體，像是 MultiMarkdown 和 MarsEdit .. 等軟體。雖然這些軟體可以離線編輯，但真的要上傳內容時…還是會有很多要另外設定的選項；之前也曾經因為直接複製貼上 MultiMarkdown 撰寫好的內容，發生網誌 RSS 失靈的悲慘情況..。(因為查了很久都不知道問題到底出在哪裡，最後還得每篇重新打過才修復完成..)
嘗試將文字與排版分開
堅持了一段時間的離線編輯軟體後，決定還是把 “文字撰寫” 和 “排版” 分開，在構想內文的時候就用單純的筆記編輯軟體，像是 Evernote 或是 Simplenote 這類的文字編輯軟體。(撰寫好內容後再將文字貼上到 WordPress 後台的語法編輯版面排版..）
使用 Evernote 整理資料
Evernote 這套軟體應該不用再介紹了，用過的人就知道有多好用！不但可以把在網頁中看到的資訊直接快速擷取、儲存在 Evernote 中；還可以辨識所有圖片中的文字，強大的搜尋功能可以說是一大特色。
Simplenote 行動筆記
Simplenote 則是我最近才發現的一套軟體，當初之所以會想找另一套筆記軟體..其實只是因為希望在觀看或編輯文字時，可以呈現像 Instpaper 一樣擁有深底色的閱讀模式，比較不傷眼睛…。(單純心理作用？)
Simplenote 的功能很簡單，是個極簡的文字編輯軟體，設計走簡單大方路線；適合在通勤或是在咖啡廳時做一些簡單的筆記，回家後再同步到電腦中。
Alternote 的專注模式
但現在最常用的文字編輯軟體還是以 Alternote 為主。Alternote 是一套可以與 Evernote 資料同步的軟體，同時支援多數 Evernote 內部的功能..；像是 標籤 、筆記本、文章捷徑…等主要功能。雖然 Alternote 目前還沒有 Work Chat （未來可能也不打算加入..），但其主要特色還是擁有一個 “極簡的編輯版面”，不但讓你在編輯的時候可以更專心在文字的內容，同時還支援前面所提到的 Night Mode ! （只可惜目前還沒有手機版 App）
（其實…就是喜歡它的設計拉！用喜歡的軟體寫起文章來就是不一樣～～～）
影像製作 Affinity Designer
當我把網誌的內容構想好了以後，就會開始用 Affinity Designer 來編輯網誌中需要的圖片。 Affinity 是一套專門針對 Mac 用戶所研發的繪圖軟體；（目前尚不支援 PC 的 Windows 作業系統）其強大的功能幾乎可以披敵 Adobe 的 Illustrator 和 Photo Shop ！還有一個重點是 ”價格超值“ ~~
Affinity 目前的產品分成 Affinity Designer 和 Affinity Photo 兩款軟體。 Affinity Designer 等同 Adobe 的 Illustrator 、而Affinity Photo 則是和 Photo Shop 一樣是專門拿來修相片的軟體。
如果你和我一樣不需要將檔案送到印刷廠，只是在網路上寫寫圖文部落格…光是這兩套軟體，基本上就已經很夠用了。可以幫助你省下大筆的繪圖軟體費用！相較於正版 Adobe 軟體 / 年費約 NT 19,440； Affinity 兩套軟體加起來才不到 NT 3,000 ，對於尊重製作財產權的創作者來說，真的是個不錯的選擇唷～
語音朗讀
感謝閱讀與分享
以上就是我個人在撰寫更新網誌時的流程，很高興能與大家分享；如果你有任何更棒的方法，也歡迎你與我分享！感謝你的閱讀與分享 O.OP
文章相關連結
下載 MultiMarkdown MarsEdit 介紹與下載 WordPress 繁體中文網頁 Evernote 中文官方網站 Simplenote 介紹與下載連結 Alternote 官方網站 Affinity Designer 官方介紹 Affinity Photo 官方介紹
by Mr.Wuli 10 月 19, 2015 | 軟體推薦 |
之前為了節省開銷，把原本租用的 Adobe 換成了 Affinity Designer 和 Affinity Photo 這套兩軟體。（Designer 取代 ILLUSTRATOR 、Photo 則是取代 PhotoShop）
本來是想說 {反正我做的東西都很簡單，應該用 Affinity 也做得出來吧？) 沒想到實際用起來時，還是有很多不適應的地方…像是前陣子要做招牌的時候，找不到要怎麼轉存成 Illustrator 檔的功能，最後還是靠朋友轉檔才搞定…
但既然用了 Mac 當然就是要試試看 App Store 上的軟體阿…不然要幹麻！當初，看到 Affinity 的官方介紹影片，就覺得這軟體好像超強大的！也沒考慮太久，就到 App Store 衝了一套來研究。雖然說目前的軟體使用介面和教學資源都是英文的..讓菜英文有點頭暈；就算大學有混過幾堂 “電腦繪圖” 課，但要真的完全使用英文介面的軟體，還是真的是..誇龍謀(╯°□°）╯︵ ┻━┻ {希望未來能快點出個日文版的使用介面！)
如果你也和我一樣很少製作印刷檔，想自己在家玩玩軟體、做些小美工，我想 Affinity 會是一套很實惠的選擇！在功能上他比 Apple 出的 Pixelmator 再進階一點，很多 Adobe 能做到的他似乎也都做得出來。兩套加起來也不超過 Nt 3,000，應該是一個很超值的投資。
Affinity Designer
售價：NT 1,190
Affinity Photo
售價：NT 1,490
相關連結：
Affinity Designer
Affinity Photo![?? [ GR-23 ] WRI ?????](https://unovoyage.com/cdn/shop/products/Guardampergr23_withphone_3a6f8282-5875-41a6-965c-3c42283d1a12_1800x1800.jpg?v=1710382762)
近期留言