線を引く方法

How To Draw A Line In Photoshop

Photoshopで線を引く方法は？Photoshopで直線を描く方法を学びます。曲線はどうですか？これは簡単に思えるかもしれませんが、初心者にとっては、Photoshopの線を描くためのいくつかの基本的な方法を知っているとよいでしょう。このチュートリアルでは、Photoshopで線を描く3つの簡単な方法を学びます。ブラシツール、ペンツール、およびラインツールを使用して、単純な直線を作成できます。

Photoshopで線を引く方法 [初心者向けチュートリアル]

このチュートリアルでは、Photoshopで直線を描画する方法を学習します。また、Photoshopで曲線を描画する方法も示します。そして、少し楽しくするために、Photoshopで色付きの線を描画する方法を説明します。

 

[2019年アップデート]：Photoshop CC 2019ではいくつかの点が変更されていますが、Photoshopで線を描く場合にも同じ手法が適用されます。Photoshop CCの新しい曲率ペンツールに関するセクションを確認してください。

1. Photoshopでブラシを使って直線を描く方法⚡

Photoshopで線を描くには、ブラシツールまたは鉛筆ツールを使用します。小さなサイズの硬い丸いブラシを選び、単純に線を引きます。

 

Photoshopで直線を描画するには、Shiftキーを押したまま描画する必要があります。水平線または垂直線を作成するには、Shiftキーを押しながら、線を水平または垂直に描画します。Photoshopグリッドを使用して、線がまっすぐであることを確認します。

斜めの線または斜めの線の場合は、Shiftキーを押しながらクリックして、線の終点を追加します。Photoshopはドットを完璧な線で結びます。

1.1ブラシを使用してPhotoshopフリーハンドスタイルで直線を描画する方法

大事なことは、

ほとんどのグラフィックデザイナーは、グラフィックタブレットまたはマウスを使用して、ブラシツールでフリーハンド描画を行うことです。数回試してみると、斜めの線や縦の線よりも横の直線を描くほうが簡単であることがわかります。

それがまさに私たちの手が働く方法です。 

Photoshopでキャンバスを回転させる方法

Photoshop（CS5、CS6、CC 2018、CC 2019）でできる便利なトリックの1つは、キャンバス全体を回転させることです。画用紙を回転させるように。Rをクリックし、マウスでクリックアンドドラッグすることでそれを行うことができます。Shiftキーを押しながらドラッグすると、キャンバスの回転が15度単位でスナップされます。

 

これは、Photoshopで直線を描画する方法と、Photoshopでキャンバスを回転させる方法を示すビデオです。

<video controls="" poster="/tutorials/draw-a-line-in-photoshop/how-to-rotate-canvas-in-photoshop.jpg" preload="none" style="width: 100% !important; height: auto !important;"><source src="http://www.psd-dude.com/tutorials/draw-a-line-in-photoshop/draw-straight-lines-in-photoshop-1.mp4" type="video/mp4"></video>

注：Photoshop CC 2019でこれを実行しようとすると、次のエラーが発生しました。

回転は、OpenGL対応のドキュメントウィンドウでのみ機能します

そうですね、Photoshop CC 2019でこれを行うには、より高いハードウェア要件があることがわかります。解決策は、[編集]> [設定]に移動してから、パフォーマンスパネルで [ GPU設定でOpenGL図面を有効にする]を選択することです。ハードウェアが要件を満たしていない場合、このチェックボックスはグレー表示されます。 

2. Photoshopで直線ツールを使って直線を描く方法⚡

別の方法は、Photoshopのツールバーにあるラインツールを使用することです。この線はベクトル形状なので、品質を失うことなく、形状、色、寸法を簡単に変更できます。SHIFTキーは直線にも使用できます。

 

プロジェクトにベクターラインが必要な場合は、Photoshop用のLine Shapesをダウンロードしてください。

3.ペンツールでPhotoshopに線を引く方法⚡

3番目の方法は、ペンツールを使用して線を描くことです。まず、パスオプションをチェックする必要があります。次に、クリックして最初のポイントを追加し、もう一度クリックして2番目のポイントを追加します。直線の場合は、SHIFTキーを押したままにします。 

したがって、ブラシツールを選択し、ハードラウンドブラシ（サイズ3px、黒）を選択します。

 

ではペンツール、選択パスをして線を引きます。線は作業パスとして追加されます。

 

線を描くには、作業パスを右クリックして[ ストロークパス ] を選択します。リストからブラシツールを選択します。

 

これで、パスを削除するか、それを使用して他の線を描くことができます。パスの移動、サイズ変更、形状の変更、回転などを行うことができます。

ヒント：パスをストロークする前にレイヤーを選択しておく必要があります。そうしないと機能しない場合があります。ここでは、パスを描画する方法と、Photoshopでブラシツールを使用してパスをストロークする方法についての簡単なチュートリアルを示します（ビデオチュートリアル）。また、初心者向けのStroke Path Photoshopチュートリアルを読むこともできます。 

4. Photoshopで曲線を描く方法⚡

