PSDアイコンファイルの使い方

108 High Resolution Dark Denim Social Media Icons By: webtreats

無料で使えるアイコンファイルを紹介している記事を見てファイルをダウンロードしてみたが、解凍すると「.psd」というファイルがあり、どうやって使用するのかがまったくわからなかった経験はありませんか?

私も最初は使用方法がまったくわからず仕方なく、別のpngファイルなどで配布されているアイコンを探し使用した経験があります。

今回はそんなPSDファイルからPNGファイルに変換するための手順を紹介します。

PSDアイコンファイルの使い方
  1. PSDファイルを使う前の準備
  2. PSDファイルの使い方

PSDファイルを使う前の準備

PSDファイルとは、Photoshopで利用される画像ファイルのことでレイヤーや解像度といった独自の情報を持ったファイルのため開くためには専用のソフトが必要となります。

Photoshopを持っていれば一番なのですが、高価で私も持っていないため今回はフリーの「GIMP」を使用します。

GIMP(ギンプ)はPhotoshop以上ということは無いですが、フリーでPhoteshopに負けないほど多機能な画像編集ソフトです。

前にインストール方法の記事を書いたので、インストールするときは参考にして下さい。

PSDファイルの使い方

まずは今回使用するPSDファイルをダウンロードします。

1.PSDファイルのダウンロードが完了したら、GIMPでファイルを開きます。
psd1
PSDファイルにはレイヤーという情報を持っています。
レイヤーとは背景や画像1つ1つパーツを描いた部分のことで、このレイヤーを重ね合わせることで1つの画像が作られています。

GIMPの右側の目のアイコンをクリックしていくことで、レイヤーを非表示に出来ます。
また、目の隣の画像部分をクリックするとレイヤーを選択出来ます。
psd2
※背景色と右のアイコンの一部を非表示とした場合

2.上では画像を非表示にしましたが、実際には非表示にする必要はなく、必要なレイヤーのコピーを行えば良いだけです。

■コピーの方法
①レイヤー部分の画像をクリックして必要なアイコンを選択します。
②「編集」>「コピー」をクリックします。
psd3

3.次に「編集」>「クリックボードから生成」>「画像」をクリックします。
psd4
4.「画像」をクリックすると別ウィンドウで選択した部分のみが開かれますので、「ファイル」>「エクスポート」を選択します。
psd5
5.ファイル形式をPNGに選択し「エクスポート」ボタンをクリックします。
psd6
6.必要な情報にチェックを付け、「エクスポート」ボタンをクリックします。
psd7
これでPDS→PNGの変換が完了です。最終的にはこのような画像が生成できます。
icon
divider

Trackback URL

http://webnonotes.com/design/psd/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>