2019.04.28AdobeCCjsxPhotoshopこの記事は約8分で読めます。タイトルみて、なんのこっちゃな感じですね。短い文字数で表現むりでした。何のことかというとフォトショップの“スクリプト(jsx)”の話題です。便利だと思うので、最後まで読んでみて使ってみてください。好きな組み合わせで選んだフォーマットにリネームして保存をしてくれるというものです。“縦横64pxのアイコン”をpsdで作ったとします。アイコンは種類は沢山。“くるま”のアイコン、“ねこ”のアイコン、”電車”のアイコン、”おにぎり”のアイコン。アイコンの背景も種類があります。“乗り物用の背景は丸くて青色”、“生き物用の背景は三角形で赤色”、“食べ物用の背景は正方形で黄色”。食べ物は強いので(!?)レアなアイコンには“星のマーク”がついちゃいます。そんなアイコンを作るときどうしますか?アイコンの名前も全部違うし背景やイラストも違うから、アイコンごとにpsdで用意します?でも乗り物の背景は共通で同じもののようだし、アイコンの数だけpsdを用意してたら修正のとき大変そう......。上の例だと、今回はアイコンが4つと少ないので、まぁ別々にpsd用意してもそこまで手間じゃなさそうですけどね(笑)数が多かったりするとそうも言ってられなかったり、フォーマットを変えて“png”や“jpg”に保存しなおしたりだと結構手間であったりしますよね。いうときに使います作業データの“psd”はできれば少ないほうがいい!共通素材は使いまわしたい!“フォーマット”変えるための別名保存を毎回やるのは面倒!どう使うの?使うためには幾つか条件があったりします。構造上の条件や命名規則、あと保存時に必要な“CSVデータ”も準備しないといけません。一度作ってしまえば、作業が自動化されるので全体で見るとすごく楽できると思います。あと、一つ一つ人間が作業するよりも実際には早く終わることが多いと思います。構造の条件や命名規則まずはpsdデータのレイヤー構造の条件は以下のとおり。保存するデータは必ず“グループレイヤー(レイヤーセット)”の中に入れて最前面へ配置してください。そのグループレイヤーの子として各素材を“グループレイヤー”で分け並列に配置してください。共通で使う素材の名称の先頭に“cmn_”を記載してください。保存時の名称は元のpsdの名称の末尾に“_*(*はグループレイヤー名)”を追加してリネーム保存されます。現在はカラーモードはRGBのみ対応してます。最前面(レイヤー構造の一番上)に配置された“グループレイヤー”が吐き出されます。逆に言えば、最前面以外の“グループレイヤー”以外には保存時に表示したくないものを配置しておく(作業時のみに表示したいもの)を置いておく事なんかも出来ます。作業のみに表示したいものとは?作業用の背景や、下書きなんかを置いておくと便利かもしれません。子として中に入れます。共通素材の各種“背景”や“星のマーク”などごとに分類し並列に配置します。これらを“スクリプト(jsx)”で、任意に表示/非表示を自動でおこない必要な素材を選別しています。共通で使う素材には名称を“グループレイヤー(レイヤーセット)”の名称の先頭に“cmn_”を入れます。上記の例での“乗り物用の背景”だと『cmn_乗り物背景』などの名称になります。サイズを変更したい素材の条件(特殊機能)おまけの特殊な機能ですが、各素材に保存するときにサイズを変更することも出来ます。変更したいサイズの“レイヤーマスク”を準備してください。矩形で白くマスク(表示部分)にしたサイズにトリミングされます。この場合元のサイズより大きいものにはサイズの変更できません。共通の素材内に配置してもサイズ変更されません。先頭にこの文言があればそれ以外は自由です。上記の条件がふたつ揃わないと、リサイズはされません。元のpsdの名称の末尾に“_*(*はグループレイヤー名)”を追加してリネーム保存されます。“くるま”の素材は『icon_くるま.jpg』“ねこ”の素材は『icon_ねこ.png』の様な感じになります。現状はカラーモードRGBのみですが、そのうち変更しようかと。気にしなくて大丈夫かも??吐き出し用のCSVデータ保存するにはどのデータがどの素材が必要かを選別するための“CSVデータ”が必要となり、これを元に保存データが作られます。“)区切った(Separated)値(Value)が記載してあるCSV形式で保存されたデータファイルです。アプリケーション間でデータをやり取りする際などに使い、メモ帳などのテキストエディタやExcelなどの表計算ソフトでも作成することが出来ます。CSVデータを簡単に作れるxlsm(マクロ付)のデータも準備してありますので、そちらを使用していただくと簡単にCSVデータが制作できます。CSVデータ製作用xlsmの使い方xlsmをExcelで開きます。このときマクロを有効にしてください。この名称で保存されます。同名対応はしていないので、同名がある場合は最終的には下のものが吐き出されるはずです。名称を記載してください。“cmn_”を忘れずに、ほしい(必要な)分だけ、ひとつの列にはひとつの名称を。ダウンロードとちょい説明メインのjsxのほかに、汎用的なメソッドが詰め込んであるjsx『Lib_generalMethod.jsx』も必要となります。下のボタンにより必要なjsxおよびxlmsも含めダウンロードできます。使用するには「Run_saveSelectLayer.jsx」を起動してください。-Adobeの方-ここでのjsx(スクリプト)は、AdobeのExtendScriptのことについて書いています。作り方から使い方を簡単に説明しております。BOOTHPhotoshop用のjsx(スクリプト)データとなります。任意のフォーマットにリネームして保存します。UI(2D)デザイナーさん必須の超便利ツールです。aomids.booth.pm追加機能の詳細はこちらpsdを自動で必要な素材(レイヤー)を選んで保存を改良したヨ読んで字のごとし、以前作ったScriptを改良してちょいと便利にしてみました。簡単にPSDのファイルからレイヤーセットごとに分割して保存してくれる一品です。共通素材として一緒に保存されるデータも内包できますよ。CSVを使用すればさらに複雑な保存もかのうになります。gifに対応しております。フォーマットのプロパティなどは現状固定にしてます。スクリプト内を書き換えることで変更はできますが、デフォルトではフォトショップの初期設定に近い状態にしております。「web用」が付いている方が若干サイズが軽めになります。追加説明:Run_BuildAndSave.xlsmCSVデータ制作用「Run_BuildAndSave.xlsm」です。こちらはデータを製作し保存すると、同時に「data_BOMutf8.csv」という“CSVデータ”ファイルを吐き出します。これをスクリプト起動時に選んで読み込ませてください。動画に自動でテロップ(字幕)を付けるDesktopアプリです。テロップの文言はcsvで用意して素早く動画にテロップを付けることが出来ます。テロップはフォントのサイズや表示位置、フォントの色や透明度、境界線の幅と色および透明度を設定することが出来ます。実はwebアプリ版もあります。汎用的に作り直してみました。ついでにサイズ変更機能も追加で。使い方次第では結構便利にデータの自動保存に使えると思います。解説等は気が向けば......。例でもあげたように、アイコンやサムネイルだったり、昨今のソーシャル系ゲームなどでもガチャ系のアイテムやキャラクターカードのレアリティなどのように共通の装飾がされている画像データなどのように、とりあえず似たいようなデータで数も多数あり、バリエーションも多いなんて素材を結構作っては保存を繰り返す作業などが多いものです。いうときにはこういう自動化のツールで作業の圧縮を実現して時間短縮してしまいましょう。改良して機能を追加しました、詳しくは下記をチェックちなみにダウンロードボタンは同じものがダウンロードされます。追加機能の詳細はこちらpsdを自動で必要な素材(レイヤー)を選んで保存を改良したヨ読んで字のごとし、以前作ったScriptを改良してちょいと便利にしてみました。簡単にPSDのファイルからレイヤーセットごとに分割して保存してくれる一品です。共通素材として一緒に保存されるデータも内包できますよ。CSVを使用すればさらに複雑な保存もかのうになります。panel“porter”aokitあおみデザインスタジオ代表20年以上に亘りゲーム・アミューズメント業界で2Dグラフィッカー・UI/UXデザイナーとして活動してきたが、2018年7月独立しフリーランスとなる。東京都在住の4人家族。2人の子供たちと遊ぶのが本当のお仕事。初心者に向けPhotoshopのTipsや小技を紹介する第3弾。今回はPhotoshopの小ネタ操作4種類紹介しています。ゲームを作るうえでデザイナーがちょっと得する(?)小ネタ的操作や特殊な使い方で効果を発揮するものを集めてみました。使わない人はたぶん使わないけど使うとちょっと得するテクニックです。“Conductor”の紹介。ボタンを押すことで上辺、下辺はもちろん。左辺、右辺に垂直・水平の中央にガイドを引くことができます。すべてのガイドを一瞬で削除することもでき、選択範囲がある場合はその範囲にガイドを引くこともできます。2018.10.09AdobeCCAdobeCCフォトショップとわたしと時々イラレちょいと息抜き駄文:Photoshopとわたしの出会いとその後をなんとなく、ほんとなんとなく書いたおはなし。Photoshopを長く使ってるといろいろあるものであるよ。初心者に向けPhotoshopのTipsや小技を紹介する第4弾。今回はPhotoshopの小ネタ操作5種類紹介しています。レイヤー系の操作やちょっと変わったところだとスポイトツールの意外な使い方など、Vol.3に続いてゲームを作るうえでデザイナーがちょっと得する(?)小ネタ的操作を集めています。使用して快適な作業を遂行してくださいネ。jsxのオマケ付き以前作った絵コンテ用紙テンプレートを(自分が)使いやすいようにちょっと改良して更新してみたのです。ダウンロードできます。あとはちょっとした整列用のスクリプトも用意したのでこちらも使いたい人は使うとよいよ。EffectsでアニメーションGIFはつくれる?Photoshopのタイムラインを使用してのアニメーションGIFを作る際に、いかんせん“タイムライン”が使いにくく、そのわずらわしさと言ったらストレスがたまるドンドンたまる。Effectsで作ってみてはどうかというお話。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。WordPressホームAdobeCCPhotoshopを自動で必要な素材(レイヤー)を選んで保存してくれるヤツぅスポンサーリンク――Writer――aokitあおみデザインスタジオ代表20年以上に亘りゲーム・アミューズメント業界で2Dグラフィッカー・UI/UXデザイナーとして活動してきたが、2018年7月独立しフリーランスとなる。東京都在住の4人家族。2人の子供たちと遊ぶのが本当のお仕事。defined.")}))})();。