情報/文字フォントのベースラインとHTMLのimg(イメージタグ)の関係

前記事の【情報/文字フォント(書体)と各種ライン】で触れたベースラインは、ご覧のようなブラウザのHTML文章中に画像を入れる際(d016_icon3(T) ←例えばこんな感じ)にも関連があります。
d019_1
▲ベースラインの位置。

今回はそのことと、CSS(カスケーディングスタイルシート、通称スタイルシート)によるそれの調整について書きます。
(HTMLとそのタグやCSSに関する全般的なことは他サイト様にゆずり、文字フォントのベースラインがらみの部分のみさわりだけ触れます)

 

H

TML文書中に画像を入れる時、ベーシックな方法としてHTMLタグの<img>を利用します。
例えば当サイトのバナーを利用した↓このようなソースなら、

abcdefghijklmnopqrstuvwxyz<img src=”http://kane-to.com/wp-content/uploads/2015/03/kane-to_banner0.gif” />かねト商店バナー(200x40px)

↓このように表示されます。

abcdefghijklmnopqrstuvwxyzかねト商店バナー(200x40px)

もう一つ、もっと天地が小さい画像では、↓このようになります(ソースは省略)

abcdefghijklmnopqrstuvwxyzかねト商店バナー(88x31px)

さらにマニュアルやヘルプ文書でありがちですがアイコン程度の大きさを文書に内に入れ込むと、冒頭でも挙げたように↓こちら

abcdefghijklmnopqrstuvwxyzd016_icon3(T)ツールアイコン(Photoshopの文字ツール)

※お使いのブラウザの設定等それぞれの環境により見え方がまちまちなので、私の環境のスクリーンショットを貼ります。
d020_0
▲書体はWindowsの「メイリオ」、サイズは16px程度です。

もうお分かりかも知れませんが、imgタグの属性やCSSのプロパティで特に何も指定しないと文字フォントのベースラインと画像の下辺が揃います。

 

C

SSによって、この画像の天地の位置を調整することが可能です。
前述のツールアイコンのように文書中にその文字フォントと同等の大きさの画像を入れ込みたいときに(完璧ではありませんが)便利で、vertical-alignプロパティを使います。
先の↓、
abcdefghijklmnopqrstuvwxyzd016_icon3(T)ツールアイコン(Photoshopの文字ツール)
これに対して、

.note_icon {
vertical-align: -2px;
}

このようなCSSを適用すると画像が2px下がり↓こうなります(0pxでベースラインの位置)

abcdefghijklmnopqrstuvwxyzd016_icon3(T)ツールアイコン(Photoshopの文字ツール)

※これも見る側の環境によって変わるので、私の環境のスクリーンショットを貼っておきます。
d020_1
▲同じく書体はWindowsの「メイリオ」、サイズは16px程度です。

しかしこのCSSでの微調整は、前述のとおり見る側の環境によって位置やサイズが変わるので絶対的なものではありません。
ある程度そういうものだと妥協するか、容量(読み込み時間)が増え且つ検索にヒットしにくくなりますが上のスクリーンショットのように文字フォントも含めて画像にするのが良いでしょう。

 
ちなみにvertical-alignにはmiddleというプロパティがありこれを利用し、

.note_icon {
vertical-align: middle;
}

とすれば美しくセンター揃えに出来そうですが、実はこれは前記事にも出てきたエックスハイトに対しての天地センターなので、(「-」(ハイフン)と同じように)画像は和文フォントに対しては基本下がってしまいます。
d019_3
▲和文フォントは(書体にもよりますが)基本キャップハイトの大きさなので。

asobi_pic

情報/文字フォント(書体)と各種ライン

以前の投稿【講座/Photoshopのシェイプ等(ほぼ)ベクターで魔法陣作成2/3】で、Photoshopの文字パネルのベースラインシフトを利用しましたが、そのベースラインを含め各種ラインについて書きます。

チラシ等の広告で、注文や問い合わせのため目立つように大きく載せている電話番号の「-」(ハイフン)が、
↓以下のように数字の天地センターより下がっているのを見たことはないでしょうか?
d019_0
これも今回の内容に関係ありますので、こうなる理由も説明します。

 

