ちょっとだけ制作効率をアップする?! 簡単にできる線のあしらいtips - グレヌデサ La graine du dessin
Design

ちょっとだけ制作効率をアップする?! 簡単にできる線のあしらいtips

破線を書く

Webデザインで、囲んだり、区切ったりと、よく使われる破線。
今回は、Photoshopのブラシツールで簡単につくれる破線をご紹介します。
    1)ツールパレットから鉛筆ツールを選択してから、F5を押しブラシパレットを表示
    2)間隔に任意の数値を入力
    brush.gif
    ※200%なら1点置きに、300%なら2点置きの破線になります。
    3) 線を描くと破線になります。
    hasen.gif

図形の境界線を破線で描く

Photoshopで図形の境界線を描くときに、レイヤースタイルの"境界線"を使用する場合があります。
この境界線を使って破線で描きたい場合は、一工夫が必要です。
    1) 破線のパターンを用意します。

    patan.gif
    4×4pixelのボードに2pixelのドットで図のような柄を描きます
    2)これをパターンに登録
    3)好きな図形を描きます。
    4)レイヤースタイルの"境界線"を選ぶ
     hasen_box.gif

    設定を

    ○サイズ:2pixel

    ○塗りつぶしタイプ:パターン

    ○パターン:先ほど作ったパターン

    にすると、出来上がりです。

    出来上がり:
    hasen_box2.gif
この方法は、繰り返し同じあしらいのボックスを作成したい等の場合に便利です。

番外編:境界線のあしらいを工夫する

レイヤースタイルの"境界線"の塗りつぶしタイプ:パターンを使って、 いろいろなあしらいの線を簡単に作ることが出来ます。

line_pt1.gif
ガーゼパターンを使って不規則な破線。

 

line_pt2.gif
羊皮紙パターンを使ってクレヨン&手書き調の境界線。

 

line_pt3.gif
漆喰パターンを使ってがっちりとした印象の境界線。

 

ゼロから作ると時間がかかるボックスのあしらいも この方法だと少々の時間で出来るので便利です。 (今回使用している環境は、Photoshop CS5です。)

(masanori)
New Entries
TOP
Old Entries

Webトレンド情報局とは

クリエイティブグループスタッフがお送りする、Webデザイナーのための知識とTIPS。 PhotoShopの便利な豆知識や、CSSのお困り解決、デザイン概論などなど。
【隔週木曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive