2009年3月30日 星期一

蛙式教學第十七課 [蛙式作品的產生]



許多網友問我 , 我網站上那每張郵票裡面的作品是用什麼軟體或是用什麼方法作的 ,
有沒有什麼撇步 , 或是有什麼套裝軟體可以很快的就製作完成 ?
還是要一張圖一個字一頁頁的土法煉鋼去設計完成呢 ?
因為 , 很多人也想要用這樣的方式來呈現自己的攝影作品 .

以下就跟各位分享一下蛙式作品的製作過程吧 !



步驟 1.
首先 , 當我每完成一次挑戰旅程 , 回來後 ,
我會先將這次拍攝幾百上千張的照片做一次完整的篩選 ,
這麼一大堆照片篩選的過程 , 篩選的方式 , 與一些經驗的分享 ,
大家可以參考 "蛙式教學第六課 [照片刪去法] " .

照片篩選的過程是痛苦的 , 是花時間的 ,
且每每重新再看一次的結果 , 都會不盡相同 ,
耐心的將"重要"的照片挑出來 , 是第一階段重要的工作 .



步驟 2.
挑完照片後 , 就開始進入寫文字的階段 .
寫故事之前 , 先為這次的挑戰想一個主題 , 主題想好後 , 再將文字填入囉 .

文字 , 是最令我傷腦筋的部分 ,
花費的時間遠比拍攝照片製作網站整個時間還要來的多 .
而文字的撰寫 , 我想 , 或許可以參考這一篇 "蛙式教學第十四課 [讓照片說故事] " ,
我想 , 可以讓照片說些故事 , 會讓照片更有生命力的 .



步驟 3.
接下來 , 就要進入主題設計了 .
LOGO 應該算是一個作品的根源 , 也是個起頭 ,
首先 , 我會使用 CorelDraw or Adobe Illustrator 來設計一組LOGO ,
雖然使用 Photoshop 也可以設計 , 但 , 為了可以讓LOGO縮放自如 ,
還是選擇設計向量的軟體來使用會比較合適 .

LOGO設計好之後 , 整個作品的核心精神就有了雛形 .
記得在 "蛙式教學第十五課 [主題設計] " 內 ,
有簡單的說明如何設計一個主題 , 雖然內容講的比較簡單些 ,
但 , LOGO 的設計博大精深 ,
還需要透過學習與練習才會進步的 .



步驟 4.
設計好主題之後 , 便開始進入後製的階段 .

首先我會將選好的照片用 Adobe Photoshop 軟體開啟 ,
仔細的檢視每張照片 , 是否需要微調或是去除髒點 .

再來 , 將照片縮小與裁剪成設定好的大小 , 因為我喜歡用寬比的視覺 ,
所以 , 正常拍出的照片比例 , 是一定要再經過裁剪的 .



步驟5.
將文字一頁一頁一篇一篇的排列進去 ,
這就是很手工的部分了 , 完全省不掉的步驟 ...
不過 , 文字究竟是要放在照片的哪個位置哪個角度 ,
這就很"設計"了 , 可能要注意版面的平衡 , 且不能干擾到照片畫面 ,
適時的要用些設計的技巧將文字給嵌入才行 ,
看似簡單的排版 , 其實 , 也是博大精深呀 ...

有時候我會偷懶的先省略步驟2 , 先不寫文字 ,
一直到了步驟5時 , 會直接在 Photoshop 裡面去寫文字 ,
因為 , 可以邊看圖邊說故事 , 會比較有FU也有效率些 .

這個部分 , 就看個人的喜好囉 .

而步驟4的後製階段 , 應該會因照片的多寡而花費不同的時間 ,
我想 , 這是僅次於寫文字最花費時間的部分了 .



步驟 6.
再來 , 將套好文字與排版好的照片一張張的另存新檔 .
依照播出順序將檔名取為 001.jpg , 002.jpg ...
接下來 , 就要進入比較複雜的 Adobe Flash 軟體階段了 .
記得在嘉明湖這個作品之前 , 早期的作品都是使用 HTML 靜態網頁的方式呈現 ,
不過 , 作品總是要進步的 , 一次要比一次更有看頭才是 ,
於是當時在"天使的眼淚 - 嘉明湖"這個作品的製作上 ,
便採用了 Flash 軟體去製作完成 .
雖然需要花點時間去構思 , 且還要寫一點點的程式才行 ,
但 , 為了呈現出來的效果 , 還有較人性化的使用介面 ,
硬是多花了三周的時間 , 經過不停的摸索與測試 .
最後 , 才將作品給製作完成 .

