photoshopの記事一覧

自作したコミポ柄クレジットカード

自作したコミポ柄クレジットカード
漫画やアニメのキャラクターとタイアップをした
クレジットカードやデビットカードが数多く出てきています。

ですが、すべてのキャラがカードになることはありません。

  • お気に入りのキャラクターが出ない
  • あのコスチュームのカードが欲しい
  • イメージが違う
そんな時は、「何ででないの?」と嘆く前に、
自作しちゃいましょう。

カード画像とキャラクター画像、それにphotoshopさえあれば、
どんなカードもオリジナルで簡単に作ることが出来ます。
※ここでは作り方をご提供していますが、
 すべてご自身の責任で作成・管理・利用を行ってください。


ここではオリジナルのキャラクターカードの作り方をご紹介します。
動画版もご覧ください。

カード画像は写メで十分

楽天デビット白
画像はご自身が所持しているカードを、
カメラ付きスマホや携帯で撮影して使えばOKです。

注意しなくてはいけないのが、
社名や番号など重要な部分をあらかじめ消すことです。

※もし修正せずにネット上にアップしてしまえば、悪用されますのでご注意ください。


カメラの映りが悪いときはphotoshopの明るさ・コントラストで調整

pohotosho明るさコントラスト調整
イメージ→色調補正→明るさ・コントラストで調整
ここで調整すれば写真写りの明るさが調整できますのでお試しください。

調整後↓
photoshop明るさ調整ねじ

カード画像の編集方法

photoshop200倍画像
まずphotoshopに画像を入れたら、100~200倍に拡大しましょう。
小さな画面を見るよりも作業がしやすいです。

photoshopスポット修復ブラシツール

不要な文字や数字を消去する

photoshopの左にある「スポット修復ブラシツール」を使えば、
塗りつぶすだけで簡単に消すことができます。

photosopコンテンツに応じる設定 スポット修復ブラシツールは、「コンテンツに応じる」に設定しておきましょう

「クイック選択ツール」を使用して文字複製

photoshopクイック選択ツール クイック選択ツールの使い方 クイック選択ツールの使い方は、3ステップです
  1. コピーしたい画像を選択
  2. 右クリック後、「選択範囲をレイヤーにコピーする」
  3. 移動ツールで特定位置まで持っていく

ぼかしを入れて自然な画像に仕上げる

移動後の画像 そのままコピーレイヤーを移動すると、
数字が鮮明すぎて違和感があります。

その場合は「ぼかし」を利用して、自然な画像になるように調整します。
フォトショップぼかしを入れる方法
フィルター→ぼかし→ぼかし(ガウス)

ぼかしを入れるときは拡大するよりも、
元の画像サイズで調整したほうが、合わせやすいはずです。


不要な部分を消して、それらしい数字を入れる際の注意点

comipocard無地
これで下地ができましたが、
そのまま画像を入れると、キャラクターと文字がかぶります。

キャラクターを乗せたクレジットカード
あらかじめ別のレイヤーに入れる必要があります。

数字や文字を別レイヤーにコピーし、結合でまとめる

数字を別レイヤーに保存
やり方は深く考える必要はありません。
※面倒ですが
  1. 「クイック選択ツール」を使用して文字複製し
  2. 「レイヤーを結合」でひとつにまとめると楽に管理できます。

これで下地が完成しました。
クレカ数字なし

キャラクターをカード上に配置

comipocard3
キャラクターは、背景なし画像を「png形式」で保存しましょう。
上記画像のように透過してくれます。

この時にキャラクターの色が鮮明すぎるので、
ノイズを加えます。

photoshopノイズ機能の使い方

フォトショップノイズの使い方
フィルター→ノイズ→ノイズを加える

この手順で自動でノイズが入りますのが、
濃いと思いますので調整しましょう。

ノイズの調整方法
「量」の部分をつまみで調整しても問題ありません。

元画像を見ながら、調整出来るので便利ですね。

調整した画像がこちら↓
ノイズを入れた後のクレカ
擦り切れた感じを出せているかと思います。

