デザイン関連(Photoshop・Illustrator)に関する各種メモ書き

IllustratorのWEB用設定をして retinaディスプレイ用の画像をスライスする

● WEBに最適なイラストレータの設定

WEB用のIllustratorの設定はこのようにするといいでしょう

1. 環境設定

>【環境設定】>【単位】ですべて『ピクセル』に設定
>【環境設定】>【一般】でキー入力を『1px』に設定
>【環境設定】>【ガイド・グリッド】でグリッドを『10px』分割数を『10』に設定

2. 新規ファイルを開くとき

>【カラーモード】を「RGB」に設定
>【新規オブジェクトをピクセルグリッドに整合】のチェックを外す

3. パネルや表示設定

>『変形パネル』内で、[ピクセルグリッドに整合]にチェックを入れる
>『アピアランスパネル』の設定の「新規アートに基本アピアランスを適用」のチェックを外す
>『線パネル』の設定の「線の位置」を「線を内側に揃える」に変更する
>『整列パネル』の設定の「プレビュー境界を使用」にチェックをつける
>【表示】>【ピクセルプレビュー】にチェックを入れる。(ドラッグした時にXY座標が必ず整数値になります)
>『変形パネル』の「ピクセルグリッドに整合」のチェックを外す

Illustratorからretinaディスプレイ用の画像をスライスするには

  • A. 選択したオブジェクトを直接書き出し
  • B. アートボードを書き出す画像文用意してアートボードから書き出し
  • C. スライスから書き出し の大きく3つがありますが、 A、B の方法がおすすめです。

● A. 選択したオブジェクトを書き出し「Quick Exporter」(Retina対応)

こちらからインストールします → 素早く画像書き出しできるillustrator向けスクリプト
画像を選択して

【ファイル】>【スクリプト】>【quick-exporter】を選択する

だけです、レイヤー名がファイル名になります。
とても簡単ですのでオススメです。

● B. アートボードからの書き出し(Retina対応)(Illustratorのアートボード使ってスライス)

http://3fl.jp/nis006
おおまかな手順は以下のとおりです。

・レイヤー『//artboards』にアートボードサイズの矩形を複数配置
 ↓
・全ての矩形を選択して、スクリプト【Rebuild Artboards】を実行し、アートボードを一気に作成
 ↓
・スクリプト【Export Artboards by Dialog】で全アートボードの画像を書き出し

●C. Illustratorのスライスをスクリプトで自動化

http://cocopon.me/blog/?p=3687

No.947
06/13 11:47

edit

illustrator
Photoshop
JavaScript

IllustratorでJSXスクリプト実行時の「このスクリプトを実行しますか?」をオフにする

● IllustratorでJSXスクリプト実行時の「このスクリプトを実行しますか?」をオフにする

Illustrator_script_message_off.jsx (ファイル名は何でもokです)

app.preferences.setBooleanPreference("ShowExternalJSXWarning",false);

このファイルをイラストレーターにドロップして実行するだけで次回からアラートが消えます。

No.2102
11/18 15:47

edit

Photoshop で Webp 画像を開く/保存するプラグイン WebpShop

● Photoshop で Webp 画像を開く/保存するプラグイン WebpShop

https://github.com/webmproject/WebPShop

● インストール方法

1. プラグインをダウンロードする

https://github.com/webmproject/WebPShop

2. 警告を出さないようにする

ターミナルからこちらのコマンドを実行します。

sudo xattr -r -d com.apple.quarantine /Applications/Adobe\ Photoshop\ 2020/Plug-ins/WebPShop.plugin
No.1807
07/03 11:10

edit

複数ページの pdf を Illustrator で レイヤーとして読み込む JavaScript

● 複数ページの pdf を Illustrator で レイヤーとして読み込む JavaScript

https://aiscripts.com/open-multipage-pdf/

No.1627
11/21 16:27

edit

Illustrator の Javascript で 外部の JavaScript ファイルを読み込んで実行する

● Illustrator の Javascript で 外部の JavaScript ファイルを読み込んで実行する

・ 「//@include」で読み込む

//@include 'myfile.jsx';

・ 「#include」で読み込む

#include 'myfile.jsx';
No.1440
02/08 14:34

edit

IllustratorのJavaScriptでドロップダウンリストのダイアログを表示させフォーカスを当てる

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();
No.1289
08/22 22:49

edit

photoshopで複数行のテキストレイヤーを改行ごとに別々のレイヤーにばらすスクリプト

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);
No.1166
09/19 13:01

edit

Photoshop

イラストレーターのレイアウトをそのままHTMLやCSSに変換する JavaScript

最近のイラストレーターではそのままCSSを吐き出す機能が備わっていますが
まだまだ実用に耐えるものではありません
こちらのスクリプトを利用すると良いでしょう。

http://qiita.com/onebitious/items/de179f82bcfabc935637

No.1134
04/23 16:40

edit

JavaScript
illustrator

No.1078
01/23 00:56

edit

Photoshopの整列・分布パネル

