製作させていただいたサイトの中からの Pick Up!
     
安川自動車様   IS保険企画様   たきのゆ様   中村屋呉服店様
     
水島農機商会様   朝倉匠庵様   おたとうふ様   佐々木織産工業様

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

グリッド線を引く-4

今回は、前回作成したグリッド線に、ページの左の端からの距離と
上の端からの距離を記入していきます


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

文字を記入するには、ツールボックスのTマークの「文字ツール」を
クリックします⇒オレンジ○

カーソルが「黒い矢印」から「縦の線」に変わります⇒ブルー○
(画像では、わかり易く拡大しています)
このカーソルで、クリックした場所から、文字の入力が始まります

ページの左端の「ガイド」の少し左側、赤い線の上でクリックして
"0"と入力します

grid020.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

"0"を入力したら、"Ctrlキー"を押して、一度カーソルを「黒い矢印」に
戻して、"0"の入力を確定します
(入力を確定しないと"0"の後に縦のカーソルが点滅したままです)

"Ctrlキー"を話すと、文字入力用のカーソルに戻りますので、ページの
左端から"80px"先のガイドの左横に"80"と記入します

grid21.gif

続いて"80px"ごとに、数字を入力していきます


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

ページの右端の線"560"まで入力したら、ツールボックスで、「文字ツール」
から「情報ツール」に戻して、ヨコ線やタテ線を「グループ化」した時の
ように、黒い矢印のカーソルで、記入した数字を表示される点線で囲うようにして
選択します

grid22.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

横に並んだ数字が全部選択されている状態で、「整列ボックス」の
「オブジェクトの整列」の一番右の「垂直方向下に整列」をクリックします

grid23.gif

横に並んだ数字が、数字の下のラインで揃います


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

同じように、今度は縦に数字を"80px"ごとに、記入していきます

grid24.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

縦に並んだ数字が全部選択されている状態で、「整列ボックス」の
「オブジェクトの整列」の右から3番目の「水平方向右に整列」を
クリックします

grid26.gif

縦に並んだ数字が、数字の右のラインで揃います


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

横に並んだ数字と、縦に並んだ数字をすべて選択して、メニューバーの
「オブジェクト」→「グループ」をクリックします

grid27.gif

グループ化した後で、ヨコ線やタテ線の時と同じように「ロック」します



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

次に、レイヤーボックスの各グループのレイヤーにそれぞれ名前を付けます

一番下の「グループ」のところを"ダブルクリック"すると
「レイヤーオプションボックス」が開きます

名前の欄に"ガイド横"と記入して「OK」で、一番下のレイヤーが
「ガイド横」に変わります

grid28.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

同じように、下から2番目のレイヤーに"ガイド縦"、1番上のレイヤーに
"数字"と記入します

grid29.gif

レイヤーに名前を付けることで、あとあと作業をする際に
わかり易くなります。


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

これで、本作業に入る前の準備が終わりました。


今回は、ここまでです('◇')ゞ


スポンサーサイト

グリッド線を引く-3

今日は、「ガイド」をタテに引いていきます

ヨコ線のロックは外さないでください
ロックがかかってないと、タテ線を引いてる時に、黒い矢印の
「選択ツール」の動きで横線が動いてしまう可能性があります


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

ヨコ線を引いたときと同じように、左の定規の中をクリックして
ページの中までドラッグしてきて、タテの「ガイド」を引きます
ブルー○の部分

そして、今回はタテ位置なので情報ボックスのX:の数値
(この画像では"x:76px")をメモします⇒オレンジ○の部分

情報ボックスのX:の数値は、ページの左端から「ガイド」
までの距離です

grid0012.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

ヨコ線の時と同様、「ガイド」をページの左端に合わせるます

画面の任意の場所で右クリックしメニューを開き
「変形」→「移動」を左クリック

移動ボックスが開いたら、「水平方向」の欄に
先ほどメモをしたYのpx(ピクセル)の数値に
"マイナス"をつけて「-○○」と記入して「OK」⇒オレンジ○の部分

grid0013.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

ページの左端と重なっている「ガイド」を、右方向へコピー
していきます

「ガイド」を選択し、画面の任意の場所で右クリックしメニューを開き
「変形」→「移動」を左クリック

開いた移動ボックスの「水平方向」の欄に"20px"を記入して
「コピー」をクリック⇒オレンジ○の部分

grid00014.gif

「ガイド」がページの左の端から右へ"20px"の場所にコピーされます


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・


この2本の「ガイド」を、細い幅の"20px"と太い幅の"60px"、
あわせて"80px"の間隔で、右方向へコピーしていきます


2本の「ガイド」を選択します

"Shiftキー"を押しながら、黒い矢印の「選択ツール」で
1本づつクリックすると、2本同時の選択ができます

grid0015.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

2本の「ガイド」が選択された状態で、右クリックでメニューを開き
「変形」→「移動」をクリックし、移動ボックスを開きます

開いた移動ボックスの「垂直方向」の欄に"80px"と記入し
「コピー」をクリックします⇒

grid0016.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

コピーした後は、左の2本の「ガイド」ではなく、コピーされた
2本の「ガイド」が選択されています

grid0017.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

コピーされた2本の「ガイド」が選択された状態で
"Ctrlキー"を押しながら"D"を押して
ページの右端までコピーします(6回で右端までコピーできます)

grid17.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

次に、タテの「ガイド」をすべて選択します

画面左下の「拡大縮小」表示欄の矢印をクリックし、50%を選択し
ページ全体が見えるように縮小します⇒オレンジ○の部分

