デザインを考えるときはまず紙に書くのがおすすめ

印刷物やWEBのデザインを決めるとき、ラフの段階ではまず紙に書くのをおすすめしています。最終的にはIllustratorやPhotoshopなどを使って仕上げるわけですが、最初からこれらのソフトを使ってデザインを作っていくと作業がはかどりません。これは個人的な経験則から言えることでもあり、多くのデザイナーの意見でもあります。

もちろん「最初からパソコン上でデザインしたほうが効率的に作業ができる」という方も中にはいるかもしれませんが、「最初は紙に描く」のをやってみたことがない方はぜひ試してみてください。アイディアが浮かんだときにさっと素早く描くことが出来、それを基にしてさらに次のアイディアが浮かび…という風に、パソコン上で描いていくよりも構想が膨らみやすいように思います。

IllustratorやPhotoshopは、手書きでは描けない正確なデザインが出来ますが、手書きほど素早く描くのは難しいです。紙に描くとアイディアが浮かびやすいので、おすすめです。

Illustrator ドラッグとクリックの選択の違いについて

Illustratorでオブジェクトを選択するとき、ドラッグとクリックの二つの方法がありますが、重なったオブジェクトを選択したときの選択のされ方に違いがあるので注意してください。

クリックとドラッグの選択の違い

重なったオブジェクトをクリックで選択した場合と、ドラッグで選択した場合では、以下のような違いがあります。

  • クリックで選択すると最前面オブジェクトだけが選択される
  • ドラッグで選択すると重なったオブジェクト全てが選択される

そのため、最前面オブジェクトだけ選択したいときは、ドラッグではなくクリックで選択してください。背面オブジェクトがあることに気づかずドラッグで選択してしまうと、背面オブジェクトまでまとめて選択してしまいます。

選択しづらいときは、背面オブジェクトを別のレイヤーに入れたり、一時的にロック(選択して Ctrl + 2)してから選択するようにしてください。

Illustratorに慣れないうちは間違って別のレイヤーに描かないように注意!

Illustratorを習得中、まだ慣れないうちは、「Aのレイヤーに描いたつもりが、いつの間にかBのレイヤーに描いていた」なんてことがあると思います。レイヤーが切り替わっていることに途中で気づけばいいのですが、気づかずに描いてしまって、オブジェクトがどのレイヤーに入っているのか分からなくなってしまうと、探す手間が増えてしまいます。

今回の記事では、描画するレイヤーが切り替わる条件と、オブジェクトがどのレイヤーに入っているか分からなくなった場合の探し方を紹介します。

レイヤーが切り替わる条件

  • レイヤーパネルでレイヤーをクリックして選択する
  • レイヤーに含まれるオブジェクトを選択ツールなどで選択する

描画するレイヤーは、上のような条件で切り替わります。「レイヤーパネルで選択する」ほうは、気づかず行ってしまうことはないと思います。しかし、「レイヤーに含まれるオブジェクトを選択する」ほうは、意識せずレイヤーを切り替えてしまいがちなので注意してください。

たとえば、あるオブジェクトの選択を解除しようと思ったとき、普通は何もない場所をクリックしますが、隙間なくオブジェクトが配置されているときは別のオブジェクトをクリック(選択)することがあります。このとき選択したオブジェクトが別のレイヤーに含まれていたら、レイヤーが切り替わってしまいます。「知らぬ間に違うレイヤーに描いていた」というときは、大抵このような操作をしてしまっています。

知らぬ間にレイヤーが切り替わらないようにするために

知らぬ間にレイヤーが切り替わるのを防ぐには、以下のようなことに気を付けてください。

  • 「オブジェクトを選択するとレイヤーが切り替わる」ことを理解しておく
  • 作業しないレイヤーはレイヤーパネルでロックしておく

オブジェクトがどのレイヤーに入っているか分からなくなったら

