写真補正・画像作成
デジカメの失敗写真とか、ちょっとした手間で写真素材をあっちゅう間に格好よく変えてしまうフォトショップの使い方を解説。フォトショップお絵かき講座も一緒にどうぞ。

写真補正・画像作成の最新記事

写真補正・画像作成

フォトショップでWEB用の透過アイコンを作ってみよう

対応バージョン : 
難易度 : 


ここでは、自作した写真やイラストをウェブ用に加工して、アイコンや背景にしていく方法を解説します。いくつかやり方があるんですが、多分!この方法が一番簡単です。

一般的な画像と、ウェブ用の画像で最も違うのが『透過』の有無です。

読んで字のごとく、透明にして画像のバックの色や模様なんかを通過させることをさしますが、普通に画像を画像のまんまホームページやブログ上に貼り付けるとバックの色までも四角い形で表示してしまうんです。例えば、こんな画像をアイコンとして使いたいとしますよね。

これをこのまんまアイコン用素材としてHPに貼り付けると、周りの白バックの部分まで表示されてしまうんです。

これではホワイトバックのHPでしか使用できないですよね。そのため、保存する前に『透過処理』を施してあげる必要があるんです。やり方は非常に簡単。難しく考えずに、さくさくっと作っていきましょう。

まずは『ファイル』から『新規作成』を選んで、縦横の長さを指定。適当に100×100ピクセルくらいで開いてみます。

ココに素材に使いたい画像なりイラストなりを描いていくわけです。今回は丸っこいアイコンなので、ツールボックス右上にある『楕円形選択ツール』を使用します。選択ツールが長方形選択ツールになっていたら、カーソルを合わせてクリックしてみてください。ツールが出てきます。こいつを使って、先ほど開いたパレット上に円形の選択を行います。

好きな色で塗りつぶして、『ブラシツール』を使って

塗り潰し色よりも薄く明るい色
塗り潰し色よりも深く暗い色

の2色で左上と右下とを彩色。グラデーションをかけてあげます。(ブラシのサイズは大きめ100から200ピクセルぐらいで)グラデーションツールを使用しても良いんですが、暗い部分を作るのは出来ないため、立体感のある画像なら上記方法で描いたほうがいいと思います。

さて、ココからがようやく本題。いよいよ、背景を透過します。まずは『自動選択ツール』を使用して、背景色を選択してください。

つぎにメニューバーの『ヘルプ』から・・・そう。意外な感じするでしょうが『ヘルプ』から、『透明画像の書き出し』を選択。

『透明にする範囲を選択中』を選択。次へ・・・オンライン用とプリント用と出てきますのでもちろんオンライン用を選択して、gif形式で保存を選択。カラーがどうの8bitがどうのといろいろ言ってきますが、このウィザードで作成する場合、自動的にオンライン(つまりweb用に)最適なように調整してくれますので、『次へ』の連打でオッケー!すべて終わってウィザードが閉じれば、完了です。

ね。すごく簡単でしょ? photoshop画面上で見ると異様に画像が荒いように感じるかもしれませんが、これは画像をwebで表示しやすくするために画素、チャンネルを削除、または差っ引いてしまったためで、一瞬『大丈夫か?荒すぎないか?』と思うかもしれませんが、HP上で表示してやるとそーでもないのであまり気にしなくていいです。

しかしながら、このままではあまりにも画像としてのデータ量が大きく、HPに載せようとするとでっかく表示されすぎてしまいます。ここで登場するのが『イメージ』メニューの中にある『画像解像度』です。解像度を手動でいじれる便利な機能ですので、これを活用していきます。解像度は、アイコンなら25×25から50×50くらいまでのサイズ。タイトルメニューなどなら100×100くらいまでで、好きなサイズに調整します。

解像度の調整が済んだら、必ずHP上で表示確認をしてみて、気に入ったサイズになるまで何度かサイズの調整を行ってくださいね。

画像加工技術の応用で、背景を飛ばした写真を使って色々なアイコンやバーを作ることも出来ます。要は背景を選択して、透明化してやって、解像度変更でできあがりってな訳です。


この記事と関連性の高いエントリー