新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

gifアニメを作るのは「Flash」?それとも「Photoshop」?

      2014/11/12

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

アニメーションというとFlashですがgifアニメに関してはPhotoshopのほうに軍配が上がります。
とりあえず、できたgifアニメを見れば一目瞭然です。

Bridgeで画像をレイヤーにして開く02 Bridgeで画像をレイヤーにして開く02
左)Photoshopで作ったgifアニメ/右)Flashで作ったgifアニメ

スポンサーリンク
 

画像切り替えのタイミングが違っているので比較するのが難しいかもしれませんが、
画像切り替え時のクロスフェードの部分をみると一目瞭然です。

ただしこれはお互い初期設定で書き出した場合、
Flashでもしっかり設定をしてあげればもう少しましなgifアニメも作れます。
そもそもgifアニメにクオリティを求めるのもどうかと。

それぞれどうやってgifアニメを書き出すかですが、

Photoshopであれば「ファイル」→「Web用に保存」(CS6の場合)となります。gifアニメの作り方(Photoshopで書き出し)
一部アニメーションの設定(ループオプション等)をして「保存」。

Flashの場合は「ファイル」→「パブリッシュ設定」と行き、「Gifイメージ」にチェックを入れます。
gifアニメの作り方(Flashで書き出し)
で、「Gifイメージ」の細かい設定をして「パブリッシュ」をクリックです。
ここで、色数及びディザの設定をしっかりしておくともう少しクオリティの高いgifアニメも作れます。

なお、「Photoshopでどうやって動画を作るの?」という人もいるでしょうから、編集時の画面も載せておきます。

gifアニメの作り方(Photoshopで作成)
こんな感じ。

なんと、最近のPhotoshopではタイムラインでの動画編集も可能になってきています。 
ただ、各レイヤーに対して変化が加えられるのは位置、不透明度、スタイルなど限られます。

ちなみに、Flashがどんな感じかというとこんな感じ。
gifアニメの作り方(Flashで作成)

動画編集に関しては当然ながらFlashのほうがずっと扱いやすいし色々なことができます。
Photoshopで作れるのは簡単なgifアニメのみ。
そこはしっかり抑えておきましょう。 

 - FLASH, Photoshop(フォトショップ), デザイン

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

内包されたDIVにmarginを設定すると親要素にも同じマージンが設定されることがある【CSS】

1年以上前の記事です。内容が古い可能性があります。これはわからんわ。 生徒さんの …

自分のサイト表示がブラウザごとに確認(チェック)できるサイト「browserling」

1年以上前の記事です。内容が古い可能性があります。Web制作する際に困るのが表示 …

トップページにプルダウンメニューを入れてみた

1年以上前の記事です。内容が古い可能性があります。デザインリニューアル最終章とし …

ヘッダー広告のサイズを468×60から728×90に変えた

1年以上前の記事です。内容が古い可能性があります。当ブログのヘッダー部に貼ってい …

no image
Googleのプラスワン(+1)ボタンをつけてみた(7/1追記)

1年以上前の記事です。内容が古い可能性があります。日本ではまだサービスを開始して …

ブログの角丸部分をCSS3の「border-radius」プロパティに変えてみた【Webデザイン】

1年以上前の記事です。内容が古い可能性があります。今年、HTML5及びCSS3が …

「Google Adsense(グーグルアドセンス)」広告サイズによる収益の変化

1年以上前の記事です。内容が古い可能性があります。以前から実験的に一ヶ月をめどに …

no image
川釣りを3カラム化する方法

1年以上前の記事です。内容が古い可能性があります。忘れないうちに覚え書き。

GIGAZINE(ギガジン)がトラックバックを封印

1年以上前の記事です。内容が古い可能性があります。GIGAZINE(ギガジン)さ …

Googleに勧められたのでテキスト広告だけじゃなくイメージ広告も表示させるようにした

1年以上前の記事です。内容が古い可能性があります。先日、「Google AdSe …

血液型オヤジ