FC2ブログ

ダウンロードしたPSD形式のアイコンファイルをGIMPでブログに貼り付けられるようにするには

 フリーのHP素材を紹介しているサイトなどで綺麗なアイコンがお勧めされていることなどがあるんだけど、多くの場合が「PSD」ファイルであることが多い。これをブログに貼り付けるまでに少しはまったので、どうやってGIMPで扱ったかメモしとく。
PSDファイルとは

 元はAdobe Systems社のPhotoshopで使われるファイル形式のようだ。レイヤー・パス・解像度などの編集情報が埋め込まれたファイルであり、一般的にPhotoshopで作成したアイコン画像やブログの背景に使うパターン画像を公開するとき、この形式で配布するのがしきたりになっているらしい。GIMPでもインポート・編集できる。

 他所で紹介されていたフリーのPSDアイコンファイルを公開してくれているサイトからPSDファイルをダウンロードして使ってみる。各サイトにライセンスに関する説明が書いてあるので確認してから使ってみてほすい。

 まずはダウンロード。だいたいがZIPなどで圧縮されているので、解凍する。一応ウィルスチェックも忘れずに。解凍したらPSDファイルがでてくると思うので、GIMPのメイン画面にドラッグ&ドロップか、メニューの「ファイル」→「インポート」からお目当てのPSDファイルを選択してやるとあっさりと開ける。ココから編集開始だぴょん。

PSDファイルの読み込み
アイコン画像の背景を非表示にする

 アイコンのPSDファイルの多くがそれぞれのアイコンレイヤーと背景レイヤーを持っている。で、アイコンを使えるように編集するのに背景レイヤーがあると見づらいので、背景を非表示にしてしまおう。まずは、「レイヤー」ウィンドウから「背景」のレイヤーを探し出す。

背景レイヤーを探す

「目玉」マークを左クリックしてやると非表示になり、背景が市松模様になる。

背景が市松模様
使いたいアイコンを選択

 ここから使いたいアイコンを選ぶ作業になる。アイコンはひとつひとつがレイヤーをもっている。使いたいアイコンを決めたら「レイヤー」ウィンドウから目当てのアイコンのレイヤーを選んで左クリックで選択。

 PSDファイル全体を表示したままでアイコンが小さすぎて見づらいときは、「ツールボックス」ウィンドウから「ズーム」を選択。次にメイン画面をアクティブにし、「Control」キーを押しながらマウスのホイールをくるくるすると、大きくなったり小さくなったりする。

 アイコンレイヤーを「レイヤー」ウィンドウで選択した後、メインウィンドウをアクティブにしCtrl+Aを押すと、アイコンレイヤー全体を選択してくれる。この状態でCtrl+Cでクリップボードにコピーする。
アイコンをPNG画像で保存する

 メイン画面のメニュー「編集」→「クリップボードから生成」→「画像」としてやるとアイコンがひとつだけの画面が立ち上がる。

アイコンをpngで保存

 ここまできたら、メイン画面のメニュー「ファイル」→「エクスポート」で透過画像としてpngかgif形式でエクスポートしてやればよい。

 基本的なアイコンはあちこちでフリーで使えるものがあるので、自分で作らなくても済んでしまいそうだな。公開してくれている人たちに感謝。いろいろ探してみてください。





参考URL

psd形式とは - はてなキーワード
http://d.hatena.ne.jp/keyword/psd%B7%C1%BC%B0

私がweb制作でよく使うサイト47+α 作業ごとリスト - WEBCRE8.jp
http://webcre8.jp/collect/webcreate-important-website.html

Photoshop VIP ? 商用可、350個のシンプルピクトグラム無料アイコン素材セットFree Brankic1979 Icon Set
http://photoshopvip.net/archives/36844

ミニマリズムが美しい40のアイコン&ピクトグラム素材集 | SEO Japan
http://www.seojapan.com/blog/40-minimal-icon-sets

200を越えるアイコンが揃ったBootstrap向けWeb Font「Font Awesome」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
http://www.moongift.jp/2012/06/20120615-3/

綺麗にデザインされたピクトグラムアイコン100個セット:phpspot開発日誌
http://phpspot.org/blog/archives/2012/06/100.html

Dribbble - Free 16px Broccolidryiconsaniconsetitisfullof…icons by Visual Idiot
http://dribbble.com/shots/587469-Free-16px-Broccolidryiconsaniconsetitisfullof-icons

Glyphish ? Great icons for great iPhone & iPad apps
http://glyphish.com/

GIMP2 で切り抜き、背景を透明にする手順 - フリーウェア - 教えて!goo
http://oshiete.goo.ne.jp/qa/4117503.html

GIMPの前景部分選択を使って写真中の人物を切り抜く方法 ≫ GIMPの基本 | GIMP思い込みチュートリアル(GIMPの使い方)
http://gimp.blog.shinobi.jp/Entry/114/

GIMP MANUAL*manual*基本
http://www.geocities.jp/gimpmanual/noframe03.html

高機能画像処理フリーソフトのGimpで画像の背景を透過させる手順 | Businesshacks MEMO
http://businesshacks.jp/internet/wordpress/%E9%AB%98%E6%A9%9F%E8%83%BD%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E3%83%95%E3%83%AA%E3%83%BC%E3%82%BD%E3%83%95%E3%83%88%E3%81%AEgimp%E3%81%A7%E7%94%BB%E5%83%8F%E3%81%AE%E8%83%8C%E6%99%AF%E3%82%92/

GIMPで画像を切り抜く(その1) - みんなのIT活用術
http://d.hatena.ne.jp/kadokura/20070912/p1

GIMPで画像を切り抜く(その2) - みんなのIT活用術
http://d.hatena.ne.jp/kadokura/20070914/p1

関連記事
このエントリーをはてなブックマークに追加

tag : GIMP フリーソフト FC2 ブログ PSDファイル アイコン

コメントの投稿

非公開コメント

自己紹介
環境:
    Windows XP SP3
    Sleipnir 2.9.10
    StrawberryPerl 5.14.2
    MySQL 5.5.16
で遊んでます。
最新記事
最新コメント
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
タグ

FC2 フリーソフト ブログ Perl GIMP コマンドプロンプト Web::Scraper ソースコード スクリプト クラスセレクタ スタイルシート シンタックスハイライト Vim HTML シフトJIS MySQL DBI while foreach preタグ USBメモリ Sleipnir WindowsXP ツイタマ cpan モジュール Ubuntu Linux ツイッター ソーシャルブックマーク 初心者 ロゴ VirtualBox PSDファイル アイコン ping送信 アクセスアップ トップ画像