Quantcast
Channel: 3倍早くなるためのDTP講座
Viewing all 136 articles
Browse latest View live

ちょこっとだけ帰ってきたIllustrator強化作戦3

$
0
0

バーバパパの作者、タラス・テイラーさんのご冥福をお祈りします。


DTPにとってのアプリケーションは、アナログでいう定規やカッターと同じ「作るための道具」です。

昔は定規のウラに一円玉を貼ってインクが滲まないよう工夫していましたが、道具を作業内容に合わせて最適化すれば、効率が上げたりミスを防いだりできます。

最適化は自分が既製品にあわせるのでなく、既製品を自分にあわせる方が自然ですよね。

しかし、Illustratorには作れないショートカットやアクションに記録できないものが沢山あり、カスタマイズしにくい。

柔軟性のないルールに従っていたのでは、知らぬうちに余計な作業を強いられていることもあるのです。そこで、思い切って決められたルールを破ってしまいましょう。

さて、以前からこのようなケースではQuickeysを薦めてまいりましたが、まあ、最近Quickeysもアレなので、今回は似た機能を持ったユーティリティソフト「Keyboard Maestro」をご紹介します。ざっと触ってみたところ、細かい違いはあれど機能は完全にカブってます。



まあ、できればどちらでもいいんです。のび太の孫がセワシなら途中は何でも良いのといっしょ^^。でもやっぱり個人的にはQuickeys派です。
※ちなみに両方ともMac専用です。winユーザーさんゴメンナサイ。


というわけで、「Illustrator操作をユーティリティソフトで強化する」というテーマで進めたいと思いますが、まずは予備知識としてKeyboard Maestroの概念に触れておきます。

Keyboard Maestroとはマクロを作ってトリガーによって実行するユーティリティソフトです。え、わからん?

では、3flab inc.さんの説明をご覧ください。すごくわかりやすいです(いつもの他力本願)。

マクロの作成はプリセットからActionをコツコツドラッグして構築できます。

これはこれでレゴブロックのようで楽しいのですが、操作を一度Recordで記録して、追加・削除して調整する方が簡単です。


↑操作を記録できる


↑記録したものを編集できる


これってどこかで見たことありませんか? そう、概念はIllustrator標準の「アクション」と似ています。




各ActionはKeyboard Maestroエディタで項目の入れ替えや追加・削除、パラメータの変更などを直感的に行えます。


エディタのカラム左はグループで、マクロの適用範囲を限定します。設定できるアプリケーションは1つだけでなく、CS5とCS6をグループにしてマクロを共有することも可能です。

↑個別に作るの面倒なときなどは共用してしまうのもひとつの手



ただし、パネルの位置指定やメニューコマンドは位置や名称変更などにより、共有してもうまく作動しないものもあるので注意しましょう。

カラム真ん中はタイプ、マクロ名、トリガーの表示です。タイプは内容に合わせて自動的にアイコンが変わるので探すときの目安にしましょう。

↑カラム真ん中に作成したマクロが一覧表示されます



エディタの右側がトリガーとActionの詳細です。トリガーは各種ありますが、ショートカットをあてるならHotkeyで設定します。

↑いっぱいあるけど、ショートカット割り当てはこれ


↑カラム右側にマクロの内容=Actionが表示されます。Actionの内容はここで編集できます。



各Actionの編集は、ドラッグ、コピペ、消去などで直感的に行えます。

Actionの編集に入ると左側の表示が変わり、カテゴリー別に項目を選べるようになります。これらはドラッグで追加することもできます。項目が多いので、よく使う物はfavoritesに入れておきましょう。

また前述しましたが、Recordで記録して編集すると、categoryを意識しなくて済むので簡単です。

このようにActionを組み合わせてマクロを作成し、ショートカットを当てておけばいいろな操作をショートカット一発に置き換えられます。

というわけで、前置きが長くなりましたが、Keyboard MaestroでIllustratorの操作を強化する使用例(基礎編)をご紹介しましょう。


●キーボードショートカットに好きなキーを使う

例えば、複数の同色オブジェクトを選ぶ場合、個別に選択するよりもメニューから「選択>共通>カラー(塗り)」を選べば1発で選択できます。

↑ムラサキのオブジェクトだけ選択したい


しかし、このコマンドを選ぶためには数回のカーソルの移動とクリックが必要です。これをショートカット化してしまえばワンタッチで瞬時に実行できますね。


↑メニューから選べるけど回りくどい。2色選択で約8秒。マウス慣れしていればもうちょい早いかも


さて、ショートカット化ですが、Illustratorはショートカットにcontrolキーが使えません。他にもいろいろ制限があり、好きなキーへの割り当てがかなり制限されます。

↑メニューコマンドはcommandキーかファンクションキー併用を義務づけ



これを逆手にとって選択=「command+control+○○」というルールを作り、
同一の塗り「command+control+N(塗りの頭文字)」、
同一の線「command+control+S(線の頭文字)」
などとしてしまえば、覚えやすいしIllustratorで設定されたキーとバッティングしません。





↑こっちは約2秒。作業の負担も激減


ショートカット選択の自由アハハン。



●ショートカットを追加する

Illustratorのショートカットは一つのコマンドに1つです。1つ入れると前のものははじき出されます。なぜに!? InDesignやPhotoshopは普通に複数適用できるのに。

そこで、ユーティリティで元のショートカットを変更せずに、自分の使いやすいショートカットを「追加」してみましょう。

テキスト左揃えのショートカットは「command+shift+L(Left)」ですが、左がLとか直感でわかりにくいし、文字の揃えごときにわざわざマウスを離して両手を使うのもとってもイヤです(慣れですけど^^)。

そこで、覚えやすく押しやすいショートカットを作ってしまいましょう。

まず、Type aKeystrokeを使って
command+shift+Lをcontrol+Qに
設定します。



↑Actionで設定した項目がHotkeyで実行される


次に
command+shift+Cをcontrol+Wに、
command+shift+Rをcontrol+Eにすると、
QWEが左中右と直感的な並びになるうえ、左手だけで操作可能になります。




Keyboard Maestroではキーのエイリアスを作成しただけなので、元のショートカットも使えます。


Hotkeyで設定したショートカットを押すとActionが実行されています



●標準でショートカット化出来ないものをショートカット化する

「整列」はレイアウト作業では頻度が高いと思われますが、メニューコマンドにありません。そのためショートカット化はできず、整列パネルのアイコンをクリックするしかありません。


左揃えはパネルのアイコンをクリックするしかない



整列するものが複数あるときは選択やクリックの繰り返しになるのでとても効率が悪い。そこで、これもショートカット化してしまいましょう。

ただし、Keyboard Maestroにおけるパネルのクリック操作は座標で記憶するため、パネルが閉じられていたり、位置が変わっていると誤作動するためなるべく避けた方が良いでしょう。

そこで、まず整列をアクション化します。




アクションにもショートカットはありますが、ファンクションキーとcommand、shiftの組み合わせでしか作れないので、覚えづらいし押しにくいです。




そこで、アクションで指定したショートカットをType a Keystrokeを使って好きなキーに変更します。どうせKeyboard Maestroで変更してしまうので、アクションの方は普段は間違っても押さないような複雑なキーを割り当てておくと良いでしょう。




右揃えはcontrol+→、
左揃えはcontrol+←、
上揃えはcontrol+↑、
下揃えはcontrol+↓
などにしておくと、覚えやすく直感的に操作できます。


直感的に素早く整列できるようになりました


というわけで、今回はIllustrator標準では出来ない操作環境をユーティリティで強化してみました。

このような使い方ならば、Keyboard Maestroを無効にするだけで操作は標準に戻せます(整列アクションのショートカットは残ってしまいますが、誤作動しないように設定しています)。

外部ソフトをインストールしたり、そもそも相性もあるので人を選ぶ強化策ではありますが、一度試してみると世界が変わるかもしれません。

つづく

※この記事は以前書いた記事を一部抜粋・編集・新規分を加えて再構成し、ぐちゅぐちゅぺっしたものです。前にも聞いたよというクレームは受け付けません^^










ちょこっとだけ帰ってきたIllustrator強化作戦3-2

$
0
0



今回は応用編。とは言ったものの需要少なそう^^ ま、何かの参考になれば。

※QuickeysでやっていたものをKeyboard Maestroに置き換えてご紹介をしています。動作確認はしておりますが、間違いなどありましたらご指摘いただけると助かります。


●アクションでは作れないマクロを作る

Illustratorのアクションは目的の操作を記録できなかったり、記録したくないものまで記録してしまうものがあります。仕方がないので手動で、と諦める前にKeyboard Maestroを使ってみましょう。

前回は単発のショートカットの切り替えしか使いませんでしたが、あれはいわばサブ・ウエポン。ガンダムで言えば頭部バルカンです。

Keyboard Maestroは連続動作を記録・実行するほうがメイン・ウエポン、ビームライフルです。うまく活用すれば、アクションを超える自動化を構築でき、戦艦なみの作業を一撃で沈めることができる、かもしれません。

Keyboard Maestroは(キー設定済みの)アクションを実行させたり、スクリプトを噛ませることができるので、Keyboard Maestroが記録できなくてもアクションやスクリプトで対応できればセーフ。アプリケーションを跨ぐことだって可能です。

そう考えると、使えるアクション数はかなりのもの。前回「レゴのよう(私はダイヤブロック派でしたが^^)」と申しましたが、ほんとこれ。組み合わせ次第でいくらでも好きなものが作れちゃう。

↑Actionいっぱい


基礎知識として覚えておきたいのが、Keyboard MaestroとIllustratorアクションの違い。Keyboard Maestroはコマンドの内容ではなく、行った操作や指定のActionを記録・実行します。

例えば「command+C」を記録した場合、Illustratorアクションでは「コピーする」を記録しますが、Keyboard Maestroは「command+C」を記録します。

そう、あくまでも上っ面です。仮にコピーのショートカットがcommand+Cでなかったらコピーは出来ません。ここは重要なので意識してマクロを作成しましょう。


さて、今回はデモンストレーションとして、ダミーのテキストフレームに別ファイルのテキストを流し込んで各スタイルをかけてみます。

↑ダミーに流し込み+スタイル適用。あーありがちなお仕事。見づらいけど赤文字見出しが段落スタイル1、本文が段落スタイル2、最終行が段落スタイル3となっています


条件として、テキスト側は1ブロックの要素が、「合い番、段落1、段落2、段落3、アキ1行」で作成されていること。これは入力時に取り決めたり、データベースからの書き出しなら問題ないでしょう。支給データでも多少のガタツキは正規表現などで整えられますし。


↑きれいなテキスト。それだけで感動できる



Illustrator側は段落スタイルパネル位置とスタイル順序の固定。記録時と実行時で座標が変わらないようにします。事前にワークスペースを保存しておくとよいでしょう。

↑段落スタイルパネルは一度決めたら動かさない(少なくともマクロ作成、実行中は)。ワークスペースに記録しておけば動かしても同じ位置に戻せる



では、マクロを作っていきましょう。内容は、
・テキストエディタから3段落分コピーしてIllustratorへペースト。
・ペースト直後に段落スタイル3を適用。
・カーソルをフレーム先頭に置き、段落スタイル1を適用する。

でOKですね。

Illustratorでテキストフレーム内にカーソルを入れた状態にしてから、Keyboard Maestroで右下にあるRecordボタンを押してIllustratorに戻り、以下の操作を実行します。

↑右下にあるRecordボタンをクリックすると記録が始まります



1.    アプリケーションをJeditに切り替える。
2.    ↓キーを押す(カーソル移動)
3.    shift+option+↓を押す。(1段落選択のショートカット)
4.    shift+option+↓を押す。(1段落選択のショートカット)
5.    shift+option+↓を押す。(1段落選択のショートカット)
6.    shift+←を押す。(改行の選択解除)
7.    command+X(カット)。
9.    ↓を押す。(カーソル移動)
9.    ↓を押す。(カーソル移動)
10.    アプリケーションをIllustratorに切り替える。
11.    command+A(全選択)。
12.    command+V(ペースト)。
13.    段落スタイルパネルの段落スタイル3をクリック
14.    command+A(全選択)。
15.    ←を押す。(カーソル移動)
16.    段落スタイルパネルの段落スタイル1をクリック


記録を終了するとKeyboard Maestroのエディタに一連の動作が表示されます。この際アプリ切り替えのショートカットなど不要なものを消去します。

↑選んでDeleteで消せます


しかし、テストしてみると指定通りに動きません。

↑全部にスタイル3が当たってるし、テキストのカーソルが合い番前まで行ってない


本来ならテキストカット後にカーソルが次の合い番まで移動するはずなのにしていない。これはIllustratorへの切り替えが速すぎるのが原因なので、ここにPauseを挿入します。

↑各Actionはドラッグで挿入できる



次にペースト後のテキストに適切にスタイルが当たりません。これもペースト後、瞬時にスタイルクリックしているためうまく適用できていないようです。ここにもPauseを挿入しました。

↑optionドラッグで複製可能。直感的に編集できる


↑マクロの内容はこんな感じになります


これで流し込み&スタイル適用がワンタッチになりました。実際は、マクロ実行前に流し込むテキストフレームに段落スタイル2を適用します。


↑カーソルを入れてから設定したショートカットを押すだけで、流し込み+スタイル適用は終わり。(gifは2つ目まで)



実務では縦書きの混在もあると思います。縦書き用はマクロを複製して、Illustratorコピペ後全選択後の←を↑に変更してHotkeyを別に設定します。

このように決まった複数操作をマクロ化してしまえば、物理的な手さばきもいらず、作業の抜け、コマンドの選択ミスも起こりません。似たような案件ならちょっとした改変で流用できます。

一応お断りしておきますが、みんなでコレやろぜーとかは思っておりません。デモはあくまでもデモ、こんなことができますよってことです。

Keyboard MaestroやQuickeysは、今まで強化作戦で紹介してきた「○○ができるプラグイン・スクリプト」と違い、強化用アイテムであると同時にジェネレーターです。

アイデアや仕事の内容によって、便利度ががらりと変わる面白いユーティリティーですよ。


※前記事のアップ後に知ったのですが、私がアクションでヒイコラやってた「移動」を、三階ラボさんはスクリプトで対処していますね。

そうか、スクリプト組める人はKeyboard Maestroの特性を踏まえて作れるので、スマートにそして上のレベルで闘えるのか。すごいなぁ。













矢印のカスタマイズ

$
0
0


Illustratorは、パスの始点終点に矢印を追加する機能があります。CS5からは線パネルからプルダウンで選択でき、差し替えや位置変更も簡単に行える便利機能です。

