11月29日18時まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。

透過画像の作成・合成方法 ~ フリーソフト「ペコステップ」を利用

透過画像の作成・合成方法 ~ フリーソフト「ペコステップ」を利用
アイキャッチ画像は
werner moserによるPixabayからの画像

透過画像とは、背景が透明の画像です。

例を示します。

左側は、イラストが「透過画像」なので、背景の色が何色でも、写真がきても自然に見えます。

右側は、イラストを「透過ではない」状態にしたので、白以外を背景にすると、浮いてしまいます。

いくみ
いくみ

背景を白にしたいときは、「透過」を意識しなくて大丈夫です。

ただ、後で白以外にしたくなるかもしれない場合は、「透過画像」を準備しましょう。

無料でも有料でも、イラストの素材は「透過」で提供されるはずです。

または、そのオプションがあるはずです。素材をそのまま使う場合は、問題にはなりません。

当記事では、以下の作業をしたい方に、とっても便利なフリーサイトをご紹介したいと思います。

当記事のポイント

自分で作った画像を透過にしたい

複数の透過画像を合成して「透過」にしたい

イラスト内の色のカラーコードとRGBを知りたい

これを可能にするフリーサイトの使い方です。

ダウンロードが必要なのですが、高精度・多機能の透過ソフトを見つけたので、それも記事にしています。色使いや構図が複雑でも対応できますので、とてもおススメです。

透過画像を作れる・複数合成画像の透過にも利用できる・イラスト内の色情報もチェックできるフリーサイト ~ PEKO STEP (ペコステップ)

いきなり、全てを解決してくれる、本当にすばらしいサイトがこちらです。

無料で、登録も不要です。

使い方も上のサイトにあります。せっかくなのでデモをします。

透過画像を作りたい

あなたが、透過ではないイラストの画像ファイルを作成した・持っているとします。

透過ではない画像例
いくみ作
えんぴつ

背景をいれるとこうなる↓状態です。白が入ってしまう。

透過ではない画像の使用例

ペコステップを利用して、画像を透過にする手順

まずはペコステップを開いてみてください。

1.左サイドの[ツール]セクションで、[色の透過]オプションを選択します。

2.透過にしたい画像ファイルをドラッグして、ペコステップの画面にドロップしてください。

画像を透過にする手順 ペコステップを利用

[参照]ボタンからファイル選択してもOKです。

この画面では複数選択はできません。

3.次に、[透過対象]で[クリックした色]か[クリックした色以外]のどちらかを選びます。

画像を透過にするフリーソフト、ペコステップの使い方

4 – A.[クリックした色]を選択して、透過にしたい色の部分をクリック

それだけで、その色が「透過」に変わります。

[クリックした色]を選択して「白」の部分をクリックした結果がこちら。

画像を透過にするフリーソフト、ペコステップの使用例

「白」の部分が透過になりました。

いくみ
いくみ

灰色と白の格子模様は、実際には「透明」です。「透過ですよ」という印です。

もう1つのオプションを試してみます。

4 – B.[クリックした色以外]を選択して、「緑」の部分をクリックしました。結果がこちら。

画像を透過にするフリーソフト、ペコステップの使用例

クリックした色(緑)以外、つまりこの例だと「白」と「木の色」の2色が透過になりました。

1つの色を透過にしたいときは、[クリックした色]

一色だけ残して、他の色を透過にしたいときは、[クリックした色以外]

を選ぶと便利です。

5.できあがった画像をファイル保存します。[ファイル]>[保存]をクリックです。

画像を透過にするフリーソフト、ペコステップの使い方、ファイル保存

画面下に以下のようにメッセージが出ます。[保存]ボタンの横にあるマークをクリックして[名前を付けて保存]です。

画像を透過にするフリーソフト、ペコステップの使い方、ファイル保存

透過画像を合成して「透過のまま」にしたい ~ PEKO STEP(ペコステップ)を利用