次に、黒い矢印の「選択ツール」を、ページの左上から右下まで
ドラッグ(ドラッグすると黒い点線の枠が表示されます)することで
タテの「ガイド」がすべて選択されます

ヨコの「ガイド」はロックされているので、選択されません

grid018.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

タテの「ガイド」がすべて選択された状態で
メニューバーから、「オブジェクト」→「グループ」をクリックします

grid19.gif

タテの「ガイド」が一つのグループとなります

レイヤーの「グループ」の横の空白のマスをクリックしてロックを
かけます



今回はここまでです('◇')ゞ

グリッド線を引く-2

前回引いた「ガイド」を基本にヨコのグリッド線を引いていきます


引いていくグリッド線の間隔は、下の画像のとおりの幅です

grid0007.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

前回、引いた「ガイド」を下のほうへコピーしていきます

ページの上の端と重なっている「ガイド」を左クリックで選択して
右クリックでメニューを開き「変形」→「移動」をクリック

grid5.gif



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

開いた移動ボックスの「垂直方向」に"20px"と記入して
「コピー」をクリックします⇒オレンジ○の部分

grid006.gif

「ガイド」がページの上の端から下へ"20px"の場所にコピーされます


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

この2本の「ガイド」を、細い幅の"20px"と太い幅の"60px"、
あわせて"80px"の間隔で、下方向へコピーしていきます


2本の「ガイド」を選択します

"Shiftキー"を押しながら、黒い矢印の「選択ツール」で
1本づつクリックすると、2本同時の選択ができます

grid00007.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

2本の「ガイド」が選択された状態で、右クリックでメニューを開き
「変形」→「移動」をクリックし、移動ボックスを開きます

開いた移動ボックスの「垂直方向」の欄に"80px"と記入し
「コピー」をクリックします⇒オレンジ○の部分

grid008.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

コピーした後は、上の2本の「ガイド」ではなく、コピーされた
2本の「ガイド」が選択されています

grid009.gif



コピーされた2本の「ガイド」が選択された状態で、この2本を
さらに、下のほうへコピーしていくのですが

右クリックで移動ボックスを、何べんも開くのも大変なので
ショートカットキーを使ってコピーします

"Ctrlキー"を押しながら"D"を押すと、コピーできます
"Ctrlキー + D" を9回繰り返すとページの下までコピーされます

grid9.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

次に、ヨコの「ガイド」をすべて選択します

画面左下の「拡大縮小」表示欄の矢印をクリックし、50%を選択し
ページ全体が見えるように縮小します⇒オレンジ○の部分

次に、黒い矢印の「選択ツール」を、ページの左上から右下まで
ドラッグ(ドラッグすると黒い点線の枠が表示されます)することで
ヨコの「ガイド」がすべて選択されます

grid0010.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

ヨコの「ガイド」がすべて選択された状態で
メニューバーから、「オブジェクト」→「グループ」をクリックします

grid10.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

ヨコの「ガイド」が一つのグループとなります

レイヤーの「グループ」の横の空白のマスをクリックしてロックを
かけます⇒オレンジ○の部分

ロックをかけた、図形や線は固定され、移動できなくなります

grid0011.gif


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

次回は、「ガイド」をタテに引いていきます


グリッド線を引く-1

前回お話した「グリッドシステム」で使用するグリッド線を引く
方法です。

グリッド線は、「ガイド」を利用して引いていきます

「ガイド」は通常の罫線と違い、画面上は表示されますが
プリンターに出力した時に印刷されない線です


これからの作業を始める前に、ツールボックスのツールを
黒い矢印の「選択ツール」にしてください

grid0001.gif

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・



まず、画面の上端と左端に「定規」を表示させます

上のメニューバーの「表示」→「定規」→「定規を表示」

grid1.gif

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・


上の定規の中(どこでもOK)をクリックし、そのまま下のほうへ
ドラッグしていくと、定規の中から線(「ガイド」)が現れますので、
ページの中までドラッグして持っていき、ドラッグをやめます

grid002.gif

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・


「ガイド」の上で、左クリックをして、「ガイド」を選択します
「ガイド」が選択されていれば画像のオレンジ○Aのように
四角い青いマークが表示されます

選択した時に、「情報ボックス」のYのpx(ピクセル)の数値
メモしておいてください ⇒ オレンジ○Bの部分

画像では33pxですが、この意味は「ページの上の端から33px下に
表示されている」という意味です
これから、ガイドを上の端にあわせる作業をします


左クリックで選択したら、今度は右クリックでメニューを開き
「変形」→「移動」を選択します

grid0003.gif

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・


「移動ボックス」が開きます
「ガイド」を上の端にあわせるには、上の端から離れている距離
Yの数値を "0"まで戻す必要があります

したがって、「移動ボックス」の中の「垂直方向」の欄に
先ほどメモをしたYのpx(ピクセル)の数値
"マイナス"をつけて「-○○」と記入して「OK」

grid4.gif

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・


これで「ガイド」がページの上の端と重なった状態になってます

重なっていない場合は、垂直方向でなく水平方向に入力したか
入力数値を間違えたかのどちらかですので、

画面上の何もないところで、右クリックしてメニューを開き
一番上の「移動の取り消し」を、クリックすると、移動前の
状態に戻ります

grid0006.gif

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・


今回はここまでです
次回は、ページの上の端と重なっている「ガイド」を
基本にして、ページ全体にヨコのグリッド線を引きます

説明、わかりにくくないやろか?・・・・自己嫌悪・・(-_-;)
プロフィール

asp

Author:asp
HP制作やブログカスタマイズなどを生業としていますが、歳をとるにつれて物忘れがひどくなってきたので、メモ代わりの備忘録でも始めようかと・・・・

検索フォーム


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。