AnimationGif

[AppleScript]GIF書き出しオプション

自分メモ

Force4u00221022_192631_2

AppleScriptからWEB保存する場合の
GIFの書き出しオプション
save for web export options

color reduction
の値の一覧と意味(意味部分はAdobeのヘルプから引用)

perceptual reduction知覚的肉眼で見たときに知覚度が高いカラーを優先して、カスタムカラーテーブルを作成します。
selective特定知覚カラーテーブルとよく似ていますが、カラーの範囲を広くすることと、Web カラーの保全を主体にしています。最もカラーの保全性に優れています。 「特定」が初期設定です。
adaptive割り付け 画像で最も多く使用されているスペクトルからカラーをサンプルすることによって、カスタムカラーテーブルが作成されます。 例えば、グリーンとブルーだけが使用されている画像からは、グリーンとブルーが主体のカラーテーブルが作成されます。 多くの画像は、スペクトルの特定領域のカラーを集中的に使用しています。
restrictiveWEBセーフWindows や Macintosh の 8 ビット(256 色)パレットに共通する、標準の 216 色を使用したカラーテーブルが使用されます。
custom reductionカスタムカラーテーブル上で色の削除や固定の操作した場合これになる
black white 白黒1bitの白黒
grayscale グレースケール最大256階調グレースケール
macintosh colors MacOSMacintosh256色カラーパレット
windows colorsWindowsWindows256色カラーパレット


一般的なAdobeのカラー変換の方法でよく使われる

知覚的元の画像内の1 つ以上のカラーが出力先のカラースペースの色域外にある場合に、全体の色域を1 つのデバイスのカラースペースから別のデバイスのカラースペースの色域へ圧縮します。全体のカラースペースを縮小し、色域内のカラーも含めすべてのカラーをシフトして、カラー間の知覚的関係を維持します。
彩度目的のデバイスのカラースペースに変換する際に元の画像カラー彩度(鮮やかさ)を再現します。この方法では、カラーの相対的彩度は色域から色域へ維持されます。この変換方式は、もともとカラー間の関係が、明るい彩度のカラーに比べてさほど重要でないビジネス用グラフィック(写真など)のために設計されたものです。
相対的な色域現在のカラースペース内のカラーが目的のカラースペースの色域にある場合は、色域内のカラーには影響を与えずに、出力先のカラースペースの色域内のカラーにできるだけ近い色にマップされます。出力先の色域外のカラーのみ変更されます。この変換方式では、ソースのカラースペースで異なる2 色が、出力先のカラースペースで同じになる場合があります。これはクリッピングと呼ばれ、Photoshop 4.0 およびそれ以前のバージョンに内蔵の初期設定のカラー変換方式です。
絶対的な色域画像の明るさに変化を与える白色点または黒点を調整することなく、カラーが完全に一致します。

とは
ちょっと違う

  

| | コメント (0)

[Demo]GraphicConverter7xでGIFアニメーションを作る

レイヤー機能の無くなってしまった
GraphicConverter7xでの
アニメーションGIFの作り方のビデオデモ

Force4u00221013_185254

YouTube - [Demo]GraphicConverter7xでGIFアニメーションを作る[LINK]新しいウィンドで開きます

ビデオでデモンストレーションする時って
全ての動作を『マウス』を使うわけですが
これが結構大変で
ついついキーボードショートカット使っちゃって
取り直しって感じでしたが
最近はやっと
準備〜キャプチャー〜アップロードで
3分物なら30分ぐらいで出来るようになってきた

慣れだなぁ〜やっぱり

| | コメント (0)

[PhotoShop]アニメーションGIFの全フレームの読み込み【ビデオデモ】

こちらの記事の
[Photoshop]GIFアニメファイルを全フレーム読み込む【GIFアニメのフレームを分割】: [FORCE][LINK]新しいウィンドで開きます

ビデオでの説明


 

YouTube - [DEMO]アニメーションGIFファイルの全フレームを読み込む【PhotoShop】[LINK]新しいウィンドで開きます


Force4u00220926_15248


| | コメント (0)

[GIFfun]MacでGIFアニメを作る

GIFfunを使ってGIFアニメーションファイルを作ります。


GIFfunは画像は作れません。
画像は別に用意する事になります。

その代わりに
用意する画像はpngやjpgでも大丈夫です。

 

まずはアプリケーションをダウンロードしましょう
GIFfunです。


845x655_force4u_01

英語の解説ページはこちら[LINK]新しいウィンドで開きますです


 

起動すると小さい画面がでます。

593x363_force4u_09

ここに画像をドラッグします。

Fullscreen

駒毎に
画像をドラッグして
繰り返しの設定をするだけ

684x438_force4u_07