合成の部分は他のソフトを使います。そして、ペコステップを「透過」に利用します(方法は同じです)。

  1. どのソフトを利用してもいいので、複数の透過画像を1枚にまとめてファイル保存します

    その際、1色の背景上(白が推奨に複数画像を置いてください。
    同時に、サイズや位置も調整しましょう。
     
  2. その後、上述した方法で、ペコステップを使って背景を透過にすれば、「透過画像を合成して、透過画像のまま」という結果が得られます

(ペコステップにも複数画像を統合できる機能があるのですが、自由度があまり高くないので、合成は他のソフトでするのがおすすめです。)

私の場合は、以下のソフトを使っています。

  1. 「合成」に「パワーポイント」
  2. 「ファイル保存」に「ペイント」
  3. 透過に「ペコステップ」

デモをしてみますね。パワーポイントを開きます。

0.開くと大抵、テキストボックスがあると思います。すべて消去して、まっさらの状態にしてください。

1.[ホーム]で[図形]をクリック。

透過画像の合成方法 パワーポイントを利用

2.普通の四角形をクリックして挿入します。

透過画像の合成方法 パワーポイントを利用、四角形を挿入

3.四角形の色は、「します

透過画像の合成方法 パワーポイントを利用、四角形の色を変更

3-1.(白になっていなかったら)四角形の上で右クリックすると、[塗りつぶし]というオプションが出るのでクリック。(または[ホーム]にある塗りつぶしアイコンをクリック。)

透過画像の合成方法 パワーポイントを利用、四角形の色を白に変更

3-2.白のボックスをクリック。

透過画像の合成方法 パワーポイントを利用、四角形の色を白に変更

3-3.隣の[枠線]でも同じように「白」を選びます。

透過画像の合成方法 パワーポイントを利用、四角形の枠線を白に変更

4.合成したい透過画像を四角形の上に貼り付けて、サイズや位置を整えます。

合成画像のサイズと位置を調整

4-1.四角形の大きさで画像が作られるので、ちょうど良い余白量になるように四角形の大きさもドラッグで調整しましょう。私はこれくらい↓にしました。

合成画像の余白量を調整

5.画像をすべて選択してコピーします。

 画像をすべて選択:ドラッグで範囲選択するか、Ctrlキーを押しながらAキーを押す。
 コピー:右クリックのメニューで[コピー]を選ぶか、Ctrlキーを押しながらCキーを押す。

6.ペイントを開きます。Windowsの検索ボックスに、「ペイント」と入力してください。

合成画像作成 ペイントの利用

そして、ペイントをクリック。

合成画像作成 ペイントの利用

7.開いたペイント画面に先ほどの画像を貼り付けます

貼り付け:右クリックのメニューから[貼り付け]を選ぶか、Ctrlキーを押しながらVキーを押します。

7-1.貼り付けたら、そのままの状態で[トリミング]をクリック。「そのまま」とは、画像周りに青い点線が見えている状態です。貼り付けた後、即[トリミング]をクリックです。

合成画像作成 ペイントの利用 トリミング

ちょうど良い大きさになりましたね。

合成画像作成 ペイントの利用 トリミング結果

8.これをファイルとして保存します。[ファイル]>[名前を付けて保存]>[PNG画像]を選択します。

合成画像作成 ペイントの利用 ファイル保存

ファイル名をつけてお好みの場所に保存します。

「背景色が白の、合成画像ファイル」ができあがったことになります。

これを、上述の「ペコステップを利用して、画像を透過にする手順」にしたがって透過にします。[クリックした色]を選んで白い背景をクリックすると、

合成画像をフリーソフトペコステップで透過にした結果

じゃじゃん!

いくみ
いくみ

複数画像を合わせて透過!できましたね。

「白」を透過にしたくないときもありますね。

例えば、パンダ・牛・シマウマ・ばく、などの動物や、モノトーンのイラストと、何かを合成した場合です。

その場合、上述のステップで四角形の色を変えるときに、「限りなく白に近い色」を選びましょう(うす~いクリーム色など)。分かる方は、「RGBの数値を調整して、違う種類の白」を作るのも良いですね。四角形の色の条件は、その色が「イラストで使われていない」ことです。

牛のイラストを使って実験したときに、四角形を「青」にしたら、ホントにうっすらですけど、すこ~し、青の縁取りが、すこ~し、見えたので、四角形の色は大切です。

いくみ
いくみ

「白」がポイントの動物たちのアイデンティティを守りましょう。

イラスト内の色情報を知りたい ~ カラーコードとRGBの確認方法

これをお求めの方は割とレアだと思います。が、感動してしまったので書きます。

1.ペコステップに画像をドロップしたら、サイドにある[ツール]からアイコンをクリック。[色の取得]というツールチップが出ます。

フリーソフトペコステップでカラーコードとRGBを確認する方法

2.知りたい色にマウスを当てるだけで、その色のカラーコードとRGB情報が画像の上に表示されます。

おわりに

「透過画像の合成」は、例えばブログタイトルの横や左右に、アイコンをワンポイントで入れたい時などに役に立つと思います!

また、自分のプロフィールアイコンに、自分が好きな食べ物を持たせるとか、添えるときも使えますね。

登録なし・無料でこんなに便利なペコステップ!

無料で、こんなに使いやすいってすごいです。まるでCocoon。

いくみ
いくみ

名前とアイコンもかわいいですね。

「ツール」のセクションに、他にも機能がありますので、ぜひ遊んでみましょう。

以下の透過ソフトも紹介しています、高精度・多機能でおススメです!

コメント

タイトルとURLをコピーしました