Ownedmedia ウェブ制作に役立つコンテンツを発信中!

ワークショップ 2018.05.22

【デザインワークショップ】vol.17 ホログラムステッカーのようなデザインを作ってみる

Tags: ,,

今回のデザインワークショップは、お菓子のオマケでよく見かけるホログラムステッカーのようなデザインを作っていきたいと思います。背景素材としても探せばあるかもしれませんが、今回は実際にPhotoshopを使ってイチから作っていきたいと思います。

 

1. まずはPhotoshopを立ち上げて、ホログラムステッカーの元になる要素を作っていきます。適当なサイズでキャンバスを新規作成します。最後にはパターン化するのでそこまで大きくなくていいでしょう。だいたい50px〜200pxの間でいいかと思います。

【デザインワークショップ】vol.17 ホログラムステッカーのようなデザインを作ってみる

 

2. 次に水平と垂直方向の中心にそれぞれガイドを作成しておきます。こうすることで正確にパターンが作成でき、仕上がりも綺麗になります。

【デザインワークショップ】vol.17 ホログラムステッカーのようなデザインを作ってみる

 

3. 次にホログラムのベースになるレイヤーを新規作成します。

【デザインワークショップ】vol.17 ホログラムステッカーのようなデザインを作ってみる

 

4. 先ほど作成したベースのレイヤーに対してグラデーションを適用させます。白とグレー(ここでは#888)を交互に等間隔で配置させます。

【デザインワークショップ】vol.17 ホログラムステッカーのようなデザインを作ってみる

 

5. 「円錐グラデーション」で中心から対角線の端に向かってグラデーションを入れていきます。この時はガイドを基準に入れていくとやりやすいですね。

【デザインワークショップ】vol.17 ホログラムステッカーのようなデザインを作ってみる

 

6. 新たに新規レイヤーを作成します。このレイヤーには色のついたグラデーションが入ることになります。

【デザインワークショップ】vol.17 ホログラムステッカーのようなデザインを作ってみる

 

7. 先ほど作成したレイヤーに対して、スペクトルのグラデーションを指定します。スペクトルでなくてもいいですし、自分の好きな色を入れても面白いかと思います。

【デザインワークショップ】vol.17 ホログラムステッカーのようなデザインを作ってみる

 

8. カラーのついたグラデーションを、先ほどと同じく「円錐グラデーション」で中心から対角線状に入れていきます。

【デザインワークショップ】vol.17 ホログラムステッカーのようなデザインを作ってみる

 

9. レイヤーをコピーし、サイズを半分にします。そして向かい合わせの交互になるように配置します。

【デザインワークショップ】vol.17 ホログラムステッカーのようなデザインを作ってみる

 

10. カラーのグラデーションの描画モードを「スクリーン」にして、背景となじませていきます。

【デザインワークショップ】vol.17 ホログラムステッカーのようなデザインを作ってみる

 

11. ここまでできたものを【編集】→【パターンを定義】からパターンとして登録します。

【デザインワークショップ】vol.17 ホログラムステッカーのようなデザインを作ってみる

 

12. レイヤースタイルの「パターンオーバーレイ」にパターンのバリエーションとして追加されているのが確認されます。あとはこれをパターンとしてレイヤーに適用させるだけです。

【デザインワークショップ】vol.17 ホログラムステッカーのようなデザインを作ってみる

 

13. 雰囲気に合わせて透明度などを調整すると、こんな感じでパターンがレイヤーに適用されます。

【デザインワークショップ】vol.17 ホログラムステッカーのようなデザインを作ってみる

 

この背景を使うことで、いかにもホログラムステッカーのような雰囲気を作り出すことができます。ウェブではあまり使いどころが見られないかもしれませんが、ポップなフライヤーなどでは使えそうなテクニックですね!

【デザインワークショップ】vol.17 ホログラムステッカーのようなデザインを作ってみる

 


 

いかがでしょうか、どことなく懐かしい雰囲気のあるこのホログラムステッカーのデザインですが、キャラクターの素材と相性がいいので、キャラクターの背景に使うのもオススメです。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?