GIFを作成ボタンを押すと
ブラウザが開いて
GIFアニメが生成されます。
Desktop_7


これだけです
非常に簡単

 

ポイントは
1番上のコマに設定した
画像のサイズでGIFアニメが生成される事で
684x438_force4u_08


Desktop_8


そんな基本設定ですので

 

この設定なら
644x398_force4u_04_2

こうなりますし
199x259_force4u_06


この設定なら
644x398_force4u_05
こうなります
199x259_force4u_06

 


先にも書きましたが
PNGファイルからも
GIF アニメーションファイルに変換してくれますし
838x444_force4u_02


仕上がりはまあナニですが
JPGからも変換可能です。

1jpg


 


画像がある場合は
多少リサイズして
ドロップするだけですので
一番簡単なGIFアニメーションを作成する方法ですね。


    

| | コメント (0)

[Photoshop]GIFアニメファイルを全フレーム読み込む【GIFアニメのフレームを分割】

Adobe ImageReady とさよならしてから
まだ
間もないですが..涙

PhotoshopでGIFアニメーションを
フレーム→レイヤに分割して読み込む方法です。
GIFアニメのフレームを分割ですね

フォトショップでGIFアニメを読み込みすると
現在は↓このようにアラートが出て
最初の1フレーム(1コマ目)だけが読み込まれます

Screencapture00220915_23648

こちらの記事で
プレビューを使ってフレーム毎に
ファイルとして取り出す方法を紹介しました。
[プレビュー]GIFアニメのフレームを分割: [FORCE][LINK][プレビュー]GIFアニメのフレームを分割: [FORCE]を新しいウィンドで開きます

723x319_gif_anime_06


 

今回はQuickTimeを使って読み込みます。

■QuickTimeで読み込む
■MOV ムービーファイルで保存
■Photoshopでムービー読み込み

の手順です。

AppleScriptに出来そうですね。>>他力本願..(笑)

 

■QuickTimeで読み込む


今回サンプルで使うのはこちら

Test


ドラッグ&ドロップで読み込みます

430x378_gif_anime_07

前半に1コマ目
後半に2コマ目が読み込まれます。

430x378_gif_anime_08

 
■MOV ムービーファイルで保存

別名で保存から

591x247_gif_anime_09

保存します。

560x406_gif_anime_10

 


■Photoshopでムービー読み込み

ファイルメニューから
読み込み→ビデオフレームからレイヤ
を実行
724x414_gif_anime_11

ファイルを選んで

636x480_gif_anime_12

読み込みオプションは
フレーム数等で調整してください。

755x362_gif_anime_13


すると
レイヤ=フレームで読み込まれます。

1コマ目
576x297_gif_anime_14

2コマ目
553x336_gif_anime_15

できました。
参考にしてください。


 

QuickTime内では
GIFファイルトラックで存在していますので
QuickTime的には『インデックスカラー』を保持していると
思われます
Screencapture00220915_24952

Photoshopに読み込んだ時点で
RGBに変換されていますので
まぁ無いと思いますが
大きく色が変換される『可能性』がありますね。


Screencapture00220915_25006

色指定の有るものの場合は
注意してください。

 

こちらに
ビデオデモを用意しました
[PhotoShop]アニメーションGIFの全フレームの読み込み【ビデオデモ】: [FORCE][LINK]新しいウィンドで開きます

| | コメント (0)

[X11]MacでGIFアニメを作る【Gimp】

X11[LINK]OpenNewWindow用アプリケーションGimpを使うと
レイヤ構造を使って簡単にGIFアニメが作れます
しかも無料

X11独特なキー操作等はすぐに慣れると思いますし
Photoshopと同等(言い過ぎかな..w)な機能が無料で使えます。

 

【1】X11をインストール
【2】Gimpをインストール
【3】画像作成
【4】コマ数分のレイヤ構造で描画
【5】GIF形式で保存

 

【1】X11をインストール
1000x337_gimp_02

アプリケーション→ユーティリティ
にX11が無い場合は
インストールCDからインストールするか
自分でmakeする方法もあります。[LINK]OpenNewWindow(おすすめしないけど)

 

【2】Gimpをインストール
ダウンロードはこちら[LINK]OpenNewWindow
911x411_gimp_01

 

【3】画像作成

Gimpは初回の起動に時間がかかります。
X11が起動してからGimpが起動するためです。
ちょっとまってあげてください..w

起動すると
↓のような操作画面が出ます。
1311x752_gimp_03


新規で書類を作ります

407x191_gimp_04


携帯電話の待受をターゲットにしていますので
横240x縦340で良いでしょう

496x499_gimp_05_2

詳細設定の三角形をクリックして
RGBカラーで作ります。
(最終的には減色されると思います)

