[Illustrator] パスの単純化

夏好きを宣言している私でも金木犀の香り漂うこの季節もわりと好きだったり。
こんにちは。スタッフ「の」です。

今回は、そろそろ「Adobe CC 2020」の足音が聞こえてきそうなこの時期にイラレ、フォトショ、インデ、とアップデートが入りました。
細かいバグ修正版かな、と思いきや「イラレ」は「パスの単純化」機能に変更点が見られました。
地味な機能の変更ではありますが、複雑なパスに伴うアンカーポイント過多は出力に時間が掛かるだけではなく修正等の編集作業を困難にするケースもあります。
もちろんPCにも負荷をかけます。
そこで今回は「余分なポイント」を減らす事に焦点をあててみたいと思います。

Illustratorを使用して素材作成している時にアンカーポイント多いな…って事があります。(特に効果に頼った時)アンカーポイントを「アンカーポイントの削除ツール」を使用して間引いてパスを修正するのは手間のかかる作業だったりします。

ここんとこのバージョンでは、「環境設定」を変えなければ「ペンツール」のまま追加や削除が出来ますがやはり手間である。

他にも「スムーズツール」を使用してパスをなぞるのも1つの手法ですが、制御が困難な事となぞるのでパスが大量にあればこれも手間がかかります。

①【パスの単純化】
そんな時には、「オブジェクト」メニュー→「パス」→「単純化」を実行します。
結構、旧バージョンからありますが、意外と知られていない機能だったりします。
2019年10月初旬のアップデート前までは以下のダイアログが出ます。
実行前と実行後のアンカーポイントの数と画像を確認しながら、「曲線の精度」と「角度のしきい値」のスライダーを調整します。(以下の画像はクリックで拡大します)

アップデート後に実行すると以下のダイアログが出ます。

スライダーが1つになりシンプルかと思いきや、「…(その他のオプション)」をクリックするとダイアログが大きくなります。

各スライダーも名称が変更になり、アイコンも付いて分かりやすくなりました。
「曲線の単純化」…最小に近づける程、アンカーポイント数が減ります。(コーナーポイント角度のしきい値が高いとあまり減りません)
「コーナーポイント角度のしきい値」…コーナーポイントの滑らかさとなり、数値を下回っている箇所は何も起こらないので数値が高いほど元の状態に近くなります。

▼「曲線の単純化」…最小、「コーナーポイント角度のしきい値」…0°(赤い線は元の状態)
精度は低いですが、アンカーポイント数も減りました。

▼「曲線の単純化」…最大、「コーナーポイント角度のしきい値」…180°(赤い線は元の状態)
元の線が殆ど見えない程、精度は高いですが、アンカーポイント数はあまり減っていない。

▼「曲線の単純化」…最小、「コーナーポイント角度のしきい値」…180°(赤い線は元の状態)
「コーナーポイント角度のしきい値」の数値が高いのでアンカーポイント数は減っていないですが、精度は少し落ちています。

▼「曲線の単純化」…最大、「コーナーポイント角度のしきい値」…0°(赤い線は元の状態)
今回の例では、アンカーポイント数も減り、精度も良い感じとなりました。

▼自動単純化(赤い線は元の状態)
標準の状態っぽい。ここから元の状態を見ながら各スライダーで調整します。

因みに「線幅ツール」で作成したデータを「パスのアウトライン」後に「単純化」を実行すると元データとそれほど遜色なくこんなにアンカーポイント数を減らせます。(198あったポイントは16に減りました)

他にも直線でひいたパスを曲線にする事も出来ます。(アンカーポイント数は14→2に減りました)

②【「パスファインダー」パネルのオプション】
「パスファインダー」パネルで合体機能を使用すると、ポイントが残ります。

「パスファインダー」パネルのパネルメニューから「パスファインダーオプション…」をクリックし、ダイアログ内の「余分なポイントを削除」にチェックを入れておきます。(以前のバージョンでは起動の度にリセットされてオフに戻ってました)

余分なポイントなく作成できました。

さて、「パスファインダーオプション…」といえば、こちらはどうか、というのがあります。
例えば、ドーナツを描いて縦線で半分に分割したいと思った場合。(抜けているのが分かるように背面に水色を引いております)

