Select Page
關於製作網頁所需的基礎技能與軟體軟體工具

關於製作網頁所需的基礎技能與軟體軟體工具

最近生活步調稍微有些改變,想說空出來的時間就順手修改一下網頁;但真的太久沒有製作網頁了,乾脆在正式開始做之前複習一下製作網站流程。

又那麼剛好..最近 udemy 在特價,隨手就買了一些教學影片來看看別人都怎麼教的?然後順便整理一下寫寫筆記

本篇目錄 :

  • 關於製作網頁的技能與軟體面
  • Photo Shop or Affinity Photo
  • illustrator or Affinity Desitner
  • HTML & CSS
  • Deramweaver or Coda

關於製作網頁的技能與軟體面:

說到做網頁大家會想到什麼呢?「那麼難的東西我才學不會呢!」、「感覺需要英文很強?」.. 其實一開始我也是這樣覺得的,對於英文很爛的自己來說,要學會寫語法這件事,一直是我遲遲不敢去學寫程式的一個障礙。

但是好加在剛開始學製作做網頁的時候 Adobe 有個叫 Dreamweaver 的軟體,在界面上有中文的選單,在製作時也可以省去很多網頁語法的編輯,即使是不會英文的人,也可以輕鬆的製作一個簡單的網站。

但一但深入接觸網頁製作後,才發現… 原來做網頁不是只要學會一套軟體就夠了!在一個網站裡其實有很多元素,包含照片、文字、還有排版的美感要注意、以及按鈕功能性還有規劃便利的選單導覽 .. 等等。真的是一門很深的學問啊!(但幸運的事.. 做網頁與設計,比製作音樂省多了!)

今天這篇文章想跟大家簡單的分享一下,自己在學習網頁製作的這段時間以來,關於製作網頁技能的想法以及工具軟體的介紹。

Painting by David Schnell (Detail) / Galerie EIGEN+ART / The Arm

Photo Shop or Affinity Photo

對於多數的人來說,一個網頁中如果只有文字是一件很無聊的事!因此不管是商品相片還是背景圖示的點綴可以說是在所難免的。(但如果文字間距與排版顧好的話,還是很有質感的~ ;關於這一點日本人真的很厲害!)

在製作網頁的時候你可能會需要一些相片以及圖像的素材,幸運的話,你可以在網路上找到一些免費授權又符合你需求的圖片。但多數免費的圖片可能都不符合你的需求;而且真的要購買的話.. 又要花很多時間去挑選照片><

所以這個時候…還是自己照最快對吧!

雖然說自己照的照片是比較符合原本的概念,但如果照片一不小心沒有拍好的話,難免還是會需要用到像 Photo Shop 或是 Affinity Photo 這樣的軟體來進行編修。不論時構圖的重新剪裁也好、或是色調的調整,上述的兩套軟體都是很好的工具。

修圖軟體可以辦到的事

  • 把不需要的元素去除(例如不小心拍到的路人)
  • 調整相片的亮度與對比 (把陰天修成大晴天)
  • 將平凡的照片加上個性特效 (如 Instagram 的相片特效)
  • 在相片上添加文字或製作文字特效 (例如海報的製作)

適合學習繪圖軟體的人

  • 攝影師 or 對攝影有興趣的人
  • 網頁設計師 or 部落客
  • 一般使用者 (喜歡學習新技能的人)

 

ILLUSTRATOR or Affinity Designer or Cocoo

affinity deisginer 2015-10-19 00.34.59

Illustrator 跟 Affinity Designer 等軟體比較偏向「向量檔案」的編輯,經常應用在 插畫 、 網站架構草考製作、平面雜誌、文宣等設計上。如果你想製作一些教學文章、或是影片,也可以用 Illustrator 以及 Affinity Designer 來做一些設計上的輔助。