さらにぼかしを入れて自然な画像に調整

ぼかし後のカード画像
ぼかしを入れると、さらに自然な画像に仕上がります。

ぼかしを入れる手順
フィルター→ぼかし→ぼかし(ガウス)

この時にVISAのマークや、数字を基準に調整すると
いい感じに仕上がるかと思います。

最後に数字レイヤーを被せれば、オリジナルカードが完成です

comipocard完成画像
いかがでしょうか?
やり方は簡単ですが、面倒かもしれませんね。

ここではデビットカードを使ってますが、
トレーディングカードなどを使う事もできそうです。

ただし、カードにもキャラクターにも著作権があります。
むやみに使うのはやめましょう。

当方では責任が一切持てませんのであらかじめご了承ください。

photoshop, コミPo!, 作ってみた, 漫画アニメ

無料実写gifソフト

そもそもgifアニメを作るには、アニメでいうイラストや漫画が必要です。
パラパラ漫画も同じように、たくさんの絵が必要になってきます。

動作をつけるにはどうしても必要な枚数が多くなるので、面倒に感じてしまいます。
さらに画才がなければ、イラストなんて書くことが出来ません。
漫画やイラストがかけなければ、gifアニメとは無縁なのでしょうか?

それは違います。

gifアニメや動画というのは、表現方法のひとつです。
たとえ絵がかけない人でも、それなりに作成することが出来ます。

そのひとつの手段として、無料配布されている画像素材を使うことです。
実写版gifアニメ魔法少女

無料素材だけでも↑こんな感じでgifアニメが作れます。

動画やgifアニメに使える無料素材は、こちらで紹介しています。
撮影不要!無料の素材だけで実写版gifアニメや動画を簡単に作ろう」をご参照ください。

素材はここで手に入りました。
あとはどのようにして作るのかです。

今回は10分で作る実写版gifアニメ!動画を作成する為のソフトをご紹介します。


実写版gifアニメや動画を作るためのフリーソフト


まず準備するのは、画像編集ソフトとgifアニメや動画を作るソフトです。
それぞれフリーソフトと呼ばれる無料のソフトがいくつか存在します。
ここでは、私が使っているソフトをご紹介します。

※私の場合windowsなので、ウインドゥズ7ユーザー目線で書いていますのでご注意ください。

フリーの画像編集ソフトPhotoScape

PhotoScape
ドロップ&ドロー使えるので、体感的にも簡単に使えます。
最近はadobeのPhotoShopを使っていますが、簡単な作業はPhotoScapeを使っています。
ソフトとしては軽めの設計なので、動きの鈍いパソコンでも使えるのは心強いです。

PhotoScapeで気軽に使える機能
  • リサイズや端子変換
  • モザイク
  • トリミング
  • オブジェクト挿入(文字や矢印など)
  • gifアニメ作成

このような機能を使いたい場合は、余計な機能が付いていないPhotoScapeのほうが早く終わります。
急いでいるときには重宝するソフトです。


フリーの動画作成ソフトといえばwindowsムービーメーカー

windowsムービーメーカー
windows7にもともと付属されているので、そのまま使っています。
gifアニメを読み込んだりは作ることは出来ませんが、パラパラ漫画の動画は簡単に作ることが出来ます。

  1. 画像を作る
  2. windowsムービーメーカーに突っ込む
  3. 並び替える
  4. 動画として出力

この手順だけで作れるので、使わない手はありません。
もちろん音楽や音声を入れる事もできるので問題ありません。

ただ途中で文字を入れたいとき動きを良くしたいときなどは、他のソフトを使わなくてはいけません。
ですが、プロのような仕上がりを期待しなければ使えるソフトです。


有料の画像編集ソフトはadobeのPhotoShop

フォトショップ
フリーソフトを使えばある程度の動画やgifアニメを作る事が出来ますが、やはり機能が少ないので思ったとおりの表現を作りにくいというのがあります。

たとえば、今回のようにフリーの画像を使うときはポーズや写真の種類が限定されます

あのモデルに「こんなポーズやあんなポーズをとらせたい」と思ったときに使えるのが、PhotoShopのパペットワープです。


