クリエイター向け

【解決】Figmaでも⌘+spaceで範囲ズームしたい!

AreaZoom for Figma アイキャッチ図版

macOS版のFigmaデスクトップアプリでは,command+space+スクロールで画面表示の拡大・縮小ができます。しかし普段からAdobeアプリを使用しているかたは,command+space+範囲ドラッグで指定位置を拡大するくせがついていることでしょう。

Figmaでも一応その操作でズームできるときもあるのですが,タイミングがずれると発動しなかったり,何か別の機能になっていたりします。不安定で頼れません。

幸いなことに,Zキーを押しながらドラッグをすると安定して範囲ズームが可能です。つまり,Karabiner-Elementsなどのアプリを使ってcommand+spaceをZキーに変換すれば,目的の動作を実現できるわけです。

そこで今回は Karabiner-Elementsを使い,Figmaデスクトップアプリでcommand+space+ドラッグの範囲ズームを使えるようにする方法 を紹介します。

続きを読む

【解決】Photoshopでテキストを分割・結合したい!

PhotoshopプラグインSplit Rows for PS アイキャッチ図版

Photoshopでは大抵レイヤースタイルを使って見た目のデザインを指定します。そのためテロップを作るときなどは,テキストを行ごとにバラしたり,デザインの変わり目でレイヤーを分けたりします。

また1文字ずつ順番に動くアニメーションを作るため,各文字ごとに分解したい状況もあるでしょう。しかし,それを手動でやろうと思うとあまりにも手間がかかります。レイヤーを複製し,関係ない部分を削除,その後位置を揃えるという動作を延々とすることになります。

分割したあとやっぱり繋げようと思っても,複数のテキストを選択してカット&ペーストでは済みません。1つずつ中身をコピーしてペースト,いらなくなったレイヤーは削除,という流れの繰り返しです。このような作業はぜひ機械に代行してもらいたいですね。

そこで今回は,テキストを行ごと/文字ごとに分割したり,区切り文字で分割・結合するPhotoshop用プラグイン,Split Rows for PS Pro を紹介します。

続きを読む

【解決】Photoshopでもテキストを行ごとに分割したい!

PhotoshopプラグインSplit Rows for PS アイキャッチ図版

Photoshopでテロップなどを作る際,1行程度のテキストレイヤーが多く必要になります。その場合テキストエディタで入力した改行区切りのテキストを,コピペして1行ずつに分割することになるでしょう。

ただこれはかなり疲弊する作業です。Photoshopではcommand(Ctrl)+Jでレイヤーの位置はそのままに複製できますが,いったい何回繰り返せばいいのか途方に暮れます。