不過 , 對於程式只懂得皮毛的我 ,
很多地方還是只能用比較笨的方法去製作 ,
不過 , 雖然笨 ,
但呈現的結果能達成同樣的效果就好 ~
而Flash , 就是一套可以使用笨方法或是聰明方法都可以達到同樣效果的軟體 ,
一套讓你隨心所欲表達設計的超強軟體呀 !

不過 , Flash 這軟體 , 一樣是博大精深呀 ,
在這裡很難用幾句話來交代整個製作過程 ,
想要接觸的網友 , 就必須先翻翻工具書了 .



步驟7.
最後 , 還是必須要用HTML的語法來將FLASH的作品嵌入網頁中 .
我應該是個網頁設計領域的山頂洞人吧 ,
早期的網頁設計是沒有Dreamweaver這樣方便的軟體可以拉一拉排一排就搞定的 ,
所以 , 我們這個年代的幾乎都是用記事本在寫HTML ,
當然 , 我也不例外 , 使用記事本寫HTML , 一寫就是十幾年呀 ~
雖然我一度的想要好好學好Dreamweaver ,
不過 , 最後還是放棄了 ...
學不會是主因 , 且 , 對於網頁的CODE , 還是有著某種潔癖與堅持呀 !

簡單的將Photoshop中網頁的設計 , 透HTML的語法將所有的物件呈現出來 ,
就是大家最後在網站上看到的一個個的作品 .



漏漏長的講了那麼多的步驟 ,
這樣 , 大家對於製作一個完整的作品 ,
有更霧灑灑深入的瞭解了嗎 ?
雖然坊間有很多套裝軟體可以使用 , 有很多BLOG網站有提供類似的功能與服務 ,
但 , 可以透過自己的巧思 , 自己的設計 , 自己的創意 ,
完成一個自己獨一無二的作品 ,
無論作品的好壞 , 那種爽度 , 那種成就 ,
是金錢換不來的 , 你說是嗎 ~

還有問題嗎 ?
還不快去學 CorelDraw / Illustrator / Photoshop / Flash / Dreamweaver 呀 !

下課 !

frog

標籤: ,

25 Comments:

Anonymous KING said...

謝謝老師~

頭香我要了!(爽

2009年3月30日 上午4:37:00  
Anonymous KOKO said...

沒錯!看完有更"霧殺殺"的瞭解 XD!
哈哈哈

不過還是感謝蛙老師~~

2009年3月30日 上午9:47:00  
Anonymous  said...

謝謝蛙老師!!!

啪啪啪啪啪~~~鼓掌致謝。

2009年3月30日 下午1:57:00  
Blogger Vicky said...

佩服佩服, 原來這年頭還有人的網頁, 是純手工打造的
真的是很厲害, 果然是蛙大!

2009年3月30日 下午8:55:00  
Anonymous Scottie said...

這篇文章實在是受用無窮,向量繪圖是從沒接觸過的,為了想要有屬於自己的東西,我想再苦都要學,謝謝蛙大^_^

2009年3月30日 下午10:45:00  
Anonymous 匿名 said...

太厲害了,
不過我看完就累了XD!

2009年4月1日 上午10:40:00  
Blogger Leon Koh said...

its really a lot of work. but the results are stunning!

btw is the photos taken in BAli? or a place in taiwan?

2009年4月2日 下午12:14:00  
Anonymous bikertwn said...

蛙大
今天在錄影前問到的,竟然已經寫了,真巧,就像今天穿的衣服一樣,哈。很高興認識你,加油!

2009年4月2日 下午7:05:00  
Anonymous nissan said...

老大
我以為你會敎我FLASH說
泣~ 看書學不會

2009年4月3日 下午12:29:00  
Anonymous 匿名 said...

我喜歡你的網站‧設計‧攝影‧文字~更喜歡的是...我隨手點~都會出現意外的驚喜..

看了你的環島記錄~感覺好像我也跟著環島了一趟~

我抓了幾張wallpaper...謝謝你~

要繼續唷~~~ :)