字フォントまわりのラインとは、
この場合は主に欧文書体のレタリングやタイポグラフィ等に関係する要素で、
アセンダーライン、キャップライン、ミーンライン、ベースライン、ディセンダーライン、
といった種類があります。
キャップとはキーボードの「Caps Look」のキャップですね。
d019_1
▲アセンダーラインはアルファベット小文字の一番高いところ、キャップラインは大文字のそれです。この2つは書体によっては同じ位置、そうでなくても近い位置になります。

d019_2
▲英語用のノートは、このラインを元に罫線が引かれていますね。

さらに関連して文字の高さの範囲を示すのに、エックスハイトとキャップハイトがあり、
エックスハイト(小文字の「x」が由来)はミーンラインとベースラインの間、キャップハイトはキャップラインとベースラインの間の高さです。
d019_3
▲エックスハイトとキャップハイト

 

頭の電話番号の「-」(ハイフン)のくだりに戻りますが、
前述のような理由で、書体のデザインにもよりますが往々にして、
・数字はキャップハイトに収まり、自ずと天地センターはキャップハイトの中央
・ハイフンはエックスハイトの天地センターの位置、つまり「x」の交点あたり
と、それがハイフンが下がっている原因となります。
d019_4
▲ちなみにこの書体は【講座/Photoshopのシェイプ等(ほぼ)ベクターで魔法陣作成2/3】でも触れた編集可能のフォント埋め込みが許可されているフォントの小塚ゴシック Pro Bです。
小塚ゴシック Pro Bの「-」はエックスハイトのセンターより若干上にデザインされていますね。

以前別記事の【画材/コピックとメーカーについて】でも書きましたが私は大昔広告デザイン業界に居りまして、その当時はまだまだパソコンは本格的に導入されておらず、版下を手作業で作成しており文字は写真植字(写植)でしたが同じようにハイフンが下がる事例があったので、
見出し的に使われる扱いの大きい電話番号の見栄えを良くするために、ハイフン部分だけ写植を切り取って数字の天地とセンター合わせになるようにずらしていました。
※ハイフンだけに限らずこういった位置調整はしていました。
このあたりはゲームの開発でもGUI等で「文字を絵として表示する」(いつか解説します)場合に、やはり見栄えを良くするためにPhotoshop等の文字パネルのベースラインシフトで時間やその他制限がない限りバランス調整をしています。
文字間隔も同様ですが、そのパラメータの「カーニング」「トラッキング」「ツメ」に関してもいつか解説したいと思います。

 

なみに今回はハイフンのずれについて書きましたが、
同様の事象としてWikipediaでは半角と全角の括弧「()」「()」についての記事があります。
以下引用

ディセンダー
g、j、p、q、yについて、ベースラインより下に出た部分。
(特に横組みにおいて)活字を単独でなく並べた状態で俯瞰して、和文と特に異なる要素の一つが、このディセンダである。これに相当する要素が和文活字には存在しないためである。1バイト部分に欧文書体を組み合わせてあるフォントで、半角(すなわち1バイトの)括弧のベースラインが下がって見えることがあるのは、その括弧が ディセンダを計算に入れて デザインされているからと言える。

 

らにベースラインは、
webの文章中に画像を入れる際(d016_icon3(T) ←例えばこんな感じ)にも関係がありますので、それについては後日書きたいと思います。
アップしました→【情報/文字フォントのベースラインとHTMLのimg(イメージタグ)の関係】

asobi_pic

講座/Photoshopのシェイプ等(ほぼ)ベクターで魔法陣作成3/3

前回【講座/Photoshopのシェイプ等(ほぼ)ベクターで魔法陣作成2/3】の続きで最終回です。
カスタムシェイプを作成し登録、それを利用して模様を敷き詰め数字や文字にくっつかないようにフチドリ分を削ります。
そして最終的に文字フォントをシェイプに変換し、魔法陣全体のシェイプを一体化します。

8