しかし、デフォルトで39個もある割には使うことのないデザインだったり、バランス修正をしたい物などありませんか?

↑もっと使える…ゴホゴホッ



実は公式HPに載ってますが、矢印はカスタマイズや追加が可能です。

ええっ、知らなかった! 早速作ってみようと思ったアナタ、飛びついてはいけません。甘い話には罠が潜んでいるのです(業務用アプリに潜ませる必要はないけど^^)。

矢印のカスタマイズは3D効果のベベル同様、取扱い注意です。理由は、スウォッチやブラシ、スタイルなどのように設定がドキュメントに依存するのと違い、矢印はアプリに依存するためです。

イラレ不祥事案件でいうところの、「あー、支給データの矢印いじったら同じの選べなくなっちゃったー」ってやつです(レアケースですけどね)。




というわけで、矢印のカスタマイズは、仕様をよ~く理解した上で正しくお使いください。

まず、矢印についての基礎知識。矢印のライブラリ「矢印.ai」はIllustrator.appのResource内に格納されており(Mac版)、起動時に読み込みます。矢印の項目は「矢印.ai」のシンボル内にある条件に合ったもののみ線パネルに表示されます。

↑普段アプリの内包物は見ませんよね


↑開くとこうなっている


↑そのドキュメントのシンボルに入ってる



ヘルプでは「カスタマイズした場合はプラグインフォルダへ複製する」旨の指示があります。そう、プラグインフォルダに「矢印.ai」があれば、プラグインに入れた方を優先的に読み取ります。

プラグインフォルダは普通に出し入れできますので、カスタマイズのハードルは下がりますが、「ライブラリを読み込んだIllustratorにしか表示されない」のは変わりません。

例えば同じ部署内でカスタム矢印を使ったAさんのデータを、Bさんのド・ノーマルIllustratorで開くと画面表示はされますが線パネルには表示されません。同じ矢印に統一したい場合、スポイトやグラフィックスタイルを使うなど面倒なことになります。

そして、一度別の矢印を選んでしまったら、もう元には戻せません。

↑矢印40として作ったけど、別のIllustratorのプルダウンリストには出てこない



これは、外付けのプラグインではなく標準機能であるため、余計に気付きにくい事象になっています。だって自分の所ではいつでも表示されているわけですから。


念のため検証してみます。MacOS10.8.5+IllustratorCS5.1(矢印カスタム)+CS6パッケ版(矢印ノーマル)。

まず、CS5で矢印.aiの「矢印39」に変倍をかけます。そして、矢印40を作成して追加します。

↑矢印39を改変、矢印40を追加



CS5でこれらを適用した書類を作成し、CS6で開いてみると書類にはカスタム矢印は「データとして」残っています。しかし、矢印39と矢印40はプルダウンメニューでは適用されていません。

↑改変した矢印39と矢印40はリストに表示されない


倍率の変更や始点終点の入れ替えは可能ですが、一度プルダウンリストを変更してしまうと二度と選択できなくなります。

↑ライブラリになくても矢印として認識しているので編集は可能



これを更にCS5形式で下位保存してCS5で開いてみます。

↑CS5に戻れば認識しています



このことから、Illustratorのライブラリにない矢印は、矢印として認識はするものの、線パネルからの選択は不可になるようです。そして名前では見ていないようです。

Illustratorの場合、名前で認識したり、無いものは強制的に分割するなどの仕様がありがちですが、この仕様ならうっかり置き換わるという事故はなさそうです(ただし検証はCS5,CS6なのでバージョンアップに伴う変更などはあるかもしれません)。

回避策としては矢印.aiを同梱して「修正時はプラグインフォルダに入れてね」とお願いする方法も考えられますが、経験からすると相当嫌がられるでしょうな。


とまあ、面倒な仕様ではありますが、状況次第ではかなり使えるのも事実です。もともとプルダウンだけでパスの端を修飾できて、色を付けられて、矢尻部分だけ拡大縮小できるとか超絶便利じゃないですか。

プルダウン項目がデフォで39個もあるの邪魔だし、絶対に使わないデザインもありますよね? よく使う数種類にまとめ直したり、既存のバランス調整や自作の矢印を追加すればさらに便利。使わない手はない気もします。


↑CS6なら可変線幅+線グラデも効果的。やだなあベルギーチョコソフトですよ



矢印の作り方は簡単で、矢印.aiを開いてシンボルにあるデータを複製して改変するだけです。グレースケールや白も使用できるので濃度や白マドのある矢印も作れます。

↑以外と知らない? 白マドとグレースケール



個人的には非常に魅力的な自作矢印ですが、手放しで使える仕様でないことがブレーキになりモヤモヤしている今日この頃です。

とりあえず事故回避の仕様のようなので、「危険」というほどではありませんが、データ納品ならフォントのアウトラインと同じ意味合いで、アピアランス分割して渡す方が確実ですね。

スウォッチやスタイルのようにドキュメント依存だったら大声で宣伝してますよ、ホントにもう。

※実際使っていない+仕様上とても手間がかかるので軽めの検証しかしておりません。間違いなどございましたらご教授いただけたると助かります。





InDesignの見出し飾り

$
0
0

久しぶりにInDesignの実用技を。InDesignはウラシマ状態ですので、ツッコミどころありましたら遠慮なく^^

組版作業で悩ましいのが見出しの飾りですよね。段落境界線で対処できればラッキーですが、線の組み合わせだけでは済まないことも多いです。デザイナーとしては「見せ所」なので事情はわかります。

いいかげん、段落の背景にオブジェクトや画像を置く機能、HTMLでいうところの「background-image」相当のものをつけてほしいと誰もが思っているでしょうけど、難しいのでしょうかね?

現状の機能ではアンカー付きオブジェクトだと前面に配置されるのでテキストを隠してしまいます。

↑わかりにくいけど、アンカー付きオブジェクトになってます。アンカー付きオブジェクトはテキストよりも前面に出てしまいます



文字色次第では乗算やスクリーンを使うことで対処できそうだけど、デザイン次第では別の問題も考慮しなければならなくなる。そもそも透明効果を嫌う人も少なくはないでしょう。


↑白文字ならスクリーンで見える。分版プレビューで見た限り大丈夫そうだけど、実戦投入したことないので何とも…

他には飾りと見出しを別グループとしてインライン挿入する方法もありますが、これだとストーリーから見出しが分断されてしまいます。

↑見た目ではOKだけど、ストーリーが分断してしまっている。出力して終わりの時代は良かったけど、今は何かと不便



数カ所しかないなら、単独オブジェクトとしてレイヤー分けて手作業でもよいかもしれませんが、300ページとか、月刊誌で毎回1ページに2~3箇所×10ページとかあると、見出しごとに手をかけていられない。特に修正時の置き忘れがこわい。

最初のフォーマット作成には手間をかけたとしても、編集中は勝手についてくるのが理想でしょう。

そこで、テキストを分断せず、飾りが連動して動く方法をご紹介しましょう。飾りはInDesignオブジェクトでも画像やaiリンクでも、なんでもでもOK。

条件は「2行取り以上」ということくらい。

↑ちゃんと連動しているでしょ



原理は、1行目にオブジェクトをインライン挿入、2行目以降の位置を調整する。2行取り、3行取りへの応用や別デザインへの流用も簡単です。フレーム外へのはみ出しも可能です。

またもや前置き長くなりましたが、見出し飾りを作っていきましょう。

今回は見出しを前1行空き、3行取りとします。

↑3行取り、飾りは左側がフレームの外にはみ出している



グリッド揃えを使うので、ベースライングリッドとフレームグリッドではやや数値が異なります。今回は分かり易いようフレームグリッドを使います。

↑グリッドの数値。級数は13Q、行送りは21H。よって3行取りは21H+21H+13Qで55Q=13.75mm


まず、計算しやすくするため、飾り用のボックスを3行取り分の高さ(13.75mm)にします。高さに満たないものは空ボックスを含めてグループ化しておきましょう。

↑Illustratorで作成、リンク配置した



Illustratorで作成してリンクするのが簡単ですが、カラースウォッチに連動するならばInDesignオブジェクトとして作成した方が良いでしょう。

これをインラインオブジェクトとして1行目に挿入します。

↑1行目にカーソルを入れ

↑配置かペーストしてインライン挿入する


この時点で行取りになってしまいますが、行送り自動以外に変更すると下揃え(上にはみ出し)になります。グリッド揃えの位置と行送り値によっては下が空いてしまうので注意。


↑行送りを13Hにすると下揃えになる



ベースラインシフトで高さ2行分下げます。インラインオブジェクトはドラッグでも移動できますが、ここはきっちり計算して数値として残しておきます。


↑上にはみ出している2行分(21+21=42H)ベースラインシフトで下げる


段落分離禁止オプションで次の1行分(見出し)と連動するようにする。

↑次の行数を1行保持して見出しとの分離を防ぐ


フレームから左へはみだすので行揃えを右揃えに設定する。

↑右揃えにしてはみ出しを調整する


あと、前1行アキを設定する。ここまでをGIFアニメで。



この行を段落スタイルとして登録し適用する。

↑インライングラフィックのための段落スタイル



次に見出しの設定をする。こちらも段落分離禁止で次の1行を保持しておく。


↑見出しの級数書体、後ろアキやインデントなどもろもろ設定し、スタイル登録


こっちもGIFを。






↑設定できたらこちらもスタイル化


実務なら2行になるデザインもありますよね(考えずに作ったので見づらい…)。設定でうまいことなんとかして子スタイルにしておく(きっちりやるととっても大変なのでここは適当です)。


↑2行パターンも段落設定とベースラインをきっちり計算で割り出して作成。項目は段落業取りやら行送りの設定やらなにやらでめんどいので詳細は割愛

↑スタイル化してしまえば適用するだけ


設定が出来たら、作成してゆきましょう。
飾りのある行をコピーして空行へグリッドフォーマットを適用せずにペースト。

↑飾り行を空行へグリッドフォーマットを適用せずにペースト


↑そのまま見出しのショートカットを押す


↑ほらできた



といいつつ、毎回ペーストするのは面倒。ここまでできれば一括変更も検索置換で簡単。



このようにプレーンの状態からオブジェクトをコピーしておき、以下の設定を実行すると、




↓こうなります。


さらに、見出しに共通項があれば、

↑デモなので見出しを共通項にしていますが、実際は番号+タブ始まりだったり、なんやかんや

こうなる。ここからさらに正規表現の検索置換で見出しスタイルの文字数が20文字以上は2行見出しのスタイルをかけるなど、手動を挟まず見出しの飾りを完成できます。


ただし文字数での2行スタイル適用は半角や詰めなどがあれば狂いますので確認が必要です。


これ、せうぞーさんのregex_continuous_substitution.jsxを使えば、ひとまとめにして一発で適用できます。ページ物でこれをやるとあまりの便利さに失神します。



さて、この方法、欠点を上げるとすれば、テキストを真上から選択できないこと。普通はテキスト上でカチカチすれば選択できるのに無反応なのは、慣れないとイラッとする。

テキスト選択は次行から上カーソルで入れるしかない。キー操作でテキスト選択(段落とか1行とかを選択)できるよう慣れましょう。

あとは直感的ではないこと。設定は理詰め、サイズや行送りに合わせてガチガチに固めるので、イレギュラーが多いものにも向かない。また、流用もサイズや行送りが変わるだけで一から設定し直しになります。

まあ、一度決めてしまえば、見出し飾りを意識することなく組版作業ができますので、同一フォーマットの大量ページ物、定期物などではとっても便利ですよ。









24時間Illustrator「愛(Ai)はクリエイティブを救う」

$
0
0


皆様ご存じかと思いますが、来週金曜日(平日です^^)4月24日のお昼からIllustratorの公式イベントが開催されます。

何と「神速Illustrator」の共著者様のうち4名が参加 !!! これはもう宣伝しないと。
Aiファイトは誰を応援するか迷うほどの名ファイター揃い。頑張れみんなー!

他にもTwitterやブログで交流のある方や、私が尊敬している方が多数登場する期待大のビッグイベントです。うわさではあの…、おっと誰か来たようだ。

残念ながら会場へ行けない方もイベントは生放送しますし、その後のオンライン放送もすごい内容なので、存分にIllustratorを堪能できる24時間になること請け合いでしょう。

詳しくは以下のバナーから。もう見たよという方ももう一度チェック!

24時間Illustrator「愛(Ai)はクリエイティブを救う」


いや、決して「アドビオリジナルグッズ」目当てで記事を書いてるわけではないですよ^^




Illustratorでドット絵&レゴブロック風

$
0
0




24時間Illustratorイベントも無事終わりましたね。

いやいや見応えのあるイベントでした(まだ全部観られていませんが)。まだ見ていない人は要チェック!

Ai-1ファイトの優勝者はまだ見ていない人のためにネタバレしませんが、納得の完成度でした。素晴らしい! パチパチパチパチ。

他にも三階ラボさんのお話は、私の効率化に対する考え方とベクトルが一致していてとても面白かったです。ただ、極めすぎていて私ですら若干引き気味になったところも参考になりました^^

サキミタマ先輩は、AdobeからIllustrator愛を試される試練を乗り越えるという感動作。そこにいるのにポエム割愛など笑いもあり。

まだチラ見しかしていませんが鱗粉あすさんのペンツールさばきに驚愕、あれだけのイラストをライブで完成していくなど見所満載。

私もあかつきさんのお声がけでネタ出しなどちょっとだけお手伝いするつもりでしたが、出演者の皆様はIllustratorのプロフェッショナルばかりなので、実際はほとんど何もしていません^^

せっかくなので、そのときにちょっと考えたネタを再構築して公開いたします。
題して「どっと絵を描いてそれをブロック風にするー」です。

↑タイトル画像の拡大図

いや、どっーと絵は描きません、ドット絵です。ファミコンとか‥知らない?
そう、パックマンとかマリオとか。



ちがう、パックマンといったらコレ↓、それ↑じゃない。




えっと、スーファミ、ゲームボーイ、メガドラ…、はあ、知りませんか。

PCのアイコン!そうっ!それ、どっとえ…。



…えー、ピクセル数の少ない画像、通称「ドット絵」を作ります。







●まずドット絵を描きまーす

ドット絵は専用エディタを使うと簡単ですが、Illustrator上で書けるんですよ、ベクトル描画で。だから何だと言われても困りますねえお客様。

と、ここで24h Illustratorで偶然にも高橋としゆきさんがエディタを作るのに最適なテクを披露していたので盗…、お借りしましょう。

①適当に正方形を描く




