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

    【illustrator】簡単トレース方法

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

  2. WEBデザイン

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

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

  3. WEBデザイン

    問い合わせフォームを追加しよう!Contact Form 7の使い方!

    おはようございます、最近はインスタグラムのおすすめ動画でひたすらポメラニアンの子犬の動画を見てひたすら癒されているふきちゃんです。韓国だけかはわか…

  4. WEBデザイン

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

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

  5. 【Photoshop】レイヤーを上手く使い回そう Vol.1スマートオブジェクト編

    WEBデザイン

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

    どうも僕です、テイクフォー谷口です。季節もいよいよ秋到来ですね。ただこの時期はまだ昼と夜の寒暖差があるので、体調管理には注意したいものですね。…

  6. WEBデザイン

    邦楽バンドのオシャレなWEBサイト10選(+α)

    おはようございます、私です。8月半ばから胃の不調に悩まされ続け、一時は胃潰瘍かとも思われておりましたが、先日とうとうお茶漬けを前にして一口…

コメント

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

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

CAPTCHA


最近の記事

  1. HTMLコーディング

    最近流行りの静的サイトジェネレータについて掘り下げてみる【Movable Typ…
  2. お知らせ

    【2018年】新年あけましておめでとうございます
  3. レポート

    手描きの年賀状を作成しましたのでレポートします!
  4. HTMLコーディング

    便利すぎるWebフォント「Font Awesome」でサイトの見栄えをワンランク…
  5. コピーライティング

    コピーライティング心理学 そのさん ~バンドワゴン効果とスノッブ効果~
PAGE TOP