あなたのウェブページにフラットなスタイルをさりげなく適用するPhotoshopの機能拡張 -Skeuomorphism

先日公開した「フラットなデザインを理解する上で知っておきたい5つのポイント」はデザイナーの技術的な記事でしたが、今回紹介するのはテクニックを必要とせずに、今あなたの手元にあるウェブページのデザインをフラットにするとどんな感じになるのかが分かるPhotoshopの機能です。

このまま使ってもよいし、ちょっと今風のデザインにしてみたい、フラットってどうよという人でも簡単にフラットなスタイルを体験できます。

サイトのキャプチャ

Skeuomorphism

まずは、Skeuomorphismを適用するとどうなるか見てみましょう。
フリーのウェブページのPSD素材に適用してみます。

PSDのキャプチャ

Sleek minimal website PSD template

上記のPSDにSkeuomorphismを適用すると、こんな感じになります。

PSDのキャプチャ

Skeuomorphismを適用

画像が小さいので細部は分かりにくいと思いますが、一番目立つのは打ち出し画像の背景のグラデーションがフラットに変わっています。

もう一つ、試してみます。

PSDのキャプチャ

Polo360 -Portfolio Site PSD Template

Skeuomorphismを適用してみます。

PSDのキャプチャ

Skeuomorphismを適用

これも小さくて分かりにくいので、今度はもう少し大きめの画像も。
まずは、適用前。

PSDのキャプチャ

適用前

適用後がこちら。

PSDのキャプチャ

適用後

背景のグラデをはじめ、エレメントのグラデがフラットになり、エッジもフラットなスタイルのシャープになっています。

Skeuomorphismのインストール

インストールは簡単です。

  1. ページの「Download Extension」から「skeuomorphism.it.zip」をダウンロードし、解凍します。
  2. 解凍した「Skeuomorphism.it.zxp」をダブルクリックします。
  3. 「Adobe Extension Manager」が自動で開くので、指示に従いインストールします。
  4. インストールが完了したらPhotoshopを再起動し、[ウインドウ]-[エクステンション]から「Skeuomorphism」をクリックしパネルを起動します。
Photoshopのキャプチャ

PSDの上にある小さいパネルがSkeuomorphism

アンインストールする時は、「Adobe Extension Manager」から「削除」ボタンをクリックしてアンインストールします。

Skeuomorphismの使い方

使い方も簡単です。
デザインしたPSDを開き、パネルの「Work the magic」ボタンをクリックするだけです。

Skeuomorphismのキャプチャ

ボタンをクリックするだけで、フラットなスタイルに

※適用する際は、デザインを変更するので必ずバックアップをしてから実行した方がよいと思います。

top of page

©2017 coliss