因為前兩天不小心從家中樓梯滑倒,導至腳踝膝蓋受傷,所以我足足有兩天時間未上線,本來預計昨天要放上的教學文也拖至今天才處理,還請大家見諒;那麼接下來就開始說明一下這篇教學文,可能有剛接觸我部落格的讀者會覺得沒頭沒尾的,如果有不了解的,可能要先請你看過這篇【3分鐘學會】教你如何利用Photoshop變更旅遊風景照中的季節,之後再來繼續觀看此篇的教學,會比較容易跟上進度,那麼照往例先看一下完成範例哦。

夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學

沒錯,這就是完成範例,有看過前篇的就知道這原本只是一張單純的綠色森林照片,但卻可以透過共計5分鐘的修改時間達成這樣的效果,想知道怎麼做嗎?相當簡單,跟著看下去吧。

步驟1:首先接續前篇,讓我們先開啟Photoshop把上次的PSD完成檔叫出來~
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Gif 動畫作品與教學  

步驟2:接著將工作區圖層選定在顏色取代這裡,然後調整在右下的【圖層混合選項】中的【不透明度】為10%
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Gif 動畫作品與教學

步驟3:開啟【檔案/儲存為網頁與裝置用】,快捷為【ALT+SHIFT+CTRL+S】
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Gif 動畫作品與教學

步驟4:依下圖調整各選項,以個人喜好為主,存檔類型可選JPEG、GIF等,好了就按儲存
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Gif 動畫作品與教學

步驟5:選定好一個資料夾後存檔,繼續進行下一張
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Gif 動畫作品與教學

步驟6:照下面圖示將不透明度分別調整為20、30、40、50、60、70、80、90與100%等數值,並個別重複依照步驟2~5,陸續做出動畫所需要的後續9張照片
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Gif 動畫作品與教學
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Gif 動畫作品與教學
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Gif 動畫作品與教學
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Gif 動畫作品與教學
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Gif 動畫作品與教學
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Gif 動畫作品與教學
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Gif 動畫作品與教學
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Gif 動畫作品與教學
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Gif 動畫作品與教學

步驟7:開啟專門製作Gif動畫用的軟體【Ulead GIF Animator】後點【動畫精靈】,這是套通常只要有安裝PhotoImpact,就會被附帶安裝起來的免費軟體,沒有的請自行去網路搜尋一下應該就可以下載到了
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學

步驟8:接著會如下圖示進入選定圖片尺寸大小與其他選項的頁面,依自己喜好調整OK後點下一步
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學

步驟9:選加入圖像並將剛剛製作好的圖片全部選取起來,然後點選開啟
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學

步驟10:之後可以在這裡排定順序,安排好後按下一步
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學

步驟11:接下來這裡可以調整每張圖片顯示的時間,好了之後就按下一步,接著點完成
(這裡就要依你希望這動畫檔能播幾秒來定奪,一般Gif都是用預設值每秒4格,如果想要畫面很順暢最少需要每秒12格,如此一來照片區需求量就很大了,這事後都還可以再改過的,就先以預設值來做吧)
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學

步驟12:可以在下面的照片預覽區畫格,以滑鼠拖曳的方式依透明度由小至大更改動畫圖片顯示順位
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學

步驟13:將第2個畫格到第10個畫格給選取起來,接著如圖點選【複製畫格】
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學

步驟14:1~11畫格依透明度由小至大順序排定所有畫格,12~20則由大到小排定,這樣就可以呈現出季節轉變的輪迴
(輪迴觀念是做動畫很重要的一環,很多不重視此細節所做出來的動畫都會有種不協調感,一點都不自然)
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學

步驟15:順序排好之後,依圖示點選【最佳化】選項
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學

步驟16:可以一邊參照預覽圖一邊刪減【色彩數】,直到失真程度看起來尚可接受的最底限為止;至於【抖動】一般指的是色彩飽和度,這通常沒必要調整;【減低】這個選項則可以自動幫你刪減顏色,但效果有限,還是比較建議自己微調
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學

步驟17:這樣調整主要目的是要縮減檔案大小,調整完畢後可以試著看看預覽效果
(因為想放網頁上的話,如果一張圖檔案太大,那瀏覽你這網頁的看官就只能裝光纖了,不然網頁開太久很多人都會失去耐心,這點要切記啊)
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學

步驟18:都沒問題就點右下方的儲存選項,將此作品保存起來
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學

至於存檔類型在這當然是選 Gif 啊,這就不用我多做說明了吧@@
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學

完成之後的作品就如下圖一樣,很漂亮吧^^
夢遊幻鏡視覺設計工作室 | 平面設計工作室 | 網頁設計工作室 | Flash動畫設計工作室 | Photoshop作品與教學

這次的教學看起來步驟與圖片很多,但其實有一大部分都是重複做一樣的動作,就是調整圖層透明度然後存檔比較麻煩而已,其他的都還算容易處理,至於Photoshop也可以做 Gif 動畫,但我為何捨近求遠的問題就先做個答覆吧,主要原因當然還是在於 Ulead GIF Animator 這軟體是專門做 Gif 動畫使用的,多學會幾套軟體總是好的,就跟PhotoImpact在專業度上不敵Photoshop一樣,同理Photoshop Gif 動畫製作上也不敵 Ulead GIF Animator 這套軟體,原因就是這麼簡單而已,而且熟練之後會發現這套軟體做 Gif 真是又快又省力~呵呵

之後預計還會有不少的動畫教學,且會教的越來越深,當然也包含Flash在內,所以想試著學習的一定要記得訂閱本站電子報才不會錯過更新哦^^


f
創作者介紹

食譜|料理教學|愛的私房菜

魏小愛 發表在 痞客邦 PIXNET 留言(11) 人氣()


留言列表 (11)

發表留言
  • sinba
  • 雷大~哇嘎力秀秀!
    您受傷了~我沒心情學習啦 (╯︿╰)
  • 嗚~不要這樣說~雖然受傷了~但我還是不忘放教學文唷0.0 多謝關心捏

    魏小愛 於 2010/07/02 11:37 回覆

  • 6D大力金剛館
  • 哇!你好強呢!真的!桃子真是甘拜下風
    一連串的敎學,桃子只看的懂前後
    真的好厲害,好美,也好想會呀~~~~~~~~~~
    再強調一次,你好強呢!
  • 我就是醬厲害0.0
    謎之音: 欠打~~踹飛~~~~~~~

    魏小愛 於 2010/07/02 11:46 回覆

  • dollchen
  • 请问:你受伤的地方好了没?
    看得出真的你好棒啊!
  • 嘻嘻! 好多了~多謝妳滴關心唷~

    魏小愛 於 2010/07/02 11:47 回覆

  • 設計嵐
  • 要好好養傷阿~~

    精彩的教學!讚!!
    倒是你的傷~~還好嗎??要好好保養喔~~傷到筋骨可不是皮肉傷~~要好好調養才不會有後遺症!!
  • 非常感恩!我的傷在大家的關心之下快要好囉~~

    魏小愛 於 2010/07/03 08:37 回覆

  • 米菲
  • 哇嗚~~受傷了還那麼用心教學
    是要改行當老師嗎 (誤) XD
    要多休息...才會好的快哩
  • 這是一定要的阿~~

    魏小愛 於 2010/07/03 08:37 回覆

  • 火拳狐狸
  • 我到是沒想過用這芳來來製作GIF勒
    筆記筆記!
    話說我的Ulead GIF Animator還在用4.0版...
    因為很少用...

    比較想找到能直接從動畫擷取片段轉成GIF的程式
    但是找了找都找不太到
  • 哦哦~這點直接用Flash CS就可以做到了
    如果不知道方法的話下次我發教學文@@

    魏小愛 於 2010/07/03 21:03 回覆

  • marukoariel
  • 現在~還有哪些事情是真的呢?
    電腦裡的世界,真的是奇幻無比阿!
  • 恩阿~電腦世界就是可以這麼神奇^^

    魏小愛 於 2010/07/03 08:38 回覆

  • calai
  • 好詳盡的教學ㄚ
    真是辛苦了~
  • ^Q^ 不辛苦~要做就要做到好~(開心)

    魏小愛 於 2010/07/03 08:46 回覆

  • atastsoflove
  • 這篇還真詳細= =........受傷還這樣PO文......

    學不會要打屁屁了><~~
  • 最近讓我家柴柴幫我做復健~跟牠追趕跑跳碰 = =

    魏小愛 於 2010/07/03 08:49 回覆

  • tyanko1223
  • 喔喔 謝謝如此詳細的分享~~~呵呵
    ps:受傷就要好好養傷拉!!
  • 已經要好囉^^~
    多謝關心唷^^~

    魏小愛 於 2010/07/04 16:04 回覆

  • ssy123361
  • 真棒ㄝ^^
    教學文很棒喔~~

  • 謝謝你~
    我會繼續努力的^^~

    魏小愛 於 2010/07/05 21:38 回覆

找更多相關文章與討論