静止画のアイコン画像を動くGIFアニメアイコンにする：作成編（２）Photoshopでもう少し準備しとく
kiichimaです。
静止画のツイッターアイコンをGIFアニメアイコンにしてみたけど結局使えなかったので、腹いせに制作過程を紹介する記事の第3回です。
そもそもの記事はこれ。
前回、前々回の記事は以下になります。
前回で、静止画の画像をアニメーション用の素材に分解する作業はひととおり終わったのですが、まだ少しやっとかなくちゃならない作業が残ってたんですよね。
ほんとにあと少しではあったのですが、長くなりすぎだと思ったので記事を分けることにしたわけです。
というわけで、今回はPhotoshopでの工程解説の第2回としてお送りいたします。
それと、前回までの記事でとても重要なことを言い忘れていました。
この一連の記事で対象としているパソコンのOSはWindowsのみです。
なので、PhotoshopもWindows版での説明のみとなっています。
※前回までの記事にも追記しておきます。
別にMacでも、一部のキーの名称が別の言い方になる程度のような気はするんですが、僕はMacを所持しておらず、さわることもほとんどない身の上です。
ですので、それすら確実にはわからないのです。
すいませんです…。
それでは、前置きはこのくらいにして本編へまいります。
パターン絵を作成する
前回までで元絵をパーツに分解する作業は終わりました。
ですがもう少し、Photoshopでの作業をおこないます。
僕は前々回の記事で、今回作成するアニメーションについてこう書きました。
このキャラクターは鼻水を垂らしているから、その鼻水をすする動作をさせよう。
静止画のアイコン画像を動くGIFアニメアイコンにする：準備編 - 140文字じゃおさまらないこと
そうです。
今回制作するのは、このキャラクターが「鼻水をすする」アニメーションです。
前回でパーツ分解していたのは「鼻水を垂らしている」顔の絵です。
ですが、このキャラクターが鼻水をすするためには、「鼻水をすすっている」顔もなくてはなりません。
それを今から作ります。
といっても、ゼロから新たな絵を作るわけではないです。
上の画像を見てください。
左が元からある顔の絵で、右の丸で囲まれているものが作成した「鼻水をすすっている」顔の絵です。
静止画ですので、右の絵がどう見ても「鼻水をすすっている」顔だとは必ずしも言い切れないかもしれませんが、それはアニメーションでうまく表現するとして、とにかくこれが、これから作成する顔の絵になります。
左右を見比べたところ、違いというのは「目」「鼻水」「口」の三か所だということがわかると思います。
つまり、新たに作るのはこの三つのバーツだけ、というわけです。
複数レイヤーの複製
では、やり方を説明していきます。
先ほどまで作業していたPhotoshop画像を再び開き、分かれた各パーツの「右目」「左目」「鼻水」「口」のレイヤーを複製します。
レイヤー複製のやり方は、前回キーボードショートカットの「Ctrl」+「J」と、レイヤーパネルでレイヤーを選択して「新規レイヤーを作成」アイコンの上にドラッグする方法を紹介しました。
どちらを使っておこなってもよいのですが、後者の方がかける手間が少なく複数のレイヤーを複製することができます。
どういうことかというと、「新規レイヤーを作成」アイコンへのドラッグを、レイヤーを複数選択している状態でおこなうと、選択されているレイヤーすべてを一度で複製することができるのです。
レイヤーの複数選択
レイヤーを複数選択する方法は、連続した並びのレイヤーをまとめて選択するなら、選択したいレイヤー群の先頭となるレイヤーを選択したあと、「Shift」キーを押しながら最後尾のレイヤーをクリック。
並びをとびとびに選択するなら、「Ctrl」を押しながら一つづつクリックです。
Windowsでファイルを選択するときと同じですね。
レイヤーの表示・非表示を切り替える
では、新しい顔を作っていきます。
たった今、「右目」「左目」「鼻水」「口」のレイヤーを複製しました。
現在、画面上でこれらのパーツは二つ同時に表示されています。
この状態では作業がやりにくいので、複製元のレイヤーはすべて非表示にします。
レイヤーを非表示にする方法は、レイヤーパネルの各レイヤーの左端にある「目玉アイコン」をクリックします。
何度もクリックすると「目玉アイコン」がついたり消えたりします。
「目玉アイコン」がついているとそのレイヤーは画面に表示されており、消えていると非表示ということです。
「自由変形」で顔の表情を作る
複製した「右目」のレイヤーだけを選択します。
そしてキーボードで「Ctrl」+「T」。
すると、右目のパーツが下図のように、ところどころ「□」がついたフレームで囲まれている表示になり、マウスカーソルが双方向のまがった矢印形になります。
この操作はメニューの「編集(E)」→「自由変形(F)」のショートカットです。
「自由変形」はレイヤー上の選択した部分の形状を変化させることができるコマンドです。
選択範囲がある状態でこのコマンドを実行すると、選択範囲の中のものだけが変形の対象となります。
選択範囲がない状態だと、レイヤーの透明部分以外の全てが変形の対象となります。
いまは選択範囲を作成しなかったので、このレイヤー上のすべてが変形の対象です。
ですが、このレイヤーには右目のパーツしかないので、結果的に右目だけが変形の対象としてフレームで囲まれています。
マウスカーソルが 
の状態で画像の任意の場所をドラッグすると「右目」のパーツをくるくると回転させることができます。
今は目をつむった形にしようとしているので、それっぽい角度にしてとめます。
そのまま、次は大きさを少し小さくします。
「ぎゅっ」とつむっている感じにしたいので、少し小さくした方が「ぎゅっ」と感が出ると思ったのです。
フレームについているハンドル（「□」のことです）にカーソルをあわせると、カーソルが「↔」の形に変わります。
その状態でドラッグすると拡大・縮小の操作ができます。
フレームの四辺にカーソルをあわせてドラッグすると、縦横それぞれ一方向のみの拡大・縮小ができます。
パーツを伸ばしたり縮めたりするイメージですね。
カーソルをあわせる場所がフレームの角のハンドルだと、縦も横もいっぺんに、つまり全体的に拡大・縮小させることができます。
またその際に「Shift」キーを押しながらドラッグすると、元の形状の縦横比を保ったまま拡大・縮小できます。
今回は形を歪ませずに元の形状のまま小さくしたかったので、「Shift」キーを押しながらフレームの角にカーソルをあわせてドラッグしました。
「自由変形」では位置の移動もおこなえます。
フレームの内側にカーソルをもっていくと、カーソルが 
の形に変わりますので、その状態でドラッグをするか、キーボードの方向キーで位置を移動させることができます。
拡大・縮小をした際は位置の微調整もあわせてする場合が多いです。
形・位置が決まったら「Enter」を押して「自由変形」を確定させます。
変形、確定の操作はドラッグと「Enter」キー以外でもできます。
Photoshopのメニューが並んでいる下の、ツールの付随機能が収められている場所が、「自由変形」を使用している間は「自由変形」用の機能に入れ替わっています。
ここの入力欄に数値を入力することでも変形させることができますし、確定は右端の「〇」をクリックでできます。
ちなみに「自由変形」をやめたいときは「×」をクリックするか「Esc」キーでぬけることができます。
「自由変形」は確定させるまでは好きなだけ変形を試すことができますが、いろいろ試しすぎて元に戻したくなったときは、この操作でいったんリセットするとよいでしょう。
右目ができたら左目も同じように「自由変形」でつむっている目を作りました。
変形で無理な場合は新規に作る！
次は「鼻水」です。
最高まですすりあがった状態の「鼻水」を作ろうと、これもとりあえず「自由変形」でやってみました。
フレームの下端中央の「□」にカーソルを合わせ、上にドラッグして単純に縦に縮小。
ですが、うーん。
形状がちょっといまいちかな…。
そう思ったら、あとはもう、新規に作るしかないですね。
すすりあがった「鼻水」の形状を描きおこします。
描くといっても、ペンタブとか要りません。
これまでの手法の応用でできますので、ちゃちゃっとやっちゃいます。
レイヤーの不透明度を変更する
「自由変形」を試していまいちだった「鼻水」のレイヤー。
これは没として捨てるものですが、新たに描きおこす際の大きさの目安にはなりそうなので、描きおこしをしている間は不透明度を落として表示しておくことにします。
レイヤーの不透明度の変更のしかたはレイヤーパネルのここ。
入力欄をクリックして数値を直接入力するか、となりの三角マークをクリックして出てきたスライダーをドラッグします。
または、「不透明度：」と書いてあるところにカーソルを置くと指差しの形に変わるので、そこから左右にドラッグしても変えることができますし、「ブラシ」や「塗りつぶし」などの「それ自体に不透明度設定のあるツール」以外を使用している状態であれば、キーボードでいきなり数値をたたくだけでも変更することができます。
なんと、レイヤーの不透明度を変える方法は４つもあるんですね。
ありすぎな気もしますが、それだけよく使う機能ということでしょうか。
新規レイヤーを作成する
次は新しいレイヤーを作ります。
新たにすすりあがった「鼻水」を描きおこすためのまっさらなレイヤーです。
レイヤーパネルの「新規レイヤーを作成」アイコンをクリックします。
または、メニューの「レイヤー(L)」→「新規(N)」→「レイヤー(L)」。
ショートカットは「Shift」+「Ctrl」+「N」です。
このページがめくれ上がったような形のアイコン。
前回、レイヤーを丸ごと複製するときにはここにレイヤーをドラッグしましたが、レイヤーの複製にも使えます。
そのままカーソルをレイヤーパネル下部の、ページがめくれているようなアイコンの上へと持っていくと、そのアイコンのまわりが凹んでボタンが押し込まれたような形になります。
静止画のアイコン画像を動くGIFアニメアイコンにする：作成編（１）Photoshopでパーツを分解する - 140文字じゃおさまらないこと
「なげなわツール」の便利な使い方
さあ、やっとすすりあがった「鼻水」を描きおこします。
描くのですから、それこそ「ブラシツール」を使ってもいいのですが、ペンタブならまだしもマウスのドラッグでうまく形状を作るのはなかなか難しいです。
そこで、ここでは「なげなわツール」で選択範囲をつくり、そこに「塗りつぶし」で色を流し込んで形状を作ることにします。
「なげなわツール」はここ。
通常はツールパネルのこの位置にいつも表示されているのですが、いままで「多角形選択ツール」 を使ってきたので隠れているかもしれません。
その場合は、前回「多角形選択ツール」を選択したときと同じようにツール群を出してから選択します。
キーボードショートカットは「L」、または「Shift」+「L」でツールが「なげなわツール」になるまで切り替えです。
「なげなわツール」はドラッグで選択範囲を作成できるツールです。
ドラッグだと、「ブラシツール」と同様、微妙な形状をうまく形作るのは難しいのでは？と思うかもしれません。
ところが、この「なげなわツール」は「多角形選択ツール」のようにも使うことができるのです。
やり方は「Alt」キーを押しながら「なげなわツール」を使用します。
「なげなわツール」が選択されているときに「Alt」キーを押しながら画像内をクリックすると、カーソルが「多角形選択ツール」の形に変わり、「多角形選択ツール」のときと同じようにクリックした場所からカーソルに線が伸びます。
この状態だと「多角形選択ツール」と同じようにクリックで選択範囲を作っていくことができます。
ですが「多角形選択ツール」のときのようにカーソルを始点の位置にもっていっても、カーソルに「〇」が表示されず、始点と同じ場所をクリックしても選択範囲の作成が完了しません。
選択範囲の作成を完了させたいときは「Alt」キーとマウスボタンの両方を離します。
すると、始点と最後にクリックした場所までが自動的につながり、選択範囲が形成されます。
これは、「Alt」キーを離した瞬間に機能が「なげなわツール」本来のものに戻って動作しているというだけなのですが、「もういいや」ってところで集中力のいる選択範囲の作業を終えることができるので、わざわざ始点付近をクリックしないと作業を終えることができない「多角形選択ツール」に比べ、なにげにラクです。
しかも、この方法は「なげなわツール」の機能も同時に使えてしまいます。
クリックをしたときにマウスボタンを離さずにそのままドラッグをします（「Alt」キーは押しっぱなしです）。
するとカーソルが「なげなわツール」の形に戻り、ドラッグで選択範囲の線を引いていくことができます。
そして、ドラッグをやめるとカーソルがふたたび「多角形選択ツール」の形になり、クリックで線をつなげる「多角形選択ツール」の機能になります。
つまり、「Alt」キーさえ押していれば、ドラッグとクリックというわずかな操作の違いだけで、「なげなわツール」と「多角形選択ツール」を使い分けながら選択範囲の作成ができるということなのです。
この「なげなわツール」の「Alt」技は大変便利なので、ぜひ使ってほしいと思います。
正直「多角形選択ツール」はいらないんじゃないかと思ったりしますが、「Alt」キーは別の用途で必要な場面もありますので、それはそれで使い分けられているのです。
余談ですが、僕はこの技を職場の先輩に教えてもらいました。
そのとき先輩は「俺、これで何でもするぜ」と自信満々に言ったものです。
僕はその言葉を聞いた瞬間、「ご飯を食べるお箸の代わりにも使うのですか」という質問が思いうかびましたが、すんでのところで思いとどまりました。
当時その先輩は開発チームのリーダーを務める実力者でしたので、ある意味、これでご飯を食べていたと言えるかもしれません。
と、脱線して馬鹿な話をしてしまいました（笑）
画面表示を拡大・縮小して作業する
それでは、これから「鼻水」の形状を選択範囲で囲っていくわけですが、ちょっと小さいので画面を拡大して作業することにします。
画面の拡大・縮小のしかたは前回お話ししました。
拡大の仕方はショートカットで「Ctrl」+「+」です。 押すたびに拡大されていくので、自分が作業しやすい大きさに表示させて作業しましょう。 ちなみに縮小は「Ctrl」+「-」。 100%表示にもどすときは「Ctrl」+「1」です。
静止画のアイコン画像を動くGIFアニメアイコンにする：作成編（１）Photoshopでパーツを分解する - 140文字じゃおさまらないこと
このショートカットで画面表示を拡大すると、自分の作業したい場所がウィンドウの外にいってしまう場合があります。
それを画面内にもどすには、ブラウザやオフィスなどのソフトと同様に、マウスホイールを回したり、ウィンドウのスクロールバーをドラッグしてもいいのですが、専用のツールがあります。
「手のひらツール」
「手のひらツール」は画像内をドラッグで任意の方向にスクロールさせるツールです。
ツールの場所はツールパネル下方のここ。
ですが、わざわざここをクリックすることはほとんどありません。
キーボードショートカットは「H」ですが、これもほとんど使いません。
「スペース」キーを押すとカーソルが「手のひら」の形に変わりますので、これで画像のウィンドウ内をドラッグします。
おそらくどんなツールを使っているときでも使える方法だと思います。
（「テキストツール」で文字入力中は無理ですけど）
とても簡単かつ、感覚的に使える操作で、ここまでの作業でもすでに使っていたかもしれません。
というか、確実に使っていたと思う。
Photoshopを使い始めてすぐくらいに覚える操作で、呼吸をするように当たり前にすることなのですっかり忘れていました。
すみません…。
ちなみに、ツールパネルの「手のひらツール」アイコンをダブルクリックすると、画像がウィンドウサイズに合わせたサイズで表示されます。
これも、キーボードショートカットの「Ctrl」+「0」の方をよく使いますね僕は。
でも、覚えておいて損はないでしょう。
「ズームツール」
画面の拡大・縮小はキーボードショートカットのほかに、これもツールがあります。
ツールパネルの、ツールアイコン群の一番下にあるこの「虫めがね」。
ツール選択のキーボードショートカットは「Z」です。
カーソルが「虫めがね」の形に変わりますので、これで画像内の任意の場所をクリックすると、クリックした場所を中心に表示が一定倍率拡大されます。
「Alt」キーを押しながらクリックだと縮小します。
また、ドラッグした場合ですが、ツールオプションの「スクラブズーム」のチェックボックスにチェックがされていると、ドラッグと同時に無段階に拡大します。
これも、ドラッグを始めた地点を中心に表示が拡大。
「Alt」キーを押しながらだと縮小です。
「スクラブズーム」のチェックボックスがチェックされていないと、ドラッグすると「長方形選択ツール」のように長方形の点線が表示され、マウスボタンを離すと同時に、その長方形で囲まれていたエリアが画面いっぱいに表示されます。
どちらも便利なのでお好みに、または状況に合わせて使い分けるといいでしょう。
ちなみにアイコンをダブルクリックすると、「ピクセル等倍」の表示となります。
いわゆる「100%表示」というやつです。
選択範囲と塗りつぶしを使ってパーツを作る
さあ、失敗作のすすりあがった「鼻水」のレイヤーは不透明度を落とし、その上に新規レイヤーを作成し、作業がしやすいように画面を拡大表示しました。
ツールの説明ばかりしていて一向に先に進みませんが、今度こそ本当にすすりあがった「鼻水」を書いていきます。
作業するのは新規レイヤー上で。
ツールは「なげなわツール」を選択し、背面に置いてある失敗作の「鼻水」を大きさの「あたり」として、「Alt」を押しながらのクリックで形状を囲んでいきます。
何度もやり直すことができますし、あとで微調整もできますので、気楽に囲んでいきます。
囲み終わったら「スポイトツール」で輪郭線の色を拾い、「塗りつぶし」で選択範囲の中に色を流し込みます（操作方法は前回記事を参照）。
ツールパネルでスポイトツールを選択します。 キーボードだと「Ｉ」です。
静止画のアイコン画像を動くGIFアニメアイコンにする：作成編（１）Photoshopでパーツを分解する - 140文字じゃおさまらないこと
メニューの「編集(E)」→「塗りつぶし(L)…」とクリックして、表示されたダイアログボックスでは「コンテンツに応じる」と表示されている欄をクリックして、表示されたリストから「描画色」を選択。 そして「OK」です。
静止画のアイコン画像を動くGIFアニメアイコンにする：作成編（１）Photoshopでパーツを分解する - 140文字じゃおさまらないこと
できましたが、このままだと「鼻水」というより黒い塊なので、中身をくりぬいて「抜け」をつくり「鼻水」っぽく見えるようにしたいと思います。
画像の任意の場所をクリックするか、「Ctrl」+「D」で選択範囲を解除して、今度は「塗りつぶし」た中を選択していきます。
選択範囲ができたら「Delete」キーで色を削除します。
一応これで完了なのですが、必要があれば形状をさらに微調整します。
形状を削りたい場合は、選択範囲で囲って削除（「Delete」キー）。
逆に付け足したい場合は「塗りつぶし」をおこないます。
ときどき表示を全体表示（「Ctrl」+「0」または「手のひらツール」をダブルクリック）や100%表示（「Ctrl」+「1」または「ズームツール」をダブルクリック）にしてバランスを見ながら、気が済むまで作業します。
といっても前回も言いましたが、結局は縮小でつぶれたりしますし、何コマものアニメーションの動きの中の絵ですので、この時点で時間をかけすぎる必要はないです。
いまさらいうのもなんですが、実はこういう微妙な点は「作品をいったん最後まで仕上げてみて、それでも気になったときにあらためて修正する」というスタンスの方が無駄がなくてよいかもしれません。
静止画のアイコン画像を動くGIFアニメアイコンにする：作成編（１）Photoshopでパーツを分解する - 140文字じゃおさまらないこと
レイヤーの削除
できましたら、あたりに使っていた失敗作の「鼻水」のレイヤーは捨ててしまいましょう。
レイヤーパネルでレイヤーをクリックで選択して「Delete」キー、またはドラッグしてレイヤーパネル下部の「ゴミ箱」アイコンにドロップすれば削除完了です。
あとは同じように作るだけ
さあ、あともう少し。
残るは「口」です。
このキャラクターは「口」をあんぐりと開けていますが、口を開けたまま鼻をすする人というのもあまりいないと思います。
だいたいの人は口を閉じて、ややとがらせ気味になって鼻をすするんじゃないかと想像します。
なので、僕も「口」をそういうふうにしたいと思いました。
とりあえず、「鼻水」のときと同じように「自由変形」でなんとかそれに近づけることができないかとやってみました。
でも案の定、それっぽくない。
というか、縮小したので線が細くなってるのが気にくわない。
やっぱり「口」も新たに描きおこすことにしました。
つまり、「口」のパーツも「鼻水」のときと全く同じ手順でもって作業したわけです。
なので、はしょってしまってもいいのですが、一応解説します。
まず、このそれっぽくない「口」のレイヤーは大きさの「あたり」として使うことにして不透明度を落とします。
ほんとにただの「あたり」でも、あった方がやりやすいんですよね、僕は。
その上に「新規レイヤー」を作成。
そして、表示を作業しやすい大きさにして「なげなわツール」の「Alt」押しと「塗りつぶし」で形状を作っていきます。
そして「塗りつぶし」して、削ったり付け足したりとちょこちょこ修正して、できました。
「あたり」にした「口」のレイヤーは削除しました。
レイヤーを整理する
さあ、これで「鼻水をすすっている」顔の作成は終わりました。
あとは、レイヤーを整理します。
いま、レイヤー構成は「鼻水を垂らしている」顔のパーツと「鼻水をすすっている」顔のパーツが混在しています。
アニメーション作成の過程では、このファイルはこののち何度も確認や修正のために開きなおすことになります。
たぶん。
その際にレイヤーがぐちゃぐちゃではちょっとストレスですよね。
ってこれ、たしか前回も言ってましたね。
「どのレイヤーに対して作業をおこなうのか？」は制作を進めていくうえで何度となく確認することなので、レイヤーが判別しずらいのはなにげにストレスになります。
静止画のアイコン画像を動くGIFアニメアイコンにする：作成編（１）Photoshopでパーツを分解する - 140文字じゃおさまらないこと
はい。
レイヤー名をわかりやすいものにしておきましょう。
やり方は、前回記事を見てください。
レイヤーの重なり順
ここでちょっと補足というか、説明してなかったことをひとつ。
レイヤーに上下の重なり順があるのは、今までの説明で何となく想像がついていると思います。
この順番の変え方というのをそういえば説明してなかった。
ここまでの作業の中で、この操作をする必要があったのかどうかはわかりませんが、基本なので一応押さえておきます。
レイヤーの順番を変える方法は、ドラッグ & ドロップです。
レイヤーをドラッグして他のレイヤーの上を通過させると、レイヤーとレイヤーの間に太い線があらわれます。
その状態のときにマウスボタンを離し、レイヤーをドロップすると、ドラッグしていたレイヤーはその位置に挿入されます。
レイヤーの複製や削除の説明で、レイヤーパネルでレイヤーをドラッグする操作は何度か説明しました。
記事を読みながら実際にやってみている方がいらっしゃるかどうかはわかりませんが、もしいらしたならば、すでにお気づきになっていたかもしれませんね。
キーボードショートカットは「Ctrl」+「]」で選択されているレイヤーを一段上に移動。
「Ctrl」+「[」で一段下に移動です。
さらに、「Shift」+「Ctrl」+「]」で最上段に、「Shift」+「Ctrl」+「[」で最下段です。
ゲームの操作のように上下が逆なのがミソです（笑）
今回はここまで
これで、アニメーション作成の下準備である画像加工はいったん終了でございます。
おつかれさまでした。
あと少しといいながら、記事の分量は結局前回と同じくらいになってしまいました。
前回も言いましたように、前回と今回の記事は「Photoshopを初めてさわる人」が対象のつもりで書かせていただきました。
自分がやるぶんにはあっという間のことでも、初めての人に説明するとなると、こんなにいろいろなことを説明しなきゃならないのかと痛感するばかりです。
しかも、それでこの記事がほんとうに初心者にとって役に立つものになっているのか？ということについては、客観的な見解というものは自分にはまったくおぼつかない次第です。
ともあれ、記事はまだ途中です。
最後まで書ききらなければ、評価も何もあったもんじゃありませんね。
始めたことをなかば後悔していますが、なんとかやり遂げたいと思います。
あ、次回の内容についてですが、前回と今回のPhotoshopでおこなった作業を、フリーソフトでも再現することができるのか？を検証してみたいと考えております。
最後まで読んでいただきありがとうございました。
次回もみてもらえるとうれしいです。
