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デザイン

    Photoshopで空模様の画像を作る方法

    はじめまして、テイクフォーの谷口です。今回初めて記事を書きます…

  2. WEBデザイン

    【Photoshop】ボタントレース方法

    こんにちは。ゆかちんです!すっかり寒くなってきましたね。ローソンの…

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

    WEBデザイン

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

    どうも、テイクフォー谷口です。先日の3連休は地元の地車祭を観に行っ…

  4. WEBデザイン

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

    どうも、イラスト大好きのぐっさんです。約1週間ぶりの記事更新となり…

  5. WEBデザイン

    Photoshopでオシャレなネオンサインのような文字を作る方法

    おはようございます、新入社員のふきちゃんです!私はライブハウス…

  6. WEBデザイン

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

    おはようございます、ふきちゃんですふきちゃんです、と書いている時高…

コメント

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

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

最近の記事

  1. レポート

    手描きの年賀状を作成しましたのでレポートします!
  2. WEB集客

    競合他社に勝つために、WEB集客の意外な抜け道を見つけよう
  3. レポート

    水彩画の描き方を教えます!(その1)
  4. ガジェット

    スマートフォン用VRゴーグルを買ったのでレビューします!
  5. コピーライティング

    コピーライティング心理学 そのいち ~バンドワゴン効果~
PAGE TOP