デザイン関連(Photoshop・Illustrator)に関する各種メモ書き:タグ「Photoshop」での検索

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

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

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

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

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

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


No.752
05/22 11:25

edit

Photoshop