通常見えないですが透明な縦線が残ります。

「パスファインダーオプション…」ダイアログ内の「分割およびアウトライン適用時に塗りのないアートワークを削除」にチェックを入れて実行すると不要な縦線は残りません。

残念ながらこちらの方は、Illustratorを再度起動するとチェックが外れてしまいました。

③【孤立点】
「選択」メニュー→「オブジェクト」→「孤立点」を実行するとドキュメント内の不要なアンカーポイントが選択されます。
入稿前に確認してみましょう。

以上です。

バンフートレーニングスクールでは、イラストレーターやフォトショップ、インデザインにWebサイト作成の講座を 開講中です。

このブログを書いているスタッフ「ほ」と、スタッフ「の」をはじめとする印刷会社の研修部門のスタッフがアプ リケーションの使い方を徹底レクチャー!

詳しくは、下記詳細ページをご覧ください。

イラストレーター講座

ご興味がある方は、ぜひ一度無料体験にお越しくださいませ。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Illustrator]フリーグラデーションでリアルなイラスト描いてみよう

夏があっという間に過ぎていきましたね。
そろそろ私の大好きな秋が到来するので、今からワクワクですが、おいしいもの食べすぎて体重が増加して会社の健康診断見て青くなる時期でもあります。。

ということで、今日からリリースされた位置情報ゲームをスマホにダウンロードしてみました。歩いた量でストーリーを進められるゲームです。

さて、これで体重増加を抑えることができるのか…?!

こんにちは、スタッフ「ほ」です。

今回は久しぶりにグラデーションでいってみたいと思います。

以前、このブログでグラデーションメッシュを使ったイラストの描き方をご紹介しました。

[Illustrator]イラレのグラデーションを極める

グラデーションメッシュまでを使いこなすことができれば、かなりリアルなイラストも描けますよ、といった内容でご紹介しておりました。
なるべく簡単にできるように記事を書いたつもりですが、やはり使いこなしにはパスやアンカーポイントを自在に操作できるスキルが求められてしまいます。

そんな中、Illustrator CC2019からグラデーションパネルに「フリーグラデーション」という機能が搭載されました。

これまでにないグラデーション表現が可能になる機能です。
今回はこのフリーグラデーションをご紹介します。

基本

CC2019のグラデーションパネルです。
ここにフリーグラデーションが追加されました。

それ以外の2つは従来からある機能で、「線形グラデーション」と「円形グラデーション」です。

▼線形グラデーション

一方向にまっすぐ変化するグラデーションです。
グラデーションツールを用いることで縦や斜めに方向を変えられます。

▼円形グラデーション

真ん中から放射状に広がるグラデーションです。
グラデーションツールを用いることで中心位置やサイズを変更できます。

それでは、フリーグラデーションを使ってみましょう。
前回の記事で「これはグラデーションメッシュじゃないと作れませんー」とご紹介したこのグラデーションをフリーグラデーションで作ってみましょう。

長方形ツールで四角形を描き、「塗り」に対してグラデーションパネル内の「フリーグラデーション」アイコンを適用します。

パネル内の「グラデーションを編集」ボタンをクリックすると…

四角形の各カドに丸いマーカーが出てきました。
これがフリーグラデーションのカラー分岐点になります。

カラー分岐点には、それぞれ色が設定されており、となりの分岐点との間にグラデーションを生成します。

4つのカラー分岐点で色を入れかえていきます。

各分岐点をダブルクリックすると、以下のような画面が出てきます。

左部のアイコンをクリックすることで、カラーパネル調、スウォッチパネル調、画面内からクリックで色を抽出できる「カラーピッカー」が切り替わります。好きなモードで分岐点に色を入れていきます。

分岐点はドラッグで位置調整ができます。

それぞれの分岐点をカドギリギリまで移動すると、今回作りたかったグラデーションが出来上がります。これまでグラデーションメッシュでなければできなかったものがあっさりと作れるようになりました。

さらにパネル内の「描画」欄にある「ポイント」にチェックを入れた状態で四角形の中をクリックすると分岐点を追加できます。