オブジェクトがどのレイヤーに入っているか探すには、以下のような方法があります。

  • レイヤーパネルでレイヤーをひとつひとつ非表示にしてみる(オブジェクトが消えたらそのレイヤーに入っている)
  • オブジェクトを選択して、レイヤーパネルの右端に出てくる■「選択中のアート」で判断する(ただし、レイヤーがロックされているなど、オブジェクトが選択できない状態では確認できない)

レイヤーを非表示にしてみるのが一番確実です。Illustratorを使うときは、どのレイヤーに描いているのか意識しながら作業をするようにしてください。

Illustrator CC 変形パネルの「○○のプロパティ」を使うときの注意

Illustrator CC では、長方形ツールなどで描いた図形を選択した状態で変形パネルを開くと、「○○のプロパティ」という部分が表示され、図形の様々な設定を変更することができるようになっています。この機能で、長方形の角を丸くしたり、円形から扇形を簡単に作ることができます。後から値を変更することもできるので、大変便利です。

ただし、これはバージョンCC以降の機能なので、CS6以前のバージョンでは使えません。CS6以前のバージョンで図形を編集すると、この機能が使えなくなる場合があります

また、CS6以前のバージョンで編集するためにバージョンを落として保存したファイルをCCで開いた場合、開いた時点ですでに描画されている図形に関しては、設定した値が変わってしまう点に注意してください。(CCで新しく図形を描画した場合は、ファイルを開き直さない限りそのまま使えます。)

変形パネル扇形を作った例

Illustratorの基本の用語2 ~パスの各部名称~

前回の記事に引き続き、Illustratorの用語を紹介していきます。今回は、パスを構成する「アンカーポイント」や「ハンドル」の説明です。

パスの各部名称

パスの各部名称

パスとは

パスとは、「アンカーポイント」や「セグメント」で構成される「オブジェクト」のひとつです。ペンツールや長方形ツール、楕円形ツールなどで描くことができます。

アンカーポイント

パスを選択したとき、小さな四角形で表示される部分のことです。単に「アンカー」と呼ばれることが多いです。「アンカーポイント」の「アンカー」は「錨(いかり)」という意味で、パスの形の基準になっています。

ハンドル

曲線部分の「アンカーポイント」から伸びている棒のことです。曲線の曲がり具合を調整するためのもので、「ハンドル」の長さが曲がる強さ、「ハンドル」の向きが曲がる方向を表しています。直線部分の「アンカーポイント」には「ハンドル」はありません。

セグメント

「アンカーポイント」と「アンカーポイント」をつなぐ線の事です。「アンカーポイント」や「ハンドル」ほどよく使う言葉ではないので、覚えていなくてもそれほど問題ありません。

Illustratorの基本の用語1 ~「オブジェクト」と「パス」の違い~

Illustratorを学んでいく際に必ず出てくる「オブジェクト」「パス」「アンカー」などの基本の用語について、早い段階でしっかり意味を理解しておくことで、機能の解説などを誤解なくスムーズに理解することができます。今回の記事から、Illustratorの基本の用語の中で、特によく出てくるものをまとめていきます。

「オブジェクト」と「パス」の違い

オブジェクトとパスの関係

Illustratorを仕事で使っている方でも、「オブジェクト」と「パス」の意味を間違って覚えている方が結構います。文字をアウトライン化(パス化)することを「オブジェクト化する」という方がたまにいますが、文字も「テキストオブジェクト」なので、間違った使い方です。

「オブジェクト」とは「物」という意味で、Illustratorで扱う様々な図形や文字の事を指します。ペンツールで描いた図形も、文字も、すべて「オブジェクト」と呼ばれます。

「パス」は、その「オブジェクト」の一種で、「アンカーポイント」や「ハンドル」などで構成された図形の事をいいます。ペンツールや、長方形ツール、楕円形ツールなどで描くことができます。

「オブジェクト」という大きな括りの中に「パス」や「文字」があるということなので、意味に注意をしてください。

午後コース修了式