有機會我一定去你的哇‧咖啡拜訪~ **y

2009年4月3日 下午2:06:00  
Blogger frogfree.com said...

Leon Koh ,

這是台北的八里左岸 .

frog

2009年4月6日 上午11:00:00  
Blogger frogfree.com said...

nissan ,

flash 博大精深呀 , 我很難三言兩語的就可以教的會哩 , 看書問人還是最快的方法囉 .

frog

2009年4月6日 上午11:01:00  
Blogger frogfree.com said...

bikertwn ,

很高興認識你呀 , 有空再來咖啡店聊聊囉 !

frog

2009年4月6日 上午11:02:00  
Blogger 佩珠 said...

您好:
我是高中體育教科書編輯,可以請您加入我們的編寫團隊嗎?想請您編寫單車旅行或登山。
若您有願意,高中課本會變得更豐富、更精采,謝謝!

2009年4月9日 上午10:57:00  
Blogger frogfree.com said...

Hi 佩珠 ,

教科書ㄝ , 聽起來還蠻有趣的 ,
再寫信跟我聯絡吧 frog@frogfree.com ,
或是留下你的聯絡方式吧 !

frog

2009年4月9日 上午11:16:00  
Blogger 佩珠 said...

謝謝您這麼快就回應了,好開心喔!我稍後透過公司的信箱寫信給您。

2009年4月9日 上午11:20:00  
Blogger 佩珠 said...

mail已發出,麻煩收信喽!感謝您!

2009年4月9日 上午11:56:00  
Anonymous BO2 said...

前陣子跟corel的小胖叔叔從新店騎到淡水,中途有繞到八里蛙咖啡,喝完咖啡再騎回新店,

這趟旅程一整個快要死掉,看著路邊的電動殘障車無聲無息的快速移動,
而我....只能慢慢的踩著踏板掙扎....
我只能說.....媽的我是肉腳.....
我想我真的老了~~~

2009年4月9日 下午12:09:00  
Anonymous 沒上過高中的Yvonne said...

WOW! 蛙哥要出教科書了耶!

只是...體育課也有教科書嗎?

2009年4月19日 下午10:31:00  
Anonymous 桑尼亞 said...

第一次看到蛙大的作品是嘉明湖
再次看到是單車環島紀錄
那種心情像是看偶像劇般
很期待每一日環島旅程中會有什麼故事
看到幾個中年男子間的"曖昧"與心情告白
也常讓我一個人偷笑了起來
足跡不能踏遍台灣每個角落
可是欣賞蛙大的攝影作品
確可以把台灣的美景都深深印在腦海裡
也讓我對攝影越來越有興趣
今天一口氣上完十七堂課
什麼時候還要上第十八課阿?

2009年4月23日 下午1:39:00  
Blogger Mars said...

蛙大請問一下一個問題網頁使用的解析度大約不會超過1028,那你後製都是用這解析度嗎?這樣如果你要轉成桌曆或者輸出不就都要重新設計嗎?

2009年4月27日 下午7:44:00  
Anonymous 晨曦婆婆 said...

還有問題嗎 ?
還不快去學 CorelDraw / Illustrator / Photoshop / Flash / Dreamweaver 呀 !
...................................
我會一點點的Photoshop / Flash可是..
CorelDraw / Illustrator / Dreamweaver係瞎密碗糕阿....

2009年7月31日 上午12:15:00  
Blogger 阿怪 said...

真的好謝謝你...

呀,太厲害了...一面看一面就和聊天的朋友說,你看,這就是我以后要變成的人=.=啊是有少少白目

嗯,萬分感激~

2009年10月30日 下午5:51:00  
Anonymous monica said...

這一堂很難ㄝ..但我還是要謝謝老師..

2010年11月13日 上午1:17:00  
Blogger 123 said...

Omega Men's Watches was in fact called by NASA as its official alarm due to its believability and accurateness in1965. These awards started as aboriginal as the 1900's, with the Grand Prix at the Paris World Fair. Omega Seamaster Replica Watches are classical watches that are top value.

2010年11月30日 下午1:28:00  

張貼留言

Links to this post:

建立連結

<< Home