GIMPでPSDファイルを編集してみる

 Web サイトやブログ、アプリケーションのデザインに利用するピクトグラムアイコンを探していると、拡張子が .psd のファイルで配布しているサイトも多いです。がんばって検索して気に入ったアイコンを見つけることができたのに、Photoshop を持っていないために諦めた経験あるかと思います。

 ご安心ください。このファイルは GIMP で開くことができ、編集して PNG ファイルなどでアイコンとして取り出して保存することが可能です。

素材

今回、ダウンロードして加工する素材はこちらのサイトから頂戴しました。

208 個ものピクトグラムアイコンがセットとしてダウンロードできます。画面を下のほうへスクロールし、「Download freebie」ボタンをクリックしてください。ZIP ファイルがダウンロードできるので、解凍してください。

20151027_1

開く

デスクトップなどに置いてある GIMP のショートカットに、ダウンロードした PSD ファイルをドラッグ&ドロップしてください。

20151027_2

こんな感じで開くことができると思います。

20151027_3

編集

一枚の画像のように見えますが、レイヤーダイアログで確認すると、タイトルや背景、各アイコンごとにレイヤーが分けられています。

20151027_4

試しにひとつアイコンを選択してみます。レイヤーダイアログで「shape 700」を左クリックしてみてください。

20151027_5_2

対象のアイコンが点線の枠で選択された状態になります。

この状態でメニューの「選択」→「コピー」してください。

20151027_6

再びメニューの「選択」→「クリップボードから生成」→「画像」とします。

20151027_7

すると背景が透明のアイコンだけが抜き出された画像を生成することができます。

20151027_8

編集

このままで問題がなければ、この後の保存のところまで読み飛ばしてください。多くの場合、大きさなどを変更することと思いますが、今回は色を変更してみます。まずは「スポイト」ツールに切り替えます。

20151027_9

白から赤に変更してみましょう。真ん中あたりの白い部分をスポイトでクリックしておきます。「描画色」が変更前の色になることを確認してください。

20151027_10_2

メニューで「色」→「カラーマッピング」→「色交換」を選択します。

20151027_11

「色交換」ダイアログが表示されるので、「交換色」で変更したい色を設定します。

20151027_12

今回は赤に変更したいので「HTML 表記」に「ff0000」と入力し、エンターキーを押してください。

20151027_13

最後に OK ボタンを押します。

20151027_14

色が変われば成功です。

20151027_15

保存

メニューの「ファイル」→「名前を付けてエクスポート」を選択します。

20151027_16

「画像をエクスポート」ダイアログで拡張子を .png にして「エクスポート」ボタンを押せば、PNG ファイルで保存できます。

20151027_17

これをレンタルサーバーにアップロードして CSS ファイルで読み込めば、Web サイトやブログのデザインに活用することができます。

 ちなみに、GIMP では編集した画像ファイルを PSD 形式でエクスポートすることもできます。先ほどの「画像をエクスポート」ダイアログで拡張子を .psd にしてエクスポートするだけです。

20151027_18

相手が Photoshop しか持っていない場合などにご活用ください。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP