Photoshopでルーズリーフっぽい罫線入りノートを作る方法

2014.7.15 デザイン

notepaper

Webサイトで「お客様の声」とか載せたいときに使えそうなノート素材を作る方法です!
Photoshop CS5でやりました。基礎的な機能ばかりなのでヴァージョンは問わずできるでしょう。

 

Photoshopで、ルーズリーフっぽい罫線入りノートを作る方法

1:適当な大きさで新規ファイルを作成する

Photoshopでルーズリーフっぽいノートを作る方法ノートにするレイヤーに「Paper」と名前をつけておきます。
「Paper」が白なので、背景は取り敢えずグレーとかにしておきましょう。

2:罫線を引く

s2

ノートっぽく罫線を描きます。このとき、等間隔になるように計算して描いていきましょう。サンプルの場合は30px間隔で、線のカラーは#ddfafdです。

3:罫線を下までコピーする

Photoshopでルーズリーフっぽいノートを作る方法いい感じの余白を取ってみます。

4:ルーズリーフっぽく穴を開ける

Photoshopでルーズリーフっぽいノートを作る方法

ルーズリーフっぽくするために準備をします。

まず、「楕円形ツール」を選択します。
そのあと、画面上部の、”なんとかパネル”の設定を「シェイプレイヤー」「パス領域から一部型抜」を選択しましょう。

5:ルーズリーフぽく穴を開ける(本番)

Photoshopでルーズリーフっぽいノートを作る方法

レイヤーパネルから最初に作ったレイヤー「Paper」のマスク部分を選択してください。
楕円形ツールで円を描きます。
このとき、いい感じに紙の端に円を描き、パンチ穴を表現します。「Alt+Shift」を押しながらで楕円を描くと、円の中心から書けてやりやすいです。

6:パスコンポーネント選択ツールに持ち替える

本格的風な単語が出てきました。

Photoshopでルーズリーフっぽいノートを作る方法

「パス選択ツール(白い矢印)」を長押しすると、「パスコンポーネント選択ツール(黒い矢印)」が現れるので、そちらを選択してください。

前のステップで描いた円を選択します。「Alt+Shift」で等間隔にコピーしてください。すると、「Paper」から楕円パスの範囲が繰り抜かれて除外されます。
これは楕円形ツールで「パス領域から一部型抜」を選択したからですね~。
これを繰り返してパンチ穴を縦幅いっぱいまで開けていきます。

7:楕円パスを下までコピーすると、Photoshopでノートが完成!

Photoshopでルーズリーフっぽいノートを作る方法

楕円パスをいい感じに増やすと、写真のようにノートっぽくなります!

あとは罫線のカラーなど自由に調節してください。これでも別にいいのですが、もう少し質感を出してみましょう!

8:「Paper」レイヤーにレイヤースタイルを適用

Photoshopでルーズリーフっぽいノートを作る方法

  • 光彩(内側)描画モード:通常/カラー:#080808/不透明度:4%/ノイズ:12%/サイズ:32px/
  • ドロップシャドウ 描画モード:乗算/カラー:#080808/不透明度:10%/スプレッド:0/サイズ:0

この辺りは状況によって調節してください

以上のようにすると…

s9なかなかそれっぽくなりました!

いかがですか?

サイトに「お客様の声」とか載せるのって、信頼度が必要な場面などで紙に書いたような表現がしたい場合、なかなかいい素材が無いんですよね!
気が向いたら使ってみていただければ幸いです。あとは適宜に応じパターンオーバーレイや描画モードで色々とカスタムしてみてください!

.psdファイル貼っておきますー!

notepaper.psd

 

 

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。(ポートフォリオ)Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。コーヒー友達募集中。