PictBearで透過グラデーションを作成する方法

投稿者: | 2013年11月22日

知っている人にとってはなんてことはないですが、知っておくと見た目のクォリティが格段にアップする「透過グラデーション」の作成方法を説明したいと思います。

■PictBearのダウンロード・インストール

今回は「PictBear」というツールを使います。GIMPやPhotoShopでも同じことはできますが、私が長年使っているツールということでこれを選びました。

ダウンロードはここからできます。

インストーラ形式なので、ダイアログの指示に従っていけば簡単にインストールできると思います。

■透過グラデーションを作る

001

まず新規作成時に、背景色を「透明」にします。

002

そうするとチェック柄(=透明)の何もない状態となります


003

パレットに同じ色を設定します(ここでは「白色」にしています)


004

RGBAの値のAの部分(一番下)のツマミを左端まで持っていきます。そうすると色が透明となります。

005

さらにピューパネルから「グラデーション>不透明度を指定」をTrueに設定します

006

そして「グラデーションツール」を選択し、グラデーションをかけたい方向にドラッグします


007

これで白色と透過色のグラデーションができます


008

これをどのように使うのかというと、例えばこのような背景(「ぐったりにゃんこのホームページ」さんからお借りした素材です)に重ねあわせます。


009

上下に重ねてみました。ちょっとやり過ぎな気もしますが、白いもやがかかり独特の空気感が出ました。


021

他にもこのような黒色の円形のグラデーションを作り、


022

ゲーム画面に重ねると、暗闇を表現することができます。

■既存の画像を透過グラデーションする

command

応用として、よく見かけるのがカーソルなどのインターフェースをグラデーションするテクニックです。

さっそくこのようなカーソル画像を作ってみたいと思います。

014

まずは透過なしの画像を作成します。


015

画像を読み込んだら、レイヤーを新規追加して下に移動します。

013

パレットを「黒色」と「白色」にします(透過は不要です)


012

そうしたら、透過グラデーションする画像のレイヤーを選択して、「マスクの編集」ボタンを押してマスクモードにします。


016

そして「グラデーションツール」を選択して、末端部分にグラデーションを適用します。

017

そうするとこのようになります。マスクで塗られている部分が元の色となっています


018

この状態で「イメージの編集」ボタンを押してもとに戻します。


019

そうすると、マスクで塗られている部分が選択状態になっています。


020

この状態で「Delete」キーを押すと、画像に透過グラデーションが適用されます。


cursor

完成画像を置いておきます。