※分岐点を削除する場合は、分岐点をクリックで選択した状態でDeleteキーを押すか、分岐点をオブジェクトの外にドラッグします。

ちなみに描画欄の「ライン」にチェックを入れてオブジェクト内をクリックしていくと、分岐点をアンカーにした線が引かれます。

引いた線に沿ってグラデーションが作成される、ということらしいのですが、ポイントで同じ位置に分岐点を打ってもほとんど同じものが出来上がります。

正直、「ここは『ライン』じゃないとダメだよね!」という使いどころがわかりません。。。どなたかこれぞ!という使い方を思いついた方は教えてください。

(※2019/09/20追記)

フリーグラデーションがスウォッチに登録できないーというお問合せをいただきました。

フリーグラデーションはグラフィックスタイルパネルの方に登録が可能です。パネル内にドラッグ&ドロップして登録してください。

(※追記ここまで)

実践

では、実際にフリーグラデーションを使えば何ができるのか?
イマイチ、ピンとこない人も多いかと思います。

私もこの新機能を知った際に「へぇ、にじんだ水彩画みたいなのができるかなー?」程度でしたが、実際に使ってみるとグラデーションメッシュに近いことができるため、リアルなイラスト描画ができるはず!

ということで、写真ACさんから柿の写真をお借りしてきました。おいしそう。

この写真をトレースしてリアルな柿を描いてみたいと思います。

ペンツールで輪郭をトレースしていきましょう。線は後で消すので色も太さも適当でかまいません。

 

実際のパーツでオブジェクトも分けた方がよさそうなので、柿の実、ヘタ、枝部分で分けてトレースしました。

描けたら、オブジェクトを移動して写真の横に並べましょう。

選択ツールで柿の実オブジェクトを選択し、「塗り」にグラデーションパネルから「フリーグラデーション」を適用します。

作成された分岐点の位置を整えます。

その時の写真の状態にもよりますが、今回の柿は両端のオレンジをしっかり確保したかったので、まずは四隅に配置しました。

配置した分岐点に色を入れていきます。となりに並べた写真から色を拾ってきます。

分岐点をダブルクリックしたら、出てきたパネルの左部にあるスポイトのマークをクリックします。

そうすると、パネルが閉じてマウスポインタがスポイトの形状になるので、柿の写真に移動して、分岐点と同じ色のあたりの色をクリックして吸い上げます。

そうすると、分岐点にスポイトで吸い上げた色がセットされます。

この要領で4か所の分岐点に色を入れた状態が下図です。

写真では柿の実中央あたりが少し色が濃くなっており、その両サイドにハイライトが入ってます。

そこで、そのあたりにポンポンと分岐点を置いていきます。

あとは先ほどと同じ要領で追加した分岐点に色を入れていきます。

分岐点をクリックした際に現れる破線の円形についている下記のマークをドラッグすると、その分岐点の色の領域を広げることができます。

写真を見ながら分岐点の位置とサイズを調整して色を写真にちかづけていきます。

必要があれば分岐点をさらに追加していきましょう。

ヘタ部分も同じ要領で色をセットしていきます。

色が入ったら、輪郭の線を「なし」にして……

ヘタと実の一体感がイマイチだったので、ヘタにドロップシャドウを設定してみました。

元の写真との比較です。写真と並べてしまうと、やっぱりイラストだなーという感じはしてしまいますが、単体で見れば、かなりリアルなイラストになったのではないかと思います。

グラデーションメッシュよりも直感的に作業ができますし、メッシュよりもグッと短時間で作業がおこなえました。

グラデーションメッシュの回で描いたバナナのように長くて細いグラデーションを作成するのは、メッシュの方が優れていますが、今回のように丸に近い物体はフリーグラデーションの方が簡単に作業できるかと思います。

 

さぁ、どうでしたか?フリーグラデーション。;

新しい機能がついたはいいけれど、どこで使うの?これ?と思われている方、ぜひぜひイラスト描画で使ってみて下さい。
慣れればかなり使いやすいですよ。

