Hope is a Dream. Dream is a Hope.

非公開ブログは再開しました。

Adobe Photoshop は高い!! UI素材をフリーでやる方法 (psdファイルを開く方法)

いろいろと開発をしていると、かならず訪れるユーザーインターフェイス

システムを作っている時とはまた一味違ったセンスが要求されます。

苦手です。

そこで、テンプレートや、フリーの素材などを利用している方法もあります。

僕がよく参考にするサイトはこちら

Panda

Panda

UIだけでなく、ロゴなどがあり種類が豊富です。

このPandaはGoogleChromeの新規タブページに設定できるので、デザインの流行りを楽しむために設定していると楽しいです。

deviantART

Black and red UI Kit

Black and red UI Kit by neme313 on deviantART

素材の編集

これらのサイトから素材をダウンロードできます。

しかし、たいていのファイルはPSDファイルというAdobe Photoshopのファイルのため、専用ソフトがないと利用できません。

f:id:hope_is_dream:20100918192300j:plain

恐らく皆様ご存知かと思いますが、Photoshopは高価です。

そこでフリーソフトで扱ってみようというのが今回のネタになります。

扱うソフトはこちら。

Paint.NET!!

Paint.NET

本家ページ

Paint.NET - Free Software for Digital Photo Editing

f:id:hope_is_dream:20141114094836j:plain

ダウンロードは窓の杜から

paint.net - 窓の杜ライブラリ

インストールします

f:id:hope_is_dream:20141114095101j:plain

特に問題なくインストールできました。

f:id:hope_is_dream:20141114095258p:plain

さてドキドキの初期起動。。

f:id:hope_is_dream:20141114095324p:plain

GIMPに近いインターフェイスデザインですが、どこか気持ちいい。これは好きになれそうな予感。

次に、PSDを読み込むためのプラグインを入れます。

手順はありますが、簡単ですので安心してください。

f:id:hope_is_dream:20141114095537j:plain

こちらも窓の杜にありました。

窓の杜 - 【REVIEW】「Paint.NET」でPSD形式のファイルを編集できる「Photoshop file plug in」

リンクから

f:id:hope_is_dream:20141114113742j:plain

Downloadボタンでダウンロードできます。

f:id:hope_is_dream:20141114113758j:plain

ダウンロードファイルにあるPhotoShop.dllファイルを

f:id:hope_is_dream:20141114113825p:plain

paint.NET内のFileTypesフォルダ内に

f:id:hope_is_dream:20141114113943p:plain

コピーします

f:id:hope_is_dream:20141114113959p:plain

これで完了です。

paint.netでPSDファイルを読み込んでみる

今回はこちらのファイルを読み込みます。

f:id:hope_is_dream:20141114114354j:plain

Simple UI Kit by slayerD1 on deviantART

paint.netを開いて、ファイルから開く

f:id:hope_is_dream:20141114114521p:plain

ちゃんと表示されるかドキドキ

f:id:hope_is_dream:20141114114616p:plain

うん。

ちょっと違うかな。

まぁフリーですのでここらへんで。