↓こんな感じで新規書類が出来ると思います。
Screencapture00220812_00845jst


後は塗ったり書いたりするわけです
790x483_gimp_06

 

【4】コマ数分のレイヤ構造で描画

GIFアニメは『パラパラ・アニメ』ですので
『コマ』数分の画像が必要です。

GimpのGIFアニメーションは『レイヤ』を
基に『コマ』になりますので

コマ数分の『レイヤ』が必要になります。

背景画像(notレイヤ)に絵を書いたら
790x483_gimp_06_2

次のコマ用のレイヤを作ります。

レイヤパネルはメニューから出せます。
Screencapture00220812_02134jst

レイヤパネルから
新規のレイヤを作成します。
236x734_gimp_07_2

画像のサイズは同じで
透明の方が作りやすいです。
382x358_gimp_09

2コマ目を作ります。
785x469_gimp_10

同じように3コマ目
と必要な分だけ繰り返します。

787x480_gimp_11


 

【5】GIF形式で保存

画像が必要なコマ数出来上がったら
GIFアニメ化します。

まずはGIFへの最適化をします。
692x581_gimp_12
これを実行すると

画像が複製されます。


804x493_gimp_13


後はGIF形式で保存するだけです。
別名で保存で
502x313_gimp_14

↓GIF形式で保存します
575x439_gimp_15

アニメーションとして保存します。
609x384_gimp_16

GIFアニメのオプション
511x413_gimp_17
ここは色々と試してみてください
一般的な『点滅』効果は
250〜300程度です。

RGBカラー→インデックスカラー
への変換も実行されます。

インデックスカラーは最大256色までですので
細かい階調は再現出来ません。

コツをつかめば色々楽しい動きを作れます。
試してみてください。

『無限ループ』のチェックが『繰り返し』の設定です
繰り返すのか
繰り返さないのかで
チェックを入れる 入れないになります。

   

 

ここで作ったサンプルのGIFアニメはこちら


Test

 

レイヤが透明で
4コマ動く設定
1000x472_gimp_18_2

↑の設定だと
↓こんな感じで


Test3


 

全レイヤを同じ色でマットする
↓このような設定だと
974x469_gimp_19

このようになります。

Test4


 

GIFアニメはドコモの携帯を中心に
楽しい動きを作れますので
デコメール

絵文字
など色々作ってみてください。

 


[GIFfun]MacでGIFアニメを作る: [FORCE][LINK]新しいウィンドで開きます
[GraphicConverter]MacでGIFアニメを作る: [FORCE][LINK]新しいウィンドで開きます
の方法もあります。

| | コメント (0)

[GraphicConverter]MacでGIFアニメを作る【6xまで】

ちょっと前なら
Adobe ImageReady
現行製品なら
Adobe Fireworks
Adobe Photoshop
で作るのが

GIFアニメーション

そんな高額なアプリケーションが無くても
まぁなんとか作れます。

 
GraphicConverter[LINK]OpenNewWindow
やってみましょう。

861x453_graphicconverter_13

こちらからダウンロードします[LINK]OpenNewWindow

1109x651_graphicconverter_06

 

起動します。
584x344_graphicconverter_01

新規ファイルを作ります。
携帯電話の待受をターゲットにするなら
まぁ一般的には

392x338_graphicconverter_03

こんな感じでしょうか

 

新規ファイルが出来ます。
553x720_graphicconverter_01

後は
色を塗ったり
422x270_graphicconverter_02

線を引いたりは
まぁここでは書きませんが
色々試してみてください。

434x206_graphicconverter_03


まずは
『1コマ目』を作ります。
出来たら
GIFアニメ設定を表示します。
712x353_graphicconverter_04

変換してください。

464x171_graphicconverter_05

ムービーオプションが表示され
1コマ目として書いた絵が
表示されます。
492x374_graphicconverter_04

つづいて
『2コマ目』を書いて
『GIFアニメ設定』の『+』ボタンで
2コマ目のフレームに追加します。
500x322_graphicconverter_05

これを必要なコマ数
くりかえして
1179x180_graphicconverter_07_2

ループにチェックを入れるないと
アニメが繰り返しません。チェックを入れましょう。
1179x180_graphicconverter_09_2

コマ間の時間(コマをめくる時間)
を設定します。
携帯なら0.25ぐらいが良いでしょう。
『全てに適用』します。

適用してください
490x170_graphicconverter_08

 

出来上がったら
別名で保存します。
447x312_graphicconverter_10

フォーマットをGIFにして
オプションを設定します。
636x600_graphicconverter_11

元の画像にもよりますが
ディザ処理をすると
ファイルサイズが大きくなりますので
慣れてくれるまではディザ処理のチェックを無しで
保存しましょう。
320x510_graphicconverter_12