数字や文字の背景部分の太めのリング(模様リングと呼称します)に、
任意の模様のカスタムシェイプを自作して入れます。
8-1.
まずカスタムシェイプの作成と登録の方法を。
カスタムシェイプ元絵用にカンバスを新規作成(大き目にしたほうが後述の形の崩れは少なくなります)することにし、
そこに元となる模様をブラシツールps_icon04(B)と消しゴムツールps_icon05(E)で適宜コピーや回転も使いながら描いていきます。
ノイズ等のフィルター機能群をいくつか駆使すれば、1ストロークも描かずともそれっぽく作れますが、この一連の講座でのPhotoshopの機能説明が多くなってしまうので、それは別な機会に触れられればと思います。

※ブラシツールps_icon04(B)(やフィルター)等ラスター系ツールを使うと、後述の選択範囲>作業用パスを作成で形が少なからず崩れます。
 一方、ペンツールps_icon06(P)をはじめとしたベクター系ツールで1アンカーポイントごと編集し像を作れば意図した形を崩さず出来ますが工数を要しますので、この絵ではそこまでの精度は必要なしと判断し見送っています。
 そのため講座のタイトルも「(ほぼ)ベクター」としています。
 1/3の冒頭にも書きましたが、Adobe Illustratorならもっと手数が少なく且つ美しく出来るかと思いますが、Photoshopでのベクター機能ではこの絵に関してはこの辺が落とし所としています(それでもかなり便利になりましたが)
d018_0
▲模様を書きました。この画像の白い部分は実際は透明です。

次に、Ctrl+レイヤーのサムネール部分をクリックし選択範囲を抽出、
さらにパスパネルに移動し下方にある「選択範囲から作業用パスを作成」ボタンをクリックで作業用パスを作ります。
この時Alt+クリックで許容値の調整も出来ますので、なるべく形の崩れない数値を探すのが良いでしょう。
d018_1
▲サムネールをクリックして選択範囲を抽出。

d018_2
▲ボタンをクリックで作業用パスを作成。

最後にパスコンポーネント選択ツールd016_icon2(A)に切り替え、右クリックでメニューを開き「カスタムシェイプを定義」で任意の名前をつけて保存します(編集>カスタムシェイプを定義でもOK)
そうするとシェイプツール群の中にあるカスタムシェイプツールps_icon07(U)のオプションバー内のカスタムシェイプピッカーに追加されます。
d018_3
▲ここに追加。

8-2.
カスタムシェイプツールps_icon07(U)で[8-1]で作成したカスタムシェイプを選び、模様リング部分(↓下図の緑のベタのあたり)に見栄えが良いように散りばめていきます。
後からリング状に削るので、はみ出ても構いません。
d018_4
▲見栄え良く適当に配置(分かりやすいように模様リングは緑にしています)

9

この模様の不要な部分を切り抜いていきます。
その際には模様リング、数字、文字にくっつかないように隙間を設けて切り抜きます。
9-1.
まず模様リングから。
模様のリング状以外の部分を消すために、円形のシェイプを2つ(模様リングの外側と内側の円)を用意します。
[4-1.]の図で示したレイヤー「シェイプa1」のリングの内側と「シェイプa2」の外側のシェイプを利用します。
d016_8
▲[4-1.]の図。

d018_5
▲分かりやすいように赤と青のカラーを設定しています。

まずそれぞれのレイヤーをコピーし、不要なシェイプ(a1の外側とa2の内側の円シェイプ)をパスコンポーネント選択ツールd016_icon2(A)で選択→Deleteキーで削除(削除した時点でリングではなくなりそれぞれ↓下図のようにベタが広がります)し、
このままの大きさで切り抜いてはリングと模様が接してしまうので、隙間ができるように残った円シェイプa1は縮小、a2は拡大し(ここでは直径6px程度)します。
d018_6
▲不要なシェイプを削除し、それぞれ縮小拡大。

パスコンポーネント選択ツールd016_icon2(A)のまま、まず模様リングの外側の円シェイプになる部分(a1)を選択し、オプションバーの「パスの操作」の「前面のシェイプで削除」から「シェイプ範囲を交差」に変更した後Ctrl+Cでコピー、
模様のカスタムシェイプを散りばめたレイヤーにペーストします。
d018_7
▲「パスの操作」を変更すると、ベタの範囲がこのように変わります。