使い方はこちらで紹介しています。↓
1枚の画像でgifアニメを作ろう!photoshopパペットワープの使い方


パペットワープ以外にも使える機能が豊富


その他にも、文字を3Dにしたり、コンテンツに応じた塗りつぶしや移動という機能が付いています。
コンテンツに応じた機能とは、写真の不要なものを消したり移動しても、違和感がない背景を作ってくれる機能です。

これ↑はgifアニメの一場面ですが、一枚の無料画像から3枚作ったのがわかるかと思います。

これらPhotoShop独自の機能を駆使することにより、一枚の画像をさまざまなパターンに作り直すことが出来るようになっています。


これで月額980円というのですから驚きです。


gifアニメや動画だけでなく、ロゴやバナーヘッダーなども簡単に作ることが出来るので、デザインや写真、漫画やアニメーションイラストを多く使うことがある人にはおすすめです。
もちろんPhotoShopだけで高度なイラストを書く人もたくさんいます。


そういった点では使えるソフトなので、30日間の無料期間だけでも使ってみてはいかがでしょうか?

gifアニメ作り方, photoshop

歌って回るミクgifアニメ作り方

photoshopを使っていると、いろんな効果を試してみたいくなります。
今回はスポットライトの中で踊るミク風の女の子をgifアニメで作ってみました
歌って回るミクgifアニメ作り方

まずはミク風の女の子を作る


私の場合コミPo!を使いますが、皆さんはそれぞれのソフトで作成してください。
今回は回転するミク風少女なので、5枚の画像を用意しました。
それぞれでgifアニメを構成します。

コミポで作ったキャラなら3D画像なので、360度回転させるだけでOKです。
オリジナルで書く場合とは違って格段に楽になります。

ここで背景のスポットライトが気になるかもしれません。
ライトの部分はPhotoShopで作成しました。


PhotoShopスポットライトの作り方

スポットライト作り方 作り方は覚えると簡単です。
  1. 地面に円を描き
  2. 円にぼかし(ガウス)を使う
  3. ライトを三角で作って
  4. ぼかし(ガウス)を使う
この順番でスポットライトを作ることが出来ます。

1.新規レイヤーを作成し円を作る

まずはレイヤーを追加
PhotoShop新規レイヤーを作る
楕円方ツールで円を作る
スクリーンショット 2014-08-09 21.40.36

2.ぼかし(ガウス)を使って円を綺麗に見せる

フィルター→ぼかし→ぼかし(ガウス)を使います。
photoshopぼかしスクリーンショット

ぼかしはお好みで調整します
photoshopぼかし調整スクリーンショット


3.多角方ツール:角数3で三角形を作る

※もちろん他の方法でもOK!
photoshop多角方ツールスクリーンショット

形が整わない場合は、「編集→パスを自由変形」でお好みの形に変更します。
※シェイプというらしいです。
パスを自由変形スクリーンショット


4.三角をライトのようにぼかす
先ほどの円と同じように「フィルター→ぼかし→ぼかし(ガウス)」を使います。
数字は先ほどと同じにしています。
フォトショップぼかしスクリーンショット

不自然なのですが、レイヤー機能のオーバーレイを使用すればスポットライトに変わります
フォトショップスポットライトスクリーンショット

作り方を書きながら作成したので、先ほどの物とは違いますがご了承ください。(笑)

色は白でなくてもいいかもしれません。
歌って踊るミク黄色
いかがでしょうか?
スポットライトというのは案外使い道が多そうです。
いろいろ試してみてくださいね。

gifアニメ作り方, photoshop

スカートがめくれるgifアニメの作り方_001

風で抑える制服スカート gifアニメを作るときに重要なポイントは自然な動きです。
一番初めに挑戦したいgifアニメといえば、風で揺れるスカートの動きです。
その動きを実現させることが出来るのが、photoshopのパペットワークです。

スカートが揺れて見えるgifアニメを作成する技術さえあれば、カーテンを動かしたり、髪を動かす事もできるようになります。
今回の作り方を見て研究してください。