で出来上がりが
こちら

Sample
Photoshopで作るより
非常に作りにくいです...汗
まぁ
やれば出来る程度ですが
携帯の待受等ちょっとチャレンジしても良いかもしれませんね。

 

GraphicConverter7では
アニメーション(フレーム機能)
は残っているものの
レイヤー機能が無くなりましたので
この記事のようにGIFアニメを作る事は出来なくなりました。

Graphicconverter7

| | コメント (0)

[プレビュー]GIFアニメのフレームを分割

GIFアニメのフレームを分割します。

 
追記
こちら[LINK]OpenNewWindowで紹介した
Gimpを使うと
レイヤ構造を保ったままGIFアニメーションファイルを
開く事が出来ます。(お試しを)

 


昔はイメージレディで
GIFアニメのファイルを開いても
Screencapture00220621_33823

フレーム構造もレイヤ構造も保持できましたが
この機能は今はAdobe Fireworksの物となりまして
Adobe Photoshopでは出来なくなりました。
Screencapture00220621_33049

Fireworksを持っていない人はどうしたら良いのか?
QuickTimeで書き出すってのもありますが

プレビューを使ってフレーム毎に書き出す事ができました。

Screencapture00220621_33104

↑のような3コマアニメGIFを開いて
サイドバーを表示させると
コマフレーム毎のイメージが確認できます。

Screencapture00220621_34213

サイドバーのフレーム毎に
デスクトップ等へドラック&ドロップすれば
サイドバーで選択した
フレームをファイルに切り出す事が出来ます。

Screencapture00220621_33338_2

でも
これ
困ったなぁ
Fireworks買った方が良いのかなぁ

少量ならこちら[LINK]OpenNewWindowのサービスが良いかもですな

 

こちらの方法もご覧下さい

[Photoshop]GIFアニメファイルを全フレーム読み込む: [FORCE][LINK][Photoshop]GIFアニメファイルを全フレーム読み込む: [FORCE]を新しいウィンドで開きます


| | コメント (0)

カラフルなGIFアニメ

ちょっと作ってみた
フォトショップCS4でアニメ作るのは
基本的にイメージ・レディで作っていた時と同じで
思っていたより作りやすかった。動作が若干重い


Pantone


| | コメント (0)

その他のカテゴリー

Accessibility AccessibilityCheck AccessibilityForm AccessibilityInDesign AccessibilityPDF Acrobat Acrobat Action Acrobat Annotation Acrobat AppleScripts Acrobat Character Acrobat Layer Acrobat PDF Embed API Acrobat PDF Form Print Acrobat Plug-ins Acrobat Portfolios Acrobat Print AcrobatBarcode AcrobatDialog AcrobatForm AcrobatJS AcrobatMenu AcrobatPDF AcrobatStamp AcrobatYouTube AddressBook Adobe Adobe InDesign Adobe Photoshop AdobeAppleScript AdobeBridge AdobeIllustrator AdobeJSX aed Alfresco Android AnimationGif Apple Apple Support AppleScript AppleScriptBasics AppleScriptCharacter AppleScriptColor AppleScriptDroplet AppleScriptErrorNum AppleScriptFolder AppleScriptFontBook AppleScriptRename AppleScriptTools AppleSymbols Applications Barcode Barcode2D BarcodePostal BetterHTMLExport Book BOX Browser buzz Certificates CharacterEntity CharacterSets Colors Cool Site CSS Cutting DecoMail DecorationMail Design Desktop Diff DJ dmg DNS Documents Download DTP eBook Editer eMail Envelopes ExifTool Facebook FFmpeg File System Fonts FontsTool FontsWeb FOOD FormPrint ftp Gadget Gif Animation Google Google Chrome Enterprise HexEditor HTML info iPhoto ISBN ISO iTunes iWork iWorkNumbers iWorkNumbersCalendar iWorkNumbersTimecard iWorkPages JavaScript JeditX JeditX Regexp JeditXAppleScript JIS jquery Letterpress Library logo Mac Admin Mac Archiver Mac Browser Mac Browser Plugin Mac QuickLook Mac Setup Mac Spotlight Mac Video Map Memo Microsoft Teams Mobby mobileconfig Moto Movies Music Network Basic ntp OCR Office OfficePowerPoint OSX Paint Pantone Paper PDFlib Permission Photo Pictograms Print Public Python QuickLook QuickTime QuickTimeSetting QuickTimeSound Real Media ReName ResourceFork ruby Sample Screen ScreenCast Search Security SEO Sharing SLAResource Sound Spotlight Stamp SWF TCC.db Tutorial PSD TV Twitter Typography Unicode Utilities Video WEB APP WebFont Wedding Windows WindowsMedia XML XMP XPS YouTube YouTube Rss