*

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

Photoshop Elements9をすぐに起動させる方法

私の初めてのパソコンに付属していた Photoshop Elements 2。このソフトで初めて画像編集を覚えました。といっても写真のコントラストを変えたりサイズを変えたりする位にしか使っていませんでしたけども。そんな用 […]

jpg
Photoshopで画像をjpgで保存できない時に確認すべき事

Photoshop で画像を編集している時、若しくはインターネットでフリー写真素材やフリーイラスト素材をダウンロードしてきて編集している時、画像保存時に jpg で出力できないという事に出くわす事があります。 保存時のフ […]

著者について

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

フォローはこちら

       

       
Gmailのエラー「Gmail requires one or more Google Play services that are not currently avaiable.」で開けない

あるいつもどおりの朝、スマートフォンで Gmail を開こうと

Amazonで自分の書いたレビューを一覧で確認する方法

世界的に最大級の通販サイト Amazon。私もよく使います。利

大垣カフェ「カフェ飯屋ピーナッツ」暖かく自然派なお食事が美味しいアットホームな場所でした

岐阜県大垣市の市民病院近くにオープンした「カフェ飯屋ピーナッツ

Illustratorで矢印に綺麗に境界線を付ける方法

Photoshop では矢印でも文字でも綺麗に境界線をつけるレ

迫力のロングチャーシューラーメン!一宮市の「麺日和千秋店」

愛知県一宮市にあるラーメン店「麺日和 千秋店」は他店とは一線を

→もっと見る