イラストレーターの基本からしっかり勉強したいんだけど……という方は、ぜひバンフートレーニングスクールのイラストレーター講座へお越しください。
このブログを執筆している私スタッフ「ほ」やスタッフ「の」がわかりやすくレッスンしております。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Photoshop] 水滴を加えて夏らしい画像に!

画像に水滴を加えて夏らしいイメージ画像を作成します。
「レイヤー」パネルを使用して背景レイヤーを複製します。(ショートカットは「⌘(command)」キー+「J」(Mac)「Ctrl」キー+「J」(Win))

ツールパネルから「楕円形ツール」を選択します。

画像内にドラッグで楕円を描きます。(「塗り」「線」ともになし)

「レイヤー」パネル内で「楕円形レイヤー」は「描画モード」を「オーバーレイ」、「塗り」は「0%」にしておきます。

「楕円形レイヤー」名の横をダブルクリックして「レイヤースタイル」ダイアログを出します。

ダイアログ内で「ベベルとエンボス」の項目を選択し、以下の設定を行います。(設定は画像解像度や水滴の大きさによって変わります)↓クリックで拡大します

続いて「シャドウ(内側)」の項目を選択し、以下の設定を行います。

続いて「ドロップシャドウ」の項目を選択し、以下の設定を行います。

最後に「光彩(内側)」の項目を選択し、以下の設定を行います。

水滴内に球体のゆがみを入れます。
レイヤーのサムネール上を「⌘(command)」キー(Mac)「Ctrl」キー(Win)を押しながらクリックすると、レイヤー内にある画像形状の選択範囲が作成されます。

この為に複製しておいたレイヤーを選択します。

「フィルター」メニュー→「変形」→「球面…」を実行し「球面」ダイアログで「量」の設定を行い「OK」します。

新規レイヤーを作成し、「ブラシツール」を使用して白いハイライトを加えます。

必要に応じて水滴のある楕円形レイヤーの不透明度を調整します。

バンフートレーニングスクールでは、フォトショップが最短2日間で習得できるハンズオントレーニングをご用意してお待ちいたしております。
無料体験も行っておりますので、ぜひお気軽にご参加ください。

フォトショップ講座詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Adobe CC]Adobe Fonts を使用してみよう!Web編

なかなか梅雨が明けませんね。
おかげで家の空調代がかからずに少し助かっています。

駅までの坂道がつらくて初めての電動アシスト自転車を買いましたが、この天気でなかなか乗れていないスタッフ「ほ」です。

さて、前回のエントリーではスタッフ「の」がAdobe Fontsについてご紹介しました
で、そこで「DTP編」とついていたので、本人に「次回はWeb編を書くの?」と聞いたら「いえ、スタッフ「ほ」が書くと期待して…」という答えが返ってきてしまったので、今回のお題は…

「Adobe Fontsを使用してみよう Web編」としてお送りします。

フォント指定はCSSのfont-familyで

まずはWebサイトを作成するときのフォント指定の基本からおさらいしていきます。

Webサイトを作成する際、私たちがフォントの指定をおこなわないと、それぞれのブラウザが自分の好きなフォントを割り当てることになっています。

例えばIEならMS Pゴシック、Win版のChromeならメイリオ、といった具合です。

フォントの指定をする場合はCSSのfont-familyプロパティを使います。

body {font-family:Meiryo;}

ただし、例えばWindowsとMacintoshでは入っているフォントが異なったりしますので、カンマで区切って複数のフォントを第一希望、第二希望といった感じで指定をするのがセオリーです。

body {font-family:”Hiragino Kaku Gothic ProN”,Meiryo,sans-serif;}

閲覧者側のPCにもフォントが必要

ただ、Webのフォント指定で問題なのは、Webサイトを作る人のPCではなく、閲覧する人のPC内からフォントを呼び出して表示するため、閲覧者のPCに指定したフォントが入っていないと、望み通りのフォントで表示されません

PCにインストールされているフォントは、OSやバージョンによってさまざまです。

そう考えると、すべての人に同じフォントを見せるのはなかなか難しいことなのです。

Webフォント

そこで考え出されたのがWebフォントです。

