グランジ加工の効果的な使い方とその実用例

グランジはデザインに素朴さやリアルな見た目にするテクスチャ加工です。

 

汚れたような背景、粗っぽいエッジ、手書きの落書き感、苦悩を表す際のフォントなど、良いとされるウェブデザインにとらわれないようなたくさんの要素があります。そして、求めている奇妙さになるようにグランジをどうまとめていくかにルールはありません。

 

一般的に、グランジデザインとは、ダークな感じにしたり、粗々しくて砂っぽさを感じるデザインをすることを想像する人もいますが、多くのデザイナーはもっと曖昧な表現でグランジデザインを使用します。このデザインには、ウェブサイトやデザインに他のものを超えるエッジを与えると考えられる種類がいくつかあります。

 

グランジ加工に関して、覚えておく必要のあるガイドラインがあります。そのガイドラインを守っていかないとむやみに使いすぎてしまうかもしれません。どんなデザインにおいても、デザイナーはグランジ加工を使用する上で適切な時や場所を理解する必要があります。相手に届けたいメッセージ文に補足をしたりして内容に価値を加えていかなければなりません。

 

グランジデザインには、ブログ、衣料品店、音楽ページ、または都会の風景、街の本質、たくさんの要素を反映したいウェブサイトやビジネスのようなさまざまな目的に対して機能します。しかし、このように安全な場所に対してこの効果を使うべきタイミングや場所の判断を誤ることがあります。グランジ加工を使って利益を得るには、なぜグランジ加工は日常的に使われ、どんな問題を解決してくれるのかを理解する必要があります。

 

グランジは主観的なもの

 

今ではグランジ加工は、必ずしも安全策とは言えません。それは大胆な動きで、相手の注意を確実に向かせる目立ったデザインです。しかし、もし気に入らなかったり、すぐに嫌いになってしまったとしたら、それはかなり主観的なものです。そこに普通中間地点はありません。

 

だから、もし自分のウェブサイトにこのデザインを取り入れるリスクをとることに気が進まないのならば、グラフィクスは相手がどんなリアクションをするかをという基本的な考えを持つことを確かめることができます。

 

しかし、もしブランドの持つ独自性や、それを最もよく補うグランジ加工の妥当性を信じるならば、学ぶべき受け入れられるデザインです。同じ理由で、この順序を追った手順書で、フォトショップを使い、どのように正しくグランジ加工をしていくか検討します。

 

1.新しい画像を作る

 

 

新しいファイルを開き、幅1280px、高さ867pxの画像サイズを配置します。背景色を黒に変更します。それから使いたいデザインの土台となる画像を開きます。画像を開いたら、ctrl+Aを押してすべてを選択し、ctrl+Cでコピー、最後にctrl+Vを押して空いている新しいドキュメントに貼り付けします。そして、ctrl+Tで変形ツールを立ち上げ好きなところに移動したりサイズを変えたりします。

 

2.すべてのテクスチャを追加し、マスクを調整する

 

テクスチャによっては、元の画像に異なる効果をもたらします。さらに、デザインをより身近に感じられる高いコントラスト感を作ります。テクスチャは作るか、ネットから手に入る様々な種類のものを選ぶことができます。テクスチャ管理のために、簡単かつ効果的な、ある程度制限されたツールを使いましょう。操作するツールの大部分はシンプルな形、レイヤーマスク、描画モードがあります。

 

3Dテクスチャを使う

 

 

ベースの画像に生を与えるようなテクスチャを使うことにおいて、3Dテクスチャは効果的です。デザインに特有の見た目と深みを作り出します。3Dテクスチャは、イラストレーターで作ったり、ネットから手に入るものをダウンロードしたりすることができます。

 

分けたレイヤーに3Dテクスチャ画像を置き、ベースの写真レイヤーの上に重ねます。ブレンドツールを開き、スクリーンのドロップダウンメニューから描画モードにします。不透明度を67%に設定します。そして画像を覆うような形を作るために長方形ツールを使います。長方形の色を選択します。カラーコード#000834の塗りつぶしを使用しました。

 

このあと、描画モードでオーバーレイを選択し、不透明度を100%にします。そして前に使ったテクスチャを繰り返し、形を覆うように置きます。描画モードを通常にし、不透明度を29%に設定します。

 

メタルテクスチャを利用する

 

 

メタルで仕上げると硬さや力強さがあります。そのテクスチャを使うことで、グランジ加工の特有的な審美さや粗さを加えます。

 

ネットからメタルテクスチャ画像をダウンロードしたあと、このテクスチャを開き、デザインの中で選択された部分にのみコピーして貼り付けします。それから描画モードのオーバーレイを使い、不透明度を25%に下げます。テクスチャの位置をいろいろ試したりして、より明るい場所で試してみてください。

 

グランジテクスチャレイヤーを追加する

 

 

ここまでで、グランジ加工のためにいくつかレイヤーを加えたベースとなる画像を準備してきました。これからベースとなる画像にグランジテクスチャを合わせていきます。ネットからグランジ加工の画像をダウンロードし、レイヤーを分けて開きます。

 

まず初めに、別の場所に画像を切り取り、それぞれ別のレイヤーを作ります。次に、ドラッグして強調するためにマークツールでその部分を作ります。cntl+xで選択エリアを切り取り、cntl+vでデザインの上に貼り付けます。そしてこれらの切り取ったレイヤーに、描画モードをオーバーレイに、不透明度を41%に設定します。

 

そしてそれぞれのレイヤーにマスクを追加します。こうするためには2つのアプローチがあります。レイヤーマスクを読み込むオプションを参照します。すべての領域を表示をクリック、または長方形のアイコンのレイヤーマスクをクリックします。

 

