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. Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    WEBデザイン

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

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

  3. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使い方!

    おはようございます、最近のお気に入りはYogi TeaのSkin DeToxです。ハーブティーですが、効果のほどは不明なので気休めに飲んでます。…

  4. WEBデザイン

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

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

  5. WEBデザイン

    SNS共有ボタンを設置しよう!WP Social Bookmarking Lightの使い方!

    おはようございます、これを書いている間5回はchromeのブラウザが落ちたふきちゃんです。WordPressで記事を書いていると勝手に記事を下書き…

  6. WEBデザイン

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

    おはようございます、新入社員のふきちゃんです!私はライブハウスに行くのが好きなのですが、バーカウンターに飾られてるレッドブルやハイネケンのネオ…

コメント

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

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

CAPTCHA


最近の記事

  1. お知らせ

    再び、Webデザイナー募集中
  2. WEBデザイン

    「いらすとや」の素材を使ってマンガを作成しよう!
  3. WEBデザイン

    邦楽バンドのオシャレなWEBサイト10選(+α)
  4. HTMLコーディング

    最近流行りの静的サイトジェネレータについて掘り下げてみる【Movable Typ…
  5. ガジェット

    スマートフォン用VRゴーグルを買ったのでレビューします!
PAGE TOP