Web サイトやブログ、アプリケーションのデザインに利用するピクトグラムアイコンを探していると、拡張子が .psd のファイルで配布しているサイトも多いです。がんばって検索して気に入ったアイコンを見つけることができたのに、Photoshop を持っていないために諦めた経験あるかと思います。
ご安心ください。このファイルは GIMP で開くことができ、編集して PNG ファイルなどでアイコンとして取り出して保存することが可能です。
素材
今回、ダウンロードして加工する素材はこちらのサイトから頂戴しました。
Mirrored Twins – 208 free PSD icons – Freebiesbug
208 個ものピクトグラムアイコンがセットとしてダウンロードできます。画面を下のほうへスクロールし、「Download freebie」ボタンをクリックしてください。ZIP ファイルがダウンロードできるので、解凍してください。
開く
デスクトップなどに置いてある GIMP のショートカットに、ダウンロードした PSD ファイルをドラッグ＆ドロップしてください。
こんな感じで開くことができると思います。
編集
一枚の画像のように見えますが、レイヤーダイアログで確認すると、タイトルや背景、各アイコンごとにレイヤーが分けられています。
試しにひとつアイコンを選択してみます。レイヤーダイアログで「shape 700」を左クリックしてみてください。
対象のアイコンが点線の枠で選択された状態になります。
この状態でメニューの「選択」→「コピー」してください。
再びメニューの「選択」→「クリップボードから生成」→「画像」とします。
すると背景が透明のアイコンだけが抜き出された画像を生成することができます。
編集
このままで問題がなければ、この後の保存のところまで読み飛ばしてください。多くの場合、大きさなどを変更することと思いますが、今回は色を変更してみます。まずは「スポイト」ツールに切り替えます。
白から赤に変更してみましょう。真ん中あたりの白い部分をスポイトでクリックしておきます。「描画色」が変更前の色になることを確認してください。
メニューで「色」→「カラーマッピング」→「色交換」を選択します。
「色交換」ダイアログが表示されるので、「交換色」で変更したい色を設定します。
今回は赤に変更したいので「HTML 表記」に「ff0000」と入力し、エンターキーを押してください。
最後に OK ボタンを押します。
色が変われば成功です。
保存
メニューの「ファイル」→「名前を付けてエクスポート」を選択します。
「画像をエクスポート」ダイアログで拡張子を .png にして「エクスポート」ボタンを押せば、PNG ファイルで保存できます。
これをレンタルサーバーにアップロードして CSS ファイルで読み込めば、Web サイトやブログのデザインに活用することができます。
ちなみに、GIMP では編集した画像ファイルを PSD 形式でエクスポートすることもできます。先ほどの「画像をエクスポート」ダイアログで拡張子を .psd にしてエクスポートするだけです。
相手が Photoshop しか持っていない場合などにご活用ください。
Comment