前回はphotoshopのパペットワークを使って、1枚の画像からgifアニメを作る方法をご紹介しましたが、
今回はパペットワークの応用でスカートがめくれるgifアニメを作ります。

youtube動画も作りましたのであわせてご覧ください。


スカートが動くgifアニメを作り方

スカートが風で揺れるgifアニメ
簡単に手順を書いくとこうなります。
  1. 動く部分と動かない部分を切断する
  2. パペットワークのピンで固定
  3. 動かした画像を複数作ってタイムラインでgifアニメにする

慣れれば10分程度で作れそうですね。


動く部分と動かない部分を切断する

足を切り取る
photoshopのパペットワークを使うときは、動かない画像部分と動く画像の部分をあらかじめカットして、別のレイヤーにしておくと楽に作れます。
特定の画像をカットする方法
[クイック選択ツールで指定]→[別のレイヤーにコピーorカット]
そのまま使うと、手や足などが一緒に動くので不自然な画像になってしまいます。

カットしておくと便利な画像
  • 背景
  • 手や足
  • 髪の毛
など


パペットワークのピンで固定

パペットワープピンで留める手順
パペットワープがある場所
[編集]→[パペットワープ] ※メッシュ(網目)は表示非表示がチェックで選べます

パペットワークを使うときは、画像のようにピンで体を固定することから始まります。
これをしておかないと、他の部分が勝手に動いてしまいます。

ピンを止めるときは、拡大をして細かく止めて置くと確実です。
また、gifアニメは全体を見ながら調整したほうがいいので、動作をつけるときは下の倍率に戻すことをおすすめします。
動画ではそのままやってますが、後から気が付きました(笑)


動かした画像を複数作ってタイムラインでgifアニメにする

タイムラインで仕上げる
イラストや静止した漫画なら一枚でいいのですが、gifアニメの場合少しずつ動作を変化させなくてはいけません。
そんな時は、切り抜いた画像のレイヤーを複数枚コピーしておくと便利です。
※photoshopではコピーの事を複製といいます

もちろんパペットワークで加工した画像を複製してもいいのですが、おおもとの画像と食い違う部分も出てきます。
自然な動きをさせるのであれば、オリジナルに近い画像を使ったほうが確実です。

photoshopにはアニメーション機能がありますので、そのままgifアニメを作ることが出来ます。
gifアニメ用のタイムラインの出し方
[ウインドウ]→[タイムライン]→[フレームアニメーションを作成] ※複製し表示したいレイヤーを選択して作っていきます。(目玉ボタンで表示非表示が可能)

最後にgifアニメとして出力すれば完成

スカートを抑える制服少女gifアニメ
photoshopでは再生回数も選べるので便利です。
大抵は無限でセットしておくことをおすすめします。
もちろん秒数は1枚ずつ選べるので、動きは自由自在に作ることが出来ます。
gifアニメで出力する方法
[ファイル]→[web用に保存]→[gifを選択]

photoshopのようなソフトで作ると、うごイラなどの無料ツールよりも高度なgifアニメも作れます。
この機会に使ってみてはいかがでしょうか?

gifアニメ作り方, photoshop

adobeのphotoshopをご存知ですか?
photoshop ccなら最新版を月額980円で使えるようになっています。
以前のように数万円も出さなくても使えるようになっています。
コストパフォーマンスもいいのでおすすめです。
30日間の無料体験版がで使えるので、まずは試しに使ってみるのもいいかもしれません。
(すべてのadobeが30日間は無料で制限なく使えるので、Illustrator CCなども試してみてもいいでしょう)


photoshopは写真編集だけじゃない


photoshopといえば、写真の編集だけかと思う人も多いかもしれません。

ですが、gifアニメーションや動画なども編集や作成、ロゴやバナーの作成もphotoshopだけで作ることもできます。
耳を動かそう
特に、1枚のイラストや写真からgifアニメを作れるパペットワープ機能があるのでとても便利なソフトです。

photoshopのパペットワープ機能とは?