②オブジェクト>パス>段組設定で分割数を決める。ここでは16×16にしておく。後々ブロックを作る際に数値合わせをしたいので、1コマを8mmにしておく


※手元のCS5では段組のUIに不具合がありますが、CS6では改善されています。



③塗りを無しにしてシフト+L(ライブペイントツール)でクリック



そう、段組だとライブペイント化のコマンドが不要でドット数を指定できる。いいなこれ。 大ざっぱ&古い考えの私は思いつきもしませんでした(私のネタでは適当に直線をひいて適当数複製してから回転複製するというおおざっぱなもの)。

塗りはスウォッチライブラリから塗ることもできますが、色は後で調整できるので塗り分け以外はあまり神経質にならなくて大丈夫。


④ドット絵が出来たらライブペイントを拡張

↑おことわりしておきますが、似てるけどアイツじゃないよ


⑤線を1本選んで共通>線幅で同一線を選択して消去



これで、ドット絵完成! どーです早いでしょ。

もし元絵があるようでしたらこちらの記事を参考にドット化しましょう。
ただしパスファインダーで合体はしないでください。



●ブロック風に加工しまーす

①全選択してグループ解除×2

②効果>形状に変換>長方形で値を追加に-0.1mmずつ




③レイヤーパネルのターゲット(○)をクリック

④効果>3D>押し出しで角度を調整する。厚みはレゴに合わせて9.6mmとする。このとき遠近はつけない。

↑イイ感じの角度に調整する




⑤レイヤーを複製し元レイヤーをロック。




⑦全選択して効果>形状に変換>楕円形で高さと幅を調整する。レゴに合わせて値を指定で5mmずつ。



↑ポッチが長い


⑤レイヤーターゲット(●)をクリックしてからアピアランスパネルの押し出しの奥行きを1.7mmに減らす

↑こんな感じですよね



⑥適当な位置に移動して完成(このアバウトさが嫌いだけど仕方ない)


・色替え
使用カラーをグローバル化すれば、スウォッチの数値を変えるだけで色を変更できます。

↑青スウォッチをタブルクリックして




完成度を上げるならば、ここから拡張してグラデかけたりいろいろやらなければなりませんが、そこは各自でがんばりましょう。

一連の作業を動画にしましたので参考にしてください。





さて、完成まで駆け足で説明しましたが、構造をわかっていないと修正などができません。ドット絵までは大体理解できていると思いますが、その先はアピアランスの知識が必要になります。

でも力尽きたので解説は次回そのうち。

レゴブロック風解説

$
0
0

前回のつづきです。

ブロック風は3D効果を使ってブロックのようにしておりますが、こちらはアピアランスを応用しているので、アピアランスの知識が無いと角度や光源の変更などができません。

そこでアピアランスも含めて解説いたします。

まず、ライブペイント拡張後にグループ解除を2回行っていますが、ライブペイント拡張後はドットが二重のグループになっています。

この状態で効果をかけるとグループへの効果になってしまうので、個別に「形状を変換」で各ブロックを一回り小さくすることが出来ません。

なので、グループ解除して個別オブジェクトに対して効果をかけました。

↑グループ解除×2



次にレイヤーターゲットをクリックして押し出し効果をかけましたが、これはレイヤーに対しての効果になるので、レイヤー内全てのブロックがひとまとめで押し出しや回転します。

↑右側の○はターゲットといい、効果をかける対象を決めます。◎はターゲットに指定されている状態


↑レイヤーに対して効果がかかるので、まとめて押し出し&視点が変更される


この時点で効果は「個別」と「レイヤー」の、異なる二つの階層にかけられていることを把握しておきましょう。


そしてポッチ用にレイヤーごと複製しましたが、これは効果ごと複製されるため、細かい設定をしなくても視点や光源が同一になるのが利点です。




しかし、ここから変更がなければいいのですが、変更時はこれがクセモノで、もう少し寝かせたいとか立たせたいとなると、本体とポッチの効果の数値を合わせなければなりません。

↑本体の視点と光源設定を変更した


↑ポッチは残ってしまうため、ポッチの設定を本体に合わせる必要がある



そこで、別の効果に同じパラメータをあてたいときはグラフィックスタイルを経由します。本体レイヤーの角度や光源を設定したらグラフィックスタイルに登録、ポッチレイヤーに当て直します。

↑変更した本体をグラフィックスタイルへドラッグする(スクショは変更前のものを撮ってしまいました)


ポッチレイヤーにこのグラフィックスタイルを適用すると、奥行きが本体レイヤーと同じ値に戻ってしまいますが、数値の変更と移動しなおすくらいは大目に見ましょう。





↑ポッチが長くなった




↑ポッチの奥行きだけ修正



↑ポッチの位置は調整する

今回グループに対する効果を使いませんでしたが、レイヤーの代わりにグループにかければ、同じレイヤー内に同一光源で複数の視点を持ったブロックを散乱させることもできます。

ただ、入れ子などを使えばグループと同様に管理でき、効果の選択やロックなども簡単なのでレイヤーの使用をお勧めします。

どうしてもグループがいいなら、レイヤー効果をグループ効果に簡単にスライドできます。

ターゲットのグレー●をグループの○へドラッグするだけ。効果を複製したい場合はoption+ドラッグします。




このようにレイヤーパネルからも効果の移動や複製ができることを覚えておきましょう。


さて、もうひとつ。色替えについても言及します。
こちらはかなり端折ってしまいましたが、作例ではドット絵作成後にスウォッチメニューの「使用したカラーを追加」をかけています。これは24hIllustratorの効率化のパートで今関さんが解説されています。

私は「未使用カラーを選択」と「使用したカラーを追加」の1セットをアクション化してF2キーに登録しているので、F2キーを押すだけで使用カラーをグローバルカラースウォッチ化できるようにしております。

↑アクション登録は便利です

↑グローバルカラースウォッチになるのでカラーの変更は簡単



この作例では3D効果の方で影や光源が適用されているので、スウォッチの値を変更するだけで同じブロックの色が変わる様はなかなか面白いですよ。

また、ラスターからドット化してアンチエイリアスで中間カラーが出てしまったときには、こちらを参考に再配色で色数をまとめることも可能です。






積層ブロック

$
0
0

せっかくブロックなのに積み重ねできないのはどうなの? ということでちょっと考えてみました。せっかく3Dなので後から視点を変更できないかとやってみましたが、惜しいところまではいくのですが、そう簡単にはいかなそうですね。

とりあえず、手順をメモ的に。

①3D押し出しでブロックを作ります。ここでグラフィックスタイルAを設定しておきます。

↑左から3番目がグラフィックスタイルAってことで



②レイヤー複製してポッチレイヤーを作ります。ここまでは前回ブログ記事の手順と同じです。



③ポッチレイヤーを「効果の変形」で移動します。ここでもグラフィックスタイルBを設定しておきます。

↑左から4番目がグラフィックスタイルBってことで。今回ポッチの移動は効果で制御します。

※移動距離はプレビューを見ながら設定するよりも、一旦アピアランスを拡張して数値を拾う方が効率的かもしれません。


④新規レイヤーを作成し、元の2つのレイヤーをドラッグして入れ子にします。

↑いわゆるネストレイヤーです。ネスカフェとは関係ない



⑤レイヤーを複製し、上のレイヤーターゲットをクリックして、「効果の変形」で1ブロック分上へ移動します。

↑入れ子にしたレイヤーを複製し、複製したレイヤーに効果をかける


↑効果で移動する

⑥ ⑤の移動効果をグラフィックスタイルCに登録します。

↑左から5番目がグラフィックスタイルCってことで

⑦さらにレイヤーを複製してoptionを押しながらグラフィックスタイルCをクリックします。optionを押しながらグラフィックスタイルをクリックすると設定をプラスすることができます。積層の分だけレイヤー複製と追加を繰り返します。


↑レイヤー複製とグラフィックスタイルCを追加する分だけブロックが積み重なる


⑧アウトラインでは全てのポッチと本体が同座標にいます。
編集するレイヤー以外をロックして、不要なコマを選択し、不透明度を0%にします。

↑不要なコマを選択して不透明度0%に




⑨積み重ねる場合は⑦、ブロックを出したり消したりする場合は⑧で制御します。色を変更したり半透明にしたり、思いのまま。
構造的には3Dプリンタと同じです。レッツトライ!

↑選択して色を変えれば反映される



↑一応半透明も可能


↑パスファインダーで合体すれば継ぎ目なしにできる

ただし、半透明の場合は非表示の面を描画にチェックを入れておくこと。




●角度の変更

まず一番下の本体レイヤーの3D効果から光源や視点などの設定を変更します。



これをオプションを押しながらグラフィックスタイルAにドラッグして上書します。リンクの生きているものはこの時点で変更した設定に変わります。

↑グラフィックスタイルAのサムネイルが変わっていることに注目。リンクが生きている3段目も変更された




ポッチレイヤーは今上書きしたグラフィクスタイルAを一度追加適用(option+クリック)し、元の3D効果を削除します。3D効果設定からポッチの奥行きを変更し、変形の数値を修正し、グラフィックスタイルBに上書きします。




↑3Dと変形(移動)を変更したらグラフィックスタイルBに上書き



真ん中の段は残念ながらリンクが外れてしまったようなので、ターゲットを選んでグラフィックスタイルをかけ直します。


↑真ん中の段のサブレイヤーの本体とポッチにそれぞれグラフィックスタイルAとBを適用



角度を変えればブロックの移動距離も変わるので、下から2段目の親レイヤーの変形効果の移動値を修正し、これをグラフィックスタイルCに上書きします。


↑親レイヤーの方の移動を修正してグラフィックスタイルCに上書き


三段目の親レイヤーにグラフィックスタイルCを適用、すかさずグラフィックスタイルCを追加(option+クリック)する


↑とりあえずこれで角度変更終了


一度作ったらグリグリ回せるようなら面白いんですが、こんなに手間がかかるとねえ。またパースが付かないのもマイナスポイント。もうちょっと簡単に作れるいいのに。


※構造上、ポッチと上段の本体が重なった際、手前のものでも上段の本体の下に潜ってしまいます。重ならないようポッチのサイズや角度を調整するか、レイヤー分けやアピアランスを拡張で前面に持ってくるなどして乗り切ってください。




ブロック単純積み重ね

$
0
0


前回の積層はちょっと複雑なので、実用性にかけるかもしれません。
そこで、構造は単純でただ積み重ねるだけのアピアランスを考えてみました。

前回の④でレイヤーを入れ子にしたあと、親レイヤーに「変形効果でコピー」します。変形のコピーは背面に描画していくようなので、座標は下(垂直を+値)へ移動させます。

↑垂直方向は+値、コピーに数値を入れる


すると、コピーの回数だけ積み重なります。

↑5コピーにすると6階層に


今回は階層ごとの位置合わせが必要がないので、不要ブロックは不透明度0%でなく削除してしまってかまいません。


作成した形状がそのまま積み重なりますが、色を変えたりすることでよりブロックらしくなりますね。

予め「ブロックを少し小さく」「丸ぽっち」「本体押し出し」「ポッチ押し出し」「移動コピー」のグラフィックスタイルを用意しておけば、スタイルをかけながら複製していくことでドットの状態から数ステップで積み重ねたブロックになります。


↑デモは手っ取り早くレイヤー効果でなくグループ効果を使用しています。元のドットから数ステップで完成できます。


アピアランスを分割して加工するならば、3Dの「ブレンドの階調」を減らしておくとよいでしょう。



形状が単純になり選択がラク、加工しやすくなります。


↑色選択で加工がラクに








ペンタブとIllustrator

$
0
0



最近はsurfaceのような筆圧対応タブレット搭載のPCが普及し、液晶タブレットが安価になりペンタブレットも普及してきたことから、デジタルで手描きイラストを描いてみたいと思っている人もいることでしょう。

手描きのデジ絵といえば、Photoshop、SAI(Windowsのみ)、CLIP Studio Paint(通称クリスタ)、Painterあたりが主流ですが、実はIllustratorも古くから筆圧感知のタブレットに対応していて、ブラシの設定を筆圧に変更するだけで手描きでタッチ付きの線を描けるのです。



