*

簡単!Photoshopで斜めのストライプ線の作り方

公開日: : Photoshop

ストライプ線の作り方

Webデザインやバナーなどでもストライプ線(斜めの縞々模様)はよく見かけるデザイン手法です。ウェブサイトで見出しの背景に使っても良い感じになります。しかしいざ作ってみようとすると作り方が思いつかないという方もいらっしゃると思います。一本一本線を引いて作るのも骨が折れるものです。

ちなみにストライプ線とは以下のようなものです。

stripe-line3

ストライプ線のパターンなどは素材サイトでも取り扱っている所がありますが、必ずしも好みのストライプ線が見つかるわけでもないでしょう。

しかし、このストライプ線。Photoshop で意外と簡単に作る事ができます。その方法について紹介しますね。

Photoshopでストライプ線を作る

stripe-line4

まずはファイルメニューから新規作成。実際に使用するサイズよりも大きめにサイズを設定します。今回は1500px四方のサイズにしました。

stripe-line6

ストライプ線とは色の違う線が交互に並んでいる線です。その2色をツールメニューの色の設定部分で選びます。上の四角と下の四角で異なる色を設定しましょう。

stripe-line5

続いて、画面上部のフィルターメニューから「スケッチ」→「ハーフトーンパターン」を選択します。

stripe-line7

ハーフトーンパターンの設定画面が開きます。パターンタイプから「線」を選びます。サイズのスライダーでは線の太さを設定、コントラストでは線の濃淡を設定します。適宜設定してお好みの設定を見つけてください。左側のプレビュー画面で常にどんな結果になるか確認する事ができます。

stripe-line8

ハーフトーンパターンを適用すると上図のような横縞の線が出来上がります。これでもうストライプ線が出来上がったわけですが、斜めのストライプ線を作ってみましょう。

stripe-line9

その為にはツールウィンドウの長方形選択ツールでカンバス全体をドラッグして全選択します。

stripe-line10

そして画面上部の編集メニューから「自由変形」を選択します。

stripe-line11

すると赤丸部分のように画像の端に四角いマークが出現します。この辺りにマウスポインタを近づけると曲がった矢印に変化します。この状態でドラッグすると画像を回転させる事ができるのです。Shift キーを押しながらドラッグすると15度ずつ画像を回転する事ができます。

Shift キーを押しながら3回回転させると画像が45度回転される事になります。これで斜めのストライプ線にする事ができました。あとは使用したいサイズに変更するだけです。

stripe-line12

イメージメニューから「カンバスサイズ」を選択します。

stripe-line13

ここで使用したいストライプ線のサイズを設定します。ここでは幅600px、高さ5pxの線を作ります。

stripe-line3

いかがでしょうか。これでストライプ線が出来上がりました。ストライプの線の太さはこれが最小ですが、もっと細い線にするには前述の画像を回転させる部分で画像の縮小も同時に行ってみましょう。縮小することで線は更に細くなります。その後カンバスサイズの変更でお好みのサイズに変更すれば、細いストライプ線の完成です。

上部広告

  • Pocket

おすすめトピックス

関連記事

Photoshopで写真の一部の色を変える色の置き換え機能の使い方

この写真のこの部分だけ色を変えたい!この商品画像の色を変えたい!という場合に Photoshop では便利な「色の置き換え」機能というものがあります。手軽に写真の一部分だけの色を変更する事ができます。 例えばある物の写真 […]

羊の写真
Photoshopで写真の不要な所を消す魔法のような小技

Photoshop にはまだまだ知らない便利な機能があるんだなと思います。その中の一つをご紹介。 せっかく良い写真が撮れたのだけれど、後々よく見ると小さく人が写ってしまって使えない…。なんて経験もあるかと思います。しかし […]

Photoshopで選択範囲を回転するには

Photoshop を使っていて、選択ツールでの選択範囲を回転できたらいいなぁと思うことが多々ありました。画像を回転する方法では、選択範囲のみを回転する事はできませんでした。 でもそこはやっぱりさすがの Photosho […]

背景やパターン画像を元より横長かつ自然に加工するPhotoshopの技

背景画像やパターン画像をもっと横長の画像として使いたいと思うことがよくあります。例えばイラストレーターさんに作ってもらった背景画像が正方形だったとするとウェブデザインで背景に使う場合には正方形だと使いにくいです。今ではワ […]

初心者でも簡単、Photoshopでバナーのボタンを簡単に作成できる作り方

Photoshop で簡単にバナー画像などに付けるボタンの作成方法を紹介します。Web 制作や EC ショップ運営をされている方なら作成する機会も多い事でしょう。Photoshop でボタン作成は難しく感じますが、知って […]

Photoshopで複数の画像を一つのPSDにレイヤーに分けて開く方法

通常複数の画像を Photoshop で開こうとすると開いた枚数分ファイルが複数タブで開かれます。通常なら別にそれで問題ないのですが、複数の画像を一つの PSD ファイルで開けたら便利と思うこともあります。 Photos […]

上部広告

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

上部広告

       
Amazonプライム限定のクレヨンしんちゃん外伝は地上波とは違う面白さがある

クレヨンしんちゃん25周年を記念して2016年8月から Ama

Chromeでテーブルの列をコピー、矩形選択ができる拡張機能「Copytables」

ウェブサイト上でもデータをまとめる際に表がよく使われます。これ

キャッシュトレイ
三菱東京UFJ銀行でもコンビニATM手数料を無料にする事が可能です(条件有り)

セブンイレブンやローソンなどに設置してあるコンビニ ATM は

サングラス
車を運転中に朝陽が眩しくて信号が見えないのでサングラスで対策した

先日車を運転中にヒヤリとする出来事がありました。それは信号に気が付かな

ニーアオートマタのPC版をGeforce GTX960でプレイした感想

2017年3月18日より発売されたスクエアエニックス(開発はプ

→もっと見る