ペンギンさんのPC手帖

ブログを見ていると、マウスポインターにキャラクターの画像が追いかけてくるものがあります。
おもしろいなっと思ってどうやるのか？と調べてみました。

ドコモダケがマウスポインターを追いかけてくるようにしてみました。いかがでしょうか

クリックすると拡大表示

しかし、ブログを下の方へスクロールしていくと、画像がついてきません。
どうしてかな？っといろいろ試してみたのだけどよくわかりません
どなたか、知識のあるかたお教えください！

今回は、このイラストを描きます

ペイントソフトを使ってイラストなどを描くときに、レイヤーを使って描くととても便利です
今回は、私の使っているフリーソフト「Paint.net（ペイントネット）」を使って
レイヤーの使い方をご紹介します

ペイントネットは、フォトショップなどのように高機能ではないけれど
軽くて結構使える便利なソフトだと思います
Windows用画像編集ソフト「Paint.net（ペイントネット）」V3.5.5　
ダウンロードや詳しい情報は、ホームページを参照くださいね　http://paint.net/


作業画面です、右上にレイヤーウインドウが表示されています


レイヤーウインドウです、今回は4枚のレイヤーを使いました
レイヤーは透明なフィルムを重ねて絵を描いていくイメージです


レイヤーを重ねていくときにレイヤーのプロパティで重ね方の設定をします
今回はレイヤー1、2、3に対して、ブレンドモード「増殖」に設定しました


レイヤー1
今回は、線画のイラストをもとに色を付けていきました


レイヤー2
描く順番としては、レイヤー3の顔の色を付けてからレイヤー2となります
レイヤー2では、唇の色や頬の赤味を加えました


レイヤー3
顔や髪の毛の色を線画からはみ出さないように色をつけていきます


レイヤー4
最後に、背景に色を付けて完成です
ペイントネットでは「魔法の杖」という選択ツールがあるので、こんなときは便利です


いかがでしょうか


すべてが描き終わったら、複数のレイヤーを1枚にします
レイヤーの一番上から順番に「レイヤーの結合」をクリックして行きます


レイヤーが1枚になりました、ここで注意しなくてはいけないことは
レイヤーのブレンドモードが、いろんな設定を使って重ねている場合は
このやり方だと効果が失われる場合があります、そんな時は「名前を付けて保存」をしてください


名前を付けて保存をすると


平面化しますか？と聞いてきますので平面化を選択してください

あとでイラストを修正したりしたい場合は、レイヤーを結合する前に一度
Paint.NET（＊.pdn）形式でレイヤー情報を残したものを保存しておくとよいでしょう

レイヤーを使いこなすと、複雑なことも簡単にできたりします
ブレンドモードの設定がカギになりますね

ペイントソフトで気楽にイラストを描きましょう

ＧＩＦアニメを作るとき最近、利用しているフリーソフトをご紹介します

古溝 剛さんのオリジナルソフト「ＧＩＦ＆ＭＮＧ-ＬＣアニメータＧｉａｍ」
参照はこちらでhttp://homepage3.nifty.com/furumizo/index.htm
ソフトの詳細はこちらでご確認ください

今回は「ジャンケン」のアニメを作ってみます

今回のアニメ素材は4枚用意

ジャンケンポン！

<ジャンケンポン！

あいこでしょ！

やった～！！

次に、ソフトGiamを立ち上げます
事前に古溝 剛さんのホームページからダウンロードしてくださいね

クリックすると別ウインドウで大きく表示

画面の「コマ表示窓」へ用意した素材フォルダから直接、ドラッグ＆ドロップして下さい
以前、紹介した「無料バナー作成工房」では、
ファイルを1枚ずつ選択して読み込まなくてはいけなくって面倒でしたが
ドラッグ＆ドロップできると簡単で便利です

次に、読み込んだデータの確認をします

クリックすると別ウインドウで大きく表示

コマの順番がありますので、1コマづつチェックして違っていたら上下の移動ボタンで修正します
ウエイト有りにチェックが入っているのを確認して、表示の切り替え間隔時間を指定します
ウエイト[1/100ｓ]の後のところに今回は100と入力しました、約1秒の切り替えとなります
秒数は、いろいろためしてくださいね

表示メニューのＶｉｅｗで確認できます

クリックすると別ウインドウで大きく表示

コマの順番の確認や切り替えの速さなど調整します
よければ、名前をつけて保存します

クリックすると別ウインドウで大きく表示

完成したＧＩＦアニメです、いかがでしょうか



楽しいＧＩＦアニメをたくさん作って楽しみましょう

自分のお気に入りの写真をいろんな場所に簡単に合成できるサイトを見つけたので紹介します


こんなふうにドコモダケの写真をスタジアムの電飾掲示版に合成するのだって簡単にできます

フリー写真素材 (無料壁紙画像) Futta.NET


まず、トップページの下の方の写真加工（画像変換フリーソフト）から

クリックすると大きく表示します

つぎに、【合成】から
額縁A　額縁B　埼スタ　ドーム　会議室　寝室の中から興味のあるものを選択する

クリックすると大きく表示します

例えば、寝室の合成の場合

クリックすると大きく表示します

合成したい写真を【1.アップロード】＞今回はドコモダケの写真を使ってみました



【2.変換】でいろいろと設定ができます＞＞＞よければ【3.ダウンロード】

寝室の写真がドコモダケになりました

ほかに、会議室や埼玉スタジアム、東京ドーム、額縁などいろいろやってみてね