もしIllustratorでする場合には,テキストばらしという定番スクリプトがあります。名前の通りテキストを一瞬で1行ずつにばらしてくれます。Adobe XDならプラグインSplit Rows(【解決】XDにもテキストばらしがほしい!が定番です。

Photoshopにもこんな機能があったら嬉しいですね。

そこで今回は,複数行のテキストレイヤーを1行ごとに分割するPhotoshop用プラグイン,Split Rows for PS を紹介します。

続きを読む

【解決】XDのパネルに計算式とその結果を表示したい!

XDプラグインOfuda アイキャッチ図版

Adobe XDでは,よく使うものの直接取得できない数値があります。例えばline-heightやletter-spacingなどです。インターネットを検索すると,それらの算出方法・式を紹介しているサイトがたくさんヒットします。それだけ困っているかたがいるわけですね。

この問題はExcelやGoogleスプレッドシートなどで関数を作ればある程度解決します。単純な計算ならSpotlightやAlfredに式を入力するのも良いでしょう。

しかし,毎回Adobe XDのプロパティインスペクターから数値をコピーし,別の何かにペーストするのは手間がかかります。次のような流れにできたら最高ですよね。

  1. Adobe XDの中で式を書いておく
  2. アイテムを選択したとき,自動でそのアイテムの情報を利用して式が計算される
  3. 結果がXDのプラグインパネルに表示される

そこで今回は,リアルタイムに式を計算するプロパティパネル的Adobe XD用プラグインOfuda(おふだ) を紹介します。

続きを読む

【解決】XDで線に合わせてアイテムを回転したい!

XDプラグインAdjustAngle アイキャッチ図版

Adobe XDでフローチャートや図版を作る際,斜めに傾いているアイテム同士の角度を合わせるのに苦労します。というのも,Adobe XDでは回転軸が常に中心になり,回転しながらアンカーポイントや見た目をスナップできないからです。アイテムを近くに寄せ,目視で傾きを確認しながら何となく回転させることになります。

しかしこういった角度は,少しの違いが目立つものです。せっかくデジタルなのだから,数値で角度を取得して正確に一致させたくなりますね。

そこで今回は,直線の角度に合わせてアイテムを回転するAdobe XD用プラグイン AdjustAngle を紹介します。

続きを読む

【解決】リアルファブリック用画像書き出しを一気に済ませたい!

Fabricantアプリ アイキャッチ図版

リアルファブリックは,オリジナルの布をデザインしたり販売したりできるサービスです。パターンデザインをIllustratorで制作しているかたも多いでしょう。

過去の記事「アートボードとパターンのタイルをフィットさせるリアルファブリック用 Illustrator スクリプト」により,Illustratorのパターンデザインをアートボードに揃える工程が素早く正確になりました。しかし,最も面倒なのは画像書き出しです。

リアルファブリックのデザイン登録には,次の2種類の画像がいります。

  1. デザイン提出用画像(以降,デザイン用画像と呼ぶ)
  2. サムネイル用画像(希望者のみ。なくても可)

デザイン用画像の決まりはこちらのようになっています。

形式:JPEG

カラーモード:RGB

解像度:200ppi

サムネイル用画像は特に指定がありませんが,常識的に考えるとこんなところでしょう。

形式:JPEG

カラーモード:RGB

解像度:72ppi

もうこの時点で大変そうですね。Illustratorファイルの中にデザイン用とサムネイル用アートボードが混在する場合,それぞれ解像度を変えて書き出す必要があります。

さらに言えば,デザイン用画像の解像度200ppiがくせ者です。Illustratorで普通に書き出すだけだと,パターンの継ぎ目に白い隙間ができてしまうことが多いのです。

そのため一旦隙間が出にくい解像度で書き出し,規定通りに200ppiに変更,その後Photoshopでパターンに登録して目視確認する,といった複雑な手順を辿ることになります。

つまり,リアルファブリックの決まりに基づいた形式・解像度で,白い隙間ができないよう画像を書き出し,実際隙間ができるか確認するための画像も追加で生成しなければいけません。

今回紹介するのはまさにそのためのPhotoshop & Illustrator用スクリプト, Fabricant(ファブリカント) です。

続きを読む

【解決】XDでメモをアートボードと一緒に移動したい!

XDプラグインKizuna アイキャッチ図版

Adobe XDでデザインを共有するとき,エンジニアやコーダーにメモを残したいことがあります。例えば,データを見ただけでは判断しにくいデザイナーの意図を言葉や絵で補完するときなどです。

メモ書きにはAdobe XDの共有機能/コメントを利用するなどさまざまな実現方法があります。対象アートボード付近のペーストボードに,テキストや画像を置くのもわかりやすくて良いでしょう。特に操作しなくても,書類を開けば目に入るのは大きな利点です。

しかしこの方法では,アートボードを動かしてもメモ用アイテムは一緒についてきません。毎回自力でちまちまアイテムを選択して近くに寄せることになります。せっかくの軽量高速アプリが泣きますね。

そこで今回は,ペーストボード上に置いたアイテムとアートボードを関連付け,一緒に動かせるようにするAdobe XD用プラグイン Kizuna を紹介します。

続きを読む

【解決】ファイルを書き出す前に画像のリンク切れを確認したい!

ファイルを書き出す前に画像のリンク切れを確認したい! アイキャッチ図版

Illustrator 2022(v26)からリンク画像の扱いが変わりました。それ以前のバージョンではリンク先が行方不明な画像は何も表示されませんでしたが,2022(v26)では低解像度サムネイルが必ず付きます(Illustrator 2020方式で保存した場合。参考:Illustrator2020形式ファイルフォーマットとは | Automation Skill)。

PDFなどを書き出した際は,低解像度サムネイルが見えている状態になります。リンク画像がなくても何があるかわかるようになりました。親切です。

しかしこの仕様はリンク切れを気づきにくくしてしまいました。低解像度でもまあまあ綺麗なので,異常を見逃すのです。

もし保存や書き出しの際にリンク切れを警告してくれたら,ミスを防げそうですね。ただIllustratorでは,保存や書き出しの動作を感知して警告を入れるのは難しいようです。

そこで今回は,Illustratorで画像のリンク切れを確認したあと,特定のメニューを実行するスクリプトを紹介します。

別名で保存や書き出しなど,通常のキーボードショートカットをこのスクリプトで置き換えると,特定のメニュー実行前にリンク切れ確認処理が入るという作戦です。

残念ながら手動でメニューを選んだときは発動しません。それで十分役に立つと思うかたのみご利用ください。

続きを読む

【履歴】infoVector 1.4.0

infoVector 1.4.0 アイキャッチ図版

アートボードに置いた特定の形式のテキストを,日本語/英語でXMP(IPTC)メタデータに書き込み,ai・eps・jpg・pngファイルとして書き出すIllustrator用ドロップレットinfoVector 1.4.0のページです。2.0.0で仕様が変わったため,旧バージョンの情報を残しておきます。

続きを読む

【解決】元データを消さずいつもの設定でPDFを書き出したい!

PDF複製書き出しスクリプト アイキャッチ図版

IllustratorファイルのPDF書き出しに[別名で保存]を使用すると,作業中の書類はPDFに変わります。元データがai/epsファイルでもPDFです。

もし書き出しオプションで[Illustrator の編集機能を保持]をOFFにしていた場合,書類を閉じた瞬間に編集可能な元データは消え去ります。大変なことですね。

そんな悲劇を避けるため,次の策が推奨されています。

  • [複製を保存]を利用する
  • [別名で保存]でPDFを書き出したあと書類を閉じるアクションを利用する

ただこれらは,ファイル名の「のコピー」を毎回削除する必要がある,使用しているIllustratorすべてのバージョンにアクションを設定しておかなければいけない,などいった理由でなかなか自分に定着しません。正しいけど面倒臭いことはすぐやらなくなるのが人間というものです。

そこで今回は,開いている書類と同じフォルダ・名前で,プリセット名を指定してPDFを複製書き出しするIllustratorスクリプトを紹介します。

続きを読む

【解決】ストックイラストのタグ付けと画像書き出しを一気に済ませたい!

infoVector アイキャッチ図版

ストックイラストのタグ付けが面倒というのは,制作者なら共通の悩みでしょう。アップロードするサイトが少なければコピー&ペーストでも何とかなりますが,増やすとその分負担も重くなってしまいます。

チャンスを広げるためには何とか販売先を多くしたいものです。

解決策として,ファイルへのメタデータ情報埋め込みが普及しています。IPTC情報やXMPメタデータなど呼び名はさまざまですが,する内容は同じです。Adobe Bridgeを利用して説明やタグの情報をファイルに入力すると,ストックイラストサイトのアップローダーがそれを自動で読む流れです。

しかしこの方法だと,次のような問題がありました。

  • 英語タグにするサイトと日本語タグにするサイトがあり,対応している画像の種類もまちまちで,大量の画像それぞれに情報を埋め込まなくてはいけない
  • PIXTAとpngの組み合わせだと説明(コメント)を正しく認識しない
  • iStock(DeepMeta),123RFが情報を何も認識しない
  • 日本語情報を埋め込むと,Adobe StockとPIXTAで文字化けする

Illustratorで数種類の画像を自動で書き出し,同時に適切な情報をメタデータに埋め込んで,さらに各社アップローダーがそれを正しく認識してくれたらありがたいですよね。

今回紹介するのはまさにそのためのIllustratorスクリプト,infoVector(インフォベクター)です。

続きを読む

【まとめ】XDプラグインCommono 地味な自動化詰め合わせ

XD一般的操作自動化プラグイン アイキャッチ図版

Adobe XDについて,次のような願いを見かけました。

  • テキストを中央揃えにする,塗りをOFFにするといった地味な操作をショートカットにしたい
  • パスの方向を反転したい
  • コンポーネントを解除したとき中身がバラバラになってしまうが,グループに入った状態にしたい

これらは一般的な操作なので,プラグイン制作により比較的簡単に実現できます。しかしAdobe XD用のプラグインを公開するには,プログラムを書くだけでなくアイコンをデザインしたりイメージ画像を作ったり,何かと手間がかかります。個々にリリースするのは大変すぎるのです。

そこで今回は,行揃えの変更など,一般的で地味な操作の自動化を寄せ集めた1つのAdobe XD用プラグインにしました。それが今回紹介するCommonoです。

続きを読む

【解決】XDでも線幅と効果を拡大・縮小したい!

XD線幅・効果拡大プラグイン アイキャッチ図版

Adobe XDでは,パスや四角形などのシェイプを拡大・縮小するとき,もとの線の太さを変えずに維持します。角丸の半径やシャドウ(内側)/ドロップシャドウの距離・ぼかしの数値も同様です。そのため,SVGアイコンなどベクター素材をリサイズすると見た目が変わってしまいます。

グラフィック操作はIllustrator,プロトタイピングはAdobe XDと分担するのが基本的な使いかたでしょう。IllustratorでグラフィックをCCライブラリに登録し,Adobe XDで[リンクを配置]すれば線幅・効果は比率に応じて変更してくれます。

しかし実際のところ,Adobe XDとIllustratorを行ったり来たりするのは面倒です。また,すでにXDのオブジェクトになっているものをCCライブラリに登録しても,線幅が変わらない形式になります。やはりXDで直接できたら嬉しいですね。

そこで今回は,選択アイテムのサイズと線幅・効果を,拡大率を指定して拡大・縮小するAdobe XD用プラグインTransformSessionを紹介します。

続きを読む

【解決】オートフィル感覚でアイテムを複製移動したい!

オートフィル風複製移動 アイキャッチ図版

以前の記事【解決】Illustratorにもオートフィルがほしい!により,選択した2つのテキストフレームの距離でアイテムを複製移動し,数値をオートフィルできるようになりました。

スクリプト実行にショートカットを割り振れば,ショートカットを連打するだけで一定間隔での複製と数値の打ち替えができます。便利ですね。

しかし作業をしていると「パスとかグループとか一定間隔で複製移動だけしてくれないか? 数値はオートフィルしなくていいから」と思うことがあります。リピートグリッドがあれば解決しそうですが,連打でできる爽快感も良いものです。

そこで今回は,選択した2つのアイテムの距離でアイテムを複製移動するIllustratorスクリプトを紹介します。

続きを読む

【解決】スウォッチのグローバルを一気にオフにしたい!

グローバルスウォッチOFF アイキャッチ図版

Illustratorでは,塗りや線に色のついたアイテムを選択し[使用したカラーを追加]を実行すると,色を一気にスウォッチに登録できます。

この方法で追加したスウォッチはグローバルカラーです。アイテムに色を適用した後一括で変更しやすく,書籍の章テーマカラーなどで重宝します。ただ,そのような特別な意味を持たせない単なる色の場合は,グローバルをオフにしたくなるでしょう。

通常の手順の場合,対象のスウォッチのオプションを開き,グローバルのチェックを外す動作を延々と繰り返すことになります。指が痛くなってしまいますね。

そこで今回は,スウォッチパネルで選択しているカラーのグローバルを一括でオフにするIllustratorスクリプトを紹介します。

続きを読む

【解決】原寸でコンタクトシートを作りたい!

InDesignで自動原寸コンタクトシート生成 アイキャッチ図版

イラストや図版を制作していると,しばしば作った画像の名前とプレビューの一覧(コンタクトシート)が必要になります。おもに自分で出来を確認する,依頼者に校正してもらうなどの目的で紙やPDFを用意することが多いでしょう。

コンタクトシートの生成は次の方法が普及しています。

  • Adobe Bridgeの[書き出しパネル(出力)]
  • InDesignの[ImageCatalog.jsx]
  • Photoshopの[コンタクトシート II]

これはこれで便利なのですが,問題は画像を 縦列4 × 横行5 のようなサイズに強制的に割り付ける仕様です。受注制作の場合は,100%で配置したときもっとも効果を発揮するよう意図して作ります。なので,品質を確認するときは原寸であってほしいわけです。

一般的なコンタクトシート(Bridgeより)
一般的なコンタクトシート(Bridgeより)

ImageCatalog.jsxなら,このような流れで解決できます。

  1. ImageCatalog.jsxでコンタクトシートを作る
  2. できたInDesign書類の配置画像を原寸に戻し,等間隔に分布などで間隔を調整する

ただ,行からはみ出したら次の行に送る,ページからはみ出したら次のページを作って送る,という作業を自力でやるのはあまりにも面倒です。そういったいかにも機械が得意な作業は機械にやってもらいましょう。

そこで今回はFinder/Explorer/Bridgeで選択している複数の画像を,指定した倍率でInDesignドキュメントに配置し,きれいに並べるスクリプトを紹介します。

続きを読む

【解決】整列・分布を全部ショートカットで操りたい! (Saligna 1.2)

Saligna整列・分布パネル配置図

以前の記事【解決】整列・分布を全部ショートカットで操りたい!によって,[選択範囲に整列][アートボードに整列]など基準の変更も含めたIllustratorの整列機能がキーボードショートカットで操れるようになりました。

簡単におさらいすると,整列スクリプトSalignaは次のような特徴を持っています。

  • 整列・分布の実行や整列基準の変更をスクリプトで発動できる→ショートカットを割り振れる
  • 横書きポイントテキストの下の空白や,行末のトラッキングを無視し見た目で整列できる
  • 天地左右中央に整列など,2回整列が必要な動作を1回で実行できる

最初のリリースはCS6をメインターゲットにしていましたが,CC2015あたりの仕様変更によりうまく動かなくなった機能があります。今度はおもにCC2018以降を対象に更新しました。

バグ修正や仕様変更など色々ありますが,代表的な変化はこちらです。

  • 安定性の向上(Illustratorの進化,キーオブジェクト取得プラグインOnegaiSDKの採用などによる)
  • グラフオブジェクトの整列・分布に対応(要OnegaiSDK)
  • アイテム単一選択の場合,アートボードに整列
  • キーオブジェクトを無視できるモードを追加(Illustrator 24.2.0の自動キーオブジェクト設定対策)
  • Karabiner-Elements を利用したおすすめショートカット設定つき(macOS専用)

それではmacOS用にインストール方法などを解説していきます。

続きを読む

【解決】既存の黄色レイヤーの色を変更したい!

既存の黄色レイヤーの色を置換 アイキャッチ図版

以前の記事【解決】レイヤー作成のとき黄色レイヤーを禁止したい!によって黄色レイヤーとの戦いは終息に向かい,人々は平和な日々を過ごしていました。

ところがその穏やかな時間は長くは続かず,またしても黄色レイヤーが侵攻を始めます。Illustrator CC 2018からレイヤーの色設定が変わり,旧バージョンのレイヤー 7(シアン)が黄色に化けるようになったのです。

今までは量が少なくさほど苦労しませんでしたが,CS6など旧バージョンからの改訂のたびに黄色レイヤーは現れ,人類を損耗していきます。

そこで開発されたのが,書類上のすべての黄色レイヤー(サブレイヤー)を別の色に置き換えるIllustratorスクリプトです。

続きを読む

【解決】XDで文字の上下にある余白を削除したい!

XDテキスト余白を削除 アイキャッチ図版

「Adobe XDでフォントの余白分の高さを削除してくれるプラグインはないの?」というコメントを見かけました。確かにフォントによっては文字の上下が大きく空いていて,数値上のマージンと見た目のマージンに差が出ます。空きが実際どれくらいなのかわかりにくいですね。

ただテキストのパネルを見ても,Wordのようなトリミングくい込み設定などはなさそうです。

そこで今回は,選択しているテキストを,文字のアウトラインサイズの四角でマスクするAdobe XD用プラグイン「MaskText」を紹介します。

続きを読む