Photoshopで曲線を描くには、パスを選択した状態でペンツールを使用して、曲線パスを作成する必要があります。ペンツールを使用してドラッグし、曲線セグメントの最初のスムーズポイントを作成して、マウスボタンを離します。 

曲線を描くには、作業パスを右クリックして[ ストロークパス ] を選択します。リストからブラシツールを選択します。 

Photoshop CC 2019で曲線を描く方法

Photoshop CC 2019には、便利で新しいものがたくさんあります。それらの1つは、新しいCurvature Pen Toolです。長押しすると、ペンツールアイコンの下に表示されます。 

新しいCurvature Pen Toolを使用するには、1回クリックする必要があります。Photoshopは、クリックした点を結ぶ曲線を描画します。ダブルクリックすると鋭い角ができます。2点間の線をクリックすると、点を追加およびドラッグして曲線を作成できます。

 

曲線を作成したら、ストロークパスを使用して線を描画する必要があります。

5. Photoshopで色付きの線を描く方法⚡

Photoshopで色付きの線を描画するには、線を描画したレイヤーにレイヤースタイルを追加します。Photoshopで色付きの線を作成するには、グラデーションオーバーレイレイヤースタイルを使用します。

6. Photoshopの点線⚡

Photoshopで点線を描画するには、点線ブラシを使用する必要があります。このチュートリアルでは、Photoshopで点線を作成する方法を学習します。

 

7. Photoshopの破線

Photoshopで破線を描画するには、破線ブラシを使用する必要があります。このチュートリアルでは、Photoshopで破線を作成する方法を学習します。

8. Photoshopで線を延長する方法

PhotoshopでControl-Tを押して線を延長します。このサイズ変更方法は、直線（垂直線と水平線）に対してのみ機能します。

9. Photoshopで線を太くする方法

フォトショップで線幅を変更するにはどうすればよいですか？線ツールを使用する場合は、線の太さを設定する必要があります。

ブラシツールを使用する場合、Photoshopで線を太くするには、ブラシツールのサイズを大きくする必要があります。

Photoshopで既存の線を太くする方法

答えは簡単です！[ フィルター ] > [ その他 ]メニューに移動し、[ 最小フィルター]を選択します。このフィルターを使用すると、Photoshopで線のサイズを大きくし、既存の線を太くすることができます。

 

ラインアートをすばやくクリーンにしたい場合は、この無料のアクションを試して、Photoshopで線を太くしてください。

10. Photoshopで平行線を描く

Photoshopで平行線を描画するには、直線（垂直または水平）を描画し、Ctrl + Jキーを押して複製します。次に、線を移動して平行線を取得します。

 

クイックヒント：水平/垂直のグラデーション（＃000000、不透明度100％および＃000000、不透明度0％）で新しいレイヤーを作成します。行くフィルター>ディストーション>ウェーブやPhotoshopで平行線を描画するために、これらの設定を行います。

11. Photoshopを使用して滑らかな線のデジタルアートを描画する方法

写真を線画に変換したい場合は、このLine Art Photoshopアクションを使用できます。

CSSトライアングルを作成する方法❓🔺

ソース：CSSで三角形を作成する5つの方法

おそらく、Webページに三角形を追加する最も簡単な方法は、画像に三角形を描き、その画像をWebページに追加することです。完璧な三角形を描く秘訣はたくさんあります。Photoshopでそれを行う方法については、この記事をご覧ください。Photoshopで三角形を作成するか、Photoshop用のこの三角形の無料パックをダウンロードしてください。

この投稿では、CSSとHTMLを使用して三角形を作成する方法を紹介します。

以下は、使用するさまざまな方法の概要です。

• CSSを使用して三角形を作成する border
• CSSグラデーションで三角形を作成する（linear-gradientおよびconical-gradient）
• overflowとを使用して三角形を作成しますtransform
• を使用して三角形を作成する clip-path

を使用borderしてCSSで三角形を作成する

CSSトライアングルを作成する方法についてインターネットを検索したことがあるなら、おそらくCSSトリックからのこの素晴らしい記事を見たことがあるでしょう。CSS borderプロパティを使用して三角形を作成する方法を簡単に説明します。

簡単に説明させてください！

次のHTMLコードを考えてみます。

そしてCSS：

.triangle {
    border-left: 20px solid cyan;
    border-right: 20px solid red;
    border-bottom: 20px solid green;
    border-top: 20px solid blue;
    display: inline-block;
}

これは次のようにレンダリングされます：

これは、HTML要素の境界線が結合する角度を形成するためです。これを利用して、3つの境界線に透明色を設定し、1つだけを表示することで、三角形を作成できます。したがって、下の境界は上向きの三角形を作成し、左の境界は右向きの三角形を作成します。

上向きの緑の三角形を作成するためのCSSコードは次のとおりです。

.triangle-up {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid green;
    border-top: 20px solid transparent;
    display: inline-block;
}

これは次のようにレンダリングされます：

そして今、ちょっとした数学。

ご覧のとおり、この三角形は直角三角形です。つまり、上角は90度です。2つの等しい辺があるため、二等辺三角形でもあります。すべての境界線に同じサイズを設定する場合、実際には三角形の高さを設定しています。