え?Illustratorで手描き?と思う方も多いことでしょう。Illustratorはチュートリアルや動画などを見ても、ペンツールでカチカチ線を描いていく方が主流のようです。「Illustrator ペンタブ」でググっても手描きの情報はあまり引っ掛かりません。
(※参考:鱗粉あすさんのライブドロー

イラストの内容により用途が違うと言ってしまえばそれまでですが、ベタ塗りやセルアニメのようなものは、ベクターであるIllustratorの方が得意なはずです。

↑Photoshopのバケツ



↑Illustratorの塗り


しかし、あまり一般的でない理由はペイント系とは全く違う設定や、機能面を含めた描きづらさが理由なのかと思います。情報が少なくて踏み込めないという方もいるかもしれません。

これは個人的な感想なので、世の中にはIllustratorのブラシをバリバリ使いこなしている方もいることを付け加えさせて頂きます。

そもそもIllustratorは手描きイラストに特化しているソフトではないので、ペイントソフトのようには描けません。それを乗り越えてまでIllustratorで描くにはそれなりの動機付けが必要です。

ではIllustratorのメリットを考えてみましょう。
オブジェクト単位で編集ができ、容量や動作も軽く、解像度に依存しないので拡大縮小が繰り返せますし、線が生きていれば主線の太さを変更でき、線や色の編集も簡単です。

また印刷用途ならCMYK+特色も使えますし、ラスター系の1枚画像よりもはるかに取り回しが良い。ラスタライズすればラスター画像にもなります。印刷やデザイン系ではデファクトスタンダードなので、扱い慣れた方も多くいることでしょう。うん、十分メリットはありそうですね。

というわけで、既にIllustratorユーザでペンタブで絵を描いてみたいという方へ向けて、現時点でのIllustratorと筆圧感知タブレットの状況をまとめました。ちなみに「手描き風」に仕上げるのではなく、「手で描く」のがメインテーマです。

私もよくわかっていないことも多いので、あわよくばユーザー同士での情報交換などができたらいいなと思っております。

と、いつもに増して前置きが長くなってスミマセン。それでははじめます。


●Illustratorのタブレット事情
Illustratorは筆圧感知のペンタブを使って強弱のある線が引けます。Illustratorでタッチのある線といえば、「ブラシ」と「可変線幅」がありますが、筆圧に対応しているのは「ブラシ」のみです。なのでIllustrator標準では筆圧ペンタブ=ブラシになります。可変線幅、対応してないんかーい! のツッコミがきこえる^^


●Illustratorの弱点

Illustrator+ペンタブ+手描きでは扱いづらい機能や仕様がいくつかあります。

・筆圧感知で可変線幅は設定できない
前述の通り、可変線幅は筆圧感知に対応しておらず、「標準では」ペンタブで入力したタッチを可変線幅にすることは出来ません。

↑カリグラフィブラシはタッチはあるけどプロファイルはなし



・線幅プロファイルは先がけできない
ブラシは種類によって線幅プロファイルを適用できますが、既に可変線幅が設定されているパスにブラシを適用すると線幅やプロファイルがリセットされてしまうという不便極まりない仕様です。


プロファイルを保存してブラシをかけた後にかけ直すという力業はありますが、ストローク毎にやるのは現実的ではありません。

・ブラシの差し替えでリセット
別のブラシに差し替える際、ブラシの種類によっては線幅が初期値(1pt)にリセットされてしまいます。これはkamisetoさんのブラシ置換スクリプト「ai_RandamBrush.jsx」で回避可能です(が、線幅プロファイルは削除される)。

・ブラシの補正精度
ブラシの手描き補正はブラシオプションに設定があります。精度を高めると描いたストロークに近くなりますが、アンカーポイントが多くなりパスの編集が困難になります。また手ぶれも拾いやすく、曲線がいびつになりがちです。描き味をとるか、編集しやすさをとるかバランスを決めなければなりません。

↑割り切って補正ナシの方が使いやすいかも



・筆圧調整ができない
筆圧は人によって違います。タッチをつけるのに筆圧で感知しますが、フィーリングが悪いと入り抜きがうまくいきません。とくにIllustratorは抜きが苦手なように感じます。Illustratorには筆圧トラッキングがないので、デフォルトが合わない人に救済措置はないという厳しい現実が。

・タッチの編集ができない
ブラシの筆圧情報は線幅プロファイルとは全くの別物で編集はできません。一発描き限定になります。せっかくのベクターの利点が生かせません。

・パスカットで形状が崩れる
筆圧ブラシと可変線幅のあるパスをカットすると形状が変わる場合があります。これは後述します。

↑スタイラスのテールスイッチは消しゴムなので、筆圧ブラシには使えない



・階調の再現性
ベクターの苦手分野であるふんわりとした塗りなどはPhotoshopやアナログのように直感的に塗ることが出来ません。絵筆ブラシが救世主かと思いきや…、これは別の回避策を身につける必要があります。

といった弱点があることを知っておきましょう。

●ブラシの種類と特性
ブラシは初期値が1ptです。線幅を変更することでブラシサイズを変更できます。ただし、絵筆ブラシと塗りブラシツールはペイントソフトのように描画時にブラシサイズを設定できます。ショートカットはブラケット([)と(])キーで変更もPhotoshopと同じ(なぜかウチのMacではこのショートカットが効かないので検証できていません)。

カリグラフィと絵筆ブラシ、塗りブラシは直接描画されていきます。ただし、精度のオプション次第では描画後に演算が入るので、ワンテンポ遅れます。

他のブラシはストロークを書き終えるまで軌跡だけが表示されます。この辺は描き味に影響しますね。




ブラシの筆圧情報の編集はできませんが内部で維持されます。ブラシを差し替えたときに筆圧に対応するブラシであれば反映されます。

以下は筆圧感知の目線からの紹介になりますので、細かい機能は割愛します。

・カリグラフィ
正統派の筆圧感知用ブラシ。筆圧調整すれば筆圧感知するブラシになります。回転や傾きにも対応可能。
描画が直接なので、一番アナログに近いブラシです。
ブラシサイズは線幅×設定値になります。
可変線幅プロファイルには対応しません。




・散布
登録オブジェクトをパスに沿って散布します。
筆圧感知に対応しているので、Photoshopのようなブラシ作成することもできますが、ストロークが増えるとデータが重くなります。
登録時のオブジェクトサイズ×設定比率が線幅1ptの時の大きさになります。
可変線幅プロファイルには対応しません。




・アート
登録オブジェクトをパスに沿って描画します。
いつからか(CS5?)筆圧感知に対応しております。
オブジェクトを伸ばして適用するため、絵柄のあるブラシは長すぎ短すぎは不自然になります。
登録時のオブジェクトサイズ×設定比率が線幅1ptの時の大きさになります。
可変線幅プロファイルに対応します。



・パターン
登録オブジェクトをパターンとしてパスに沿って敷き詰めます。
筆圧感知に対応します。
登録時のパターンのサイズ×設定比率が線幅1ptの大きさになります。
可変線幅に対応します。



・絵筆
CS5から搭載された新しいブラシ。
筆圧感知や傾きや回転に対応しますが、設定などはないのでペンタブ使用の場合は強制のようです。設定のブラシ形状+軌跡が描画されます。
「本物の絵筆のよう」と謳われていますが、主観では「かすれたマーカー」です。
不透明度やブラシサイズなどにショートカットで変更できるなど、手描きを意識しています。
設定値が線幅1ptの大きさになります。
可変線幅プロファイルには対応しません。



・塗りブラシツール
これはブラシの種類ではなく、ツールとして独立しています。古いバージョンのブラシツールの改良版で、描いたブラシがそのまま合体アウトライン状態になり、パスではなくオブジェクトとして生成されます。
同じ塗り色の上に描くとそのまま合体される(設定有り)。
ブラシサイズ変更のショートカットあり。
筆圧感知に対応。
塗りブラシツールはパスの利点がないので、後述の応用には使えません。


ブラシの特性


Illustrator標準ではこれらを駆使してペンタブ+手描きとなります。
他のペイントソフトとは用語もルールが違うものが多いので、一見さんおことわり状態ですよね。


●パスのカットについて
ベクターは線の交差部からはみ出したパスを簡単に削除できます。これはSAIやクリスタにもある非常に便利な機能でデジタルの特権です。この機能のおかげでダイナミックなストロークが描けますし、修正に余計な時間や手間をとられなくて済みます。

↑ラスターではケシケシするしかありませんが、
ベクターでは内部的に簡単にできる処理です


しかし、Illustratorではシェイプ形成ツールを使ってはみ出たパスの削除すると、ブラシの筆圧情報が削除され、可変線幅は線幅プロファイルが圧縮されてしまうので、元の形状を保てません。実質シェイプ形成ツールは筆圧ブラシのとの併用はできません(※これは最近検証するまで知りませんでした)。

(再掲)



以下の表にまとめましたが、パス消しゴムツールが一番実用的なようです。消しゴムではなくパス消しゴムはスタイラスのボタンやテールスイッチに登録とかできるのでしょうか?

ベストははさみツールですが、パスを選択してクリックで分断してから、不要パスを選択してDeleteは手間がかかりすぎますね。

ブラシの置換とカットの挙動


●Illustratorで手描きEX「DynamicSketch」
4100円(税込)と安い割には手描き補助の強力なプラグインを紹介します。月額じゃないよ。これ何度も紹介していますが、コンセプトや機能がユーザー目線でよく考えられていて、ホントにお気に入り&オススメなんです。お金もらって宣伝してるわけじゃありませんよ^^(※日本代理店Flashback価格、2015/05/28現在)


・筆圧を可変線幅に
まず、標準では非搭載の「筆圧で可変線幅」が可能になります。技術的に無理なのかと思いきや普通に使えてます。

描き味は設定によって異なりますし、好みの問題もあるので何とも言えません。私は描きやすい方だと思っております。体験版があるので興味のある方は一度試してみましょう。

DynamicSketchはタッチ付きのストロークが1本1本線幅プロファイルに変換されるので、線幅ツールでの編集が可能です。ただし、線幅マーカーが多く入るので別のプラグインを使わないと編集は大変です。

・筆圧調整が可能
DynamicSketchパネルのグラフで筆圧の調整してが出来ます。これはDynamicSketchのみで、標準ブラシなどには適用されません。




・パスカット機能とパス結合の利便性と切れ方
シェイプ形成ツール同様、交点からはみ出たパスをカットする機能がありますが、こちらはパスを選択する必要がないので使いやすいです(入り組んでいると逆に面倒ですが)。




手描きのゴミのようなパスにかけると落ちやすいのでかける前に保存するクセを付けておきましょう。

また、通常はパスをカットすると線幅プロファイルを圧縮してしまいますが、こちらはカットした可変線幅プロファイルを当て直してくれるので、形状は変わりません。

パス1本ずつなら交差部を自動的に結合します。そうCCの結合ツールと同じです。CCは忘れましたが、DynamicSketchでは結合時に線幅プロファイルも結合するので形状が変わりません。これは作業者にとっては嬉しい実装です。

筆圧を線幅プロファイルにするだけでなく、こういった実務的なところをぬかりなくフォローしているところに好感が持てますね。

・機能による描画の補助
intelligence path joiningを使えば交点からの削除を描画時に行うことが可能です。例えばバランのような絵柄も簡単に描けます。



DynamicSketchはアートブラシなどと同じく、ストロークを描き終えると描画されるタイプです。描き味は補正を切ったカリグラフィブラシの方が上ですが、線幅プロファイルをうまく使って形状を維持するように処理するのは描き味以上に有用です。

有料プラグインですが、本気でIllustratorで手描きを考えているなら、体験版だけでも試してみる価値はありますよ。

DynamicSketchを使ったイラスト作成の記事はこちら(Illustratorでタッチのあるイラストを描く1)。ちなみにトップのイラストはこちらの手法で、影の代わりにグレースケールの水彩画像をオーバーレイしただけです。


●余裕があればのプラグイン「WidthScribe」
お値段10,580円(税込)、うーん、微妙。

WidthScribeは手描きそのものではなく後加工用、可変線幅編集に特化したプラグインです。線幅マーカーの編集、削除などの管理ができます。DynamicSketchで描いたマーカーを編集するにはこちらがないと厳しいでしょう。

また、線幅をドラッグで変更できる機能があります。これはSAIやクリスタには付いていますね。


WidthScribeはもっと沢山の機能がありますが、手描きをメインテーマにしているので加工については省きます。詳しくは本家HPでご確認ください。



手描きをテーマと言いましたが、ペンタブを使うからといって全てを手で描く必要はありません。カチッとした線は従来のペンツールを使ってもよいし、直線ツールだって使えます。ササっと描くものはペンタブを使うといった複合技でも良いのです。

また、筆圧を使わずにペンタブ+ブラシで線を描き、線幅プロファイルやブラシを当てていくという方法もありでしょう。

Illustratorにはブレンドや線グラデーションなどイラストにも使えそうな機能もたくさんあります。(線グラデはCS6以降)

アナログだって定規や雲形定規を使い、スクリーントーンやマスキングフィルムをカッターで切ったり貼ったりしています。要は仕上がりが重要なのです。

Illustratorのペンタブ環境を知った上で使える機能を使い、完成から逆算すればPhotoshopやクリスタとは違う自分に合った手法が見えてくるかもしれませんよ。


※私は普段はあまりIllustratorでイラストを描いていませんので、検証不足や間違い勘違いなどあるかもしれません。お気づきの点がございましたらコメントを頂けると嬉しいです。

記事はCS5がメインです。バージョンアップに伴い仕様変更されている所があるかもしれません。予めご了承ください。




文字・段落スタイルの補習 その1

$
0
0



先日、東京神田で行われた「DTPの勉強会 第18回」に参加させて頂きました。

IllustratorのテキストスタイルとInDesignのepub、InDesignのデータ結合、Illustratorのカラー関係とバラエティに富んだ内容でした。

主催者のあかつきさんからの依頼で、ブログで書いたIllustratorの段落/文字スタイルを再編集して原案としてお渡ししたところ、なぜか登壇するはめに(といっても座っていただけ^^)。実際はhamkoさんとあかつきさんの進行なので、やはり私はいなくても良かった気が…。

ともかくご来場頂きました皆様、ありがとうございました。

それにしてもhamkoさんの華麗なデモ(サンプルも綺麗!)には見とれてしまいました。実は直前まで内容が確定していなかっ(モゴモゴ)ですが、そこからあの完璧な操作と語り。まじすげえっす。

私には100年かかっても登壇デモなど不可能と確信しました。あそこまでの内容をあの時間で伝えられたのはお二方のスキルあってのこと。私がやっていたら半分も伝えられなかったでしょう。

さて、スタイルのセッションは基本編・応用編で80分もあったのですが、それでも時間が足りませんでした。伝えたいことはいっぱいありましたが、全て盛り込んだら一日がかりになるでしょう。というわけで泣く泣く削ったのですが、内容不十分と感じた方は本当に申し訳なかったです。

その点は私も心残りなので、伝えたかった分をこちらで紹介させていただきます。今回は勉強会の延長戦という意味合いですので、参加されていない方にはわからないことがあるかもしれません。申し訳ありませんがご了承ください。




スタイルの使い分けについて


InDesignユーザの方は理解されている方も多いと思いますが、普段スタイルを使わない方は段落スタイルと文字スタイルはどう使い分けるの? と思うかもしれません。

文字属性部分は丸かぶりしているわけですから、「フォントとサイズだけを変えたい」場合はどちらを使えば良いのやら迷ってしまいますね。

まず段落スタイルと文字スタイルでは適用できる最小単位が違います。段落スタイルは1段落単位、文字スタイルは1文字単位。

なので段落単位で変わるもの、例えば見出し、本文、キャプションなどのレベルごとに段落スタイルを適用し、一部の文字を太字や赤字に変更する場合に文字スタイルを使用するのが一般的です。(HTMLならば段落スタイルがhやp、文字スタイルがspanという感じでしょうか。)

↑段落スタイルは一部文字の選択でも段落全体にかかっていることに注目!


Illustratorの場合、ポイントテキストを選択ツールで選択して「フォントとサイズだけを変えたい」ならば、ぶっちゃけどちらでも良いわけです。



ただし、同種のスタイルは重ねがけできない、優先順位がある、段落スタイルは段落設定(揃えや文字組み等)も同時に適用されることなど、スタイルの挙動の違いを理解して用途に合わせて適正な方を使いましょう。



段落スタイル適用はカーソルを立てるだけでOK


「属性変更のない段落」はカーソルを入れてスタイル適用するだけで段落全体にスタイルを適用できます。文字全てを選ぶ必要はありません。



これは作業する上で効率アップになるのですが、デモでは次項の理由から説明が必要になるのであえて文字全体を選択して適用していました。


option+クリックで属性変更削除スタイル適用(windowsはAlt+クリック)


属性変更のあるテキストにスタイルを適用してもスタイルは下に潜ってしまうという挙動ですが、スタイル適用時にスタイル名をoption+クリックすると、属性変更を削除して強制的にスタイルを適用できます。

ただし、段落スタイルで属性変更があるときはカーソルを立ててoption+クリックでは属性変更削除はできません。属性変更のある文字を選択して実行する必要があります。






同種スタイルの重ねがけはできない


同種のスタイルはひとつしか適用できません。
別のスタイルを適用すると、元のスタイルははじき出されます。




改行と強制改行


Illustratorではポイント文字を使うケースも少なくありません。ポイント文字では特に折り返しを改行で入れることが多いですが、改行を入れてしまうと段落が分かれてしまいます。段落を分けたくない場合は強制改行(シフト+改行)使います。

↑3行目と4行目は強制改行なので1つの段落と認識しています。改行マークの違いに注目!


段落スタイルの統合


1段落に適用できるスタイルは1つなので、プレーンな段落スタイルを別段落へコピペしたり改行を削除して同一段落にした場合、スタイルが統合されてしまう仕様になっています。

↑プレーン状態の別段落スタイルの改行を削除すると前の段落に統合されてします。またコピペでも属性を維持できません


これ実はかなり危険です。 コピペや改行削除で属性が変わってしまうのはスタイルを使わないIllustrator作業では起こりえないので、段落スタイルの統合は特に注意が必要です。
ちなみにInDesignでは差分は属性変更に繰り上がってから統合されます(見た目は変わらず)。



ドキュメントをまたいだときの挙動


スタイルが適用されたテキストを別ドキュメントにコピペすると、スタイルも複製されます。

↑スタイル適用済みのテキストを新規ドキュメントにコピペすると、スタイルも取り込めます。




コピー元とコピー先に同種同名のものあるときはコピー先のスタイルに統合されます。

差分は属性変更として再設定されます(スタイル+属性変更)。つまり見た目は変わらないけれど、内部構造は変更されてしまいます。

↑内容の違う同名のスタイルは内部的にコピー先に統合されますが、属性変更扱いで見た目は維持されます


初期設定の標準文字スタイルと標準段落スタイルは名称を変更できませんので、初期設定が違うドキュメントを跨ぐ際は必ず差分ができます。スタイルの統合トラブルに特に注意しましょう。




スタイルの初期設定はどこに?


スタイルの初期設定は新規書類を開く際に選択する新規ドキュメントプロファイルの設定が反映されます。



これを利用して予めスタイルをドキュメントプロファイルに仕込んでおくことも可能です。これはテンプレート(ひな形)も同様です。

ドキュメント作成後はドキュメント依存になります。



スタイルに関してはアンドゥが効かない


という仕様です。スタイル関連は操作を間違えないよう注意しましょう。文句はAdobeさんへ。


アピアランス


スタイルでカラーを指定してもアピアランスの階層により、アピアランスのカラーが優先されることがあります。また、アピアランスで変形した場合文字パネルでは正確な数値を確認できません。

↑赤い文字が元のテキスト。アピアランスだと属性変更の上にカラー属性を適用できる。
また変形効果で200%拡大しているので青い文字は33.86Qということになる。アピアランスはオブジェクトの属性なので、今回は説明を省きました。


スタイルの解除


スタイルの解除はスタイルを削除するしかない→そのまま標準スタイル+属性変更になります。


一部の解除(InDesign でいうリンク切断)はできないので、別ドキュメントへコピペして解除して戻すとかいう力業しかありません。

またInDesign のようにドキュメントレベルでのスタイルのすげ替え(削除して別スタイルへ変更)もできません。


ショートカット


InDesignと違いIllustratorではスタイルにショートカットを割り当てられません。でも実はアクションでショートカット化は可能です。



↑アクションで段落スタイル1をF1に割り当て。いちおうショートカット化

ただしスタイルの種類と名前で判別するので、ガチガチにスタイル名などを決め打ちすれば何とか使えなくもないけど正直汎用性は低いです。


「コピペで化けるバグ」がある

スタイルが適用されているテキストをコピペするとスタイルが化けてしまうというバグがあります。これは以前Twitterで話題になり、ヒサノさんがまとめてくださった記事補足した記事ありますので参考にしてください。

検証の結果、原因としてはAdobeデフォルトのドキュメントプロファイルを使うとバグるという線が濃厚。バージョンによって違うようで最近のものは修正されているようです。

ちなみに、ものかのさん作のScriptkeyAiCiPT(共にMac専用)でプレーンペースト機能を使えばコピー先の属性を維持できるので、コピー先スタイル維持ならこちらを使っておくと安心です。


設定パネルにバグがある


※こちらはラーデ様に教えていただいき流星さんにも検証協力していただきました。情報提供ありがとうございます。

1、タブ位置に数値入力するとフィールドに全く違う数値が表示される(CS6以降)。実際は入力した位置になっているが、入力値を確認できないのは困りますAdobeさん。

↑いやいやいやいや。10って入力したよね。何で勝手に11.8にしてんの? でもタブストップは10mmのとこ指してるし。



2、タブの繰り返しの数値がおかしくなる。これはスタイル以前に機能として狂っていますAdobeさん。

↑いやいやいやいや。20mmってなってるけど17くらい指してるよね。次のも30mmって表示されるけど、26くらいだよね。これ、最初の数値がズレたまんま繰り返しているんですよね。あ、逆算すればいいのかっておい!



3、ジャスティファイの値が設定パネルを開くと吹き飛ぶ。これは致命的なバグな気がしますねAdobeさん。

↑自動行送りを設定して、


↑パネルを2回開いたら消えちゃいましたー(CS5)。私の環境ではCS6では大丈夫だったっぽい。



なんでやねんDTPさん(works014さん)が段落スタイルについて記事を書かれています。その中に「「カスタム段落スタイル」の一部の設定項目については、一度適当に設定を変えてから元に戻すという動作が必要な場合がある(再確認必須)」とあり、他にもちょこちょこバグがあると推測されます。

スタイルに限らずバグを回避しながら使うのはIllustratorの宿命です。初心者には厳しいかもしれませんが、地雷の場所を把握して踏まないように注意しましょう。

スタイル周りはバグや不思議仕様が散りばめられているので、「使わない」というのも一つの選択肢です。特にデータが行き来する現場などでは全ての人がバグを認識しながら回避するのはほぼ不可能ですから。



スクリプトは属性変更に注意


スクリプトによって属性変更削除の処理が違っているので、スクリプトの処理とテキストの状況を把握しておく必要があります。

今回ご紹介した「正規表現を使ってテキストをいじる3.0」は強制削除、「aiRegStyle」はチェックボックスによる選択式です。

↑aiRegStyleはclearing overridesにチェックを入れると属性変更を削除してスタイル適用



また、現在は非公開(持っている人はラッキーですよ!)ですが、PICTRIXさんのRegXもチェックボックスによる選択式です。

↑RegXは書換チェックで属性変更削除


確信犯で標準スタイルを変更


初期設定スタイルを変更すれば、新規で打つ文字が指定の文字になるので、仕様を理解した上で確信犯的に使うのはアリと言えばアリ。新規ドキュメントプロファイルで管理できるので、特定の仕事ごとにプロファイルを分けておけば比較的容易に運用できます。


システマチックに使うのでなくプチ時短ツールとして割り切る


InDesignと違いヤッツケ感の強いIllustratorのテキストスタイルでは、属性変更を一切使わずにスタイルを管理するのは至難の業。どこまでがスタイルが生きているか等を気にするくらいなら、初校のテキスト整理用として使ったり、いっそスタイルを一切削除(テキストのアウトライン感覚)して、使い捨てと割り切っての運用も考えられます。


応用編へ続く


文字・段落スタイルの補習 その2

$
0
0

つづきです。
勉強会+前回記事の基本を踏まえた上で、スタイルを応用して実務レベルで使ってみましょう。


スタイルをマーキングとして利用


フリーのデザイン・レイアウトでは散りばめたテキストを後から編集するのは面倒です。

そこで、初期段階でテキストに暫定スタイルだけ適用しておき、複製しながらレイアウト。詰めの段階に入ってから再定義でスタイルを整えていくというテクニックをご紹介します。

↑わかりやすいように色を付けたスタイルを3種適用し、複製してレイアウト。デザインが決まったら1つのテキストを修正して再定義という流れで、レイアウトを見ながら書式変更の試行錯誤ができます。


テキストはエディタから流し込めば属性変更はかかりませんのんで、再定義をかけても問題ありません。ただし何度も言いますが、手動で属性を変更した箇所は注意が必要です。

テキストが散らばっても逐一選択しなくて良いので、デザイン用途でも活用できる応用技です(勉強会の応用編で再定義のデモをしたので既視感ありますね^^)。


囲み内文字の天地合わせ


囲みや爆弾など行数の異なる天地センター合わせはIllustratorの苦手分野です(InDesignならフレーム作って揃えを天地センターにするだけなのにね)。

そこでトリッキーではありますが、ベースラインを半行ずらしたスタイルで制御してしまおうという応用技です。

まず天地センターの位置に2行のダミーテキストを置いておきます。

↑2行をベースに位置を決めます

↑ベースラインを半行ずらしたスタイルを作成。行送りが20Hなので、ベースラインを-10H



テキストを流し込んでから行数に応じたスタイルを適用すれば、天地センターに入ります。

↑テキスト量に合わせてスタイルを適用するだけ



これは修正時も有効です。応用で3行でも4行でも設定可能です。


ベースラインで移動するので角度を振っても問題ありません。


↑カコミごと10度回転しています



ワンタッチでスタイル取り込み+適用


フォント不足の支給データや(きれいな)パワポ変換PDF、旧版流用データなどで、テキストを指定のスタイルにショートカットキー1つで統一します。特に同一指定の複数ドキュメントに有効です。

これは前記事のコピペでスタイルの取り込みと、アクション化の組み合わせです。

前準備として「ペースト、消去、テキスト選択、標準スタイル適用、スタイル適用」の一連の操作をアクション化してショートカットを設定しておきます(ここではF1キー)。
(※実務では元データの状態(ロックや隠すなど)を考慮する必要がありますが、ここでは細かいエラー処理は省きます)



↑スタイルはアクション記録時の名前で認識します(ここでは段落スタイル:キャプション)。




初めにスタイル適用済みのテキストをコピーします。

↑テキストにはキャプションの段落スタイルが適用されています。



処理するドキュメントを開きショートカットキーを押すだけでドキュメントにスタイルを取り込み、全テキストにスタイルを適用します。ドキュメントが複数ある場合は続けて作業します。

スタイルが複数ある場合は、一番多いスタイルを適用しておき残りを手作業にするだけでも効率があがります。

↑テキストのコピーは最初の1回だけで、続けて作業すると効率良いです。


これは既存データ整形の下準備にも使えますね。スタイルを適用しなくてもスタイルだけ取り込んでおくとか。条件次第ではバッチ処理も可能です。



と、応用テクをいくつかご紹介いたしましたが、作業内容は人によって違いますので、一つのテクニックも目からウロコの情報だったり全く必要の無い情報だったりします。

できれば勉強会で身につけた知識やテクニックをそれぞれの作業に合わせてアレンジしたり、新たなテクニックを編み出したりして使っていただけたら嬉しいです。

以上で勉強会テキストスタイルの補習を終わります。
皆様ありがとうございました。








Illustratorの3D効果でBB-8を描く

$
0
0


はい、スターウォーズep7見てきましたよ。
うん、まあ、スターウォーズでした。内容はさておき公開されたことが嬉しくて、最初のタイトルで涙ぐんでしまった。帰りの駅では銀座線のマークがBB-8に見えるほどにどっぷりハマりました。

にしても、あらすじも言えないほどネタバレ要素が強いのはどうかと思うが…。
おかげで何も言えん^^

で、今回の主役で大人気のアイツをIllustratorで描いてみましょう。(ルーカスはファンアートには寛大だったけど、今の帝国体制だとどうなんだろ…、何だかイヤな予感がする^^)

ただ描くだけではつまらないので、3D効果とアピアランスをお勉強しながらのチュートリアルといきましょう。

さてBB-8ですが、すごーく単純な雪だるま型です。
3D効果なら回転体で簡単に作れますが、それだとアタマとカラダは固定なので魅力が半減です。




せっかくですから転がしたいですよね、コロコロと。
というわけでコロコロ転がせるBB-8をIllustratorで作ってみましょう。

1 アタマを作る

アタマの形状は1/4円にちょっと付け足して切り込みを入れたような形ですが、BB-8には2本のアンテナが立っています。

3Dの元となるオブジェクトは、アンテナの位置に細い線を描きグループ化します。グループにすることで複数のオブジェクトをまとめて回転体にすることができます。

↑頭部にパスを2本描いてグループ化


ちなみに私は公開されている動画や画像を参考にしてトレースしました。

アンテナ用のテクスチャはアタマのマッピングの位置と同位置に来るように調整して、位置を合わせのため頭部のテクスチャと同じ幅の不透明度0%のオブジェクトを置いて、アンテナを描きます。

↑マッピングデータのアンテナ位置は合わせておく

マッピング用のテクスチャは曲面の歪みを補正しつつトレースします。

マッピングはオブジェクトのサイズに合わせて配置されるので、テクスチャを等間隔にすると3Dの側面図では等間隔になりません。つまり図面をそのままトレースするのではなく、実際の長さを計算して作成する必要があります。



↑マッピングデータが等間隔だと3Dの側面図は等間隔にならない


↑逆に3Dの側面図を等間隔にしたければテクスチャをそれに合わせる必要があります。側面画像のトレースなどでは、見た目通りの比率では作成できません


そのへんをふまえてデータを作成し、シンボルに登録します。

マッピング用のデータができたらアタマ用のオブジェクトグループを、効果>3D効果>回転体で360°回転させます。


アンテナ以外の面は透明にしたいので、アートをマップの「構造体を表示しない」にチェックを入れます。


残りの面もマッピングしてアタマは完成です。


↑アタマできた




2 カラダを作る

カラダは正円なので形状はものすっごく単純ですが、マッピングを作るのがものすっごく大変!
マッピング用のテクスチャを起こすだけで記事1本書けてしまうほどなので、今回は端折ります。

幸い6面図はネットで拾えたのでトレース。しかし、極側のパターンは展開しなければならないので、Photoshopの極座標フィルタで変形してからトレースします。

↑ここだけPhotoshop使います

トレースが難しいなら画像を加工して貼ることも可能です。

↑こんな感じになります


次に半円のオブジェクトを作ります。線の塗りを入れるとマッピング面が増えてしまうので入れないように。



〈後述の理由から本体の3D化は一旦後回しにします〉


3 効果の統一

Illustratorでは複数の3Dオブジェクトは個別に詳細オプションの設定をしなければならず、アタマとカラダの設定が同じでないと艶や影などがちぐはぐになってしまいます。

↑オブジェクト毎に設定が違うので、気分でやるとちぐはぐになる



オブジェクトごとに詳細オプションを開いて同じ設定を繰り返すのは大変ですし、変更があると面倒なので、ここでちょっとしたテクニックを使います。

↑数値はまだしも、カラーや光源を同じにするのは至難の業



まずはアタマの設定後効果をグラフィックスタイルに登録します。


↑アタマのグループをグラフィックスタイルパネルにドラッグして登録



次にカラダのオブジェクトを選択し、登録したグラフィックスタイルをオプション+クリックします。
※オブジェクトの構造や設定によってはスポイト一発でOKなケースもあります。

↑オプション+クリックで効果を追加できます。ここでは塗りのあるパスに3D効果を追加します。


これで詳細が設定された回転体オブジェクトになるので、アピアランスパネルから3D回転体の設定を変更、カラダ用のマッピングを適用します。

↑3D化されアタマと同じ設定になりましたが、マッピングデータも同じなので見えなくなってしまいました。アピアランスパネルからマッピングを再設定します


最後にアタマとカラダをグループ化して完成です。




4 見た目の変更

カラダを回したいときはカラダのパスのみ選択して、アピアランスパネルから3D効果の値を変更してグリグリ。





頭を回したいときはアタマのグループのみ選択して、アピアランスパネルから3D効果のY軸をグリグリ。


ホントの3Dソフトに比べると大幅に制限はありますが、まあ、Illustratorでここまでできればいいんじゃないでしょうか。

さて、BB-8は直立しているよりもちょっと傾げているのがかわいいですよね。
というわけでちょっと回転してみると…、あ、3Dが崩壊した。なんてことになります。

↑あべしっ



そこでグループごとアピアランスをかけてしまいます。

グループを選択して、効果>変形で回転をかけてやるとちゃんと傾きます。




さらに効果の光彩(内側)なんてかけるとぐっとリアルになりますよ。


効果はオブジェクトとグループ(ここでは使いませんがレイヤーも)に対してかけられるので、階層を意識して使うことで複数の効果がかけられることを覚えておきましょう。




※Illustratorの3D効果はよく面が抜け落ちます。今回も終始アンテナが前面に出てきたり消えたりしています。くれぐれもお仕事で使うようなことは避けましょう。
あと、テクスチャの端の罫の処理していないので要らないところに線が出てしまっていますが、気にしない気にしない^^

つづく予定。

Illustratorの3D効果でBB-8を描く 2

$
0
0


やっとのことで作ったBB-8、折角ですからもう少し遊びましょう。


1 アニメ—ション




コロコロ転がるのがBB-8の魅力。そこでアニメーションを作ってみましょう。

3D効果などはブレンドを使えば中間値を自動生成してくれるので、回転などは数値をいじるだけでできてしまいます。

まずグループ単位で複製し、アタマとカラダの設定値を変更します。




次にブレンド化して中間数を設定します。





ブレンドを拡張してグループ解除、オブジェクトをサブレイヤーに分配(シーケンス)で、レイヤーパネルからサブレイヤーをレイヤーに割り振ります。




Flash形式で書き出すかPhotoshop書き出しでアニメーション化すれば完成です。
詳しくはこちらを参考にしてください。


2 線画






3Dで作ってみたものの、やっぱ線画にしたいなんてことありますね。これは簡単にできます。

3Dオブジェクトを選択してオブジェクトを再配色、カラーを1で色を白にすれば線画にできます(主線が黒である前提)。




黒はママで他の色は白になるので、中間色などは予めテクスチャに加工して割り振りをコントロールしましょう。

これでお子様の塗り絵もばっちりですね。

3 アピアランスの分割





3Dのままでは動作も重く不安定なので、「アピアランスの分割」をかけてパスとして固定しましょう。

でも注意点があります。

テクスチャにパス1本で描いたものも3D換算されてオブジェクト化されるのでパスの太さを変更したりできません。



加工をしなければこれで良いのですが、加工を必要とする場合、ちょっと不便です。

これを避けるには「線を使わない」ことです。
テクスチャをライブペイントに変換しておき、線をなしにしてアピアランスを分割。その後線に色を入れれば、線幅を変更したり線幅プロファイルを適用できます。

↑わかりやすくライブペイントを色分けしました。左からアピアランス分割前、アピアランス分割後線に着色、余計な線を削除して線幅を細くしたもの


↑境界線はパスになるので編集が楽になります



ただし、パス1本だったものが変換時に重なった複数のオブジェクトに変更されるので、パスの修正はコツがいります。




4 グレードアップ



さて、スルーしてきましたが気になる方は気になる平べったいアンテナ類とお目々、その右側の突起物ですが、Illustratorではそのまま3Dモデルにすることはできません。面倒ですが、完成度を上げるならここはグレードアップ作業が必要です。

別にパーツを3Dで作成して、もとのテクスチャをアタリにして上に配置します(必要であればアタリ側は非表示に)。




さすがに細かい凹凸まではIllustratorの3Dで再現するのはほぼ不可能です。気に入らない部分はパスで描き込みましょう。


文明の利器に頼りきっていては自力も落ちてしまいますのでがんばって加筆しましょう(戒め)。

トップのイラストは、仕上げにPhotoshopでフチとシャープネスをかけましたが、制作はIllustratorで行っています。





あまり参考になりませんが、アウトラインをあげておきます。





最後にもう一度。前回も述べましたが、Illustratorの3Dはよく面が抜け落ち、歪みます。お遊びレベルということを忘れずに。


祝! SPAi公開 〜Illustrator強化作戦スーパーSpecial〜

$
0
0

大分遅れましたが、「SPAi」公開されましたね。
何、知らない!? むむむ、Illustrator使いは要チェックですよ。

SPAi(Script Panel for (Adobe) illustrator)は、Illustratorでスクリプトパネルとスクリプトにショートカットを付与するソフトです。あれ、似たようなの無かったっけ? という方するどい。

過去にものかのさんがScriptPalette AIとScriptkeyAiという2つのソフトを開発していますが、この2つが融合(ルビ:フュージョン)してゴテンクス状態になりました。

★ScriptPalette AIとは
InDesignのようにパネルからスクリプトを実行できるソフトです(すみません、私ほとんど使ってません)。

★ScriptkeyAiとは
InDesignのようにショートカットでスクリプトを実行できるソフトです(IllustratorのスクリプトショートカットはQuickeysから鞍替えしたほどお気に入りのソフト)。

さらにajabonさん、あかつきさん、高橋としゆきさん、hamkoさんが協力。微力ながら私もまぜていただき、見事スーパーゴテンクスゴッド状態に。

さて、すごいすごい言っていても説得力がないので具体的に説明してゆきましょう。

●使い方
(初回起動のみ注意あり:詳しくはHPをご確認ください)

①SPAiを起動しIllustratorをアクティブにするとパネルが現れます。デフォルトではIllustratorのスクリプトフォルダを表示します。



②スクリプト名をダブルクリックするとスクリプトを実行します。

これだけで使えます。
そして、さらに進んだ使い方もあります。

③スクリプトを選択するとメニューに「ショートカット設定に追加する」が現れるので選択。




④ショートカットを設定する(直接キー入力)。



⑤ショートカットキーを押すとスクリプト実行。


ね、すごいシンプルでしょ。

ショートカットでの実行は、コピー(コマンド+C)のような感覚なのでとても快適です。スクリプトによってはIllustratorの作業が100倍くらいラクになりますよ。SPAiスゴイ!

まずは公式のHPを熟読してから使いましょう。トラブルシューティングなども丁寧に記載されています。補助的にこちらを参照していただけたら幸いです。



さて、以下はSPAiのすごいとこの紹介です。

●Illustrator自動判別
まずすごいのはIllustratorの認識力。
SPAiは一見Illustratorの標準パネルのような出で立ちですが、単独で動くアプリケーションです。これが常時Illustratorを見張っていて、Illustratorが前面に来たときだけ現れます。

↑IllustratorとInDesignを切り替えています。InDesignの時は自動で隠れます。


このようなアプリは別のアプリケーションに切り替えたときに邪魔になるなんてことがあるけど、SPAiは場をわきまえて必要ないときはサッと身を隠す、なんてよくできた子でしょう(ウチの環境ではCS6の時にたまーに隠れ忘れることがあり、それがまたドジッ子のようでカワイイ^^)。

さらにすごいのはバージョンの自動判別。
前面にいるバージョン(CS6とかCCとか)を判別して、そのバージョンのスクリプトフォルダにあるスクリプトを表示します(スクリプトフォルダ表示設定時)。


↑CS5とCS6を切り替えています。


さらにさらにすごいのは、UIの認識(CS6以降)。
CS6以降は標準がダークUIになりましたが、カスタマイズしている方もいることでしょう。SPAiはUI設定を自動的に判別して、見た目を標準パネルのUIと同じように表示します(これも設定あり)。

そして、何と言ってもバージョンまたぎ。
ScriptkeyAiでは複数バージョンをまたげませんでしたが、SPAiはOKです。その際にパージョンを判別してリアルタイムでスクリプトフォルダの中身を表示したり、UIに準じたカラーに変化するという離れ業を行います。

と、ここまででもどれだけすごいことをやっているのか! 個人開発の域を余裕で超えてます。ものかのさん、恐るべし!


●自由度の高いカスタマイズ
環境設定から好みの状態にカスタマイズできます。人によってシンプルが良かったり、補助項目がある方がよかったりするので、これは嬉しい機能です。

↑環境設定



◆見た目


明るさ:明から暗まで4段階で選べます。


サイズ:大から極小まで4段階で選べます




・「CS6以降は明るさを自動にする」
チェックがONだとUI設定から自動判別、OFFなら上記設定がイキにります。
あえて標準と区別したいなんてこともありますので、これはお好みで。



◆パネルの表示方法

組み合わせが多数になってしまうので、全チェックON状態から各項目をOFFにしたものを比べます。

↑全チェックON状態を基本とします



・階層表示
ONだとInDesignのようにツリー表示に、OFFはフォルダが展開せず、フォルダ上をクリックしてコンテクストメニュー上から選択する方法になります。

↑フォルダ上でクリックするとコンテクトメニューが表示される



・アイコン表示
ONだとアイコンを表示します。OFFだと非表示でシンプルになります。ただしOFFだとフォルダの区別がつきにくいので注意です。

↑シンプルですが、フォルダ併用時は注意



・拡張子表示
ONだと拡張子を表示します。OFFだと非表示でシンプルになります。

↑シンプルです


・ショートカット表示
ONだとショートカットを表示します。OFFだと非表示でシンプルになります。

↑シンプルです



・ラベルカラー
ONだとファイルやフォルダに付与したラベルカラーを表示します。OFFだと非表示でシンプルになります。カラー分けすることで、文字の羅列だけよりも判別しやすくなります。

↑シンプルです



◆パネル上のスクリプト実行方法

スクリプトの実行はシングルクリックとダブルクリックから選べます。シングルクリックはワンクリックで実行するアクションのボタンモードのようです。


慣れるとシングルが快適ですが、誤クリックによる暴走の危険は伴います。それをふまえて各自設定しましょう。


◆パネルに表示する内容

3パターンの表示方法から切り替えられます。


①キーボードショートカット登録ファイルを表示する
ショートカットに登録されたものをパネルに表示します。


↑ここに登録したものが表示されます


↑こういうこと


ショートカット登録パネルはショートカットを付与する際に使うので、設定専用エディタに見えますが、実はこれ前身のScriptkeyAiそのもので、スクリプトフォルダや登録フォルダとは別に単独でスクリプトを管理する能力を兼ね備えています。

ショートカットの登録方法はScriptkeyAi同様、複数登録やドラッグ登録、ドラッグでの項目入れ替えができます。



スクリプトがどこにあっても登録できるので、動作の確認や一時的に使いたい時などに有効です。

また、必ずしもショートカットキーを設定する必要はありません。チェックを外せば一時的にショートカットをOFFにすることもできます。

ScriptkeyAiと同じ使い方をしたい方はこのモードにしましょう。


②各スクリプトフォルダの中を表示する
各バージョンのAiフォルダのスクリプトフォルダを表示します。こちらは単純ですね。

↑アプリケーションフォルダ同梱のスクリプトフォルダを自動で読み込む


↑こういうこと


バージョン切り替えをしても自動で表示切り替えするのはこの表示方法です。


③登録フォルダの中を表示する
任意のフォルダのスクリプトを表示させます。こちらもわかりやすい。

↑任意のフォルダを指定



↑こういうこと


バージョンをまたいで共通のスクリプトを使う場合などに有効です。

スクリプトはエイリアスも使えるので、スクリプト本体はスクリプトフォルダに置きつつ、よく使うものをエイリアス化して登録フォルダにまとめておくことも可能です。

作業内容によってスクリプトの使用頻度は変わりますので、「レイアウト用」とか「トレス用」とかに分けて切り替えると便利かもしれません。



●登録、設定、ファイルへのアクセスしやすさ
Illustrator標準ではスクリプトをフォルダに入れた後再起動が必要です。なんでInDesignでは即時認識するのにIllustratorは…。

ってことでSPAiは、ショートカット登録や、スクリプトフォルダや登録フォルダに入れればすぐに認識します。これもなにげにすごいことですよ。

これは前述しましたが、パネル上でスクリプトを選択時はメニューが「ショートカット設定に追加する」になり、そのままスクリプトの設定画面に移行できます。




ショートカットキーの登録方法はチェックボタン+プルダウンから、より直感的な実際のショートカットキー押しに変わりました。これは同時に押しやすさ(にくさ)も確認できるので、素晴らしい実装だと思います。使えるキーもScriptkeyAiより格段に増えています。



スクリプトパネルから直接ファイルをFinder上に表示できるので、ちょっと内容を変更するとか、ラベルの色付けなどに重宝しますね。



また、ショートカット設定のスクリプト名をダブルクリックしてもFinderに表示が現れます。




あと、環境設定の登録フォルダのアイコンをダブルクリックすると、登録フォルダをFinderに表示します。


このようにSPAiはファイルへのアクセスが簡潔なので、ファイル探しに翻弄されることはありません。このUIの使いやすさは、ぜひとも本体のメーカーさんも見習って欲しいところです^^



●細かいところでは
・スクリプトはエイリアスでも動作します。わざわざ複製しなくてもよく、管理が楽になります。

・スクリプトのファイル名を変えても再登録は不要になりました。内部的な構造を変更したとのことです。

・ショートカットで運用する場合、パネルを表示しておく必要はありません。再表示する場合はDockから右クリックで再表示して下さい(ショートカットもあり)。

・設定ファイルはApplicationsupport内に保存されているので、クラッシュ時などに設定がリセットされません。また、バックアップを取っておくこともできます。


↑ショートカット編集画面左下から呼び出せます。



他にも沢山沢山、細かすぎて伝わらないけどわかる人には分かるすごい技術が盛り込まれているのですが、私がここで言うべき事でも無いので、わかる人はじっくり触ってみて驚いて下さい。

ということで、Illustratorにおけるスクリプトの使用をグッと楽にするソフトSPAiを使って、スクリプトをどんどん使い倒しましょう。 え?スクリプトを使ったこと無い? そんな方はSPAiを使うためにスクリプトを使って下さい(順番が逆とか言わない)!

冗談はさておき、標準でスクリプトが使いづらいのはIllustratorのシステム不備によるところもあるでしょう。その不備を埋めるソフトを独自で開発してしまったものかのさんはほんとにスゴイ。

開発中のやり取りの中で、技術的に無理っぽくてもなんとかする、要望+αの実装をする、切るところは潔く切るという判断が完璧すぎて惚れてしまいました^^

OSとIllustratorのバージョンが多岐にわたることから開発は相当苦労されたようです。このような素晴らしいものを開発していただいて、そして無償で配布していただいて心より感謝いたします。ものかのさん、ありがとうございます。

あ、最後になって申し訳ないのですが、これMac専用です。







知ってるつもりのIllustrator(複製)

$
0
0


何となく触ってみると使えてしまうのがIllustratorというソフト。私は習うより慣れろで好きなように使ってきて、ちゃんとした勉強なしでここまできました。

するとどうでしょう! 知らない機能は全く知らないし、内部的にどうなっているのかさっぱりわかんない。

仕事の内容が違えば使い方が違うのはあたりまえ。全く使わない機能を覚える必要ないし、使うときに覚えればいいこと。

でも、Illustratorが裏でどのように動いているか、使っている機能の挙動は詳しく知っておいた方がいい。

●をしたら■になる。それだけ知っていれば操作はできるし仕事はできる。でも●をしたときにどのような仕組みで■になるのかを理解しているだろうか。

構造を知らずにいると、いざって時にトラブって、なぜかわからないから力業で抑えるみたいなことばっかになりかねない。白のっけたり、切って消したり。

これじゃあかんでしょ、プロとして。頷いているあなたもいっしょですよ。

というわけで、ガイドブックではあまり取り上げない裏の挙動を探ってみましょう。


コピペと複製の違い


コピペと複製の違い、分かりますか? どっちもオブジェクトを増やす機能です。基本すぎて逆によくわかっていない人も多いのでは? コピペはコピーしてペースト、複製はオプションドラッグが代表的な方法。


では質問。オブジェクトを増やすのにどっちを使いますか?
正解はどっちでもよく、どっちでもよくない。
で、どっちなの。

ケースバイケースです。はい、いつもそれ。
でもそうだもん。トトロいるもん。

というより違いを理解して適切に使うのが正解。
以下に相違点をまとめましたので、まずはご覧下さい。

※Illustratorに「複製」という名の機能はありません。ここでは「移動ダイアログ+コピーボタン」と「op+ドラッグ」と「レイヤーパネルを作成アイコンへドラッグ」の操作を「複製」とします。公式ヘルプでは「移動ダイアログ+コピーボタン」は複製とみなしていませんが、私の独断で同じ扱いにしています。


●クリップボード
まずコピーですが、データをクリップボードというところに一旦書き込みます。良くわからない人はクリップボードは電車の網棚で、データは荷物だと思って下さい。

ペーストはそれをまた書き出すという手順をふむため、重い画像を含んだデータなんかはそれだけで時間がかかります。重い荷物は網棚に置くのも下ろすのも大変だということです。また、コピペでデータが化ける事例も報告されています。


対して複製はクリップボードを介さず、そのままポンと複製できます。分身の術みたいに。だから重くても早いし化けない(と思う)。




●複製される座標
コピペは基本ウインドウの中央。前面ペーストならコピー元と同座標。

↑アートボードでなくウインドウの真ん中。位置はテキトーと思っておこう。


複製は移動距離を数値なりドラッグなりで位置を指定します。数値を0でコピーすれば同座標になります。移動距離は記憶されるので、繰り返しコマンドで同じ間隔に複製されていきます。

↑こっちよりオプション+ドラッグの方がお手軽。どっちも使うけど。


↑繰り返しを知らない? あー、コマンドDですよ。



レイヤードラッグ複製の場合は同座標です。繰り返しはききません。

↑正直あんま使わない。だってめんどくさいもん。レイヤーごとならやるけどね。


●複製される階層
コピペは選択レイヤーの最前面にペースト。ただし「コピー元のレイヤーにペースト」にチェックが入っていると、コピー元レイヤーの最前面になります。

↑青いのがペーストされたオブジェクト。階層は選択レイヤーの一番上とわかりやすい。けど上下関係狂わせちゃいけないときもあるよね。



前面ペーストだと、オブジェクト未選択では通常コピペと同様。
オブジェクトを選択している場合は選択オブジェクト(グループ)の1階層前面へペーストされる。ただし「コピー元の~」チェックがある場合はコピー元と同じレイヤーでないと無効。

↑オブジェクト選択(緑)していればそのオブジェクト(グループ)の1個上。青いのが前面ペーストされたオブジェクト。



複製は選択オブジェクトの1つ前面になる。ただし複数選んでいる場合は最前面オブジェクトの1つ前面になる。個別にはならない。

↑こちらは複製元オブジェクトグループ(緑)の1個上。


↑複数まとめた場合、一番上のオブジェクト(紫)の1個上になる。個別で1個上にはならない。


レイヤードラッグ複製の場合は選択レイヤーの最上階層の1つ上です。



●グループ離脱
グループ内の一部のオブジェクトを複製するとします。その際グループから外れるものと外れないものがあります。
※グループの詳細については過去記事意外と知らないグループ化を参照。

通常のコピペはグループから外れます。前面ペーストもオブジェクトを未選択なら同様です。

↑赤黄緑の3体をグループ化してグループにスミフチをつけている。黄色をコピペするとグループから外れる。



ダイレクト選択などでグループオブジェクトの一部を選択して前面ペーストするとグループ内になります。グループまるごと選択した場合はグループの前面に複製されるため同じグループにはなりません。

↑黄色オブジェクトをコピー、選択したまま黄色を前面ペーストすると、同じグループになる(本当は同座標になるけどずらしてます)。


複製(レイヤードラッグ含む)はグループから離脱できません。

↑グループ内の黄色オブジェクトを右へ複製すると、1個上へ複製されるのでグループ内に収まる。


※「前面/背面ペースト」や「前面(背面)」とするとわかりにくいので、前面ペーストに背面ペーストの意味も含みます。また「前面、最前面」は背面描画時には逆になります。


このように複製1つでもいろいろな方法とルールがあります。

正直オブジェクト1こ複製するのなんてどうやってもいいんです。
でも、こういった構造を知るだけで、オブジェクト複製時の上下関係やグループの把握、位置の調整が容易になります。

構造がわかっていれば危険なところも分かるので、事故を未然に防ぐこともできるのです。逆に知らないままの作業は運良く事故らなかっただけかもしれません。

お仕事で使うツールですから、「なんとなく」わかっていることは、「はっきり」わかるようにしておきましょうというお話でした(ほぼ自戒です^^)。





知ってるつもりのIllustrator(リンク編)

$
0
0



リンクは「配置」でファイル名を選んだり、Finderから「ドラッグ&ドロップ」するだけなので、特に仕組みを知らなくたってDTP作業に支障ありません。

しかし、Illustratorのリンク周りは、まるで地雷原のような危険仕様。曖昧にせずしっかりと知っておくべきところですが、ガイドブックやヘルプにはほとんど詳しい記述はありません。

大抵、「リンク」は外部ファイルに紐付けしてIllustrator上に表示しているだけなのでデータが軽くなり、リンク元を一元管理できる。対して「埋め込み」はファイルに内包するのでデータが重くなるがリンク切れのトラブルは無い。という表面的な説明が一般的でしょう。

うん、間違ってません。でもこの説明だとInDesignも全く同じ機能ですよね。
実際はIllustratorとInDesignのリンク周りは全く別物です。DTPをやる上で知っておいて欲しいのは概要では無く実務上の挙動です。この表面上の説明のせいで何度トラブったことか!

どこかに突っ込んだ説明がないかと探しましたがあんまりありませんでした。ということで、今回はリンクについて以前検証した記事の内容も含めてまとめます。

●リンクの認識

リンクファイルは「絶対パス」という方法で認識しています。リンク情報を確認するとファイルの場所にパスが記されています。


「パス」はWEBの世界では常識ですが、DTP作業(特にMac)ではあまり意識することはないので馴染みない方もいることでしょう。

ここでのポイントは「リンクにはファイルの置き場所が記されている」、「絶対パス」であるということです。

※(IT用語辞典より引用)パスとは、外部記憶装置内でファイルやフォルダの所在を示す文字列。ファイルやフォルダのコンピュータ内での住所にあたる。

●リンク切れ

リンク切れとは、この「パス情報」に差異が生じてIllustratorがファイルを見失った状態です。パスの記述と一文字違うだけでもう認識できません。フォルダ名やファイル名を変更したり、ファイルやフォルダを移動するとリンク切れになるのはこのためです。


↑ファイル名変えたらリンク切れちゃいました



逆に、別の環境へコピーしても絶対パス通りの構造になっていればリンク切れは起こりません。

●リンク切れからの~再リンク

リンク切れを起こした場合、救済措置なのか「Illustratorファイルと同一階層」に、「リンクと同じファイル名」があると再リンクするという仕様です。


ん? と違和感を覚えた方するどい。そう、たとえ「同名の別ファイル」だったとしても「名前が同じなら」無条件再リンクです。警告? Illustratorだぜ。そんなんあるわけない。ワイルドだろぉ~。

※MD5500さんから情報をいただきました。CCでは同一階層の「Linksフォルダ」にもリンクと同じファイル名があると再リンクがかかります。これはCS6クラウドから搭載されたパッケージ機能を受けてのことでしょう(CS6パッケージ版はダメでした)。

●内容の違う同名ファイル

さて、ここで疑問です。別のフォルダにある同名別ファイルにリンクしていることは「稀によく」ありますね。

↑同じ名前の別ファイルをリンク


画像01.epsとかA.psdとか。テキトーに名前付けてあるやつ。前号から流用とか、後送データとか。
まあ、後送分を同じ名前のママ作業するのもどうかと思うが…。


↑こんな感じで



リンクが生きていれば全く問題ないこのファイル、リンク切れを起こしたときIllustratorさんはどのようにして復旧させるのでしょうか?

答え:その1 最初にリンクしたヤツにぜんぶ勝手にかけ直し。
   その2 それが嫌ならぜんぷ手動でかけ直ししろ。
の二択です。さあ、今日の気分はどっち? いやどっちとかじゃない。同名別ファイルある時点でその1はダメだから。

さて、ここで前述の問題「Illustratorファイルと同一階層にリンクと同じファイル名がある」が掛け合わさるとどうなるか。

同一階層に同名ファイルは1つしか置けませんね。つまりこの状態でリンク切れを起こすと同一階層にあるファイルに全部置き換わります。ええ、警告なんて一切ありませんよ。

↑開いただけでこうなります


●再リンクその2

誤リンクの危険性がある場合、自動一括再リンクは避けたいところです。
ただし、前項の「答え:その2」の手動再リンクにも幾つか方法があります。

ファイルを開くときにリンク切れの表示が出ますが、ここで1つ画像を選べばその階層と同じリンク切れになったファイルは自動的に再リンクします。

↑リンク切れ警告


↑再リンクっと


これはこれで助かりますが、当然「同名別ファイル」でも警告無しでやってくれます。

↑あれ、チェーンの画像が勝手に変わってる

しかもIllustratorはこのとき指定した「階層を記憶する」ので、もし途中で間違いに気付きキャンセルをしても、次からは勝手にその階層に見に行きます。

↑保存しないっと


この状態ではIllustratorは「見ぃつけたぁ~」状態なので、次にファイルを開いたときはもうリンク切れの表示も出さずに再リンクをしていまいます。別ファイルを開いても同じです。ロックオンしてます。こうなってしまったら回避策はIllustratorの再起動だけです。

↑開いただけで再リンク。もう警告してこない。

(z-)さんのブログに詳しい記事(Illustrator:リンクの注意のはなし)がありました。参考までに。

勝手に再リンクは同名別ファイルが無いという前提であればとてもラクチン機能なのですが、もし同名別ファイルの危険性があるならば、手間はかかりますがリンク切れを起こしたままファイルを開き、リンクパネルから1枚ずつ再リンクするのが安全です。

でももし手動で誤リンクしても警告はありません。出てくるヤツが悪いのと同じくらい間違える方が悪いんです。

同名別ファイルのある場所に確信があるなら「その1」で一括再リンクして、誤リンクのみ手動で再リンクする手もありますが、デンジャラスであることは言うまでもありませんね。

ちなみにInDesignやQXはリンクの貼り間違いやリンクファイルの変更(リンクしていたファイルと再リンクしたファイルに差異がある場合)は「変更」があることを明示してくれます。


●アラート

でもIllustratorだって環境設定の「リンクを更新」で「修正されるときに確認」にしていれれば、別ファイルに置き換わったときに警告あるんでしょう? と思いますね。




このアラートは「Illustratorファイルが開いているとき」に「リンクファイルに変更」があったら出ます。決して開くときにリンクファイルとの差異を警告する機能ではありませんのでご注意を。

一人で作業していたらあんまり意味の無いアラートですねえ。自分で直すんだしわかってますよ。うぅ寂しい。


(つづく…と思う)









知ってるつもりのIllustrator(リンク編2)

$
0
0
つづきです。

●リンク先の変更と更新

リンク先のファイルを変更した場合、「リンク」なので当然Illustrator側でも変更されます。しかし、これには「条件」が付きます。

たとえば、リンク画像のあるIllustratorファイルをInDesignに貼り込んだとします。InDesignからPDFを書き出せば以下のようになります。


ここからリンク先のファイルを更新します(aiファイルは開きません)。この状態でInDesignからPDFを書き出すとどうなるでしょう。


Illustratorにリンクしているファイルが変更されているのだからそれを反映したPDFが書き出されそうですが、実際は「Illustratorを保存したとき」のデータで書き出されます。つまり、リンク先ファイルだけを修正しても変更は反映されていないということです。


察しのいい方はお気づきでしょう。そう、Illustratorがリンクファイルを「リンク」しているのは「ファイルを開いている」ときなのです。

ちなみにInDesign-InDesignリンクではリンク先のデータに変更が生じた場合警告を出します。こちらはリアルタイムで「リンク」していることがわかります。

●リンクファイルの行方

元データまでリンクファイルを読みにいかないならば、データはどこから吸い上げているの? と思いますよね。



実はリンクと言いつつ保存時にリンクファイルを複製内包していて、そのデータを出力しているのです。なにぃ、リンク画像をIllustratorファイルに一緒に保存しているだと!


と、にわかに信じがたい事実ですが、容量を見ればほらバレバレですよ。

↑白紙データは126KBで、リンク画像を配置して保存しただけのデータは9.3MB(保存オプションは同じ)。リンク元画像が14MBでちょっと計算合いませんが、プレビュー画像にしては重すぎます。…持ってますよね。

乱暴ないい方をすれば、リンク元のデータなんか無くたってちゃんと出力できるのです(でも入稿時は添付しないとダメです。リンクデータが無いと、データのチェック時にリンク切れになってしまいますから)

●保存形式による違い

リンクファイルを内包するのはPDF互換チェックのあるai形式か、Illustrator eps形式になります。両者はリンクファイル内包のルールが違います。
※「配置した画像を含む」チェックの有無と、リンクデータの内包は関連性がなさそうなので、ここでは外す前提とします。


■ai形式
ai形式のデータをInDesignなどに貼り込んで出力するためには「PDF互換チェック」が必須となります。PDF互換チェックは説明が大変なので省きますが、チェックするとリンクファイルを内包します。


つまり、ai形式出力用ファイル = PDF互換チェックをオン = リンクファイルを内包するという構図になり、必然的に内包する形になります。


(参考:公式ヘルプ引用
A-2. 「PDF 互換ファイルを作成」オプション

AI ファイルは PDF および PGF の両方の形式を使用します。「PDF 互換ファイルを作成」オプションを選択した場合、Illustrator は PDF ファイルを読み込める全てのアプリケーションと互換性のある PDF 構文が添付されているファイルを作成します。このオプションを使用する場合、Illustrator のファイル内に 2 つの形式を保存するため、ファイルサイズは増加します。


ただし、「PDF互換チェック」なしはPDFとしての情報を持たないだけで、リンク情報が消えたり、Illustratorデータが破損することはありません。


■Illustrator eps形式
こちらはPDF互換チェックはありませんが、「ver.9以降」のIllustrator eps形式ファイルは出力用のファイルを内包します。なので現在のIllustrator eps形式はリンクファイルを内包していると考えて良いでしょう。

↑同じデータからバージョンを変えて保存しました。共に「配置した画像を含む」チェックは外しています。


また、ai形式とeps形式では内包するデータの形式が違います。FileJuicerというソフトで抽出して検証してみましたが、ai形式は透明や別カラーモードのデータ(RGB←→CMYK)を内包、eps形式は透明を分割してカラーモードは統一して内包しているようでした。


●ではリンクはリンクでは無い?

それじゃあ埋め込みと変わらないじゃん。と思うかもしれませんが、埋め込みとの決定的な違いは「情報として」は外部ファイルであること。Illustratorファイルを開いた瞬間に内包データは外部データのリンクに置き換わりますので、「リンク」としての体裁を保っていることに変わりありません。


また、「リンクとして内包したもの」と「埋め込みしたもの」ではデータが異なります。例えばai形式でCMYKの書類にRGB画像をリンクした場合、リンクならRGBのまま内包、埋め込みならCMYKへ変換されます。


リンク周りは思った以上に深くてどうも藪をつついて蛇を出した感が…。
記事はかなり端折っているにも関わらず、まとめきれず。
まだつづくのです。







知ってるつもりのIllustrator(リンク編3)

$
0
0



つづきのつづきです。

●画像置換のルール

リンク画像は別の画像に置換することができます。
例えば50×70mmのリンク画像を17.5×25mmの画像に置換するとします。

↑これくらいのサイズの違いがあります。


するとベロンと置き換わります。これ、同じ倍率でも同じ寸法でもない、ピクセル等倍とかでもない、ではなんじゃらほい。



↑もーなんだよこれー。


もったいぶっても仕方ないのでズバリ、これは対角線の長さが同じになるのです。そして基準は画像のセンターです。


つまり縦横の比率さえ同じなら(再サンプル無しのリサイズなど)、置換してもIllustrator上でのサイズや位置は一切変わらないということです。

デジカメ画像などは取りあえず貼っておいて、カラーモードや色味、解像度を調整してから張り直してもトリミングしない限りズレません。

でもそんな仕様だからノートリからトリミングへの置換はもう大変なんですよ、奥さん! アタリ画像をノートリで貼って、トリミングを入稿する人ちょっと来なさい。メッ!(さすがに今はいないか^^)



●埋め込みのルール

リンクを扱うなら埋め込みにも言及しないといけませんね。

埋め込みは配置データをIllustratorファイル内に格納する機能ですが、単純に格納しているわけではありません。データによってはオリジナルデータと異なる情報に書き換えてしまいます。

まずはカラーモード。リンクファイルととIllustratorファイルのカラーモードが違う場合、ファイルを埋め込むとそのモードに変換されます。



次に画像解像度とサイズ。ラスターデータの場合、画素数は変わりませんが元の画像解像度に関係なく72dpiに変換されます。

この際Illustrator上での貼り込みサイズは変わりませんが、整合性を取るために必然的に拡縮率が書き換わります。前述の通り画像サイズが変わっても縦横比は変わらないので見た目は一切変わりません。

↑原寸で貼ったのに



↑埋め込んだら12%でした。この画像の解像度はいくつか求めなさい。(10点)



ちなみにこの「72dpi」はラスタライズ解像度などとは関係なく固定のようです。

たとえば350dpiの画像が72dpiになるとサイズは約5倍になるので、100%で貼っていたものが約20%に縮小されます(正確には4.86倍で20.571%)。仮に23%に縮小して配置したら、埋め込み時は4.371%になるわけです。

こんな仕様ですから、埋め込み画像とリンク画像の倍率を合わせて貼り込みするのは大変なんですよ、奥さん!

また、レイヤー付きpsdファイルは、埋め込みオプションでレイヤーを分割したり1枚画像にしたりできます。ただし調整レイヤーなどのレイヤー分割不可能なものは強制的に1枚画像になるようです。

クリッピングパスのあるものはクリッピングマスクに、レイヤー分割したときのレイヤーマスクは不透明マスクになります。

クリッピングパスは何とか目視できますが、レイヤーマスクは危険です。これ、画像を置換してもマスクが残るので、似たような画像だと見落とす危険性があります。

↑タイガー、いやレイヤーマスクが不透明マスクに。オブジェクトとして表示されないので透明パネル出てないとなかなか気付かない。

↑画像修正時にご丁寧に余白トリミングしてくれて再リンクしたらちょっと拡大されちゃって、マスクは居残るからずれちゃったの図。この現象はクリッピングマスクも同じです。


IllustratorファイルやPDFも埋め込めますが、ベクターデータはオブジェクトとして展開されることになります。ネイティブデータが埋め込まれるわけで無いので、アピアランスなどは分割された状態になります。


Illustratorデータでは、配置状態では「線」にも変形がかかりますが、展開すると線に変形はかかりません。オリジナルとは違う形状になるので注意しましょう(過去記事参照:Ai-Aiリンクの注意点(その1))。

画像ファイルは埋め込んだときに名前やリンクパスが残るものと残らないものがあります。

↑これらを手動で埋め込むと、


↑Photoshop PDFとPhotoshop EPSは名前とリンクパスがなくなる

                                                           
Photoshop PDF消える
Photoshop EPS消える
tiff残る
psd残る
jpeg残る


●「配置画像を含む」チェックとリンクの強制埋め込み

「画像含む」にチェックするとリンクとして配置していてもリンクデータの形式によっては強制的に「埋め込み」になりリンク関係は破棄されます。

DTPの主要形式であればeps意外は全て強制埋め込みと思っておきましょう。意図していない埋め込みは前項のとおり注意が必要です。リンクを保ちたいならば「配置画像を含む」チェックは要注意です。

↑「配置した画像を含む」にチェックを入れて保存してみた。


↑Oh! これ絶望! ちなみにai形式、Illustrator eps形式共に同じ結果でした。


なぜかepsだけはIllustrator EPSでも埋め込まれません。埋め込まれた画像の名前やリンクパスは消滅します。

強制埋め込みにはオプションなどの指定はなく、Illustratorのオレルールに従って埋め込まれます。

しかもPDF互換aiとepsは既にリンクデータを内包しているのに更にデータを格納するため、データ容量がふくれあがります。

↑画像含まなくてもリンク内包するから出力できるのに…


さらにチェックがないと「本当に埋め込まなくていいのか」的な問答がありますが、印刷出力に関しては、これは「世界の半分をオマエにやろうと」同じです。埋め込まなくても出力できるのに埋め込みチェックを入れるとリンク関係が破棄され容量マシマシになります。

↑うーめこむ、うーめこむ! やめなよ、りんちゃん泣いてるでしょ! せんせー!


また、検証の結果「同一データの複数リンク」の「内包」は1枚であろうと10枚であろうとデータ容量は同じですが、埋め込んでしまうと枚数分のデータに比例して容量が増えます。

↑でPDF互換チェックありのai形式(内包状態)なら、同一画像のリンク配置1枚でも5枚でも容量は1枚分。埋め込むと5倍になる。


うっかり強制埋め込みになってしまうと、容量は増えるし元データに直しがあった場合全て再リンクになるというダブルパンチを食らうことになります。

「配置画像の埋め込み」は、リンク切れなどを気にせず配置データを固定するための便利機能ですが、使い方を誤るとトラブルの元です。

※ai形式ではPDF互換を入れずに「画像を含むチェック」だけチェックしても出力はできず、ver.8形式のepsでは「画像を含むチェック」で出力できました(昔はこれで出力してました)。正直よくわかんないっす。

これらを踏まえてリンクをリンクとして保つなら保存形式には注意しましょう。埋め込みからリンクへの復旧は面倒なうえ、貼り間違いやマスクのトラップもあり危険です。



もう1回だけつづきます。






知ってるつもりのIllustrator(リンク編4)

$
0
0
つづきのつづきのつづきです。

※CC使用期限切れにより検証できません(メイン環境でないのでうっかりしていました)。間違いありましたら遠慮なくツッコミをお願いします。

●画像の埋め込み解除

CCから搭載された「画像の埋め込み解除」は「埋め込みを解除してリンクにする」という機能ですが、これは埋め込み済みのファイルを抽出して別ファイルとして保存し、そこにリンクをかける機能です。元々リンクしていたファイルにリンクをかけ直してくれているわけではありません。


ただ、Illustratorでは、ある意味埋め込みファイルを抽出してリンクをかけた方が絶対的に安全なので、仕様としては正しいのかもしれません。名称から勘違いする人がいるかもしれないので一応注意喚起を。

抽出した画像ファイルは、埋め込みの項で言及した解像度変更のため、書き出したデータは同じ画素数でも、サイズやカラーモードなどが変わってしまっていることがあります。

ちなみにInDesignは元データへのリンクも、抽出してリンクもどちらもできます。埋め込みから元データへの再リンクする際に、画像ファイルが変更されていれば警告も出ます(100点満点)。

ああ、そういえば神速IllustratorのP285に、条件付きで埋め込みを元データにリンクをかけ直すテクニックが載っていたなぁ(棒)。

●パッケージ

私CC使ってないのでIllustratorのこれは詳しいことワカリマセンが、リンクファイルを収集してくれるInDesignやQXではおなじみの機能です。

これIllustratorにしてはちゃんと作ってあって(すごい失礼!)、初回で問題にした同名別ファイルを処理できるのです。

たとえば下図のようにいろいろなところからリンクをかけていて、名前がバッティングしているファイルがあったとします。

↑ちゃんと管理しないとこういうことも起こりうる。現実問題ほぼないと思ってはいるけど

「リンクされたファイルとドキュメントを再リンク」(なげーよ)チェックがオンならば、収集時に同名別ファイルがあると名前に文字列を追加してそのファイルにリンクをかけ直してIllustratorファイルを上書きしてくれます。

↑重複ファイルがなくてもリンクパスは書き換えてくれるので、間違いなくLinksフォルダ内のファイルにリンクがかかる


「リンクされたファイルとドキュメントを再リンク」チェックがオフの場合は残念ながら同名ファイルがあると1個だけしか収集してれず、そのまま再リンクすると恐ろしい結果に。

ただし、全てオリジナルファイルのコピーになるので更新日などが変わらず、同名重複の恐れが無かったり、フォルダが分かれてても実は同一画像など、これはこれで使い道があるのです。

↑単純にファイルのコピー収集なので、同一環境内ではリンクは元のファイルにかかったまま。リンク切れになれば同一階層のLinksフォルダにかかる


ここはキッチリ違いを理解して正しく使いましょう。

●まとめ

というわけで、やっとまとめでございます。

DTPというか、プロフェッショナルの作業において、リンク配置を使うのであればファイル保存時のリンク状態を保持するのは絶対に必要な事です。にもかかわらず、Illustratorにはその機能が欠落しています。何より再リンクしたものが正しいのかどうかの確認ができないのが一番の問題点です。

しかしながら、入稿時やバックアップ時に同名別ファイルや補正前画像の混入などのミスは起こりえます。だってにんげんだもの。

そうしたミスが起きたとき、Illustrator側は助けてくれません。はい、最初から助けてくれないのが分かっているならば自衛手段を講じれば良いのです。

知らなければ踏むかもしれない地雷でも、ある場所がわかっていれば回避することは可能です。まず、リンクは切れやすいもの、再リンク時は確認しようがないことを念頭に置き、フォルダやファイル名に気をつけて、使える環境ならパッケージや場合によっては埋め込みや埋め込み解除なども駆使しましょう。

とういわけで、リンク周りの挙動について知る限りの内容をこちらにまとめさせていただきました。

重要なことを書き忘れていましたが、こちらの一連の記事は基本CS5での挙動です。バージョン違いによる仕様変更などはあるかもしれません。もし間違いや追加情報、お気づきの点などありましたらコメントなど頂けたら助かります。

以上で「知ってるつもりのIllustrator(リンク編)」はおしまいです。





Viewing all 136 articles
Browse latest View live