d018_8
▲「パスの操作」>「シェイプ範囲を交差」後コピペするとこのように円の外側が消えます。

次は内側の円シェイプ(a2)を「シェイプの結合」から「前面のシェイプで削除」に変更した後、コピーペーストします。
d018_9
▲a2の「パスの操作」を変更すると、今度はベタの範囲がこのように変わります。

d018_a
▲「パスの操作」>「前面のシェイプで削除」後コピペすると今度はこのように円の内側が消え、必要な部分の模様のみベタが乗っている形になりました。

ここで念のためバックアップとしてレイヤーのコピーをとっておき、
次にパスコンポーネント選択ツールd016_icon2(A)のカーソルをカンバスの端から端までドラッグしシェイプ全体を選択、オプションバーの「パスの操作」で「シェイプコンポーネントの結合」をし一体化されたシェイプにします。
※結合を行うと属性パネルでのサイズの再設定等は出来なくなる(「ライブシェイプ」から「標準のシェイプ」になる)ので、念のためバックアップをとりました。
d018_b
▲「パスの操作」>「シェイプコンポーネントの結合」

d018_c
▲リング状に切り抜かれ且つ一体化された模様のシェイプになりました。

9-2.
次に数字と文字まわりの切り抜きをパスで作り、それも合わせて一体化します。
まず数字と文字の選択範囲を抽出するために、文字レイヤーを全てコピーしレイヤー>レイヤーを結合(Ctrl+E)等で結合、[8-1.]同様Ctrl+レイヤーのサムネール部分をクリックし選択範囲を作成します。
レイヤーをコピー→結合しなくても文字レイヤーを一つ一つ追加選択していけば出来ますが、こちらの方が早いかと思います。
d018_d
▲数字と文字のみの選択範囲を作成(見やすいように他は消しています)

この選択範囲からこれも[8-1.]と同様に作業用パスを作成しますが、数字文字との隙間を開けるために、選択範囲>選択範囲を変更>拡張で選択範囲を太らせます(ここでは3pxにしています)
d018_e
▲選択範囲を拡張。

この選択範囲を元に、これも[8-1.]と同様にパスパネルに移動し下方にある「選択範囲から作業用パスを作成」ボタンをクリックで作業用パス作り(パスコンポーネント選択ツールd016_icon2(A)のまま)Ctrl+Cでパスをコピーし[9-1.]の最終段階の一体化された模様シェイプのレイヤーにCtrl+Vでペーストします(ここも模様シェイプのレイヤーはバックアップをとっておいたほうが良いでしょう)
そしてその作業パスが選択されている状態で、オプションバーの「パスの操作」で「前面のシェイプで削除」をし切り抜きます。
d018_f
▲作業パスを模様シェイプのレイヤーにペースト。

d018_g
▲「パスの操作」>「前面のシェイプで削除」で切り抜き。

最後にこれも[9-1.]の最後と同じように、バックアップをとった上で、
パスコンポーネント選択ツールd016_icon2(A)のカーソルをカンバスの端から端までドラッグしシェイプ全体を選択、オプションバーの「パスの操作」で「シェイプコンポーネントの結合」をし一体化されたシェイプにしておきます。
d018_h
▲リング状および数字文字の形(隙間付き)に切り抜かれ、且つ一体化された模様のシェイプになりました。

10

全3回に及んだ今回の魔法陣作成の最後に、
文字をシェイプに変換し最終的に全てのシェイプを結合し全体を一体化します。
文字フォントのまま拡縮してもそれなりに見えますが(ただし像の拡縮ではなくフォントサイズの変更なので、後述の「シェイプに変換」よりはバランスの変化が大きいかと)、何よりこの文字フォントのインストールされていないパソコンだと書体が変わったりと不都合が出るのでフォントから像にしておきます。
(あまり詳しくはありませんが印刷の入校時も、文字フォントとしては残さずパス化(アウトライン化?)しているんじゃないかと思います)
それとまたバックアップの話ですがここでも、パス化すると文字の打ち直しは出来なくなるので、作業途中ファイル(もしくは同ファイル内の別レイヤー)としてバックアップはとっておいたほうが良いでしょう。
10-1.
各文字のレイヤーを選択し(複数選択も可)右クリックでメニューを開き「シェイプに変換」(若しくは書式>シェイプに変換)します。
このようにフォントから直接だと選択範囲を作業パスにするよりは高精度でパス化できますが、それでも位置が微妙にズレてしまいます(この辺りも「(ほぼ)ベクター」の所以です)
※[5-3.]でも触れましたが、文字パネルで「太字」を使用しているとこの「シェイプに変換」はグレーアウトしていて選択できません。
d018_k
▲右クリックでコンテキストメニューを開き「シェイプに変換」