したがって、ここでは20ピクセルです。

三角形は直角三角形と二等辺なので、三角形の底辺が40ピクセル（使用した境界線サイズの半分）であると判断できます。その後、各辺はbasis / sqrt(2)約28.2ピクセルに等しくなります。

を使用して正三角形を作成する方法 border

三角形を正三角形にしたい場合はどうなりますか？それで、三角形のすべての3辺が等しくなりますか？

数学をしましょう！

前の例では、境界線のサイズが実際に三角形の高さを決定することがわかりました。正三角形の高さの式は次のとおりです。

height = side * sqrt(3) / 2

また、私たちの基準は、選択した境界線のサイズの2倍であることに注意してください。

したがって、border-width透明な境界線を20pxに設定するには、境界線のサイズを次のように設定する必要があります。2 * 20px * sqrt(3) / 2

sqrt(3)/2おおよそ0.866に近似できるので、CSSの正三角形を次に示します。

.triangle-up-equilateral {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: calc(2 * 20px * 0.866) solid green;
    border-top: 20px solid transparent;
    display: inline-block;
}

これは次のようにレンダリングされます：

あるいは、このためのCSSクラスを作成するためのより適切な方法があります。

.triangle-up-equilateral {--side- 
    size：20px; 
    border-left：var（-side-size）solid solid; 
    border-right：var（-side-size）solid solid; 
    border-bottom：calc（2 * var（-side-size）* 0.866）緑一色; 
    border-top：var（-side-size）solid transparent; 
    表示：インラインブロック; 
}

CSS変数を使用すると、正三角形のサイズを1か所に設定できます。

CSSグラデーションを使用して三角形を作成する方法

CSSのみを使用して三角形を描画する別の方法は、グラデーションを使用することです。

.triangle-up-equilateral {
    --side-size: 20px;
    border-left: var(--side-size) solid transparent;
    border-right: var(--side-size) solid transparent;
    border-bottom: calc(2 * var(--side-size) * 0.866) solid green;
    border-top: var(--side-size) solid transparent;
    display: inline-block;
}

直角三角形としてレンダリングされます：

これは基本的に、左上から右下へのグラデーションの塗りつぶしと真ん中のハードストップ（50％）を作成します。

次のconic-gradientようなあまり知られていないCSSグラデーションタイプを使用することもできます。

CSSのみを使用して三角形を描画する別の方法は、グラデーションを使用することです。

.triangle {
    width: 200px;
    height: 200px;
    background: linear-gradient(to bottom right, #fff 0%, #fff 50%, green 50%, green 100%);
}

上記と同様の右二等辺三角形をレンダリングします。

これにより、高さが20ピクセルの三角形が作成され、上向きの角度をもう少し制御できます。ご覧のようにdiv、135度から225度の範囲を塗りつぶすようにグラデーションに指示します（直角を作る）。同様に、角度の範囲を変更するだけで、下向き、左向き、または右向きの矢印を作成できます。

何らかの理由で、これは少し荒いエッジを作成するようです。もしあなたがこれを改善する方法を知っているなら、私に知らせてください。

CSS transformを使用して三角形を作成する方法とoverflow

必要に応じて、正方形のdivに疑似要素を追加して三角形を作成し、それを45度回転させてoverflow:hidden、結果の三角形のdiv正方形の外側にある部分を非表示にすることができます。

CSSは次のとおりです。

.triangle-element {
    width: 20px;
    height: 20px;
    overflow: hidden;
    position: relative;
    margin: 10px;
}
.triangle-element:after {
    content: '';
    background: green;
    width: 142%;
    height: 142%;
    position: absolute;
    transform: rotate(45deg) translate(-71%,0);
}

これは次のようにレンダリングされます：

CSSで三角形を作成する方法 clip-path

そして、CSSの三角形を作成する別の方法があります。clip-pathプロパティを使用できます。このプロパティは、Photoshopのクリッピングマスクのように機能します。基本的に、HTML要素の一部のみを表示できます。

clip-pathSVGファイルへの参照からインラインポリゴン定義まで、いくつかの値タイプを受け入れます。SVGクリップパスについて話すとき、サラスエイダンのブログを読むことをお勧めします。彼女はその分野の真のマスターであるからです。

それが三角形を作成するためにどのように機能するか見てみましょう：

CSSは次のとおりです。

.triangle-element {
    width: 40px;
    height: 40px;
    background: green;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

あれは！??！

はい、それはITです。三角形を、3つのコーナーを持つポリゴンとして定義して作成します。このコードは、ベースが40ピクセル、高さが40ピクセルの二等辺三角形を作成しますが、変更方法は簡単に想像できます。

これは断然最もコントロールしやすい方法だと思います。

結論

三角形の使い方はたくさんあります。矢印からピンへのマッピング、メニューマーカーからチャート要素へ。

CSSで三角形を作成する方法をマスターしました。

このチュートリアルが気に入った場合は、CSSサークル画像の作成と使用に関する完全なハウツーガイドを確認するか、HTMLで CSSのみの棒グラフを作成する方法を確認してください。