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. べた塗りレイヤーを作成する(レイヤーマスクがかかる)

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

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

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

今回の記事では、上の画像のような、斜めに色分けされたテキストの作り方を紹介します。Photoshopで作成しますが、「選択範囲を読み込む」の使い方がポイントです。手順が長くなりますので、2回の記事に分けて紹介します。

手順

以下のような手順で作成できます。

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

1. テキストを入力する

文字を入力します。色の境目がはっきりわかるような、太めの文字が映えます。

2. 長方形ツールでパスを作成する

文字を囲むように四角形のパスを作成

長方形ツールで「パス」を描く設定にして、文字全体が納まる長方形を作成します。

3. 長方形のパスのアンカーポイントを1つ削除し、三角形を作る

三角形のパス

ペンツールを使って、長方形の角のアンカーポイントを1つ削除し、三角形のパスにします。

4. 三角形のパスから選択範囲を作成する

パスパネルで選択範囲を作成

パスパネル下部の「パスを選択範囲として読み込む」ボタンをクリックし、三角形のパスから選択範囲を作成します。

5. 三角形の選択範囲を保存する

チャンネルに保存された選択範囲

選択範囲>選択範囲を保存 で、三角形の選択範囲をアルファチャンネルで保存します。 続きは、次回の記事で紹介します。

CSS3 CSSだけでいろいろな形の吹き出しを作る方法4 ~出っ張った部分がカーブした吹き出し~

出っ張り部分がカーブした吹き出し

3回にわたってCSSだけで吹き出しを作る方法を紹介しました。今回は、上の画像のような出っ張った部分がカーブした吹き出しの作り方を紹介します。今回の記事でCSSの吹き出しについては最後です。

出っ張った部分がカーブした吹き出しの作り方

出っ張り部分がカーブした吹き出しの作り方

カーブを表現するために、疑似要素の ::before と ::after を両方使います。背面の疑似要素は吹き出しの色にし、前面の疑似要素は背景の色にします。疑似要素はどちらも、要素本体の背面に表示したいので、z-index: -1; を指定して重ね順を変えます。

出っ張った部分がカーブした吹き出しのコード例

HTML

<p>sample</p>

CSS

body { background: #EEE; }
p{
 position: relative;
 width: 200px;
 height: 50px;
 margin: 30px;
 font-size: 18px;
 color: #fff;
 line-height: 50px;
 text-align: center;
 background-color: #009D78;
 border-radius: 10px;
}
p::before,
p::after {
 content: "";
 position: absolute;
 z-index: -1;
 width: 35px;
 height: 35px;
 border-radius: 50%; /*疑似要素を円形にする*/
}
p::before{
 bottom: -12px;
 left: 36%;
 background-color: #009D78;
}
p::after{
 bottom: -16px;
 left: 30%;
 background-color: #EEE; /*背景の色を指定*/
}

DEMO

出っ張り部分がカーブしている吹き出しデモ

CSS3 CSSだけでいろいろな形の吹き出しを作る方法3 ~考えているときの吹き出し~

前々回の記事前回の記事と、CSSだけで吹き出しを作る方法を紹介してきました。今回の記事では、漫画などで「考えていること」を表すときに使われる吹き出しのCSSを紹介します。

考えているときの吹き出しの作り方

考えているときの吹き出しの作り方

普通の吹き出しでは三角形になる部分が、この形の吹き出しでは円形になります。この部分は疑似要素の ::before と ::after を両方使って表現します。円形を作るには、widthとheightを指定したうえで、border-radiusの値を50%に指定します。

疑似要素の円の位置は、bottom や left で様子を見ながら調整してください。

考えているときの吹き出しのコード例

HTML

<p>sample</p>

CSS

p{
 position: relative;
 width: 200px;
 height: 80px;
 margin: 30px;
 font-size: 18px;
 color: #FFF;
 line-height: 80px;
 text-align: center;
 background-color: #009D78;
 border-radius: 50%;
}
p::before,
p::after {
 content: "";
 position: absolute;
 background-color: #009D78;
 border-radius: 50%; /*疑似要素を円形にする*/
}
p::before{
 width: 22px;
 height: 22px;
 bottom: -12px;
 left: 42%;
}
p::after{
 width: 14px;
 height: 14px;
 bottom: -26px;
 left: 35%;
}

DEMO

考えているときの吹き出し

次回記事では、普通の吹き出しで三角形の部分が、カーブした形になっている吹き出しの作り方を紹介します。次回の記事でCSSの吹き出しについては最後です。