WEB用のIllustratorの設定はこのようにするといいでしょう
>【環境設定】>【単位】ですべて『ピクセル』に設定
>【環境設定】>【一般】でキー入力を『1px』に設定
>【環境設定】>【ガイド・グリッド】でグリッドを『10px』分割数を『10』に設定
>【カラーモード】を「RGB」に設定
>【新規オブジェクトをピクセルグリッドに整合】のチェックを外す
>『変形パネル』内で、[ピクセルグリッドに整合]にチェックを入れる
>『アピアランスパネル』の設定の「新規アートに基本アピアランスを適用」のチェックを外す
>『線パネル』の設定の「線の位置」を「線を内側に揃える」に変更する
>『整列パネル』の設定の「プレビュー境界を使用」にチェックをつける
>【表示】>【ピクセルプレビュー】にチェックを入れる。(ドラッグした時にXY座標が必ず整数値になります)
>『変形パネル』の「ピクセルグリッドに整合」のチェックを外す
Illustratorからretinaディスプレイ用の画像をスライスするには
こちらからインストールします → 素早く画像書き出しできるillustrator向けスクリプト
画像を選択して
【ファイル】>【スクリプト】>【quick-exporter】を選択する
だけです、レイヤー名がファイル名になります。
とても簡単ですのでオススメです。
http://3fl.jp/nis006
おおまかな手順は以下のとおりです。
・レイヤー『//artboards』にアートボードサイズの矩形を複数配置
↓
・全ての矩形を選択して、スクリプト【Rebuild Artboards】を実行し、アートボードを一気に作成
↓
・スクリプト【Export Artboards by Dialog】で全アートボードの画像を書き出し
Illustrator_script_message_off.jsx (ファイル名は何でもokです)
app.preferences.setBooleanPreference("ShowExternalJSXWarning",false);
このファイルをイラストレーターにドロップして実行するだけで次回からアラートが消えます。
https://github.com/webmproject/WebPShop
https://github.com/webmproject/WebPShop
ターミナルからこちらのコマンドを実行します。
sudo xattr -r -d com.apple.quarantine /Applications/Adobe\ Photoshop\ 2020/Plug-ins/WebPShop.plugin
//@include 'myfile.jsx';
#include 'myfile.jsx';
IllustratorのJavaScriptでドロップダウンリストのダイアログを表示させフォーカスを当てるには
次のようなスクリプトを実行します。
選択して OK ボタンを押すと、選択した項目のインデックス( 0 始まり 1,2,3 ...)が取得できます。
// ダイアログ表示
var global_dlg;
function show_dialog() {
zahyoList = ['項目A','項目B']
global_dlg = new Window ('dialog', '基準点を選択', [100,100,330,220]);
global_dlg.DrpDnLst = global_dlg.add ('dropdownlist', [30,25,210,40], zahyoList);
global_dlg.DrpDnLst.selection = 0;
global_dlg.DrpDnLst.active = true; // フォーカスを当てる
global_dlg.cancelBtn = global_dlg.add('button', [30,70,110,95], 'cancel', {name:'cancel'});
global_dlg.submitBtn = global_dlg.add('button', [120,70,200,95], 'OK', {name:'ok'});
global_dlg.submitBtn.onClick = function (){getFont()};
global_dlg.show();
}
// ダイアログ選択後のファンクション
function getFont(){
var sel = global_dlg.DrpDnLst.selection.index;
global_dlg.close();
alert(sel);
// alert(global_dlg.DrpDnLst.selection);
}
show_dialog();
photoshopで複数行のテキストレイヤーを改行ごとに別々のレイヤーにばらすスクリプト
↓ こちらからダウンロードして /Applications/Adobe Photoshop CC XXXX/Presets/Scripts にコピーします
複数行のテキストを1行づつ分割するPhotoshopスクリプト | Cubix
こちらのスクリプト Mac の PhotoshopCC では以下を書き換えると動作します
11行目
if ($.os.indexOf('Mac') >= 0) {
var BR = String.fromCharCode(10);
↓
if ($.os.indexOf('Mac') >= 0) {
var BR = String.fromCharCode(13);
最近のイラストレーターではそのままCSSを吐き出す機能が備わっていますが
まだまだ実用に耐えるものではありません
こちらのスクリプトを利用すると良いでしょう。
http://www.adg7.com/takenote_b/2012/01/30texttab.html
http://efficiencydesign.info/category/illustrator/script/
https://github.com/gm-yoshi/illustrator-javascript
http://kross-design.blogspot.jp/2014/08/illustratorwundescom.html
Photoshopの整列・分布パネル
http://graphicartsunit.tumblr.com/post/131547070064/pathfinder-aligndistribute
(旧バージョン 手動での)インストール方法
1. アプリケーション > Adobe Photoshop CC 2015 > Plug-ins に移動
2. フォルダ「Panels」を作成。(すでにある場合はスキップ)
3. 上記サイトからダウンロード、解凍したフォルダ「align_dark_cc」をコピー
4. Photoshopを再起動する
Google Fontsは基本的にはCSSを指定してWEBページで使用しますが、 レイアウトするために、IllustratorやPhotoshopで使用したい時があります。 その時は
https://github.com/google/fonts/
ここから全フォントを一括ダウンロードして、使いたいフォントを選んでインストールするといいでしょう。
http://www.fonts.com/ja/web-fonts/google SkyFontsを使うと5台までフォントのインストール環境を共有できます。
■ Hot Door - MultiPage - Overview
https://www.hotdoor.com/multipage
は最新のIllustratorに対応していません。
そこでIllustratorのJavaScriptを利用して似たような機能(ページ切り替え)を
実現します。
「change_layer_down.jsx」「change_layer_up.jsx」をコピー
おすすめは
【コマンド】+【オプション】+【b】にchange_layer_down.jsx
【コマンド】+【オプション】+【n】にchange_layer_up.jsx
http://tama-san.com/spai/
【ScriptKeyAi】を使うとIllustatorのスクリプトにショートカットを割り当てることができます。
作業効率アップ間違いなしなのでぜひ導入しましょう。
(以前は ScriptKeyAi という名前でした。)
ロゴを制作するときなど、任意のテキストを全てのフォントで見てみたい時があります。 そんな時にこのIllustrator用JavaScriptが便利です
https://pgmemo.tokyo/data/filedir/788_2.zip
// fontsample.js Version 1.00
font_size = 30;
type_text = '';
type_text = prompt("テキストを入力してください。そのままリターンを押すと自動で設定されます。","");
// システムにインストールされているフォント全てを走査
for (i=0; i<app.textFonts.length; i++){
installed_font_name = app.textFonts[i].name;
txt = '';
if (type_text!=''){
txt = type_text;
}
else{
txt = installed_font_name;
}
textObj = activeDocument.textFrames.add();
textObj.contents = txt;
textObj.translate(0,i*font_size);
text_fonts_obj = app.textFonts.getByName(installed_font_name);
frames = app.activeDocument.textFrames;
j = frames.length-1;
frames[0].textRange.characterAttributes.textFont = text_fonts_obj;
frames[0].textRange.characterAttributes.size = font_size;
}
【アプリケーション】>【Adobe Illustrator CS4】>【プリセット】>【ja_JP】>【スクリプト】に「fontsample.jsx」
を置いて、イラストレーターを再起動します (Windowsも同様のフォルダに置きます)
メニューの
『ファイル』>『スクリプト』>『fontsample』
から起動します。 起動すると作成したい文字を聞かれますので入力します。 (そのままEnterを押すと、フォント名で作成されます。) 入力すると一覧が作成されます。
わざわざスクリプトを実行するのが面倒な方はこちら https://www.fontshare.com/
// 1. 現在選択されているテキストがあるかどうかを判別する
selectedObj = activeDocument.selection;
if( selectedObj.length == 0 ){
alert("選択されているテキストはありません");
}
// 2. 全てのテキストを走査し、textFontプロパティを表示する
frames = app.activeDocument.textFrames;
for(i=0; i < frames.length; i++){
family = frames[i].textRange.characterAttributes.textFont.family;
style = frames[i].textRange.characterAttributes.textFont.style;
f_name = frames[i].textRange.characterAttributes.textFont.name;
size = frames[i].textRange.characterAttributes.size;
typename = frames[i].textRange.characterAttributes.typename;
t_contents = frames[i].textRange.contents;
alert("textFontプロパティ\n"+"family : "+family+"\nstyle : "+style+"\nname : "+f_name+"\nsize : "+size+"pt\n"+"typename : "+typename+"\n----- contents -----\n"+t_contents);
}
function change_fillcolor(obj,r,g,b)
{
var my_color = new RGBColor();
my_color.red = r;
my_color.green = g;
my_color.blue = b;
obj.textRange.characterAttributes.fillColor = my_color; // 塗りの色を指定
}
function change_strokecolor(obj,r,g,b)
{
var my_color = new RGBColor();
my_color.red = r;
my_color.green = g;
my_color.blue = b;
obj.textRange.characterAttributes.strokeColor = my_color; // 線の色を指定
}
***■IllustratorのJavascriptでフォント(書体)を指定する http://www.openspc2.org/book/IllustratorCS/easy/039/index.html
***■【Illustrator】同フォント・同サイズのテキストオブジェクト選択 http://goo.gl/DQZew
***■ Adobe Illustrator CS5 Scripting Reference【CS 5 用リファレンスpdf】 http://goo.gl/doHXD
***■ Adobe Illustrator CS4 Scripting Reference【CS 4 用リファレンスpdf】 http://goo.gl/G7bRR
http://www.emstudio.jp/free/data1034/
■ 音楽楽譜用フォント ONGAKUN(フリーソフト)
http://www2e.biglobe.ne.jp/~shinzo/shiryou/ongakun/ongakun.html
■ Sonataフォント(シェアウェア)
http://www.fonts.com/FindFonts/detail.htm?query=music&pid=201296&page_id=11772&grab_id=0
■ Musical Symbols font (フリーソフト) http://simplythebest.net/fonts/fonts/musical_symbols.html
マニュアルや企画書などの書類を作成するときに非常に便利です。
http://www.org44.com/blog/2008/0815_1120_index.php
インストール方法は
アプリケーション>Adobe Illustrator CS3>プリセット>スクリプト
に .jsx ファイルを置くだけ
画像ファイルを1px単位のドットでパス化したい。 小さいアイコン画像を Flash で劣化なく使用したいときにパス化すると便利です。
やり方は Illustrator を使用します。
■ Illustratorへ画像をコピペして
「フィルタ」→「クリエイト」→「モザイク」
で可能です
Adobe Illustratorで点線をアウトラインすると実線になってしまいます。
そこで下記のようにすると1ステップでアウトライン化できます。
【オブジェクト】→【透明部分を分割・統合】
http://shspage.com/aijs/#arrow
http://www.pictrix.jp/ai/index.html
http://www.openspc2.org/book/IllustratorCS/
http://www.pictrix.jp/?page_id=28
インストール方法は
【アプリケーション】>【AdobeIllustrator】>【プリセット】>【スクリプト】
にファイルをコピーしてからIllustrator CS を再起動。
【ファイル】【スクリプト】に項目が表示されているので選択して使用します。
たまに聞かれるので、書いておきます
【画面】→【境界線を表示】
「command」+「H」(Mac) 「ctrl」+「H」(Windows)