アニメーションgif ゆれるキーホルダー1
リク記事です・・
チョットユウツなんでコメントで質問いただいた
ゆれるキーホルダー作成方法です
この画像をキーホルダー(ぽく)してみます
この画像を動かすためにはアニメーションGIFにします
簡単に言えばパラパラ漫画のようなものです
何枚かの画像を作ってからそれをアニメーションさせます
GIF画像なので・・色は256色しか使えません
ピグ画のように色数が少ない場合はいいのですが・・
写真のようにフルカラーの素材を使った場合はアニメーションGIF画像にする過程で色が256色に減色されますので汚くなる場合もあります
せっかくですから「Pixlr」をつかいます
http://www.pixlr.com/
高機能で無料のオンライン画像編集ツール
日本語化してから画像を開いて レイヤーの背景をダブルクリックでレイヤーにします
ベーベル？にチェック 距離やサイズなどを調節して・・立体ぽく？見えるようにします
その時・・表示サイズは100%（実際のサイズ）で行わないと見え方が違ってくる場合があります
これは画像によってはやらなくてもかまいません・・
自分で好みに調整下さい・・・
元の画像 距離4 サイズ4 距離2 サイズ8
同じようにしてキーホルダーの部分も作ります（ ↓お持ち帰り自由に）
↑こんなのが出来たらOKです・・ 大きさは大きい分には縮小しますので大丈夫ですが・・
小さいと拡大したときに汚くなりますので注意下さい
キーホルダーはレイヤースタイルをやらなくてもいいと思います・・
今回は背景を透明にしていますが・・
設置する部分が決まっている場合で背景が１色でしたら透明にしないで
背景を同じ色で作った方がきれいにできます
ピグ画の上にキーホルダーをくっつけるためキャンパスのサイズを大きくします
後で調整しますので多少大きめでもかまいません
イメージ → キャンパスのサイズ
イメージのサイズは画像を拡大や縮小します
キャンパスのサイズは作業領域を広げたり狭めたりします
保存したときの画像サイズになります
横にも揺れる分だけ広げます（後で調整しますので適当でOK）
今回は上と左右に広げるのでアンカーポイントを下段の真ん中にします
アンカーポイントの位置によってキャンパスの広がり方・・
※キャンパスサイズを小さくする場合にもアンカーポイントは必要です
背景を透明にしたキーホルダーを 編集 → 全部を選択 → コピー
ピグ画の上にペーストします
位置を調整します
ペーストしたときに新しいレイヤーができます・・
青くなっているレイヤーが作業しているレイヤーです
この場合↓・・青くなっているレイヤーにあるキーホルダーの画像だけが動きます
様子を見て大きいようなのでキャンパスサイズを小さくします・・
キャンパスサイズを小さくしたらキーホルダーがはみ出しました・・
キーホルダーのあるレイヤーを青くしてから 編集 → 自由変形
（あるいはキャンパスサイズの高さを大きくします）
このとき・・ Shiftキーを押しながらサイズを変えると元の形を崩しません
OKならレイヤーを１つにまとめます
レイヤー → 可視レイヤーを結合（見えているレイヤーを１つにします）
ちなみに・・結合は青くなっているレイヤーをその下のレイヤーと結合します
とりあえず基本の画像ができました・・・
まだ作業をしますので PXD 形式で保存しておきます・・
つづく・・・・
キャンパスサイズとアンカーポイント・・
先ほどは大きくしましたが・・小さくすることでコメント欄の画像などの加工が簡単に出来ます・・
↓こんな画像を作ります・・
アンカーポイントを上段にして（幅は変更しませんので上ならどこでも可）
高さだけを上の画像の高さにします （幅はさわらないでください）
↓上の画像ができちゃいました・・・
↑この画像を保存してから・・
編集 → 取り消し で・・もとの画像に戻します
次は中の画像です・・
アンカーポイントを中段においてから 高さを中の画像の高さにすると・・
↓中の画像のできあがり！
↑中の画像を保存してから 編集 → 取り消し で・・もとの画像に戻します
最後は下の画像・・
アンカーポイントを下段においてから高さを下の画像の高さにします
↓下の画像・・・
下の画像を保存したらあっという間にコメント欄の3枚の画像が出来上がりです
横はさわっていませんから上下はピッタリくっつくはずです・・
簡単でしょ・・
http://hama-sush-jp.pro/ab-test/page-8.html
http://hama-sush-jp.pro/ab-test/page-12.html
http://hama-sush-jp.pro/ab-test/page-13.html
http://hama-sush-jp.pro/ab-test/page-14.html
こんな画像がすぐに加工できちゃいます
記事枠 やメッセージボード やサイドバーの画像 などもこの方法なら楽に速く正確に分割できます
キャンパスサイズが保存したときの画像のサイズになります
アニメーションgif ゆれるキーホルダー2
アニメーションgif ゆれるキーホルダー3
