WEBデザイン

Photoshopで付箋風のデザインを作る方法!!

おはようございます、ふきちゃんです。

私は未経験での入社でして、前職ではイラストレーターを使っていたのですが、Photoshopに未だに慣れず、悪戦苦闘する日々が続いてます!!

さて、本日は付箋のようなデザインのPhotoshopチュートリアルをお送りいたします。

12

こんな感じで
背景デザインはこちらから(2974×4094サイズ使用)
使用フォントはこちらから

1
まず背景を敷きます。「開く」からそのまま引っ張るもよし、ドラッグ&ドロップで持ってくるもよし。

2
背景色を「」にし、長方形ツールで長方形を作成します。好きな大きさで結構です。
ここでは1700×270で作成します!
(制作過程がわかりやすいように背景を一時非表示にしてます)

3
そのあとレイヤーを複製し、適当な大きさに幅を縮めます。
長方形を好きな色に変更します。何色でもOKです!
作成したら二つのレイヤーを結合します

4
先ほど結合したレイヤーを再度複製
同じレイヤーが並んでるので下にあるレイヤーを非表示に。

5
上のレイヤーを選択し、編集>変形>ワープをクリック。
ハンドルが表示されるので、少し反らして調整します。

6
弄ってるところです。私はできるだけ両端が平行になるようにしました。

7
2枚目のレイヤーを再度表示させ、レイヤーパレットを表示し、カラーオーバーレイを選択て色をグレーに変更します。

8
フィルター>ぼかし>ぼかし(ガウス)を選択し、ぼかしを10pxに設定します(今回は10pxですが、お好みに合わせて、どうぞ)

9
あとは背景レイヤーを表示させると

10
付箋自体は完成!
さらにそれっぽさを出すために手書き風の文字を入れます

12
完成~~!!!!

背景にパターンを入れてみたり方眼紙のような加工をしたらもっとかわいらしく使えるかもしれませんね☆

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. WEBデザイン

    WordPressのバックアップを取ろう!BackWPUpの使い方

    おはようございます、ふきちゃんです。ご無沙汰しておりました。記事を書いていない1年3ヵ月の間、金髪をやめ、髪は暗くなり、自宅を引っ越し、自宅用のP…

  2. WEBデザイン

    よく見る方眼紙のようなパターンの作り方

    おはようございます、ふきちゃんですふきちゃんです、と書いている時高確率で安田大サーカスのクロちゃんで再生されております、小春日和のうららかな季節で…

  3. WEBデザイン

    投稿記事を複製しよう!Duplicate Postの使い方

    おはようございます、気圧にずっとやられています、ふきちゃんです。気象病を紛らわすために薬を飲むと今度は眠くなって寝てしまうし、Dead or De…

  4. WEBデザイン

    「いらすとや」の素材を使ってマンガを作成しよう!

    どうも、イラスト大好きのぐっさんです。約1週間ぶりの記事更新となりますが、引き続き宜しくお願いします。このブログを読んでいるあなたは「いら…

  5. Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    WEBデザイン

    Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    どうも、テイクフォー谷口です。先日の3連休は地元の地車祭を観に行ったり、心斎橋一帯のライブハウスを巡るイベントに行ってきました^^さて…

  6. WEBデザイン

    【illustrator】簡単トレース方法

    こんにちは!ゆかちんです(^^)/あっという間に寒くなってきましたね。コーヒーが美味しい季節です。グランフロントの中にあるDOWNSTAIRS…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. WEBデザイン

    WordPressを日本語化させよう!WP Multibyte Patchって?…
  2. HTMLコーディング

    【WordPressでGO!】管理画面の左メニューをカスタマイズしてみよう
  3. WEBデザイン

    色相環でグラデーションを描いてみよう
  4. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使…
  5. WEB集客

    競合他社に勝つために、WEB集客の意外な抜け道を見つけよう
PAGE TOP