月別アーカイブ: 2016年11月

Illustrator 2つのアンカーポイントをつなげる「連結」機能の使い方

左右対称の図形を描く際に、半分だけ書いて反転コピーして作成すると効率的ですが、そのままでは左右バラバラのパスになってしまいます。そこで、「連結」機能で2つのオープンパスをつなげて1つにします。(参考記事:左右対称の図形を作るときに便利なリフレクトツール

このように、「連結」機能は、2つのアンカーポイントをつなげることができる機能です。左右対称の図形を描く以外にも、意図せずつながらなかったパスを後でつなげたり、複数のオープンパスを組み合わせて新しい図形を作ったりすることができます。今回の記事では、この「連結」機能の使用方法を紹介します。

「連結」の使い方

  1. ダイレクト選択ツールでつなげたいアンカーポイントを2つ選択する
  2. 右クリック>平均 を「2軸とも」にチェックして実行(ショートカット: Alt + Ctrl + J )
  3. 右クリック>連結 を実行(ショートカット: Ctrl + J )

「平均」や「連結」は、オブジェクト>パス から実行することもできます。

「連結」の際の注意

1.つなげられるのはオープンパスの端点のみ

アンカーポイントから3本以上の線を出すことはできません。そのため、パスの端点以外のアンカーポイントを連結することはできません。

2.アンカーが3つ以上選択されていると実行できない

上に書いたように、アンカーポイントから3本以上の線を出すことはできないため、3つ以上のアンカーポイントを選択すると連結ができません。必ず2つだけアンカーポイントを選択して実行します。アンカーポイントが密集しているときなど、意図せず3つ以上アンカーが選択されていることがあるのでご注意ください。

3.「連結」の前に「平均」を!

2つのアンカーポイントがピッタリ重なった状態で連結すれば、アンカーポイントは1つになります。しかし、アンカーポイントが少しでも離れていると、アンカー同士が線でつながれ、1つになりません。あえて間を開けておきたい場合以外は、アンカーポイントをピッタリ重ねた状態で連結しないと、無駄なアンカーができてしまうということです。

アンカーポイントをピッタリ重ねるには、「平均」という機能を使います。「2軸とも」にチェックを入れて実行すると、複数のアンカーポイントを同じ場所に持ってくることができます。

Illustrator ペンツールでアンカーポイントを打つ位置について

ペンツールの習得中には、アンカーポイントをどこに打ったらいいのか迷うと思います。以前ペンツールで曲線を書く際のポイントについて書いた記事では、「出っ張った部分に打つ」と説明しましたが、少し大雑把なので、今回の記事ではもう少し順序立てて書いていこうと思います。

アンカーポイントを打つ位置

アンカーポイントを打つ位置や数は決まっているわけではないので、人によって癖があったりしますが、目的の形にしようと思うと大体の位置は決まってきます。また、アンカーポイントを沢山打てば打つほど自由に曲げられますが、ガタガタ曲がりやすくなり、滑らかな曲線にするのは逆に難しくなります。無駄なアンカーポイントが多いとファイルサイズも大きくなってしまうので、できるだけ少ないアンカーポイントで描いた方が良いです。

アンカーポイントを打つときは、なるべく最小限の数で済むよう、次のように考えて打っていくと良いと思います。

  1. 描きたい図形をまず、直線と曲線に分解してみる
  2. 直線と曲線が切り替わる部分には絶対にアンカーポイントが必要
  3. 図形を分解してできた曲線が、アンカーポイント2つで描けるかどうか試してみる
  4. 形が合わないときは、ハンドルの向きと長さ、アンカーポイントの位置を変えてみる
  5. 曲線がアンカーポイント2つで描けないようなら、出っ張った部分にアンカーポイントを追加する

アンカーの位置

3 のとき、曲線が明らかに複雑で、見ただけで2つのアンカーで表せないことが分かったら、最初から 5 を参考にポイントを増やして書いてみてください。

5 の「出っ張った部分」とは、「描きたい図形を四角で囲ったときに辺に接する部分」です。必ずそこに打たなければいけないというわけではありませんが、大抵はうまくいきます。

Illustrator ロゴなどに線を使わないで仕上げるための「パスのアウトライン」

Illustratorは、ロゴなどの制作でよく使われます。ロゴは、WEBサイトや看板、フライヤーや名刺など、どんな大きさで使われるか分からず、拡大・縮小に強いベクターデータでの制作に向いているからです。ロゴ以外にも、地図やイラストなどがIllustratorで制作され、様々な大きさに拡大・縮小して使われています。

このように拡大・縮小して使う可能性のあるものは、「線を使っていないデータ」にするよう気を付ける必要があります。線が使われていると、拡大・縮小しても線幅は変わらないので、線と他の部分の比率が変わってしまうからです(下の画像)。

線を使ったオブジェクトを縮小した例

Illustratorの設定で「線幅と効果も拡大・縮小」にチェックを入れれば、線幅も同じ比率で一緒に拡大・縮小されます。しかし、普段はこの設定にチェックを入れないで使うのが一般的ですし、ロゴデータを使う人が、この設定にチェックを入れてくれるとも限りません。Illustratorの設定に関わらず、どんな環境でも正しく拡大・縮小されるようにデータを作っておくのが理想的です。

※「線幅と効果も拡大・縮小」は、編集>環境設定>一般 などからチェックを入れることができます。CS6以降のバージョンでは、変形パネルでチェックを入れると簡単です。

上記のような理由から、「線を使っていないデータ」が理想的なのですが、これは制作中に線を使わないということではなく、完成後に線の設定を無くしておくということです。そのために使う機能が「パスのアウトライン」です。「パスのアウトライン」を実行すると、線の部分が全て塗りのみのパスに変換されます。これを(線の)アウトライン化といいます。

ただし、「パスのアウトライン」を実行後は、線の設定が削除されてしまうので、線幅の変更などができなくなります。これでは修正があったときに大変なので、必ずアウトライン化前のデータもとっておいてください

Illustratorの変形パネルは計算ができる

Illustratorの変形パネルでは、加減乗除の計算ができるようになっています。横幅や高さを指定の倍率に拡大・縮小したいときや、「○○mm大きくしたい」といった場合に、自分で計算することなく変形が可能です。

変形パネルでの計算の方法

変形パネルで加減乗除の計算をするには、「 + 」「 – 」「 * 」「 / 」の記号を使います「×」や「÷」は使えないので注意してください。計算するときは、これらの記号と数値を単位の前か後に追加します。下の画像のような感じです。

変形パネルで計算単位の前

単位の前に計算を追加するか、

変形パネルで計算単位の後

単位の後に追加します。

また、この機能とは関係のない機能ですが、縦横比固定で変形をしたいとき、右端の鎖マークが外れた状態でも、幅か高さどちらか一方を入力し、Ctrl+Enterを押すと、縦横比固定の変形になります。こちらも便利なので、試してみてください。

「8ビットカラー」「24ビットカラー」などの「ビット」って何?

デジタル画像を扱っていると、「8ビットカラー」「24ビットカラー」「8ビット/チャンネル」など、「ビット」という言葉を耳にすることがあります。「○○ビットカラー」と言ったら、その画像が表せる色の数のことなのですが、なぜ「ビット」が色の数なのか解説したいと思います。まず、「ビット」とは何か確認しておきます。

「ビット(bit)」はデータサイズの最小単位

普段私たちが扱っているコンピューターのデータは複雑ですが、最小単位まで分解していくと、信号の「有り」「無し」だけでできています。データとしてコンピューターが記憶するときは、「有り」を「1」、「無し」を「0」として2進数で表します。この2進数の1桁で表せる情報量(「有り」か「無し」か)が1ビットです。

8bit=1B(バイト)で、1024B=1KB(キロバイト)、1024KB=1MB(メガバイト)、1024MB=1GB(ギガバイト)、1024GB=1TB(テラバイト)・・・となっています。

8ビットカラーや24ビットカラーとは

ビットがデータサイズの単位だということは上に書いた通りですが、それがなぜ色数の話になるかというと、このビット数は、1色を表すために使うデータサイズのことだからです。沢山の色を表現するには、1色データのサイズが大きくなります。そのため、8ビットカラー(256色)よりも24ビットカラー(約1677万色)の方が色数が多い画像ということになります。

具体的には、8ビットカラーは、1色を表すのに2進数で8桁分のデータサイズを使うということです。2進数で8桁使うと、最大で255(10進数)まで表せるので、それぞれの数字に色を割り当てれば256色になります。

24ビットカラーは1色表すのに2進数で24桁分のデータサイズを使うので、約1677万色表せることになります。

ほかにも、RGB各色8ビットという言い方をすることもありますが、これはRGBそれぞれ256色ずつという意味で、3色を組み合わせると約1677万色表せます。つまり、RGB各色8ビットの画像=24ビットカラーの画像ということです。

Illustrator基本操作 画面表示倍率の変更

前回の記事に引き続き、Illustratorの基本操作です。今回は作業画面の拡大・縮小方法を紹介します。

作業画面の表示倍率変更方法

画面の拡大・縮小をする方法はいくつか用意されています。私が個人的にお勧めしたい方法は、スペース+Ctrl でズームツール(拡大)、スペース+Ctrl+Alt でズームツール(縮小)です。この方法は、画面の表示位置を移動する際にスペースを押した流れで使用することができるので、慣れればスムーズに拡大・縮小することができます。マウスから手を離さなくていいのもメリットです。ただ、キーが押しにくい位置にあるので、押しにくい場合は、Alt+マウスホイールの方法がおすすめです。

他にも、下の表にまとめたような拡大・縮小方法があります。

Illustrator画面表示倍率の変更方法
操作(ショートカット) 効果
スペースキー+Ctrl + クリックまたはドラッグ 押している間ズームツール(拡大)
スペースキー + Ctrl + Alt +クリックまたはドラッグ 押している間ズームツール(縮小)
Alt+マウスホイール 上にスクロールで拡大、下にスクロールで縮小
Ctrl+ “+” または ” – “ Ctrl+”+”で段階的に拡大、Ctrl+”-”で段階的に縮小
ナビゲーターパネルのズームスライダーをドラッグ 赤枠内が画面に表示される
※左右のボタンで拡大・縮小もできる

表のように、作業画面の拡大・縮小には様々な方法があります。Ctrl + ” + ” または ” – ” やナビゲーターパネルを使った方法は、マウスから手を放すことになったり、手間がかかったりするので、補助的に使うのがいいと思います。

Illustrator基本操作 画面表示の移動

数日前に、WEBクリエイター養成(午前)科が開講しました。本日の訓練で、初めてIllustratorを使ったので、基本操作についてまとめておきます。今回の記事では、Illustratorを使ったことがある方には今更な内容だと思いますが、画面表示位置の移動の方法をまとめます。

画面表示位置の移動

画面の表示位置を変更する一番オーソドックスな方法は、スペースキーを押しながらドラッグです。色々なツールを使っているときにスペースキーを押すと、押している間だけ手のひらツールになるので、画面の移動ができます。ほかにもいくつか方法があるので、表にまとめておきます。

Illustrator画面表示位置の移動方法
操作(ショートカット) 効果
スペースキー+ドラッグ 自由に表示位置を移動
マウスホイール 縦方向にスクロール
Ctrl+マウスホイール 横方向にスクロール
ナビゲーターパネルの赤枠をドラッグ 赤枠内が画面に表示される

個人的には、スペースキーを押しながらドラッグが一番不自由なく移動できるのでお勧めです。

ただ、他の方法にもそれぞれメリットがあります。たとえば、マウスホイールを使う方法は、縦横にしか移動できませんが、文字入力中も使えるというメリットがあります(スペースキー+ドラッグだと、文字入力中はスペースが入力されてしまいます)。ナビゲーターパネルは、メニューバーのウィンドウ>ナビゲーターで開きます。ナビゲーターパネルは、表示する場所を取りますが、画面表示を拡大したまま、ドキュメントの端から端まで一気に移動するといったことが可能です。

午後コース終了式

congratulations!

本日、WEBクリエイター養成(午後)科の訓練が終了を迎えました。このクラスは欠席も少なく、センスのある方ばかりで、非常に優秀なクラスでした。制作の発表も、毎回とても見ごたえがありました。

6カ月の訓練を終えて、皆さんいろいろな感慨を抱いていると思います。短く感じた方も、長く感じた方もいると思います。スキルが沢山身についたと感じている方も、もっと勉強したいと感じている方もいるでしょう。もし、あまり進歩がなかったと感じている方がいたら、訓練開始時のときを思い出してみてください。前よりも成長した自分を見つけられるはずです。

訓練終了後も、ポジティブな気持ちで就職活動に励んでください。これから3カ月間、皆さんからの活躍のご報告を心待ちにしています。

6カ月間、お疲れ様でした。

CSS 属性セレクタの使い方7 ~E[attr*="value"]~

前回の記事に引き続き、属性セレクタの書き方です。今回は、属性値に指定した文字列が含まれる要素を対象にするE[attr*="value"]を紹介します。

E[attr*="value"] ― ある属性の値に指定した文字列が含まれる要素

属性セレクタの、属性名と「 = 」の間に「 * 」を挟むことで、ある属性が指定した文字列を含む要素をセレクタの対象にできます。属性値が一つの場合でも複数の場合でも使えます。

使用例

E[attr*="value"]の書き方を使って、<img>要素のsrc属性の値に「 _sp 」が含まれる<img>要素を非表示にしてみます。このような指定は、Media Queries と組み合わせて、画像のレスポンシブ対応にも使われることがあります。詳しい指定方法は、こちらの記事で紹介しています。

HTML

<img src="image_pc.jpg" alt=""> /*PC用の画像*/
<img src="image_sp.jpg" alt="">/*スマホ用の画像*/

CSS

img[src*="_sp"]{ display: none; }

E[attr^="value"]やE[attr$="value"]は、文字列が属性値の最初や最後になければいけませんでしたが、E[attr*="value"]の書き方は、指定した文字列が属性値のどの部分にあってもセレクタの対象となります。「属性値のどこかに指定した文字列が含まれる」という条件です。

文字列の指定の際には、意図していない部分にスタイルが適用されないか、しっかり確認をしてください。文字だけではなく記号も交えるなど、目的の部分にのみ当てはまるように工夫してください。

CSS 属性セレクタの使い方6 ~E[attr$="value"]~

前回の記事に引き続き、属性セレクタの書き方です。今回は、前回の属性値が指定した文字列で始まるE[attr^="value"]とは逆に、属性値が指定した文字列で終わる要素を対象にするE[attr$="value"]を紹介します。

E[attr$="value"] ― ある属性の値が指定した文字列で終わる要素

属性セレクタの、属性名と「 = 」の間に「 $ 」を挟むことで、ある属性が指定した文字列で終わる要素をセレクタの対象にできます。属性値が一つの場合でも複数の場合でも使えます。

使用例

E[attr$="value"]の書き方を使って、class名が「1」で終わる<p>要素の色を変えてみます。

HTML

<p class="sample1">クラス名sample1だけ</p>
<p class="sample2">クラス名sample2だけ</p>
<p class="sample1 sample2">クラス名sample1とsample2</p>
<p class="sample2 sampke1">クラス名sample2とsample1</p>

CSS

p[class$="s"]{ color: red; }

ブラウザ表示

表示結果

このように、属性値が「1」で終わるものだけ文字色が変わります。ここで注意してほしいのが、上から三番目の「sample1とsample2」は対象になっていない点です。属性値が複数ある場合には、最後の値の末尾が指定した文字列になっていないとセレクタの対象にはなりません。つまり「最後の属性値が指定した文字列で終わる」という条件です。