Home > デザイン > Illustratorでアセット書き出しした際に、マスクした部分が残ってしまったpngデータの空白を自動処理で削除する方法

Illustratorでアセット書き出しした際に、マスクした部分が残ってしまったpngデータの空白を自動処理で削除する方法

maskillustrator.jpg

Illustratorでパーツをpng形式で「アセット書き出し」をする時に、マスクした部分まで透過でついてきてしまう問題を解決するための方法です。
この方法では、イラレから書き出したものだけでなく、pngの透過部分を一括で削除したい場合にも使えます。

イラストレーターCCでの「アセット書き出し」で付いてくる透過部分の処理をどうするか

↑クリッピングマスクした画像を「右クリック>書き出し用に追加」すると、クリッピングマスクした時にマスク範囲ごと書き出されてしまう。
イラストレーター側では、通常通りアセットの書き出しを行う

イラレの中では、透過部分のことは考えず、好きなサイズでpng形式にしてアセットの書き出しを行います。
Photoshopで透過部分の削除を一括処理

Photoshopの「透過部分のトリミング」を一括処理用にアクション化します。
基本的な処理はこんな感じ
  • 1.「メニュー>イメージ>トリミング」を選択
  • 2.「トリミング対象カラー」で「透明ピクセル」を選択
  • 3.「OK」をクリック

基本処理を繰り返すためにアクションに登録

「アクション」パネルで「●(記録開始)」ボタンをクリックして、Photoshop上で実際に基本処理を操作して記録します。
「ファイル>自動処理>バッチ…」で自動処理する

こんな感じで設定して、フォルダーを選択してバッチ処理を開始します。

「ファイル>すべて閉じる」でファイルを閉じる

複数ファイルを処理するので、いっぱいファイルが開きますので、「すべて閉じる」するのがいいかも。「閉じる」アクション追加したらいいんですけど、うちのMacだとこの方法が一番安定したのでこの設定で行っています。
自分の環境で安心して動く、いい感じの設定を探して下さい。


コーディング用データだったので、大量に自動処理する必要があり、まとめてみました。
ベクターデータを書き出す時はあんまりこんなことないんですけど、jpgとか入っているとまだイラレはコーディング素材化するのに1アクション〜必要ですね。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/204-71341ca3
Listed below are links to weblogs that reference
Illustratorでアセット書き出しした際に、マスクした部分が残ってしまったpngデータの空白を自動処理で削除する方法 from バニデザノート

Home > デザイン > Illustratorでアセット書き出しした際に、マスクした部分が残ってしまったpngデータの空白を自動処理で削除する方法

Sponsored Link
【WebDesign】Photoshopでプロになる!オシャレ&クールなWebデザイン作成講座
▲Udemy講座第二弾!Photoshopデザインカンプ作成の流れをレクチャーします。クーポンコード【PS_BANIDESIGN】
はじめよう!Wordpressで作るおしゃれサイト【デザイン入門】
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、お得な価格で受講可能!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。10年以上に渡りオールラウンドウェブクリエイターとして活動した経験を活かして高品質なPhotoshopデータでの「デザインカンプ作成」のお仕事を主に行っています。業務提携いただける企業さま、ウェブディレクターさまを随時募集中です。Wordpress(ワードプレス)、レスポンシブ、スマホ用サイトもできます♪
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items