但如果你覺得這類軟體太難上手,也可以試著用 Word 或是 Excel 來製作網站的草稿。雖然在功能的精細度、活用度上比不上 Illustrator 跟 Affinity Desinger ,但卻適合新手在電腦上製作簡單的網頁草稿。

另外還有一套線上的網站草稿製作網站 ”Cocoo”,頁面設計得非常簡單,有興趣的人可以嘗試看看。(它是有收費的唷!)

 

HTML & CSS

seo-icon-in-macbookpro

等你製作好網站草稿後,差不多就可以開始著手進行網站內部的程式語法撰寫了(也是就是 Coding 的部分)。

HTML 與 CSS 是作為一個網頁製作新手,必須要了解的其中兩種基礎語法.. 雖然說第一次接觸時,可能會覺得有點頭暈、想放棄;但只要有心,人人都可以是網頁設計師!(想想周星馳說過話.. 燃燒你的小宇宙吧)

註:英文好不好,跟會不會編寫程式碼,其實並沒有你想像的影響那麼大,現在很多軟體都可以協助你去記那些編碼、甚至是幫你輸入,你只要還沒有瞎、看得懂英文字母就沒有可以了!

 

Dreamweaver or Coda

如果你跟我一樣英文不好的話,可以考慮使用 Dreamweaver 或是 Coda 這兩套網頁製作軟體。Dreamweaver 是 Adobe 旗下的產品,使用的人多、網路上的教學與資源也多;價格的部分採月租制度,長期下來製作成本會稍微高一點。Cada 的話可以買斷,適合打算深度研究、又想節省軟體費用的人。

另外,有些人研究了一陣子後,可能就會比較偏向使用「程式編碼」來製作網站,不需要 Dreamweaver 或是 Coda 這樣的輔助軟體。

 

Cafe Time

以上就是關於網頁製作入門的一些基礎知識,希望幫助大家對於網頁製作的基本常識、以及所需的工具,能有一個初步的了解。未來我也會繼續持續整理、撰寫一些有關於網站製作的資訊。歡迎一起學習的人與我交流~

那就 … 下次見。

 

Affinity Designer 重點特色初解與摸索小心得~

Affinity Designer 重點特色初解與摸索小心得~

在前面幾篇文章中都有介紹到 Affinity 這套軟體,算算從購買到現在已經用了快九個月了,基本上多數的需求都可以在 Affinity 上獲得解決;唯一的問題就是在跟印刷廠對檔案的時候無法正常轉換 Ai 檔,之前也是透過朋友的 Adobe 軟體才順利轉出 illustrator 檔。

但如果只是在 Mac 上作業的話基本上倒是蠻便利的!多數的 Ai \ PSD 黨都可以正常開啟瀏覽、修改。 如果你是自己創業、或是有一個自己的網站、部落格,經常會有繪圖、修照片的機會,真的非常推薦這套軟體;有興趣的朋友可以趁著現在有限時優惠時下載購買!更加划算唷~~

關於 Affinity Designer

Affinity Designer 是一套視覺設計用的向量繪圖軟體,適用於插畫、海報、型錄、書籍、網頁…等設計。擁有足以披敵 Adobe illustrator 繪圖功能,以及極簡易懂的 UI 設計,如果你曾經用過 illustrator 的話,應該可以在短時間內上手 Affinity Designer 這套軟體!

Affinity Designer 的幾個重點特色

◎ 極致的柔軟性
◎ 可根據設計的目的切換合適的工具
◎ 完善的軟體使用教學
◎ 專業的工具與功能,使用起來也相當便利
◎ 支援各式的設計軟體格式 ( AI \ PS \ JPG \ PNG \ PDF \ TIFF \ GIF \ SVG \ EPS )
◎ 全新開發的繪圖設計軟體 , 在 App Store 即可購買 (免費更新)
◎ Affinity Designer 與 Affinity Photo 檔案可互換編輯
◎ 檔案以圖層方式管理、可進行非破壞性編輯

限時特價中