本日、グラフィックデザイン(午後)科のコースが修了を迎えました。このコースは、はじめから10人以下という少人数で、静かなコースでしたが、真面目な方が多く、皆勤の方が2名いらっしゃいました。

訓練に真面目に取り組む姿勢を、これからは就職活動に向けて、終了後3カ月以内にぜひ安定した就職をしていただきたいと思います。訓練校からの連絡には、くれぐれも返信をよろしくお願いいたします。

約6カ月間、長いようで短く感じられた方が多いと思います。それだけ集中して受講していたということでしょう。ここで得た知識、スキルはいろいろなところで役立つはずですので、これからも勉強を続けていって、これから就くお仕事に役立ててほしいと思います。

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

Illustrator CC 2017 テキストオブジェクトを作成すると勝手に文字が入る機能を無効にする方法

先日から、訓練校のIllustratorがバージョンCC2017になりました。そこで「テキストオブジェクトを作成すると、勝手に文字が入るので、これを無効にしたい」と質問があったので調べたところ、Illustrator CC 2017の新機能「サンプルテキストの割り付け」でした。デフォルトの設定では、新規テキストオブジェクト作成時にこの機能が必ず実行されるようになっており、毎回勝手にサンプルテキストが入ります。CC 2017 をリリース時から使っている方には今更な内容になってしまいますが、今回はこの機能についてです。

正直、毎回この機能が実行されて便利に感じられる方は少ないのではないかと思います。どちらかというと、煩わしいと感じるのではないでしょうか。使っているうちに慣れるとは思いますが、無効にする方法があるので紹介しておきます。

「サンプルテキストの割り付け」を新規テキストオブジェクト作成時に適用しない設定

無効にするには、環境設定を変更します。編集>環境設定 を開き、「テキスト」の設定で「新規テキストオブジェクトにサンプルテキストを割り付け」のチェックを外せばOKです。

サンプルテキストの割り付けを無効にする設定

自動でサンプルテキストが入る設定を無効にしても、書式>サンプルテキストの割り付けで、任意のテキストオブジェクトにサンプルテキストを割り付けることはできます。

参考サイト

Illustrator でテキストを作成する方法 -サンプルテキストの割り付け|Adobe

CSS 画像にホバーすると文字が出てくるエフェクトを作る方法

今回は、画像にホバーすると文字情報が表示されるエフェクトを作る方法を紹介します。CSS3のアニメーションや変形と組み合わせると、かなり色々なエフェクトを作ることができますが、ここでは一番シンプルなエフェクトを紹介します。

画像にホバーすると文字が出てくるエフェクトの作り方

DEMO

ホバーで文字が出てくるエフェクトのデモ

まずはデモをご覧ください。ホバーすると画像が白っぽくなり、文字がふわっと浮き上がります。このような見た目のエフェクトを作る方法は色々ありますが、今回は以下のような構造にしています。

  • 画像をdiv要素の背景に指定
  • 文字はdivの子要素の p に入れる
  • オーバーレイ(画像の上に乗せる色)を div の疑似要素 ::before で作成

文字の p 要素とオーバーレイの ::before は、普段 opacity: 0; で透明にしておき、ホバー時に opacity: 1; で表示されるようCSSを書きます。

CSSを書くときは、ホバーの指定をするセレクタの書き方がポイントになってきます。上の構造では「divにホバーした時のp要素」と「divにホバーした時の::before疑似要素」を表すセレクタを使います。

  • divにホバーした時のp要素「div:hover p
  • divにホバーした時の::before疑似要素「div:hover::before

以下に、具体的なコードを載せます。

コードの例

HTML

<div>
 <p>当店のパンはすべて自家製。<br>焼きたてをご提供しています。</p>
</div>

CSS