次に、キーボードのショートカットBを使ってブラシツールにして,、自然な感じに変則的になっていくようにこれらのマスクに色をつけていきます。カラーパレットは黒と白に設定したままにします。消すときは黒に入れ替え、再び描きたいときは白にします。

 

3.テキストを追加する

 

 

テクスチャを全て追加したら、それらを合わせ、テキストを置ける場所の用意と構造にフォーカスしていきます。キーボードのショートカットUの長方形ツールを使って水平な棒を作ります。それを写真レイヤーの上に置き、うまく画像に馴染むように形を調節します。こうするために、通常の描画モードを使い、不透明度を100%に設定します。

 

これから前に作った3Dテクスチャレイヤーで別の形を描きます。一番良いのは、描画モードを乗算に変更し、不透明度を100%に設定します。このステップは強制ではありませんが、こうすることでデザインに深みや美しさが確実に加わります。

 

影を落とす効果を加えていきます。レイヤー上で右クリックで、レイヤー効果を選択し、ドロップシャドウを選択します。デザインによりますが、微調整をします。ドロップシャドウは10px、幅は0%、サイズは0pxで設定します。

 

4.ブラシでテクスチャを作る

 

 

矛盾と生の美で知られるデザインでも、一貫性という点ではかなり違っています。一般的に、もしグランジ加工でポスター全体を作っていたら、アイコンにも同じグランジ加工を組み合わせたくなるだろう。

 

フォトショップで使えるテクスチャブラシを使ってテクスチャを作ります。まず新しいドキュメントを作ります。150px×150pxにリサイズします。まず、テクスチャブラシのひとつを使って線を描いていきます。次にフィルターアイコン上でクリックし、その他を選択、最後にオフセットで複製します。オフセットをクリックしたら、水平方向に50px、同じように垂直方向に50pxに設定します。

 

まだ手をつけていないエッジ部分を修正していきます。ゴムスタンプツールかスポット修復ブラシツールを使います。これら2つのツールで修正をすることができます。すべて整えたら、ctrl+Aを押してすべて選択して編集からパターンを定義を選択します。パターンに名前をつけておけば、使いたいときパターンパネルからいつでも使うことができます。

 

5.ソーシャルアイコンにグランジを追加する

 

 

前に作って保存したパターンがあるので、ネットからソーシャルメディアアイコンかロゴをダウンロードします。フォトショップファイルにインポートしたら、形を設定し、パターンの適用をクリックします。レイヤーを右クリックでレイヤー効果を参照し、パターンオーバーレイを選択します。各レイヤーで不透明度100%、描画モードを通常に設定します。そしてデザイン全体に用いたのと同じグランジ加工が、アイコンにも施されていることがわかります。

 

6.タイポグラフィーを利用する

 

 

そろそろ素晴らしいグランジ加工の施されたデザインができていると思います。しかし、さらにもう一歩踏み込み、タイポグラフィーデザインの基本を守ることでより良くなります。グランジ加工を見てきているので、グランジフォントのタイトルやメニューのフォームにテキストを加えることが理想的です。

 

まず、フォトショップにすでに入ってるフォントを使います。次にデザインにユニーク感を足してくれるグランジフォントについてネット検索します。フォントスタイルとは別に覚えておくべきことは、デザインに乗せるテキストの色です。メタリックとどんよりした背景を使っているので、明るくて強い色だとハイコントラストなのも相まって背景に対してテキストを引き立てます。

 

用途：

 

多くの企業では商品やサービスのプロモーション、販促にグランジ加工を採用し利用しています。以下に、いくつかその例を挙げていきます。

 

1.映画のポスター：

 

 

グランジ加工は荒々しく整えられていないような見た目なので、よく苦悩や暗さを反映するデザインと考えられています。これはホラージャンル映画のポスターに利用するのにとても効果的です。上のような画像のポスターでおおいに利用されます。

 

2.音楽：

 

 

コンセプトとしてのグランジの起源は音楽からきています。ロックミュージックジャンルは、1980年代半ばに登場したサブカルチャーになりました。それはシアトル近郊のアングラなミュージックシーンに革命をもたらしました。上のアートワークはパール・ジャムというバンドのものです。テンというアルバムで使われていました。多くの雑音的背景の中でどのようにグランジテクスチャを使っているのかがわかります。

 

3.ウェブサイト：

 

 

多くのウェブサイトでは、最近ウェブサイトのデザインにグランジ加工を使い始めています。上の画像はSprock Houseのもので、サービスを作るウェブ設計サービスに応じるウェブサイトです。サイトのオーナーは自分たちのグランジ加工のレイアウトを使っています。荒っぽく、アンティークさを感じさせ、市場において他のウェブサイトにエッジを与えます。これはオーナーが、競争相手から自分のウェブサイトを目立たせることができる賢いやり方です。

 

この手順書はこれから新しくフォトショップを使っていく人もソフトウェアに慣れている人でもどんな人にでも適していますが、ときどき助けを必要とする点があると思います。グランジ加工は一般的に、良いデザインという普遍的な考えから離れていて際立ちます。しかし、特定のムードや文化を象徴しているので一定の人気があります。他にはないデザイン手法として使われ、さらに他のデザインパターンに加えられていきます。

 

グランジ加工を作ることに関して使い方に正しさや間違いはなく、出していく利点があります。基礎の部分に関して明確にし、上記で述べたステップをきちんとした回数行うと、フォトショップで新しいプロジェクトを開いたり、挑戦と失敗を繰り返して、やりたいグランジを見つける新しいやり方を試してみてください。