最近看到 Affinity 的臉書不但釋出新的更新版本 (終於支援日文選單了!),還有限時優惠,原本兩套合買起來差不多要 3,000 台幣…現在不用 NT 2,400 就可以開始創業了~
ˊ_>ˋ {欸..是這樣嗎?…我想…這就是買 Mac 的好處了吧!)

購買連結

快去更新、下載吧!
App-store-logo
Affinity Designer
Affinity Photo

Mac 部落客的文章撰寫流程與工具推薦

Mac 部落客的文章撰寫流程與工具推薦

以前剛開始寫網誌的時候,都是 “想到什麼寫什麼..“ ,比如說今天想寫一篇教學…就會直接登入網站寫在後台的文字編輯區域,導致常常會因為 WordPress 的語法漏洞,寫出很多問題。(像是字型跑掉..照片破格之類的..)後來開始爬文下載一些網誌撰寫軟體,嘗試離線編輯,在最後文章完成時再一併上傳內文以及圖片。

使用離線編輯軟體的小缺點

MultiMarkdown 編輯畫面

在使用離線編輯軟體的時期中,我用過很多不同的軟體,像是 MultiMarkdown 和 MarsEdit .. 等軟體。雖然這些軟體可以離線編輯,但真的要上傳內容時…還是會有很多要另外設定的選項;之前也曾經因為直接複製貼上 MultiMarkdown 撰寫好的內容,發生網誌 RSS 失靈的悲慘情況..。(因為查了很久都不知道問題到底出在哪裡,最後還得每篇重新打過才修復完成..)

嘗試將文字與排版分開

WordPress 後台編輯畫面

堅持了一段時間的離線編輯軟體後,決定還是把 “文字撰寫” 和 “排版” 分開,在構想內文的時候就用單純的筆記編輯軟體,像是 Evernote 或是 Simplenote 這類的文字編輯軟體。(撰寫好內容後再將文字貼上到 WordPress 後台的語法編輯版面排版..)

使用 Evernote 整理資料

Evernote 日本官方網站

Evernote 這套軟體應該不用再介紹了,用過的人就知道有多好用!不但可以把在網頁中看到的資訊直接快速擷取、儲存在 Evernote 中;還可以辨識所有圖片中的文字,強大的搜尋功能可以說是一大特色。

Simplenote 行動筆記

Evernote 日本官方網站

Simplenote 則是我最近才發現的一套軟體,當初之所以會想找另一套筆記軟體..其實只是因為希望在觀看或編輯文字時,可以呈現像 Instpaper 一樣擁有深底色的閱讀模式,比較不傷眼睛…。(單純心理作用?)

Simplenote 的功能很簡單,是個極簡的文字編輯軟體,設計走簡單大方路線;適合在通勤或是在咖啡廳時做一些簡單的筆記,回家後再同步到電腦中。

Alternote 的專注模式

Alternote 官網介紹

但現在最常用的文字編輯軟體還是以 Alternote 為主。Alternote 是一套可以與 Evernote 資料同步的軟體,同時支援多數 Evernote 內部的功能..;像是 標籤 、筆記本、文章捷徑…等主要功能。雖然 Alternote 目前還沒有 Work Chat (未來可能也不打算加入..),但其主要特色還是擁有一個 “極簡的編輯版面”,不但讓你在編輯的時候可以更專心在文字的內容,同時還支援前面所提到的 Night Mode ! (只可惜目前還沒有手機版 App)

(其實…就是喜歡它的設計拉!用喜歡的軟體寫起文章來就是不一樣~~~)

影像製作 Affinity Designer

Affinity Designer 編輯畫面

當我把網誌的內容構想好了以後,就會開始用 Affinity Designer 來編輯網誌中需要的圖片。 Affinity 是一套專門針對 Mac 用戶所研發的繪圖軟體;(目前尚不支援 PC 的 Windows 作業系統)其強大的功能幾乎可以披敵 Adobe 的 Illustrator  和 Photo Shop !還有一個重點是 ”價格超值“ ~~

