Photoshopで破線のボーダーの矩形を描く方法

iDrop2007-08-28


ネタがないので、今回は初めてのPhotoshopに関するエントリーです。

cssならば簡単に

p.box { border:1px dotted #333 }

のように破線のボーダーをもった矩形を描画できますが、デザインの段階でPhotoshopを使って同様のオブジェクトを描くのって皆さまどうしているでしょうか?「1px毎にカラーをコピーしていけばいいじゃん」と言われてしまえばそれまでなのですが、実際それも面倒だよなぁという方には使える小技かもしれません。

手順(Win Photoshop 7を使っています)
【前準備】

  1. 2x2pxの新規ファイルを用意します
  2. 新規レイヤーを作成します
  3. 背景レイヤーを削除します
  4. 左上と右下のピクセルを任意のカラーで塗りつぶします(右上の表示画像のようなパターンができます。これは56x56pxですが)
  5. メニューの「編集」から「パターンを定義」を選択し、作成したパターンを登録します

【使用方法】

  1. 長方形選択ツールで、任意のサイズの領域を選択し、適当なカラーで塗りつぶします
  2. 「レイヤー効果」から「境界線」を選択します。
  3. [位置:内側]、[サイズ:1px]、「塗りつぶしタイプ:パターン」とし、前準備で作成したパターンを選択します
  4. あぁ便利になった!