div {
 position: relative;
 width: 640px;
 height: 426px;
 margin: 50px auto;
 border: 1px solid #dfdfdf;
 background: url(../images/bread.jpg); /*画像は背景で指定(divの中にimg要素を入れ子にしてもOK)*/
 }
 div::before { /*オーバーレイ(画像に色を被せる)のスタイル*/
 content: "";
 position: absolute; /*positionがないとheight:100%;が効かない*/
 width: 100%; /*div要素いっぱいに広がるようにする*/
 height: 100%; /*div要素いっぱいに広がるようにする*/
 background: rgba(255,255,255,0.70);
 }
 p {
 position: relative;
 top: 50%; /*p要素を垂直方向中央に表示*/
 color: #222;
 font-size: 160%;
 text-align: center;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%); /*p要素を垂直方向中央に表示*/
 }
 div::before,
 p {
 opacity: 0; /*普段は文字とオーバーレイを透明にしておく*/
 -webkit-transition: 1s;
 transition: 1s;
 }
 div:hover p,
 div:hover::before {
 /*「divにホバーした時のp」と「divにホバーした時のbefore疑似要素」に対してスタイル指定*/
 opacity: 1; /*ホバー時に文字とオーバーレイを表示*/
 }

オーバーレイの疑似要素や文字をアニメーションで動かすと、色々なバリエーションを作ることができます。ぜひ試してみてください。

Photohop 斜めに色分けされた文字の作り方2

斜めに色分けされたテキスト

前回の記事の続きで、Photoshopで斜めに色分けされたテキストを作る方法を紹介します。

手順

前回の記事で手順5まで解説しました。今回は手順6から解説します。「選択範囲を読み込む」の使い方がポイントです。

  1. テキストを入力する
  2. 長方形ツールでパスを作成する
  3. 長方形のパスのアンカーポイントを1つ削除し、三角形を作る
  4. 三角形のパスから選択範囲を作成する
  5. 三角形の選択範囲を保存する ←前回の記事でここまで紹介
  6. 文字の形の選択範囲を作成する
  7. 「選択範囲を読み込む」で「現在の選択範囲との共通範囲」を読み込む
  8. べた塗りレイヤーを作成する(レイヤーマスクがかかる)
  9. もう一度文字の形の選択範囲を作成する
  10. 「選択範囲を読み込む」で「現在の選択範囲から一部削除」して読み込む
  11. べた塗りレイヤーを作成する(レイヤーマスクがかかる)

6. 文字の形の選択範囲を作成する

テキストレイヤーのサムネイル( T のマークが表示される部分)を Ctrl+クリック し、文字の形の選択範囲を作成します。

7. 「選択範囲を読み込む」で「現在の選択範囲との共通範囲」を読み込む

現在の選択範囲との共通範囲で読み込む

選択範囲>選択範囲を読み込む で選択範囲を読み込みますが、このとき、「現在の選択範囲との共通範囲」にチェックを入れて読み込むことで、文字の選択範囲と三角形の選択範囲が重なっている部分のみ選択されます。

8. べた塗りレイヤーを作成する(レイヤーマスクがかかる)

べた塗りレイヤーを作成

作成した選択範囲を塗りつぶしますが、ここではレイヤーパネル下部の「塗りつぶしまたは調整レイヤーを新規作成」ボタンから「べた塗りレイヤー」を作成します。選択範囲がある状態でべた塗りレイヤーを作成すると、自動でマスクがかかります。

9. もう一度文字の形の選択範囲を作成する

今度は文字の反対側を選択します。テキストレイヤーのサムネイルを Ctrl+クリック して、もう一度文字の形の選択範囲を作成します。

10. 「選択範囲を読み込む」で「現在の選択範囲から一部削除」して読み込む

現在の選択範囲から一部削除で読み込む

先ほどと同じように「選択範囲を読み込み」しますが、このとき「現在の選択範囲から一部削除」のチェックボックスにチェックを入れることで、文字の選択範囲から三角形の選択範囲と重なる部分を削除して選択されます。

11. べた塗りレイヤーを作成する(レイヤーマスクがかかる)

先ほどとは違う色でべた塗りレイヤーを作成して完成です。テキストレイヤーは非表示にしてしまってかまいません。