Affinity Photo 官方網站介紹

Affinity 目前的產品分成 Affinity Designer 和 Affinity Photo 兩款軟體。 Affinity Designer 等同 Adobe 的 Illustrator 、而Affinity Photo 則是和 Photo Shop 一樣是專門拿來修相片的軟體。

如果你和我一樣不需要將檔案送到印刷廠,只是在網路上寫寫圖文部落格…光是這兩套軟體,基本上就已經很夠用了。可以幫助你省下大筆的繪圖軟體費用!相較於正版 Adobe 軟體 / 年費約 NT 19,440; Affinity 兩套軟體加起來才不到 NT 3,000 ,對於尊重製作財產權的創作者來說,真的是個不錯的選擇唷~

語音朗讀

Mac OS 作業系統的朗讀功能
完成所有的文章內文與圖片後,我會使用 Mac 的 ”朗讀功能“ ,請 ”美加“ 小姐幫我把所有的文章念一次,聽聽看文法通不通順,或是有沒有錯字。(實驗證明..利用朗讀功能檢查後..確實可以找出很多錯字與不通順的地方 !)最後在把所有的文章內容貼到 WordPress 後台的文字編輯區域;單存用 CSS 語法編輯排版,避免用預覽模式減少語法亂掉的情況。(另外,因為圖片現在都會上傳到另外租用的圖床空間,所以則改用 Coda 內部的 FTP 功能上傳後,再以坎入連結的方式寫到文章編輯區域中。)

感謝閱讀與分享

以上就是我個人在撰寫更新網誌時的流程,很高興能與大家分享;如果你有任何更棒的方法,也歡迎你與我分享!感謝你的閱讀與分享 O.OP

文章相關連結

下載 MultiMarkdown
MarsEdit 介紹與下載
WordPress 繁體中文網頁
Evernote 中文官方網站
Simplenote 介紹與下載連結
Alternote 官方網站
Affinity Designer 官方介紹
Affinity Photo 官方介紹

部落客與小編的新選擇 Affinity Designer & Affinity Photo

部落客與小編的新選擇 Affinity Designer & Affinity Photo

之前為了節省開銷,把原本租用的 Adobe 換成了 Affinity Designer 和 Affinity Photo 這套兩軟體。(Designer 取代 ILLUSTRATOR 、Photo 則是取代 PhotoShop)
本來是想說 {反正我做的東西都很簡單,應該用 Affinity 也做得出來吧?) 沒想到實際用起來時,還是有很多不適應的地方…像是前陣子要做招牌的時候,找不到要怎麼轉存成 Illustrator 檔的功能,最後還是靠朋友轉檔才搞定…
 スクリーンショット 2015-10-19 00.28.31

但既然用了 Mac 當然就是要試試看 App Store 上的軟體阿…不然要幹麻!當初,看到 Affinity 的官方介紹影片,就覺得這軟體好像超強大的!也沒考慮太久,就到 App Store 衝了一套來研究。雖然說目前的軟體使用介面和教學資源都是英文的..讓菜英文有點頭暈;就算大學有混過幾堂 “電腦繪圖” 課,但要真的完全使用英文介面的軟體,還是真的是..誇龍謀(╯°□°)╯︵ ┻━┻  {希望未來能快點出個日文版的使用介面!)

 

スクリーンショット 2015-10-19 00.26.15

如果你也和我一樣很少製作印刷檔,想自己在家玩玩軟體、做些小美工,我想 Affinity 會是一套很實惠的選擇!在功能上他比 Apple 出的 Pixelmator 再進階一點,很多 Adobe 能做到的他似乎也都做得出來。兩套加起來也不超過 Nt 3,000,應該是一個很超值的投資。

 

icon256Affinity Designer
售價:NT 1,190
App-store-logo
icon128-2xAffinity Photo
售價:NT 1,490

App-store-logo

相關連結: