Select Page

Affinity Designer 實戰應用系列:背景黑白霧化

今天要跟大家分享的是一個蠻常用的技巧,實際的技巧名稱_也不好說.. 就叫它背景黑白霧化之術好了?

重點一:使用鋼筆進行主體物的圈選

本次的技巧使用的是利用 Affinity 的 Layer 功能,快速的製作區 Adobe Photo Shop 中的遮罩效果。如果有人想使用此技巧卻不了解 Layer 邏輯的話,歡迎留言發問,如果未來有空的話也許可以在拍影片詳細說明。

至於鋼筆工具的部分可以在左側的工具 Bar 中看見它的蹤跡,關於操作方式請參考影片中的說明。

重點二:Fx 效果加載

由於我是使用日文版的關係,所以可能在選單名稱上跟各位有些不同,如果你使用的是英文版本的 Affinity Designer 的話應該是稱作 Layer Effect (中文的話.. 也許叫做層級效果吧?)。

影片示範

應用篇

感謝您的閱讀與分享

以上就是今天隨性分享的一個小技巧,如果大家喜歡這樣的影片,有機會我會再繼續分享我平日在使用 Affinity 的一些應用方法。我是 Wuli,那我們就下一部影片見摟?掰一

獨立經營自媒體,需要什麼技能 ? (經驗分享)

在這個大家都在網路上找資訊、找產品的時代,如果你的商品或是服務無法在搜尋引擎被消費者找到,那麼你要生存下去的機率,基本上應該已經少了至少 50 % 了。( 雖然說這個數據完全沒有任何取樣基準,單純個人不負責的猜測 ..)

但是要怎麼讓自己的商品在網路上被你的目標族群,也就是客人(恩客?) 發現,進而購買你的商品或是服務?寫寫 Blog 、成立 FACEBOOK 粉絲專門頁面( 粉專 )或是搞一下時下年輕人流行的 Instagram ( iG ),光是這樣就能創業了嗎?

目前主要經營的兩個網站,左邊是 MRWULI.COM 右邊是 LiSWEi.com ; 分別記載著不同的內容。

算一下自己寫 Blog 的到現在,真正認真開始寫應該也有 4年了吧…。剛開始每天都寫一篇,一天只有 4 個親友來看;到後來一個禮拜寫一篇 , 直到後來一個月一篇,單月瀏覽量 78,373 up。一路走來、邊走邊試,開始成立自己的工作室和朋友合作接案,開始專心做自己喜歡的工作。

在周遭的朋友看來,你過得自在又輕鬆,但其實你一直都沒有真正下班的時間,就算沒有與人面對面工作,腦袋裡也總是想著怎麼走向下一步?

身邊的朋友們,要嘛覺得你工作很輕鬆、賺很大;不然就是覺得你怎麼每天都要工作…?( 卻很難體會背後的辛勞與開銷 🤷🏻‍♂️)

上圖為我在上傳 WordPress之前會使用的編碼軟體 Coda。目前使用的版本是 2.6.1

其實光是要寫好 blog ,要做的事情就不只是打打字這麼簡單了。寫文章前要先查資料、整理資料、找圖(如果不想侵權的話,最好還是自己拍照、自己做圖)學一些簡單的 HTML 跟 CSS 編碼( 而且這還只是寫程式的幼稚園等級而已)。

就以我個人的寫作流程來說..:通常我會先用蘋果電腦的 Safari 瀏覽器來找資料,因為 Safari 對 mac 電腦來說比較不會耗損電腦資源( 畢竟寫作時幾乎都會同時開很多軟體 )、接著再用 Ulysses 來撰寫文章內文,預覽圖片與文章的排版。為了確認資料的正確性;比較沒有把握的部分,通常會使用日文與英文的 Google 搜尋資料、交叉比對一下。

大部分的圖像以及照片我都在 Affinity Designer 中處理,因為多數都是插畫或是截圖,所以反而比較少看 Affinity Photo修圖。

文章附圖的部分,盡可能自己拍;沒有實品的話就用 affinity designer 畫圖、或是採用螢幕截圖的方式( 螢幕截圖的話,基本上就不會上logo或浮水印 ;畢竟那些不是自己做的東西..)。

接著,我會把用 Ulysses 寫好的文章用 Coda 打開、調整一下圖片的排版與備註;最後才把整篇文章連同語法貼到 WordPress 的網誌頁面中。

以自己的網誌來說..比起花俏的視覺效果、我會比較在意行高以及排班的設計( 其實太難的我也還沒有時間完成.. ),所以有時心血來潮會打開 Coda 調整一下 CSS 來改變網誌的排版,希望前來觀看的人能夠更舒服的閱讀體驗。

雖然萬事起頭難,但 Youtube 的經營對目前的我來說,有點吃力…希望能盡快上手。

雖然最近也開始嘗試拍些簡單的影片上傳 Youtube ,開始摸索、了解 Youtube 的邏輯以及與寫作不同的地方;但就目前來說,似乎還是寫作比較得心應手? 啪啪啪的就可以隨手打個 1,000 ~ 3,000 字。(雖然用啪啪啪的聲狀詞來形容似乎有點奇怪?)

目前的體會是… 製作影片與寫作不同的地方在於,文字要修改很快,即使後來發現整篇文章的流動或是語意( 錯字 )有需要修改的部分,也可以迅速地做修正;而拍影片講錯字或是說錯話時,如果要一一校正修改的話,那真的需要花很大的工程,甚至有可能需要整段影片、重新拍攝。非常不適合完美主義的人以及強迫症患者,尤其是在剛入門影片剪輯的時候,需要學習剪輯影片的軟體、同時也要有整理歸檔影片素材的意識,不然很多素材就無法再利用。對後期來說可能會有點可惜,導致花上更多不必要的時間。相較於拍攝/剪輯、修改影片 / 修復音頻/上字幕/編輯影片介紹與資訊;修改文章錯字真的是小菜一碟!

感謝您的閱讀與分享

非常感謝您,觀看這篇隨手寫寫的網誌,雖然在文中分享的經驗很有限,但確實是從開始到現在的一些真實感觸。社群以及自媒體的經營,真的不是一條輕鬆的路。如果你也是同好的話,就讓我們彼此互相加油吧。( 認真對自己說 )

順便分享一下此篇所提到的幾個程式連結:

Affinity Designer & Affinity Photo

Coda 2 編碼軟體、網頁設計軟體

Facebook Business

Instagram

WordPress

YouTube Spotlight

Ulysses

 

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

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

又那麼剛好..最近 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

affinity deisginer 2015-10-19 00.34.59

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

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

那就 … 下次見。

 

Affinity Designer 的遮罩功能介紹

HELLO 大家好我今天想要跟大家介紹一下如何用這一套 Affinity Designer 來製作妳的部落格的網誌封面圖片。在早期呢..我使用的是一套 aodobe 的 ‎Illustrator .. 那後來呢 ”因為 adobe 改成月費制的.. ㄜ..一個月就要繳1千多塊;所以一年下來你就要繳1萬多塊,如果你沒有..光靠設計接案的話..這樣子的資金投入會比較沒有那麼高的投資報酬率。

所以後來我就找到這一套軟體然後它只要台幣 1490 塊你就可以永久使用、並且更新。剛開始的時候它只有在 Mac 的電腦上可以使用;之後呢…它也開發了 Windows 的版本所以你只要花 1490塊就可以用這套非常高階的高階的軟體來製作網站上的圖片。

在我的這個網站上有介紹關於 Mac 好用的一些軟體、以及一些我自己在使用的一些工具。在我網站上、網誌上呢.. 你可以看到有很多的圖片,這些圖片呢,都是我使用 Affinity Designer 這套軟體來製作的。那我今天想要分享的如何讓你的照片能夠呈現在 iphone 或著是 Mac 電腦裡面,使用 Affinity Designer 這套軟體製作這樣子的圖片的時候其實非常非常的簡單。

製作流程

Step.1

首先你要有一個你的載具..比如說是相框拉.. 或著是電腦啊、手機之類等等。然後你就可以在這個圖片上面呢,用矩形工具畫一個方匡繪出一個區域,再拉一張圖片到你的工作視窗中。

Step.2

接著你可以看到在右邊的圖層概念裡面呢,這張照片在這方框的上層。然後我們只要透過滑鼠拖移的方式呢,將相片拉到方框的下層的時候,就可以看到它已經跑到那個方匡的後面了。這是一個快速的遮罩的應用!

附註:
那如果你想要調整這方框的大小的話,你可以再把這長方形的這個方框旁邊的三角形,把它點開..然後選擇長方形的這個圖層,你就可以去調整,這個方匡的內容大小。如此一來,你就可以很快的完成一個將照片放到 iphone 或著是 Mac 電腦的一張封面縮圖了。

是不是非常簡單?

影片介紹:

更多的相關應用

簡單的介紹一下關於 部落客 可能會經常用得到網誌封面製作教學分享。

雖然下載了Affinity Designer 有一段時間了,但幾乎都只是拿來製作網站的圖片;如果你也對這類的文章或是教學有興趣,歡迎留言給我。未來也許也可以再多拍一些這系列的影片~

總之喜歡我的影片的朋友,歡迎訂閱本頻道????

更多相關文章:

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

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

WordPress 網誌更新、離線編輯軟體工具推薦

WordPress 網誌更新、離線編輯軟體工具推薦

今天這篇想要跟大家分享一下個人在撰寫部落格的一些流程、以及常用的軟體以及使用方法!雖然過去也曾使用 Sublime Text、Alternote、MultiMarkdown .. 等軟體來協助撰寫網誌 “文章” 與 ”語法”,但經過一段一段時間的磨合後、新歡舊愛之中總是有來有去…

近期使用的主力軟體

iThoughtsX

iThoughtsX 是一套 MindMap 的製圖軟體,也是目前使用過的 MindMap 軟體中介面設計最簡潔好用的。

最近在寫網誌文章前都會先使用 iThoughtsX 來整理該主題要寫的內容,透過繪製心智圖的方式來思考要從什麼切入點來寫這次的主題、或是利用 iThoughtsX 整理收集一些相關資訊或是素材;讓寫作前的思緒能夠更集中,到了真的開始撰寫內文時也會更加流暢些。

iThoughtsX 也是目前使用過的所有的 “心智圖” 軟體中最簡潔、、美觀、快速的軟體。除了可以完全使用鍵盤快捷鍵來繪圖外還可以自訂自己的 MindMap 主題套版,省去不少排版以及修改主題的時間。

除了 iThoughtsX 以外,SimlpeMind 算是用的最久的 MindMap 軟體了!其最大特色是 Map 彼此之間可以建立超連結、但如果該 Map 檔案被移除或遺失的話… 連接也會跟著出現錯誤,(當初也是因為檔案忘記備份遺失後才發現 iThoughtsX 的)

而且,使用 iThoughtsX 還有一個好處,那就是你可以直接使用 iCloud 同步到你的所有行動裝置上,例如 iPhone 或是 iPad ;當然你也可以把在通勤時繪製的 “心智圖” 同步到你的 “iMac” 桌機或是 ”MacBook Pro” 筆記型電腦上。

另外,如果有需要…你也可以將 iThoughtsX 繪製的 “心智圖” 透過 E-Mail 的方式傳送給你的同事或是朋友,iThoughtsX 會直接將該檔案轉換成 PDF 以及 文字,即使對方沒有安裝 iThoughtsX 也可以閱讀你繪製的心智圖。

Ulysses

在 Ulysses 裡你可以直接利用 # 字符號來區分標題級數、也可以直接坎入貼圖,甚至啟用 iCloud 同步資料。

如果時間允許的話,我通常會在撰寫網誌的前一個禮拜開始整理資料,等待繪製完成後再利用 Ulysses 來撰寫內容。

Ulysses 真的是一套非常方便好用的文字撰寫軟體,在 mrwuli.com 之前的文章中也曾經推薦過這套軟體。它的方便之處就是 “你可以直接使用快速標記語言( Multimarkdown)來進行文字排版;在不使用 HTML 的情況下,避免一些語法編輯上的錯誤。

不只是這樣,現在 Ulysses 也支援 WordPress 同步撰寫模式。只要在 Ulysses 軟體中登入你的 WordPress ,就可以將在 Ulysses 上撰寫完的文章,直接上傳到 WordPress 中;包含所有圖文格式以及資料,都會和你在 Ulysses 中所編排的相同。

另外、如果你會一些簡單的 Css 編碼的話,還可以將網站中的 CSS 編碼,直接寫入到 Ulysses 中的 Style 模式中;如此一來就可以在離線時 ”預覽文章在網站中的排版以及樣貌“!非常方便。

Affinity Designer

Affinity Designer 是一套非常好用的向量繪圖軟體、幾乎可以取代 illustrator 在所有網頁製作、與數位編排的工作需求中(雖然早期只有 Mac 版本、但現在也出了 Windows 版本)。

過去 Affinity Designer 經常都是被我拿來做一般的上字啊..製作網誌插圖或是坎入 Logo 等工作;但近期我開始用它來統一網誌內的圖文大小比例、讓網誌文章內的編排看起來在清爽一點(雖然有時候還是會偷懶用舊圖)。

目前的做法是將檔案版面設定在 1080 x 534 ,再將每一張圖以圖層的方式個別編輯、並依造文章插圖順序給予編號;這樣一來輸出圖片的時候就會自動依造編號排列,在重新命名時檔案也不會亂掉(例如:mac-info-o1.png、mac-info-o2.png .. 依序命名)。

最後再將從新命名好的圖檔直接拖移到 Ulysses 中進行編排、Key 上圖片描述與連結。

Coda

Coda 是一套介面設計精美的 “編碼軟體” ,你可使用它來製作網頁、上傳 FTP 或是下載額外的 Plugin 加強軟體功能。(圖片為日文版說明書)

Coda 是一套程式撰寫軟體,而我現在則用它來取代 Adobe 的 Dreamweaver ,進行一些基本的網頁 CSS 編碼、以及圖床的 FTP 上傳工作。

個人覺得 Coda 不論在介面的設計或是使用上都還算是非常優秀的軟體,價格也不貴:只要 $99 美金 :大約新台幣 NT 3,000 左右。

基於考量 ”自己真正會用到的 Dreamweaver 功能並不多“;所以相較於整套 Adobe 的長期租用費用,買斷整套 Coda 軟體似乎划算許多。

但其實真正好用划算的編碼軟體也有很多,也不一定要使用 Coda ;像 Sublime Text 、ATOM、Brackets 都是非常不錯的免費程式撰寫軟體!

對了!你還可以將 Ulysses 中編輯好的文字直接用 Coda 開啟編輯唷;如果你和我一樣,有另外使用一個圖床的話…利用 Coda 來統一修改連結、編碼,還是比在 WordPress 或是 Ulysses 中來得方便許多。

感謝你的閱讀與分享

以上就是近幾個禮拜的網誌作業流程與主力軟體介紹,如果你也想試試看上述的這些軟體的話,都可以先下載試用版本的安裝檔來研究一下~

覺得軟體好用的話也請購買正版軟體,以實際行動來支持好的開發廠商,好讓我們的未來能有更好的軟體功能,進行更有效率的工作!

再次感謝你的閱讀與分享~
本篇所提及的軟體,在下方都有整理好連結,如有需要請自行點擊服用!

相關連結

Affinity 系列軟體官方網站介紹

免費下載 Affinity Designer Windows beta 版本

ATOM 官方網站介紹 & 軟體安裝檔下載

Brackets 官方網站介紹 & 軟體安裝檔按下載

iThoughtsX 官方網站介紹/p>

Ulysses 官方網站介紹

Coda 官方網站介紹

Pin It on Pinterest

Exit mobile version