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

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

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

  2. WEBデザイン

    【Photoshop】レイヤーを上手く使い回そう Vo.2リンクオブジェクト編

    どうも僕です、テイクフォー谷口です。ここ週末2週連続で悪天候が続きますね。来週は週末が3連休になっているので、どうにか晴れになって欲しい気持ちです…

  3. Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    WEBデザイン

    Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    どうも僕です、テイクフォー谷口です。先週末は佳境を迎えたプロ野球日本シリーズやサッカーJリーグとスポーツネタで盛り上がってました^^(大阪…

  4. WEBデザイン

    色相環でグラデーションを描いてみよう

    最近めっきり寒くなりまして熱燗のおいしい季節になってきました、こんにちはともさんです。今回は色相環を使ってグラデーションを描いてみましょう、という…

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

    WEBデザイン

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

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

  6. WEBデザイン

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

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

コメント

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

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

CAPTCHA


最近の記事

  1. お客様の声

    【お客様インタビュー】セブンオーセブンモーターサイクル小野様
  2. Yahoo!タグマネージャーを導入してみよう

    WEB集客

    Yahoo!タグマネージャーを導入してみよう
  3. HTMLコーディング

    高機能で簡単!レスポンシブ対応のjQueryスライダー「bxSlider」を設置…
  4. WEBデザイン

    Photoshopで付箋風のデザインを作る方法!!
  5. お知らせ

    オフィスグリコを導入しました。
PAGE TOP