Photoshop

Photoshopでパターンを作ろう!斜めストライプを作る方法とは?


こんにちは、mayukouです。
先日仕事でIllustratorで斜めストライプの入ったバナーデザインをしたのですが、
Photoshopに移動して書き出そうとしたところ、
斜めストライプの切れ端部分が途切れて見えてしまって、
綺麗じゃなくなったので、Photoshopで作り直すこととしました。

そこでその方法をご紹介します。

スポンサードリンク

1.パターン定義のための新規ドキュメントを開く

作っているファイルがあれば、そのファイルとは別に新規ドキュメントを開きましょう。

ドキュメントサイズ:100px x 100px

2.真ん中に十字のガイドを引く

17-stripe-01

表示>新規ガイド…

でダイアログに垂直方向・50px (横幅の半分)
水平方向・50px

で真ん中に十字ガイドを引きましょう

3.ペンツールでシマシマの部分を描く

18-stripe-02

ペンツール:シェイプ、塗りーお好きな色を選択しておきます

19-stripe-03

対角線に沿った感じでグリッドに合わせて図のように描きましょう
描いたら、コピーしておきます。
コピーしたら図のところまで移動しましょう

20-stripe-04

4.パターン定義を選択

編集>パターン定義をクリックします

名前をつけて定義しましょう。
これで、出来上がりです。

実際に使ってみましょう

デザインを作っていたファイルに戻り、塗りのパターンを選択します。

レイヤースタイル:パターンオーバーレイ または シェイプの塗り→パターン選択

自分が作ったパターンが追加されているのを確認したら、パターンを選択しましょう。
21-stripe-05

比率を変えることで、細かいストライプにもなります。

23-stripe-07

22-stripe-06

最後に

いかがでしたか?私流ですが、割と綺麗にシームレスにつながる
斜めストライプの方法をご紹介しました。
ぜひ参考にされてください!

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Illustrator

    メリハリがつく!Illustratorでドロップキャップを作る方法

    みなさんこんにちは、mayukouです。先日、雑誌広告のデザインを担…

  2. illustration

    photoshopでモコモコの線を描くには?

    こんにちは。mayukouです。今回は、photoshopでモ…

  3. photoshopでカンプ作成

    Photoshop

    photoshop CCでデザインカンプを作成。メリットとデメリット

    みなさんこんにちは、mayukouです。最近、webデザインのカンプ…

  4. Photoshop

    ちょっと洒落てる!Photoshopで作る、白いシャドーが入った押したくなるボタンの簡単な作り方

    みなさんこんにちは、mayukouです。最近は暑すぎず、どちらかと…

  5. Photoshop

    便利!Photoshopで描いた絵をIllustratorで使えるパスに変換する方法!

    みなさんこんにちは、mayukouです。今回は、Photoshopで…

  6. Tutorial

    自分らしさがアップ!WordPressのサイドバーにInstagramウィジェットを乗せる方法

    みなさんこんにちは、mayukouです。さて今回は、wordpres…

コメント

  • コメント (0)

  • トラックバックは利用できません。

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

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Mac

    仕事が早く終わる!集中力を持続して生産性アップできるPomodoroのアプリがオ…
  2. jQuery

    ボックス要素を横並びにしたときに高さが揃えられるJQuery、jquery.ma…
  3. jetpack

    wordpress

    多機能プラグイン!Jetpack for wordpressのインストール方法
  4. Illustrator

    空を可愛く!Illustratorで虹を簡単に描ける方法&ダウンロードできる素材…
  5. jQuery

    スマホに使える!3階層のアコーディオンメニューを作りました!
PAGE TOP