Photoshopの整列・分布パネル
http://graphicartsunit.tumblr.com/post/131547070064/pathfinder-aligndistribute

(旧バージョン 手動での)インストール方法

1. アプリケーション > Adobe Photoshop CC 2015 > Plug-ins に移動
2. フォルダ「Panels」を作成。(すでにある場合はスキップ)
3. 上記サイトからダウンロード、解凍したフォルダ「align_dark_cc」をコピー
4. Photoshopを再起動する
No.1007
02/21 16:56

edit

Photoshop

Google Fonts の無料フォントを IllustratorやPhotoshopで使用する

Google Fontsは基本的にはCSSを指定してWEBページで使用しますが、 レイアウトするために、IllustratorやPhotoshopで使用したい時があります。 その時は

● Google Fonts Files

https://github.com/google/fonts/

ここから全フォントを一括ダウンロードして、使いたいフォントを選んでインストールするといいでしょう。

SkyFonts

http://www.fonts.com/ja/web-fonts/google SkyFontsを使うと5台までフォントのインストール環境を共有できます。

No.993
01/06 18:34

edit

illustrator
フォント
Photoshop

同一フォントを使用しているオブジェクトを全て選択するIllustratorスクリプト

http://gyoniso.blogspot.jp/2010/03/illustrator.html

↓こちらから添付ファイルをダウンロードして
【アプリケーション】>【Illustrator CS XXX 】>【プリセット】>【ja_JP】>【スクリプト】
内に【select_same_font.jsx】を入れてIllustratorを再起動します。

何か一つ文字のオブジェクトを選択した状態で
【ファイル】>【スクリプト】>【select_same_font】を起動すると、同じフォントを使用しているオブジェクトを全て選択します。


添付ファイル1
No.903
11/19 16:47

edit

添付ファイル

JavaScript
illustrator

Hot Door - MultiPage のようにページ(レイヤー)切り替えができる Illustrator用スクリプト

■ Hot Door - MultiPage - Overview

https://www.hotdoor.com/multipage

は最新のIllustratorに対応していません。

そこでIllustratorのJavaScriptを利用して似たような機能(ページ切り替え)を

実現します。

1. 『→添付ファイル』を押してから、このページの一番下からスクリプトをダウンロードします。

2. Macの【アプリケーション】>【プリセット】>【ja_JP】>【スクリプト】に

「change_layer_down.jsx」「change_layer_up.jsx」をコピー

3. ScriptKeyAiを利用してショートカットキーを割り当てます。

おすすめは

【コマンド】+【オプション】+【b】にchange_layer_down.jsx

【コマンド】+【オプション】+【n】にchange_layer_up.jsx

添付ファイル1
添付ファイル2
No.884
05/22 11:16

edit

添付ファイル

illustrator
JavaScript

Illustatorのスクリプトにショートカットを割り当てることができる【SPAi】(旧ScriptKeyAi)

■ SPAi

http://tama-san.com/spai/
【ScriptKeyAi】を使うとIllustatorのスクリプトにショートカットを割り当てることができます。 作業効率アップ間違いなしなのでぜひ導入しましょう。
(以前は ScriptKeyAi という名前でした。)

■ ScriptKeyAi

http://tama-san.com/scriptkey/

No.883
04/04 15:24

edit

illustrator

ロゴ制作に便利!Illustratorの全てのフォントで任意のテキストを生成する

ロゴを制作するときなど、任意のテキストを全てのフォントで見てみたい時があります。 そんな時にこのIllustrator用JavaScriptが便利です

● 【fontsample.jsx】ダウンロードはこちらから↓

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;
}

● インストール方法(MacOSX)

【アプリケーション】>【Adobe Illustrator CS4】>【プリセット】>【ja_JP】>【スクリプト】に「fontsample.jsx」

を置いて、イラストレーターを再起動します (Windowsも同様のフォルダに置きます)

● 起動方法

メニューの

『ファイル』>『スクリプト』>『fontsample』

から起動します。 起動すると作成したい文字を聞かれますので入力します。 (そのままEnterを押すと、フォント名で作成されます。) 入力すると一覧が作成されます。

わざわざスクリプトを実行するのが面倒な方はこちら https://www.fontshare.com/

添付ファイル1
添付ファイル2
No.788
02/06 09:47

edit

添付ファイル

JavaScript
illustrator
フォント

IllustratorのJavascriptでテキスト、フォントを操作する

● IllustratorのJavascriptでテキスト、フォントを操作するには以下の例のようにします

// 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

No.787
01/19 21:04

edit

JavaScript
illustrator
フォント

Photoshopのかわりにオンラインの画像編集ソフトを使用する。

ちょっとした写真のトリミング等を行う場合はオンラインの画像編集サービスをを使用したほうが早い場合があります。
そこで、おすすめの画像編集サービスの紹介

■ pixenate
http://pixenate.com/
手持ちのファイルの他、ネット上の画像URLを指定して直接「取得→編集」が可能です。


No.752
05/22 11:25

edit

Photoshop

音楽記号、楽譜記号、(音符・休符)のIllustratorデータをさがす

● 方法1. 音譜、休符の Illustratorデータをダウンロードする

http://www.emstudio.jp/free/data1034/

● 方法2. フォントをインストールしてアウトラインをとる。

■ 音楽楽譜用フォント 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

No.750
09/25 11:27

edit

フォント
illustrator

illustratorCS4で左上を基点としたルーラーを表示する

メニューから
【表示】>【アートボード定規を表示】
で左上を 0,0 とした定規が出現します。(気休め程度ですが・・・。)
No.679
03/25 18:51

edit

illustratorCS4

Illustrator でスクリプトによる図形描画を行うpaper.js(旧:Scriptographer)

■Paper.js
http://paperjs.org/

フォルダごと Illustrator の pluginにいれるだけで使用することができます。


No.668
04/04 16:12

edit

Illistratorで「画像の外枠を作成する」「等倍で拡大縮小する」スクリプト

マニュアルや企画書などの書類を作成するときに非常に便利です。

http://www.org44.com/blog/2008/0815_1120_index.php

インストール方法は

アプリケーション>Adobe Illustrator CS3>プリセット>スクリプト

に .jsx ファイルを置くだけ

No.667
04/18 18:05

edit

illustrator
JavaScript

画像を 1px × 1px のドット絵にパス化

画像ファイルを1px単位のドットでパス化したい。 小さいアイコン画像を Flash で劣化なく使用したいときにパス化すると便利です。

やり方は Illustrator を使用します。

■ Illustratorへ画像をコピペして

「フィルタ」→「クリエイト」→「モザイク」

で可能です

No.572
05/22 11:17

edit

illustrator

Illustrator で点線のアウトラインをとるには

Adobe Illustratorで点線をアウトラインすると実線になってしまいます。

そこで下記のようにすると1ステップでアウトライン化できます。

【オブジェクト】→【透明部分を分割・統合】


No.462
06/15 16:16

edit


illustratorのJavaScriptで自動処理を行う

● 三階ラボ さんのスクリプト配布ページ(どれも実用性高し)

http://3fl.jp/d/is

● イラレでべんり

http://d-p.2-d.jp/ai-js/

● JavaScriptエディタ

http://bit.ly/2nXYJ0X

● その他

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 を再起動。

【ファイル】【スクリプト】に項目が表示されているので選択して使用します。

No.352
03/29 14:20

edit

illustrator
JavaScript

Adobe illustratorでオブジェクトのアンカーポイントが表示されない時は。

たまに聞かれるので、書いておきます

オブジェクトのアンカーポイントが表示されない時の対処法

【画面】→【境界線を表示】

ショートカットカットは

「command」+「H」(Mac)
「ctrl」+「H」(Windows)
No.296
08/12 10:18

edit

illustrator

No.211
04/21 12:31

edit


Illustrator ショートカット集

■ ワンキーショートカット
v(選択ツール切替)
a(ダイレクト選択ツール切替)
S+画面クリック(拡大・縮小ダイアログ呼び出し)
R+画面クリック(回転ダイアログ呼び出し)
M+画面クリック(長方形ダイアログ呼び出し)
x(カラーの塗りと線の切替)
w(ブレンド){解除時はコマンド+option+shift+B}
e(自由変形、optionやshiftとの組み合わせで台形や平行四辺形が作れます)
z(虫眼鏡ツール)
g(グラデーション)
return(移動ダイアログ呼び出し)


■ 文字関連
option+←→ で文字詰め調節
option+↑↓ で行間(行送り)調節
option+シフト+↑↓でベースライン調節

command+シフト+> で文字サイズを大きく
command+シフト+< で文字サイズを小さく

command+シフト+l で文字の左寄せ
command+シフト+r で文字の右寄せ
command+シフト+c で文字の真ん中寄せ
command+シフト+x で水平比率、垂直比率をデフォルト(100%)に戻す


shift+x で「塗りと線」の入れ替え
command+k で環境設定
command+U でスマートガイド

No.51
01/05 23:13

edit

illustrator

EPSデータリンク集

EPSとは、イラストレーターのデーター形式のことです。

●ロゴの杜
http://www.geocities.co.jp/Milano-Aoyama/3886/index.html
日常生活でよく見かけるロゴや企業・標識などのロゴを掲載。
どのロゴもEPS「LHA圧縮」・JPEG形式で、無償でダウンロードすることができます。

※DTPで扱えるようにEPS形式になっております。
パンフレット、ちらし、DM、社内報、PTA広報、カードなど個人、商用問わずフリーにお使いください。加工もOKです。
※HPでご使用になる場合は各自gif画像等に変換してご使用下さい。その際にはなるべくリンクをお願いいたします。

●交通エコロジー・モビリティ財団
http://www.ecomo.or.jp/
多くの人が利用する施設などで利用されている案内用図記号(ピクトグラム)の標準化を推進している団体。HP上から自由にデータのダウンロードができます。

No.42
05/22 11:22

edit