全ての文字フォントを変換したら、まず[9-2.]で作った模様のシェイプ以外のレイヤーを複数選択しレイヤー>レイヤーを結合(Ctrl+E)等で結合し、そのレイヤーのシェイプをパスコンポーネント選択ツールd016_icon2(A)で全選択→オプションバーの「パスの操作」>「パスコンポーネントを結合」します。
d018_i
▲まずこちらだけパスコンポーネントを結合(見やすいように模様シェイプは消しています)

そしてそれと模様シェイプのレイヤーを結合し、同様の手順で「パスコンポーネントを結合」し一体化は完了です。
一度に全体を結合しなかった訳は、模様シェイプはすでにパスコンポーネントを結合しているので「標準のシェイプ」、それ以外は属性パネルで再編集が可能な「ライブシェイプ」だったので、そのまま結合すると像がおかしくなってしまうためです。
d018_j
▲パスだけ表示するとこんな感じです。

全3回に渡りましたが、この魔方陣を完成させるために利用する機能も多く、結果かなり長々と情報が分散してしまったようにも思えます。
開始から完成までの流れを追うのではなく、各機能説明のみを抜き出して書いたほうが分かりやすかったかも知れません。
その辺り今後さらに構成を考えますので、またお付き合い願えればと思います。

asobi_pic

講座/Photoshopのシェイプ等(ほぼ)ベクターで魔法陣作成2/3

前回【講座/Photoshopのシェイプ等(ほぼ)ベクターで魔法陣作成1/3】の続き。
前回は全2回のつもりで1/2としていましたが、思いの外ボリュームが有り3回になります。失礼しました。

使用文字フォントについて
この魔方陣では小塚明朝を使用していますが、これはAdobeから正規に入手(ソフトのバンドル等)したものであれば、編集可能のフォント埋め込みが許可されているフォントです。

5

パスに沿わせてテキストを入れていきます。
1月(英語の略称付き)から12月まで1周するデザインにします。
5-1.
まずは沿わせたいパスを用意しますが、すでに幾つか正円のシェイプがあるのでそれを利用します。
中心から2番めのリングの外側のパスを利用することにします。
d017_0
▲このリングのこのパス。

上記のリングのレイヤーを選択し、文字ツールd016_icon3(T)を選び、オプションバーで「テキストの中央揃え」にしてから、そのパスの任意の場所にカーソルを持っていき下図のようにカーソルが変化したらクリックし文字「1」を入力します。
小塚明朝だとリングにくっついてしまいますがそれは次で調整します。配置も後で移動しますので今は適当な場所でOKです。
d017_1
▲パスに沿わす時の文字ツールのカーソル。円形に限らず沿わせられます。

d017_2
▲文字ツールのオプションバーの「テキストの中央揃え」にして「1」を入力。

5-2.
リングに近すぎる文字を、文字パネル(無ければウィンドウ>文字で表示)の「ベースラインシフトを設定」を調整して離します。
デフォルトは0pxですが、プラスの値を入れて上に移動させます(マイナスなら下)
※ちなみに文字パネル内に「太字」ボタンがありますが、これを利用すると次回触れる文字を「シェイプに変換」が不可になるので今回は使いません。
 太い文字が欲しい時は素の状態で太いデザインのフォントを選びます。シェイプに変換しないなら使っても問題ありません。
d017_3
▲文字パネルの「ベースラインシフトを設定」を利用し「1」をリングから離しました。

