クリエイター手抜きプロジェクト[426]イベント編 CSS Nite in SHINSHU vol.2 - IllustratorとPhotoshop/古籏一浩

投稿:  著者:  読了時間:11分(本文:約5,000文字)



例によって、イベントというかセミナーに行ってきましたので、そのレポートです。が、今回は小規模な催しで、IllustratorとPhotoshopのお勉強といったところです。

・CSS Nite in SHINSHU vol.2
< http://cssnite.jp/x10ai/matsumoto.html >

名前に「CSS Nite」とあるように、まあ有名どころの主催となってます。講師は鷹野雅弘さんで「10倍ラクするIllustrator仕事術」執筆者の一人です。この本を持ってイベント会場に行くとキャッシュバックということで、表紙だけ偽装して持っていきました。

さすがに、本の表紙だけで判定しており中身のチェックは行われないようです。......と書きましたが、もちろん本物を持っていきました、はい。

・鷹野雅弘
< http://www.amazon.co.jp/鷹野-雅弘/e/B0046W2K9C/ >

・10倍ラクするIllustrator仕事術
< http://www.amazon.co.jp/dp/4774167967/ >

例によってリアルタイムに入力しているので、途中で挫折してしまうかもしれませんが、何か役立つセミナーのはずなので、ちょろちょろとレポートしていきます。




まずは、ジャンケンで勝った人がAdobe特製ノート(2冊)をGET。続いて主催者の紹介。書籍は28冊も書いているとのこと。

次はIllustratorの歴史っぽい説明から始まり、Illustrator CC 2014のバージョン番号はいくつか? という質問。というところで、会場内でツイートしていたら、Twitterでしかやりとりしたことがない人と出会うという、思わぬ出来事がありました。偶然と言えば偶然なんですが。(その後、Ingressでポータルを二人で破壊しながら帰宅という感じで)

講座は進んでファイルの互換性の問題が取り上げられました。なんて、やっている時につけていたApple Watchの通知がピンポン! ピンポン! と鳴るというなんともな状態に......。

さすがに、注意うけたのですが音の切り方が分からず......。おやすみモードにすればよさそうだけど、いやはや何とも。手軽にアラーム音が切れないのは、ちょっと困りました。iPhoneならすぐにできるのに。

次はIllustrator CC 2014までのスプラッシュ画面の経緯とかの説明。ボッチチェリのビーナスをもとにしている云々。ビーナスよりボーナスの方がいいけど......。

ここまでが前振り。ようやく本番。まずは、滅多に使われないというか知られていないライブカラーの説明から。2007年からある機能だけど、とにかく知られていない機能のひとつ。参加した人の半数の方が、知らないと手を挙げてました。

ライブカラーの次はパターンの説明。パターンの位置を変更したい場合はどうするか。各種ツールのオブジェクト変形のチェックを入れたりすることで対処できるとのこと。

続いてフォントの話。文字の先端や角が尖っているフォントもあれば、まるくなっているフォントもある(墨だまりというのだそうで)。Noto Sansの Notoは今の朝の連ドラの舞台の能登ではなく、Not 豆腐(□)の意味だそうで。

その後、商品のキャッチコピーを作る時に便利な、文字タッチ機能。これはIllustrator CCから搭載された機能ですが、これまで水平比率やベースラインなど手作業で入力していたのを、直感的にできるようにするものです。

また、通常、文字を選択して色を変更すると選択を示すために色が反転してしまいますが、文字タッチツールを使えば反転しなくても済むそうです。ちなみにCommand (Mac) / Control (Windows) + Hのキーコンビネーションを使っても、選択範囲の反転を見えないようにすることもできます。

次にIllustrator CC以降で追加されたテキストエリア、ポイントテキストについての説明。テキストエリアの自動サイズ調整をあらかじめオンにしておくには、環境設定で行えるとのこと。まあ、多用すると重くなるそうです。

その後、スクリプトの話になり、便利なスクリプトがいろいろあるということで、いくつかのサイトが紹介されました。例えば、選択したテキストを書き出すものなどです。

ちょっと余裕があったので、講師がしゃべっている間に同じ機能を持つスクリプトが作成できるか、というアホなことをやってました。作ったのは以下のコード。まだ、それなりに命令などは暗記しているので、一応話している最中に動作するプログラムは作成できました。まだ、ボケてないようで一安心。

// テキスト書き出し
function writeText(){
  var selObj = app.activeDocument.selection[0];
  var fileObj = File.saveDialog("保存ファイル名を指定してください", "sample.txt");
  if (!fileObj){ return; }
  var text = selObj.contents;
  // $.writeln(text);
  var flag = fileObj.open("w");
  if (!flag){ return; }
  fileObj.writeln(text);
  fileObj.close();
}
writeText();

スクリプトネタの後はカレンダーの制作。なぜか最初にUNIXのcalコマンドが紹介されました。が、さすがにUNIXコマンドは敷居が高いので、エクセルを利用する方法の解説になりました。エクセルからコピペする方が、楽と言えば楽です。

カレンダーの体裁を整える際に、長方形グリッドツールとスレッドテキストを使うと、うまくいかないとのこと。これは、長方形グリッドのテキストのフローの順番がぐちゃぐちゃ(順不同)になってしまうためです。まあ、これはIllustratorのアプリケーション本体のプログラムが駄目な気がしますが。

ここで休憩になりました。が、開催地が松本なせいか沈黙の時間が......。さすがに沈黙すぎて耐えられない状態。ということで、短めの休憩も終わって次の講座が始まりました。まずはDTPでなくWebでのイラレ講座。ピクセルプレビューの基本的なところからボタンの制作へ。

アピアランスを使って金額に×をつける方法。変形などを利用してやることで、桁数に関係なく×がつくという便利なものです。詳しくは本に載っているとのこと。確かに本読みながらでないと、ちょっと分からない。

次は内側描画と画像の配置などの説明。複数配置時にカーソルキーを使って配置する画像を選択することができます。Illustrator 24時間イベントの時にも内側描画を利用したお絵かきの方法が紹介されてましたが、人によっては便利なはず。

これでIllustratorの講座が終了しました。で、まだまだ講座が続きます。Illustratorの次はPhotoshop。まずは、角度補正から。昔はものさしツールで角度を水平にしていたけど、今はツールバー上にある角度補正ボタンでOK。

また、切り抜きツールを使って補正することもできるとのこと。余白を切り抜きたい場合は、角度補正して切り抜きを選択すれば楽だそうです。

切り抜きツールで「境界線を調整」してスマート半径などを調整すれば、まあうまく切り抜くことができるとの事。うまく切り抜けない、切り抜きすぎたという場合は、「境界線を調整」にあるブラシ・消しゴムツールを使って調整したりできると。フリンジの削除も「境界線を調整」ダイアログで行うことができるそうで。

変数・データセットを利用して、スクリプトを使わずに半自動化することもできるという説明もありましたが、周囲を見ると割と固まってる人が多い感じ。さすがに変数とか出てくると分かりにくいのかも。

ちなみにIllustrator/PhotoshopのJavaScriptリファレンスにも、この変数まわりの機能があるのですが、まあ使ったことはありません。

その後、画像アセットの説明。一枚のPSDファイルから、まとめてJPEGやPNG形式に書き出せるとのことで歓声が。でも、これも前々からある機能だそうで。結構知らない機能が多い......。IllustratorでもCC以降はLayer Exporterのエクステンションを入れればできるとのこと。

次に、撮影時にぶれてしまった写真や、ピンぼけ画像を鮮明にする方法が紹介されました。これはフィルタのぶれの軽減で簡単に修正できるとのこと。

次に、カメラで撮影された写真のゆがみ(画像の四隅などレンズが歪んでしまう)を手軽に補正する方法が紹介されました。これは画像をスマートオブジェクトにした後に、カメラRawフィルタを使って歪みを補正するとのこと。

最後は丸いものにぼかしをかける方法で、スピンぼかしを利用する方法が紹介されました。他にもパスぼかしを使って処理する方法もあるとのこと。

質問タイムはFireworksを使っていくべきか、Photoshopに移行するかという、なかなか難しい質問。Photoshop CC 2014以降は、まあ機能が向上はしているけど......。

Webも変わってきているので、これまでFireworksやPhotoshopを使って画像として部品を作ってきたけど、CSSやWebFontを使ってやった方がよいだろうと。時代はどんどん変わっていくので、それに合わせていくというのがよいのかなあ、と。MacならSketchを使うという方向に行く人もいるとのこと。

と、こんな感じで「CSS Nite in SHINSHU vol.2」は終了しました。にしても、他の人がどういうIllustrator/Photoshopの使い方をしているのか......すごく謎です。

【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/ >

本を持って行ったのでサインしてもらいました。何かあったら「何でも鑑定団に出して云々」......と思ったら、そういうことをする人への対処として、送り先(相手)の名前を書くという技によって半分ブロックされました。本に送り先の相手の名前があると価値がさがるという。

さて、Apple Watchですが、あまりにアプリが少ないのとイマイチ使えないので、アプリを自作したらどうなんだろうということで、以下のページで開発のカテゴリを作って、アプリを作る手順を説明してます。

まあ、センサーとかデジタルクラウンとかの値も取得できず、本当にiPhoneのサブ画面扱い。以前から何もできない、という噂があったんですが面白いことは現時点ではほとんど実現不可能か、無理矢理どうにかやらないといけない(やってもできない)感じです。

今のところアイデア一発かなあ、と思ったり。ただ、すでにiPhone/iPadのアプリを作った人にとっては、すぐにアプリが作れるという(ノウハウあまりいらないので)メリットもあります。

・Apple Watch(アップルウォッチ)使い方辞典
< http://www.openspc2.org/reibun/AppleWatch/2015/ >

・Photoshop自動化基本編
< http://www.amazon.co.jp/dp/B00W952JQW/ >

・Illustrator自動化基本編
< http://www.amazon.co.jp/dp/B00R5MZ1PA >

・Adobe JavaScriptリファレンス
< http://www.amazon.co.jp/dp/B00FZEK6J6/ >

・ExtendScript Toolkit(ESTK)基本編
< http://www.amazon.co.jp/dp/B00JUBQKKY/ >

・データビジュアライゼーションのためのD3.js徹底入門
< http://www.amazon.co.jp/dp/4797368861 >

・4K/ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/ >

・クリエイター手抜きプロジェクト
< http://www.openspc2.org/projectX/ >