あなたのウェブページにフラットなスタイルをさりげなく適用するPhotoshopの機能拡張 -Skeuomorphism
Post on:2013年6月5日
sponsors
先日公開した「フラットなデザインを理解する上で知っておきたい5つのポイント」はデザイナーの技術的な記事でしたが、今回紹介するのはテクニックを必要とせずに、今あなたの手元にあるウェブページのデザインをフラットにするとどんな感じになるのかが分かるPhotoshopの機能です。
このまま使ってもよいし、ちょっと今風のデザインにしてみたい、フラットってどうよという人でも簡単にフラットなスタイルを体験できます。
まずは、Skeuomorphismを適用するとどうなるか見てみましょう。
フリーのウェブページのPSD素材に適用してみます。
Sleek minimal website PSD template
上記のPSDにSkeuomorphismを適用すると、こんな感じになります。
Skeuomorphismを適用
画像が小さいので細部は分かりにくいと思いますが、一番目立つのは打ち出し画像の背景のグラデーションがフラットに変わっています。
もう一つ、試してみます。
Polo360 -Portfolio Site PSD Template
Skeuomorphismを適用してみます。
Skeuomorphismを適用
これも小さくて分かりにくいので、今度はもう少し大きめの画像も。
まずは、適用前。
適用前
適用後がこちら。
適用後
背景のグラデをはじめ、エレメントのグラデがフラットになり、エッジもフラットなスタイルのシャープになっています。
Skeuomorphismのインストール
インストールは簡単です。
- ページの「Download Extension」から「skeuomorphism.it.zip」をダウンロードし、解凍します。
- 解凍した「Skeuomorphism.it.zxp」をダブルクリックします。
- 「Adobe Extension Manager」が自動で開くので、指示に従いインストールします。
- インストールが完了したらPhotoshopを再起動し、[ウインドウ]-[エクステンション]から「Skeuomorphism」をクリックしパネルを起動します。
PSDの上にある小さいパネルがSkeuomorphism
アンインストールする時は、「Adobe Extension Manager」から「削除」ボタンをクリックしてアンインストールします。
Skeuomorphismの使い方
使い方も簡単です。
デザインしたPSDを開き、パネルの「Work the magic」ボタンをクリックするだけです。
ボタンをクリックするだけで、フラットなスタイルに
※適用する際は、デザインを変更するので必ずバックアップをしてから実行した方がよいと思います。
sponsors