パペットワーク
パペットワープとは、操り人形のように自由自在にひっぱったり・伸ばしたりして人物や動物・物を他の格好(ポーズ)をさせる機能です。
写真を撮ったり、イラストや漫画をたくさん描くには時間がかかりますね。

gifアニメやパラパラ漫画を作ろうと思ったら、何枚も違う画像を用意しなくてはいけません。
それぞれちょっとだけ動かしながら描こうと思ったら、何時間も時間が必要になってしまいます。

そんな時に便利なのが、photoshopのパペットワープ機能です。
まるで人形のように、動かしす事が出来るので思い通りの動きにする事が出来ます。

もちろん立体的に動かす事が出来ますので、アニメや漫画だけでなく人物の写真でも違和感なく動かす事が出来ます。

photoshopを使う利点とは?


私が作るgifアニメやYoutube動画はコミPo!を使っていますが、ポーズや動きは限定されるのでphotoshopのパペットワープで編集する事があります。
photoshopを使う事で、他の人の作品とは違った動きが出すようにしています。
その他にも、コミPo!の3Dキャラやアイテムを作る事が出来るのもphotoshopの利点です。

パペットワープの使用例
  • スカートが風でめくれたりふわっと浮くgifアニメ
  • 猫ミミやウサギ耳が動く漫画
  • やわらかい部分がプルプル動くアニメーション
  • 写真の小顔修正やほっそりダイエット調整
  • モデル写真のポーズ変更
これ以外にもたくさん使えるので便利です。

photoshopのパペットワープ機能の使い方

パペットワークアミ
パペットワープで動かす時は、「ピン」を打って固定したり・動かします。
ピンとは、虫ピンのように画像を張り付けておく物です。

「ピン」を打つ部分は二種類です。
  1. 動かしたくない部分を固定して
  2. 動かしたい部分を引っ張って張り付ける

photoshopのパペットワープ機能ピン使い方

パペットワークアミ耳2
パペットワープは画像を引っ張って動かしてピン留めします。
その時にピンで体を固定しておかないと体全体が引っ張られます。
※上の画像では、分かりやすいように元の画像も表示しています。
  1. ウサギ耳の付け根にピンを付けて固定
  2. ウサギ耳の先端を下に引っ張って動かしています

パペットワープ機能のピンを使うときの注意点

ピンで固定せずにパペットワープ機能を使った場合
ピンで留めないと画像がそのままの状態で動きます
(左右上下に移動したい時は便利です)
1本のピンで留めていた場合
画像全体が引っ張られ歪んでしまうので不自然な画像になってしまいます。
人やキャラクター・動物の画像をパペットワープで加工する場合、腕や足の関節・肩や腰・頭や顔などにピンを打つことで、自然な画像に仕上げる事が出来ます。


パペットワープのメッシュ(網点)でリアルな動きが出せる

パペットワークアミ
パペットワープはピンだけでも、動かす事が出来ますが、3Dメッシュ(網目上の可動部分)を使う事でさらに自然な動きを実現します。

上の画像は、メッシュを表示した時の画像です。
網のつなぎ目を動かすことで、ふくらみを持たせて豊胸したり、逆にほっそりダイエットさせる事もできます。

スカートのふんわり感を出したい時も、使うことで3Dのように立体感を出す事が出来るようになっています。
もちろんイラストや漫画のキャラクターだけでなく、写真でも使えるので様々な条件も使う事が出来ます。

ですが、欠点もあります。
パペットワープのピン留めできないエラーの原因
それは、メッシュのつなぎ目部分にしか「ピンが打てない」仕様になっています。
その為、パペットワープで細かく修正する場合にはメッシュの強弱を使い分ける事が必要になってきます。

パペットワープは、体の節々をピンで固定して動かすだけで様々なポーズをとる事が出来ます。
使いこなせる事が出来れば、1枚の画像から何パターンでもgifアニメが作れるので便利です。
この機会に使ってみてはいかがでしょうか?

フォトエディター | Adobe Photoshop CC無償体験版ダウンロード
http://www.adobe.com/jp/products/photoshop.html

gifアニメ作り方, photoshop