0%

Designデザインワークショップ

Posted:2018.05.22

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

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

 


 

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】