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

    【随時更新】クリスマス&年賀状に使えるイラスト素材を無料配布します♩

    みなさんこんにちは、mayukouです。年末に差し掛かってきましたが…

  2. Tutorial

    ワイヤーフレームがプロ仕様に!素敵なグラフィックスタイル「WireMagic」

    みなさんこんにちは、mayukou です!目薬が欠かせない今日…

  3. free font

    デザイン

    デザインの質が上がる!私が利用しているフリーフォントサイト

    こんにちは。mayukouです。遅くなりましたが、新年明けましてお…

  4. Photoshop

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

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

  5. illustration

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

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

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

  1. photoshopでカンプ作成

instagramもやっています

facebook更新中!

スポンサー

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

  1. Web Design

    メニューアイコンに最適!webフォント、Font Awesomeの簡単な使い方
  2. Web Design

    コピペでOK!wordpressに設置するシンプルな検索ボックス
  3. ブログ

    webの最新情報を学べた!webデザインセミナー「CSS nite fukuok…
  4. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法
  5. グッズ

    アナログ手法も極めたい!私が使っている水彩画道具のご紹介
PAGE TOP