猫のライン

PhotoshopでWEB素材である猫のライン（区切りの線）を作る方法の解説です。

メニューバーの「ファイル」→「新規」で800ピクセル×200ピクセルの横長のカンバスを作成します。

⇩

画面左から多角形ツールをクリックします。

⇩

画面上で歯車アイコンをクリックし「コーナーを滑らかに」にチェックを入れ 角数は3に設定します。これで頂点が3つの三角形を描く準備ができました。 画面左で多角形ツールをクリックした際、この設定を変えなければ 六角形として描かれます。

⇩

画面左上で塗りを50%グレー、ストロークを70%グレー、線の太さは3pxに設定し 角の丸い三角形を描きます。 レイヤー名は「猫の左耳」に変更します。

⇩

猫の左耳を移動ツールで縮小、左回りに少し回転させてから レイヤーパレッド下の「新規レイヤーを作成」ボタンで複製し 水平反転し右に移動します。レイヤー名は「猫の右耳」に変更します。

⇩

今度は楕円形ツールで顔の輪郭を描き耳が背面になるようにします。

⇩

「楕円形1」レイヤーの名前を「輪郭」に変更し楕円形ツールで黒目を塗りを黒、線の色無しに、 白目を塗りを白、線の色無しに設定し描きレイヤー名も変更します。

⇩

白目と黒目をShiftキーで複数選択し右クリック→「レイヤーをリンク」 をクリックし「新規レイヤーを作成」ボタンまでドラッグし複製します。 画面左上の移動ツールをクリックします。
メニューバーの「編集」→「変形」→「水平方向に反転」をクリックし Shiftキーを押しながら右耳の近くまで移動すると右目ができます。 レイヤーのリンクは解除しておきます。

⇩

塗りを黒、線の色無しで鼻も楕円形ツールで描きます。次に新規レイヤーを作成して 画面左のペンツールをクリックし図のように１度クリックしてShiftキーを押しながら 下に垂直線を引きます。

⇩

次に図の赤丸の位置をクリックし左上方向に方向線を伸ばすと傘の取ってのような形になります。

⇩

右クリック→「パスの境界線を描く」をクリックします。

⇩

予め画面左のブラシツールでサイズを６ピクセルに設定しておき、ツールの一覧から 「ブラシ」を選択しOKボタンを押します。

⇩

黒色の境界線ができるので右クリック→「パスを削除」でパスを消し画面左の 移動ツールで縮小し猫の鼻の下に配置します。

⇩

このレイヤーを複製しメニューバーの「編集」→「変形」→「水平方向に反転」で左右対称に なる位置まで移動します。 猫の閉じた口が描けました。

⇩

後は画面左のブラシツールでサイズを1pxにして「レイヤー1のコピー」レイヤーで4本のヒゲを描きます。 背景レイヤーから上全てを複数選択し結合してレイヤー名を「猫の顔」に変更します。

⇩

メニューバーの「編集」→「ブラシを定義」をくりっくすると「ブラシ名」のダイアログボックスが出るので 猫ラインという名前を入力しOKボタンを押します。

⇩

画面左上のブラシアイコンをクリックすると猫の顔が直径92pxのブラシとして登録されているのが わかります。 画面左上の「ブラシパネルの切り替え」ボタンを押すと設定画面が表示されるので 「ブラシ先端のシェイプ」の項目内の間隔を125%に設定し右上の×ボタンでパネルを閉じます。

⇩

カンバス左端でクリックすると猫の顔が1つ描けます。Shiftキーを押しながら右に ドラッグすると猫のラインができました。 顔の濃さは画面上の流量等で調整します。

⇩

ブラシの直径を増減することで文章と文章のスペースに応じて 色々なサイズの猫のラインをページに設置できます。

Tweet

■ その他の項目