5-3.
「1」を最上部センターに移動するため、パスコンポーネント選択ツールd016_icon2(A)で「1」を選びドラッグで最上部に持っていきます。この時グリッドをリングのセンターになるようにしておけば水平垂直(結果90°単位)にはスナップします。
d017_4
▲「1」を最上部センターへ。

6

「1」を元に残りの「2」から「12」までを作っていき、
それをリングに沿って配置します。
6-1.
「1」のレイヤーを11個複製し、それぞれテキストを書きかえて「12」までの12個のレイヤーにします。
d017_5
▲12個のレイヤー。

6-2.
まず1つ、「2」をリングに沿って移動させていきます。
パスコンポーネント選択ツールd016_icon2(A)に切り替え、まず対象のレイヤーを選択し、続いてパスパネル(無ければウィンドウ>パスで表示)でパスを選択、
その状態でCtrl+T(自由変形)のオプションバーの「回転」に「30」(時計回りに30°)と入力しEnterキーで変形を確定します(Shift+ドラッグで15°刻みになるでそれを利用してもOK)※12個で1周(360°)するので、360/12=30。
ここでパスコンポーネント選択ツールやパスを選択しないと、自由変形のセンターとリングのセンターがズレてしまいリングに沿った回転が出来ません。
d017_6
▲パスを選択し、自由変形のオプションバーの「回転」(見やすいように他の数字のレイヤーは非表示にしています)

残り数字もそれぞれの回転数、「3」は60°「4」は90°…と30°ずつ回転角度を増やしていきます。
d017_7
▲12個の数字が定位置なりました。

6-3.
同じ要領で、各月の英語の略称を配置していきます。
まず1月の「Jan.」を最上段センターに作成し、15°弱回転させ「1」と「2」の間に置きます。
15°「弱」としたのは「1」の方に寄らせたいためですが、各月の先頭のアルファベットの形によって数字との空き具合が違うので、後から各個調整します。
そして「Jan.」を複製し2月以降を作り、30°回転で数字の間に配置した後、さらに回転や文字パネルの文字間を調節するパラメータでバランスを取ります。
文字間を調節するパラメータには「カーニング」「トラッキング」「ツメ」とありますが、今回はそれっぽくなればどれを利用しても良しとします(機会を持てれば詳しく触れようと思います)
d017_8
▲略称も配置しバランスもとりました。

7

パスに沿わせる配置の最後として、
一番内側の目盛り状の飾りを入れていきます。
7-1.
実はこれも単なる文字フォント「■」の繰り返しです。
[5]と同じ要領で今度は一番中心のリングの内側のパスを利用します。
d017_9
▲このパス。

パスに沿わせて「■」を入力、文字パネルの「水平比率」で縦長にし「ベースラインシフトを設定」でリングとの距離を調整し、
それを連続コピー&ペーストで1周させ、同じく文字パネルで文字間を調節します。
図形できっちり作っているわけではないので、バランスが甘い部分もありますが今回の用途ではこれで良しとしています。
d017_a
▲目盛り状の飾りが配置されました。

最後に数字(と略称)の背景部分に模様を入れますが、それは【講座/Photoshopのシェイプ等ベクターで魔法陣作成3/3】に続きます。

asobi_pic

講座/Photoshopのシェイプ等(ほぼ)ベクターで魔法陣作成1/3

【イラスト01_キャラクター】バックにある魔法陣の作り方。
キャラクターの絵は既出の通りCLIP STUDIO PAINTで描いていますが、魔法陣はPhotoshopで↓のようなシェイプをはじめとしたベクターデータで図案を作成し、拡縮しても劣化しないようにしています。
※注意:文字のフチドリ等一部は選択範囲→パス化を利用しており美しく無いかもしれません。
 Adobe Illustratorならもっと手数が少なく且つ美しく出来るかと思いますが、Photoshopでの方法を説明します。
最終的にこの図案に対し変形やレイヤー効果を適用し仕上げています。
d016_0

以下の作業はPhotoshop CC 2014で行っていますので、
今回に限ったことではありませんが、バージョンが違うと出来ない機能もあると予想されます。
特にシェイプ関係は、CS6やCCでそれなりに便利機能が増えたのでそれが多いかもしれません。
(「ストローク(線)」の調整や属性パネルによって大きさや角丸の再指定が出来たりと、一部Illustrator的な感じになりました)

