皆様こんにちは、
ケートミィa.k.a.富田です（

10月にフリーランスから会社勤めに切り替わり、
就職を期に当ブログをリニューアルしようと思いましたが、
12月は予定がてんこ盛りなので移転作業自体はもう少し先になりそうです(*_*;

そこで、今回はいおり@ｺﾞｽﾛﾘ氏(@96usa_koi)主催のIllustratorアドベントカレンダーに参加したので、そのつながりで前回書いたエントリーの続きを書いてみたいと思います。

前回記事：【Photoshop,Illustrator】アクション機能を使ってラクをする！

前回の記事のときにもちょこっと書きましたが、
実は私はイラレのアクション機能、あまり触ったことが無かったりします。
Photoshopのアクション機能については仕事で何度か使ったことはありますが、
Illustratorに関してはそこまで作業の効率化は進めていなかったのです。

というわけでお恥ずかしながら当エントリーを期に、イラレのアクション機能ともう少し仲良くなってみたい、と思った次第であります。

一応、今回の投稿は仕事でIllustratorを触っていて、
今までIllustratorのアクション機能を触ったことが無い人向けになりますかね。
それ以外の方も全然Welcomeです。

【注意】
今回解説したIllustratorの操作方法は
Windows10のAdobe Illustrator CC2018を基準にしております。
このブログをご覧の方が利用しているバージョンとは
若干の差異が有りうることをご了承下さいm(_ _)m

まず使ってみよう

アクションはこんなアイコンのメニューです。

ない場合は隠れているので「ウインドウ＞アクション」でパネルを表示させます。

基本的にはPhotoshopのアクション機能と同じですが、
デザイン作成に特化されたプリセットが初期設定アクションとして
読み込まれています。

新規アクションをここに並んでいるボタンで追加して
記録していきます。

記録は途中で止めることも再開することも出来るので
納得の行く形にアクションを調整することが可能です。

というか、複雑なアクションになるとおそらく一発で作成できることが
困難になるので結構作り込むことになりそうです。。

アクションとしてプリセットに登録すると、
このような操作が自動化出来ます。

長方形を等分に分ける

先日参加したCSS Nite Okayamaで登壇されていた鷹野雅弘さんが解説していたイラレのアクション機能です。
参考URL：http://www.dtp-transit.jp/adobe/illustrator/post_2227.html

余談にはなりますが、このセミナーでイラレのメニューで段組設定があるのを初めて知りました。

枠線とトンボを自動で配置する
枠線とそのトリムマークを自動で作成出来るアクションです。
枠線のサイズをその都度変換すれば色々なサイズに応用できるかと思います。

参考までに、レシピは
・1つめのアクション
長方形ツール（サイズ指定）→トリムマークの作成

・2つめのアクション
パスのオフセット（3mm）

以上のアクションを一つずつ実行している感じです。
複数のアクションを連続で実行出来れば良いのですが、
まとめて実行しようとするとおかしなことになります。。

このあたりもっと繊細な調整ができれば良いのですが、知識が無いので何とも言い難いところです….

どんな機能がある？

メニュー項目の中でアクションの動作の中に組み込む事が出来るものは
これまで説明してきたようにワンクリックで実行させることが出来ます。

ただ、Photoshop CS6から採用されていたらしい条件分岐が実装されてなかったり、
触った感じPhotoshopよりは機能少なめな印象です。

ただしイラレの標準メニューの中にはアクションに組み込めないものもあるので
注意が必要になります。

公式によるとアクションに組み込めない項目はパネルで確認するしか無いようですね。。
メニュー項目に付いてはアクションパネルの右上に有るメニューからアクセス出来る
「メニュー項目を挿入」である程度操作が可能になります。

ただこちらのアクションにはバッチという機能が搭載されていて、
複数のファイルにアクションが適用されるようになっているようです。

小冊子やページ物の作成など、大量に同じ処理を加えた物を
作成する必要がある場合に威力を発揮しそうですね。

こんな使い方も

ファンクションキーへのショートカット割当機能が実装されているので、
多機能マウスや多機能テンキーを使われてる方はショートカットを割り当てておくと、
作業時間がグッと短縮できると思います。

多ボタンマウスをご利用の方でアクションのショートカット割当を使用していない方は是非試してみて下さい。
その楽チンさにきっと手放せなくなると思います(๑•̀ㅂ•́)و✧

まとめ

色々と不便な点もありますが、Illustratorのアクション機能は
DTPやWebレイアウト作成の際に繰り返しそうな動作を事前に登録しておくと
より時短が可能になります。

以上、ケートミィのブログでした！

皆様こんにちは、
富田です。

この挨拶ももう一ヶ月ぶりでしょうか、
ここ最近は帰宅してずっと当ブログのリニューアルのためにサイト制作に打ち込んでいます。
12月にはお目見えするかと思いますが実装にあたって色々と新しい挑戦に取り組んでいるので難関続きです(*_*;

で、表題の件です。
今回はAdobeのデザインツールを使い始めた人向けに書いてみました。

私はよく画像加工などで同じ作業の繰り返しに遭遇するのですが、
同じ操作を何度も繰り返すのは結構な手間だったりします。
そういったときに役に立つのが今回紹介する機能だったりします。

アクションとは？

一般的に、ラクをするのはクリエイティブ業界では良くないように思われるのかもしれませんが、
同じことを何度も繰り返すのはちっとも創造的じゃないし、時間の無駄だと思います。

なので、このアクションの機能を使いこなすことでちょっとでも時短に繋げていって、それによって確保した時間をより創造的なことに使っていくのがスマートなやり方だと思うので、使えるテクニックは有効に使っていきどんどんとラクをするよう頑張っていきましょう～(๑•̀ㅂ•́)و✧

※本ページで解説する操作方法はAdobe CC 2018以降のバージョンを対象にしたものであり、
過去バージョンに関しての動作を保証するものではありません。

PhotoshopやIllustratorには一度行った操作を記録して何度も実行できる「アクション」という機能がデフォルトで搭載されています。
「ウインドウ＞アクション」タブでアクションメニューが開きます。

※写真はPhotoshopの場合。

縮小時のアイコンは再生ボタンの様な形をしています。

Photoshopのアクションについて

アクションメニューには、記録と再生という大きく分けて2つの操作方法があります。
それぞれの操作方法について大まかに説明させて貰うと…

●記録

新規アクションを作成する
↓
アクションのパレットから丸ボタン（記録ボタン）をクリックしてアクションを記録開始
↓
記録させたい操作を一通り行う。
↓
四角ボタン（停止ボタン）をクリックして記録完了！

▶再生

再生したいファイルを開いて再生ボタンを押すだけ！
フォルダ（セット）を選択して再生ボタンを押すと中に入っているアクションが上から順番に実行されます。
フォルダ下のアクションを選択して再生ボタンを押すとそのアクションだけが実行されます。

基本的に私は用途ごとに新しくアクションを作ることが多いのですが、
初期設定のアクションとしていくつか設定が割り当てられているので、
より深く知りたい方はそれらを色々と触ってみるのも新しい発見があって良いかと思われます。

本当にどうやって作ってるの？って言うプリセット等がありますから…

また、CS5以降からPhotoshopのアクションに「条件の挿入」というメニューが追加されて、よりドキュメントやレイヤーの操作について融通を効かせられるようになりました。
率直な話、私はこの機能を使いこなしているわけではありませんが（知らなかった）、プログラムのif文のようにアクションの条件付けが可能になるので今後どんどん活用したいと思いました。

こんな機能も

Photoshop,Illustratorともそれぞれ作成したアクションにファンクションキーを割り当てることが出来るので、ワンタッチで同じアクションを繰り返すことが可能になります。
これはかなり快感なので是非アクション作りに挑戦してみて下さい…！

登録したアクションは書き出して保存したり、または読み込んだり出来るので
他の方が作成したアクションを読み込むことも、保存したアクションを保存して他の方に渡すことも可能です！

引っかかったところ

このように便利なアクション機能ですが、時として意図した動作にならないときがあります。
例えば、別名で保存を使用したときなど、アクションを再生すると同じ名前で保存され続けるので、それ自体は不具合ではありませんが問題になる場合があります。
他には、選択範囲を使用したときなどどのレイヤーを選択したのかなどの情報が入り込んでしまう時があるので、こまめな調整が必要になります。

単純な操作だとそこまで難しくはないのですが、複雑な操作になると思い通りにならずハマることが多いので、自分の場合は細かいアクションに分けて手動を混ぜ込んでいったり順番に実行してたりしています(；´∀｀)

アクション機能は複雑な操作を追い求めていくとエクセルのマクロ機能のようにプログラミングの要素が絡んでくるので、奥が深いですね…

Illustratorのアクションについて

基本的には使用方法についてPhotoshopと差はないのですが、
イラレの場合は基本的にアートボード単位で管理されることが多いので
そこまで使用頻度は多くなかった印象はあります。

ただ以前紹介した「ライブラリ」やまたは「シンボル」機能と組み合わせて使用すると
色々とラクできるのではないかと思います…！

前回記事：「【Photoshop CC】スマートオブジェクトを色々調べてみた。」

タイトルにはIllustratorと銘打ってはおりますが、イラレのアクションについては正直不勉強なところがあるので、どこかでイラレのアクションについての続きは書きたいなと思います。。

まとめ

何度も同じ動作を繰り返すのはソフトに任せて、よりラクをしましょう～。

以上、ケートミィのブログでした！

スマートオブジェクトとは

スマートオブジェクトはPhotoshopCS3以降から利用できるようになったオブジェクトデータの埋め込み機能です。

一般的に、画像をPhotoshopのレイヤーの中に入れ込むと、修正などで拡大縮小を繰り返していくうちに徐々に画像の解像度が破壊されていき、荒くなっていきます。

ベクトルスマートオブジェクトは、画像を元のサイズのままファイル内に格納して、見た目だけを拡大縮小させることで画像の解像の破壊を起こさないように出来ます。

ベクトルスマートオブジェクト化したレイヤーをコピーするとコピー元のデータを参照するので、
ファイル内の一箇所を修正するとすべての箇所に修正が反映されます。

スマートオブジェクトの便利な機能

また、画像だけではなくイラレのベクターデータもスマートオブジェクトの中に入れ込むことができるので、例えばフォトショで組んだレイアウトにベクトルスマートオブジェクトで配置した文字組みなどの文言差し替えがあった場合もわざわざイラレからコピペする必要がありません。

サムネイルをダブルクリックすると自動的にIllustratorが開き、修正後は保存するだけで自動的にオブジェクトが上書きされます。

レイヤーの中にIllustratorのベクターデータをを入れ込んだり、画像データを元の大きなサイズのまま解像度を破壊せずに自由自在に拡大縮小出来るので色々なメリットが有ります。
ベクトルスマートオブジェクトはレイヤーのサムネールに書類のようなアイコンが表示されるので、すぐに分かると思います。

それだけではないスマートオブジェクトの機能

Photoshop CC以降になると、埋め込み型のベクトルスマートオブジェクトだけでは無く、ドキュメントの外部リンク機能や、Creative Cloudライブラリーを使用したオブジェクトの読み込みなどが利用できるようになりました。

・ドキュメントの外部リンク機能とは

　Photoshop CC以降には他の独立した画像データを読み込んでドキュメント内に表示させる機能があります。
　例えば外部リンク機能でリンクされたフォトショのデータを編集して上書き保存すると、リンク先のPSDデータが変わります。
　データの受け渡しをする際はリンクしたデータを渡し忘れないようにしなければ…と言った印象です。
　ファイル＞リンクを配置から画像ファイルを読み込むか、リンク画像をAlt（MacだとOption）キーを押しながらファイル内にドラッグするとリンクとして格納されます。
　
　
　

・Creative Cloudライブラリーとは
　
　Adobe Photoshop、Adobe Illustrator、Adobe Premiere、Adobe AftereffectsなどAdobe製のデスクトップアプリで素材データをやり取りできるシステムのことです。
　やり取りできるデータにはイラレのパーツデータやカラー情報、レイヤースタイルなどがあります。
　対応しているAdobe製のアプリが多いのでパーツデータのやり取りはほぼCreative Cloudライブラリー上で完結できるかもしれません。
　
　
　
　Creative Cloudライブラリから読み込まれたレイヤーには雲形のアイコンが表示されています。

まとめ

以上、スマートオブジェクトについて色々と説明してきましたが、それぞれの機能を理解して作業すると効率アップにつながると思うので、是非参考にしてみて下さい！

P.S.　Creative CloudにはGitみたいにバージョン管理する機能があるようです。
https://helpx.adobe.com/jp/creative-cloud/help/versioning-faq.html

Twitterでフォローしている方が呟いていたのですが、
クラウド面も中々強化されているようですね。
Creative Cloudライブラリについてはもう一度ブログで取り上げてみたいと思いました…

以上！ケートミィのブログでした！

皆様こんばんは
ケートミィ・メディアラボの富田です。

今回は、Illustrator CC以降に搭載されている機能
「シェイプ形成ツール」を色々いじってあれこれしてみた話をしてみたいと思います。

シェイプ形成ツールとは

Illustratorにはもともと「パスファインダー」というシェイプを一体化させたり、切り取ったりするツールがあります。

しかし、これだと切り抜けるか切り抜けないかの判別が難しかったり、事前にどのようにトリムするかの段取りが必要になるなど、若干の手間が必要でした。

そのような声があったかわかりませんが、Illustrator CC以降では「シェイプ作成ツール」という機能が搭載されています。

シェイプ形成ツールの詳細＞＞https://helpx.adobe.com/jp/illustrator/using/creating-shapes-shape-builder-tool.html

簡単に言えば重なり合ったパスを自由自在に切り抜けるツールなのですが、下の絵のように重なり合ったオブジェクトを…

このように切り抜くことが出来てしまう機能です。
切り抜きたい部分にマウスをホバーさせて、カーソルが重なってアミアミになった部分をクリックすると自動的にその部分がトリムされます。

活用してみよう！ ～ロゴ編

このツールを活用すると、下の画像のようなパーツを組み合わせて….

このようなグラフィカルなロゴが簡単に出来ちゃいます。

これは私が即興で作ったロゴなのでオシャレでは無いですが(*_*;
活用次第ではかなり表現の幅が広がるのではないかと思います…！

ただし、これはマスクと違って本当にパスをトリミングしてしまうので、トリム元になっているパスに修正が入ると厄介なことになります。
そのため、切り抜く前のパスの保管など注意が必要になります。

ただ、本当に簡単にトリムを効かせたロゴが作成出来てしまうので、即興が求められる状況では有効性を発揮するのでは無いかと思います(｀･ω･´)ゞ

以上、ケートミィのテク紹介でした！

皆様ご無沙汰しております。
富田です。

時間の流れは早いものでIllusrator CCはもうバージョン2017が出ているそうですが、
色々と不具合が怖いので最新バージョンの導入はまだまだ保留にしております。

というわけで私はまだAdobeのIllusratorCC2015を使用しているのですが、
ちょっと便利な機能を発見したので共有したいと思いますー！

「アセットの書き出し」機能について

「アセットの書き出し」とはWebサイトのデザインなどでpngやjpeg、SVGへの書き出しを
ドラッグ＆ドロップで容易に完了させられることが出来る画期的な機能です。

私が仕事で使っているIllustratorCC2015のツールボックスにはこのような項目があるのですが、
コイツをクリックするとこのような「アセットの書き出し」という名前のパネルが出てきます。

ここに書き出したいオブジェクトをそのままどんどんドラッグしてくれば
このスクショのようにアセットを溜めていくことが出来ます。

ここが便利

アセットはライブでそのオブジェクトとリンクされているので、
例えばパーツの色などを修正したときには書き出しパネルに置かれている色も変化します。

ちなみにパスファインダなどでオブジェクトを一体化させたり、
変形などを変更させるとこのようなメッセージが出てきて書き出しパネルから削除されてしまいます。

書き出し

書き出しはSVG、png、jpegが選択出来て、
大きさもｘ2、ｘ3、ｘ4などが選べるようです。
書き出しキューは「スケールを追加」ボタンで追加が出来ます。

ここから書き出し先のフォルダーを選択して書き出します。

こんな感じで超便利な「アセットの書き出し」機能ですが、
一つだけ弱点がありました。

マスクされた画像の書き出しサイズがなんか変

上の画像はこの作業画面の「アセット3」という画像をJpegで書き出したものなのですが、
謎の余白が生まれています（ブログの背景が白なので、わかりにくくてスミマセン。。）

原因はおそらく書き出し時にマスクされた部分まで書き出されてしまっていることだと思うのですが、
少し不便です。

改善を心待ちにしたいところですが（もしかしたらCC2017で改善されているかも？）
私は苦肉の策でこのようにしました。

どのように解決した？

一旦Illusratorからpngでアセット書き出ししたものを
Photoshopで開くと、このようになっていました。

レイヤー部分を右クリックでコンテキストメニューを開いて「書き出し形式」を選択します。

「書き出し形式」からやっと必要な形式に書き出せました。

まとめ

このように、トリムした画像の扱いに関してはPhotoshopを噛ませる必要があるなど多少難があるアセット書き出し機能ですが、
アイコン等のベクター画像に関してはてきめんの効果を発揮するので、是非使ってみてはいかがでしょうか～！

以上、ケートミィのブログでしたっ！