Webフォントは、フォントをあらかじめインターネット上のサーバーに置いておき、閲覧者のPC内からではなく、このインターネット上のWebフォントを読み込んでもらうことで、すべての人に同じフォントを表示させようとする仕組みです。

Adobe FontsをWebフォントで利用する

Adobe CCユーザーが利用できるAdobe FontsもWebフォントとして利用が可能です。
しかも、利用方法はとってもカンタン。

ざっくりと使用までの流れをご紹介します。

前回、スタッフ「の」がご紹介している方法でAdobe Fontsの一覧ページに移動したら、画面右上にある「日本語モード」をクリックすると日本語フォントのみが表示されるようになります。

一覧から自分の使いたいフォントを探しますが、この時「サンプルテキスト」欄に任意の文字を入力すると、そこで入力された文字列が各フォント見本として置き換わります。イメージがつかみやすくなります。

利用したいフォントが決まったらフォントの説明下部にある</>をクリックします。

画面に「新規Webプロジェクトの作成」というダイアログが開きますので、「OK」をクリックしましょう。

次の画面では「新しいプロジェクト名を入力」欄に任意の名前を入力し、「作成」をクリックします。

次の画面でソースコードが発行されます。上の赤枠の中身をコピーしてHTMLファイルの~の間に貼り付けます。

下の赤枠内に表示されたCSSの設定をCSSコードに追加します。

以上で設定は完了です。

サンプルページを用意いたしました。下記リンクから確認してみてください。

サンプルページ

とってもカンタンですね。

Adobe Fontsには素敵なフォントがたくさん。
ぜひぜひ皆様も試してみて下さい。

バンフートレーニングスクールでは、ホームページの作り方を教える講座も開講中です!
HTMLとCSSを使ってホームページ作ってみませんか?
スマートフォンに対応したレスポンシブWebデザインサイトを作る講座もありますよ!

Web制作講座の詳細はこちら

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Adobe Fonts を使用してみよう!]

今回はとても使い易くなってると評判の「Adobe Fonts」DTP編って事でいってみます。
以前「Typekit」と呼ばれていたサービスがグレードアップして名称が変更になりました。
「Typekit」時代、プランによって使用できるフォント数に制限があったりと少し複雑な部分がありました。
「Adobe Fonts」は、制限もなく分かり易くなってます。そして使い方も簡単です。

まず「Adobe Creative Cloud」アプリから「フォント」をクリックします。
(Adobe IDでサインインを忘れずに)

「フォントを参照」をクリックするとブラウザソフトが立ち上がり、フォント一覧が表示されます。

後は使用したいフォントを「アクティベート」→「アクティブ」にしていくだけです。
太さ違い等、複数ある場合はその数が表示されています。
一気にアクティブにもできますし、選んでアクティブもできます。

更に「フォントパック」から入れば、一気にアクティブも可能です。

Adobe Creative Cloudアプリで沢山のフォントがアクティブになっている事が確認できます。

アクティブにすると様々なアプリで使用可能となり、InDesignの「OpenType機能」も使用できます。

【注意点】


フォントはPCにインストールされる訳ではなので、Adobe CCの契約が切れれば使用できなくなります。


DTPで使用の場合、AiやIDのネイティブファイルでの入稿は印刷屋さんに対応状況を確認した方が良いです。
(会社のセキュリティ都合上オフラインで使用してる場合があります)

さて「Adobe Fonts」の話ではないのですが、5月に「Adobe CC」関して「2つのメジャーバージョンのみが導入できるようにする」と発表がありました。
「Adobe CC」は、CS6以降の全バージョンが使用できる。というのも1つの売りだった気がするのですが、今後PCの買換え等ある場合は注意した方がよさそうです。
既に現状、CC2019と2018のどちらかしかインストールできません。
(Illustratorの場合、23がCC2019、22がCC2018です)

バンフートレーニングスクールでは、インデザインが最短2日間で習得できるハンズオントレーニングをご用意してお待ちいたしております。
無料体験も行っておりますので、ぜひお気軽にご参加ください。

インデザイン講座詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

Vanfu Training Schoolのスタッフがお役立ち情報を発信中