線の幅が均一なマス目を作成する方法。

Question

###前提・実現したいこと

グリッドにスナップさせて、マス目の作成を試みたのですが、線が均一でないものになってしまいました。
線自体もグリッドの中央を通っていないように見えます。
グリッドの中央に線を引く方法と線の幅が均一なマス目を作成する方法のご教授をお願いいたします。

###試したこと

100×100ピクセルを1つのマス目とする、3×5のマス目を作成する。

①3×5のマス目を作成したいので、カンバスのサイズを300×500ピクセルにする。

②100ピクセル間隔のグリッドにして、グリッドにスナップさせて線が引けるようにする。

100ピクセル間隔のグリッドにする為に、[編集]メニュー → [環境設定] → [ガイド・グリッド・スライス]
を選ぶ。
現れたウィンドウの[グリッド]の欄の[グリッド線]の項目を[100][pixel]に設定する。

グリッドにスナップさせて線が引けるようにする為に、[表示]メニュー → [スナップ]にチェックを入れる。
また、[表示]メニュー → [スナップ先] → [グリッド]にもチェックを入れる。

③[鉛筆]ツールを選択して、直径を10pxに設定し、
[Shift]キーを押しながら、直線でグリッドの上に線を引いてマス目を作成していく。

そして、できあがったのが下図です。

問題点１：外側の線が明らかにはみ出て、細くなってしまっている。
問題点２：よく見ると、中央の線もグリッドの中央から少しズレた位置になっているように見える。

ご教授のほどよろしくお願いします。

Answer 1

10pxで300pxを3等分する時
縦線は4本必要となります
ですので縦の3カ所の透明部分の合計は
300-4×10 = 260
となります
260を3で割ると
86.666...となり半端な値になります

きっちり3等分するためには
縦線の線幅は3の倍数である必要があります
同様に横線の線幅は5の倍数である必要があります
（数学的な話しなので細かいことは省略します
補足が必要ならリクエストしてください）

つまり300×500で作成する場合
線幅は最低でも15pxないと
きっちりとしたマス割は出来ません

逆に10pxで作成したいのであれば
画像のサイズを
Aを白い部分の長さとして
横幅→40px+(3×A)px
縦幅→60px+(5×A)px
で作成する必要があります

具体的な作成方法ですが
縦横にそれぞれ200pxセルづつ足して
5×7のグリッドをとりあえず作成し
グリッドを解除した上で
真ん中を切り抜きツールで切り出すという方法が
手っ取り早いと思います

Comments

[退会済みユーザー]

ご回答ありがとうございます。
返信が遅くなり申し訳ありません。
>きっちり3等分するためには
>縦線の線幅は3の倍数である必要があります
>同様に横線の線幅は5の倍数である必要があります
このようになる仕組みを教えてただけますか？

外枠に余分にマス目を作成して切り取るという方法なら、外の枠線も均等な幅にできるのですね。

また、グリッドの上に引かれる直線も、グリッドとはズレているように見えますが、全ての直線が同じ差分でグリッドからズレていれば、結局、直線同士の間隔は均等になるという考えてで大丈夫ですか？

[e-cube]

>このようになる仕組みを教えてただけますか
縦も横も同じ方法で説明できますが
ここでは横部分に限って説明します

横幅が300pxと「3で割れる数」である数であることを前提とします

縦に引かれる線の数は4本です
線が引かれない部分は1マス分が3箇所できます
縦線の線幅をA、線が引かれない部分1マス分の幅をBとすると
300 = 4×A + 3×B
という等式が成り立ちます

3×Bを移項して
300 - 3×B = 4×A
両辺を3で割ると
100 - B = 4×A/3

Bが整数値であるならば
100-Bも整数値となるため
それと等しい4×A/3も整数値となります

4×A/3が整数値となるためには
Aが3で割り切れる数
すなわち3の倍数である必要があります

言い換えると
縦線の線幅は3の倍数である必要があるということになります

>また、グリッドの上に引かれる直線も、グリッドとはズレているように見えます

Photoshopのグリッドの線はピクセルの上に書かれた線ではありません
「ピクセルとピクセルの間」にある線です

したがって100%表示の状態では厳密に描画することが出来ないため
グリッドと隣接するピクセルに描画されているようです
これがずれて見える原因だと思われます

また
10pxなどの偶数の幅の線はグリッドの中心を通りますが
3pxや5pxなどの奇数の幅の線はグリッドで2つに分けられないので
グリッドから0.5pxずつ右下にずれた状態で描画されるようです

>全ての直線が同じ差分でグリッドからズレていれば、
>結局、直線同士の間隔は均等になるという考えてで大丈夫ですか？

これはその考えでよいと思います

[退会済みユーザー]

ご回答ありがとうございます。
確認ですが、
「横幅が300pxと「3で割れる数」である数であることを前提とします」とは、
「横幅が300pxのように「3で割れる数」であることを前提とします」という解釈で大丈夫ですか？

[e-cube]

大丈夫です
言葉足らずで申し訳ありません

[退会済みユーザー]

ご回答ありがとうございます。
とんでもございません、ありがとうございます。
線幅に関する数学のご教授ありがとうございます。
また、グリッドによるズレの仕組みなど、勉強になりました。
今回、作成したい画像に関して分からなかったことが全て解決しました。
ご丁寧にご教授くださりありがとうございました。