会議室面倒な合成もこれなら簡単ですね



写真加工.comは、他にも画像変換フィルタがたくさんあるので遊んでみたらどうでしょうか

最近、GIFデータをつかって何枚かの写真を重ねて紙芝居のような表現で遊んでいます
GIFアニメも作りたいと思って、いくつか挑戦中です

作例をご紹介します＞人魚のイラストに泡が出る感じと手を振る動きを付けました

3枚で構成＞＞＞完成

ただ、これだと背景が白じゃないと余白の四角い枠が気になります
そこで背景を透明にしてみました、イラストが切り抜かれています

3枚で構成＞＞＞完成

透過GIFのときには、背景が透明なので下の絵がはみ出してみえないように工夫が必要です


GIFを透明にする方法ですが
我が家で使っているPaint.NET（フリーのペイントソフト）で加工しました

透明にしたい画像を開く＞今回は白い部分を透明にします
Paint.NETの「魔法の杖」という選択ツールを使います

クリックすると大きく表示します

ツールメニューから「魔法の杖」を選んで、マウスポインタを白い透明にしたい部分でクリック
白い部分が、選択された状態になります

次に、「消しゴム」ツールを選んで透明にしたいところを消していきます

クリックすると大きく表示します

はみ出しても大丈夫です、選択された部分しか消えません
一回で出来ないときは、何回かに分けて丁寧にやりましょう


さらに水のイメージの写真と組み合わせてみました



今回はGIFデータの作り方は省略いたしました、過去のわたしのブログを参照ください

透過GIFにしておくと背景がどんな色でも気にせずレイアウトでき便利ですね

ブログで写真をオシャレに見せる手法のひとつに
白フチ付きのプリント写真風にして影を付ける方法があります



いままでこのブログで紹介したサイトで出来るので紹介します

バナー工房http://www.bannerkoubou.com/
左上から光があたった感じで右側と下部にしっかり影がつきます

画像加工編集＞枠②

＞＞＞＞＞

クリップユーフォトhttp://clipyourphotos.com/
紙の感じをいかして左右が少しまるまった感じを表現して
自然な感じに影をつくってくれる

Framer ＞ Paper
＞＞＞＞＞

影の付き方が微妙に違いがあります、どちらが良いかはお好みでどうぞ

簡単に好きな写真を水面に写し込んだような写真に変身させることができる
ClipYourPhotosというサイトを見つけました
http://clipyourphotos.com/

Ripples（さざ波）というコーナーで加工します

私のプロフィールの画像を取り込んで
さざ波を何段かにかに分けて保存して
GIFアニメを作ってみました



写真の下の部分が水面に映り込んで波打っているように変化したのがわかりますか？
さざ波の強弱も簡単にプレビューできます
＞＞＞＞＞＞

このように何段階かにわけて保存して
以前紹介した無料バナー作成工房でGIFアニメ（動画）を作成しました
http://www.bannerkoubou.com/
プロフィールの顔が水面に映り込んで浮かんでいるように見えるでしょうか？



たとえば
加工する素材を実際に水面に建物が写り込んでいるような写真を使えば
水面が波打っているような自然なものになると思います

また、ClipYourPhotosでは
こんなこともできました
FaceBenderのコーナーで顔をゆがめて遊ぶ


エフェクト効果は10種類　どれもちょっと怖い顔になってしまいましたね

こうして写真を変形させて遊んでみるのも面白いですね

ＧＩＦ（ジフ）形式は、1つのファイルの中に複数の画像を保存することができる

保存順に紙芝居のように表示できるので、ちょっとした動画が簡単にできます

フリーソフトもあるようですが
まずはお手軽に「バーナー工房」という無料でブログパーツが作れるサイトを見つけた

http://www.bannerkoubou.com/

GIFアニメ（動画）というコーナーで

画像を送信するだけ

設定は

画像は10枚まで読み込める

点滅間隔：0.1秒から5秒

ループ設定：2種類
　　ループする（繰り返し再生）
　　ループしない（1度のみ再生）

後は送信するだけ

ファイル容量は5MBまで
So-netブログのアップ出来る画像は1MBまでだから十分

ポイントは
加工する画像のサイズを同じにすること

参考はペンギンの数が増えて最後にメッセージが出るというもの
6枚の画像を重ねている

1枚目

2枚目

3枚目

4枚目

5枚目

6枚目

完成

複数の画像を重ねて1つのファイルにするので、画像の枚数や大きさに注意しないと重くなります

自分のブログ上でちょっと変化をつけるのに面白いかな

今日は、なんとなくビー玉アイコンを作ってみました
使用ソフトはPeint.net 、他のペイントソフトも基本的に同じようなものです

http://paint.net/

レイヤーを使ってグラデーションを重ねていくだけです

好きな色の丸を書きます

その上にレイヤーで同じ色のグラデーションの小さい丸を重ねていきます
右側がレイヤーを重ねたイメージです

さらにもう一枚レイヤー、ここのポイントは上の部分に青い輪郭を残すことです
アイコンは小さく使うからこの部分の輪郭がなくなると円に見えづらくなるからです

さらにレイヤー、今回はこれで完成です
右側のもの、ちょっと大味な感じですがアイコンは小さく使いますのでこれくらいのバランスで

ポイントは、レイヤーを重ねるときにブレンドモードを「明るく」を選択することです


好きな色に変えてカラフルなビー玉アイコンはいかがでしょうか