1

適当な寸法(今回はキャラ絵と同じで作業しています)でカンバスを新規作成し、楕円形ツールd016_icon0で任意の位置と大きさの正円のシェイプで作ります。
1-1.
Shift+ドラッグで縦横比1:1の固定で作れますが、カンバスをクリックして作成ダイアログを開くか、適当にドラッグして楕円をつくり後から属性パネルまたはオプションバーでW(横、Width)とH(縦、Hight)を同値にしても良いです。
ちなみに私はWidth=ウィドス、Hight=ハイトと呼んでいます。
d016_1
▲正円のシェイプを作成。見やすくするために「塗り」のカラーを適宜設定しています。

d016_2
▲シェイプの属性パネル。表示されていない場合はアプリケーションメニューのウィンドウ>属性で表示。
 サイズや配置の他に、長方形のシェイプ(パスでも)なら角丸のRの指定もできます。

2

シェイプをカンバスの上下左右センターに移動させます。
大きさの指定とは違い属性パネルのXY座標指定ではやりにくいので、移動ツールd016_icon1のオプションバーの項目を利用します。
2-1.
Ctrl+Aでカンバスすべてを範囲選択した状態で、
動かしたいシェイプのレイヤーが選択されていることを確認し、オプションバーの「垂直方向中央揃え」と「水平方向中央揃え」ボタンを押します。
d016_3

d016_4
▲正円のシェイプの位置がカンバスのセンターになりました。

3

シェイプの複製や操作をし、リング状にします。
これが魔法陣の一番外側の円になります。
3-1.
シェイプレイヤーを複製します。
元をシェイプa、複製をシェイプbとし、属性パネル(orオプションバー)を使いシェイプbをaより少し小さめの大きさに(ここでは直径-14px)します。
正確なピクセル値が欲しかったのでこのように入力していますが、Ctrl+Tで自由変形でもいいです(ドラッグしてアバウトに変更や、そのオプションバーによってパーセンテージで変更ができます)
変形の後、[2]の要領でセンターに移動します。
d016_5

3-2.
シェイプbをパスコンポーネント選択ツールd016_icon2(A)で選択し、Ctrl+Cでコピーし(シェイプbレイヤーが邪魔になるので非表示にして)シェイプaレイヤーを選択し、そこにCtrl+Vで貼り付けます。
このときのシェイプレイヤー内のシェイプの重なり関係は、aが背面でbが前面になっています。
※ラスターレイヤー(通常のレイヤー)と違いベクターレイヤーはそれ内のシェイプやパスに前面背面関係があります。
d016_6
▲同一シェイプレイヤー内では別々のカラーは持てないので、貼り付けた時点でbはaのカラーになります。

3-3.
シェイプbが選択されている状態のまま、オプションバー若しくは属性パネルの「パスの操作」の「前面シェイプを削除」を選び切り抜きます(aをbの像でマスクしたような形になります)
d016_7
▲シェイプaがシェイプbの形に切り抜きされ、リング状になりました。
 ※この状態でもaとbは別々のシェイプです。bを選択して移動すると切り抜きも移動し三日月のような形にも出来ます。
 「パスの操作」の「シェイプコンポーネントを結合」することによって、シェイプからパスになりはしますが一体化できます(複雑な形を作るときは何度かこの結合と合成を繰り返していきます。今回は比較的単純なので次回触れる模様部分以外では利用しません)

4

作成したリングの内側にさらにリングを作っていき、
幾つかの大きさの異なる円で構成された(同心円)図形にしていきます。
4-1.
[3-3.]で非表示にしたシェイプbのレイヤーを表示し、それを縮小し前述の要領で小さいリングをつくります(細かい大きさにこだわらないなら、既にあるリングのフォルダをコピーし自由変形させて作っても構いません)
これを適宜繰り返し、以下の様な形に仕上げます。
d016_8
▲大きさの異なる同心円のリングとそのレイヤー構成。

次に文字を入れていきます。【講座/Photoshopのシェイプ等(ほぼ)ベクターで魔法陣作成2/3】に続きます。

asobi_pic