9Patch ファイルを出力するスクリプト。

以前、Android アプリを製作したときの記事。
draw9patch.bat

元画像の外周に 1px の余白を取り、黒（#000000）の塗りつぶしを付ける
.9.png という拡張子で保存する（png でなくてもいいみたい？）

元画像の左端の余白、該当箇所にマーキング。基本は上下２箇所
元画像の上端の余白、該当箇所にマーキング。基本は左右２箇所

引き伸ばしたくない領域
元画像の右端の余白、該当箇所にマーキング。基本は内部１箇所
元画像の下端の余白、該当箇所にマーキング。基本は内部１箇所

• 引き伸ばす範囲は、元画像の周囲 1px 部分
• コンテンツ領域は、元画像の周囲 1px 以外の部分
• —
• ２行目に元となる PSD ファイル名を列挙（利用者が入力）
• Android 側、解像度名に対応する順番にすること
• 現仕様では、６種のサイズを吐き出すことになっているけど、不要なものは削除可能
• 不要なものを削除する場合は、ファイル名と同時に、Android 側、解像度名も削除すること
• 元画像の幅と高さは自由
• 元画像は全て同一ディレクトリに配置
• スクリプト実行前に、元画像の最初の PSD ファイルを開いておく
• 元画像と同一ディレクトリに .9.png ファイルが保存される
• .9.png ファイルの名称は、splash_（Android 側、解像度名）
• —
• 元画像のアクティブレイヤーが「塗りつぶし」できないレイヤーだとエラーになる
• ExtendScript Toolkit から実行したので、Photoshop 本体からの実行は試してない

iG:Syntax Hiliter だとバグるので、CodePen。。。

See the Pen Making 9Patch with Photoshop CS6 by muchag (@muchag) on CodePen.

Life goes on：PhotoShop CS5でAndroid用9patchを作るのに便利なjsx（2011-08-12）

最後のレイヤー効果を変更することで、大分印象が変わる。

Yossy’s 手抜き TUTORIAL：もっとリアルな木目調テクスチャをPhotoshopで一から作ってみる

1. 新規レイヤーを追加
2. 描画色を黒（#000000）に設定
3. [フィルター]-[描画]-[雲模様１」
4. 縦拡大
1. 移動ツールを選択
2. [バウンディングボックを表示] にチェック
3. バウンディングボックスの枠をクリックすれば、上部にテキストボックスが出てくるので、H を 400% に設定
4. Enter で確定
5. [フィルター]-[ぼかし]-[ぼかし（移動）]
1. 角度：90
2. 距離：180
6. [イメージ]-[色調調整]-[ポスタリゼーション]
1. 階調数：25
7. [フィルター]-[表現手法]-[輪郭抽出]
8. [イメージ]-[色調調整]-[白黒]
1. グレースケール化するのが目的
2. ダイアログが出てくるけど、よくわからないから、そのまま [OK]
9. [イメージ]-[色調調整]-[レベル補正]
1. 入力レベル：一番左のテキストボックス：185
10. [フィルター]-[ノイズ]-[ノイズを加える]
1. 量：30
2. 分布方法：[ガウス分布] を選択
3. [グレースケールノイズ] にチェック
11. [フィルター]-[ぼかし]-[ぼかし（移動）]
1. 角度：90
2. 距離：15
12. レイヤー効果：初期設定
1. 通常の描画
1. 描画モード：[乗算] を選択

Web Design Library：フォトショップで木目を描く方法
ちょいと改変。

1. 新規レイヤーを追加
2. キャンバスを白に、描画色を黒にする
3. [フィルター]-[ノイズ]-[ノイズを加える]
1. 量：65
2. 分布方法：[ガウス分布] を選択
3. [グレースケールノイズ] にチェック
4. [フィルター]-[ぼかし]-[ぼかし（移動）]
1. 角度：0
2. 距離：80
5. [イメージ]-[色調調整]-[明るさ・コントラスト]

1. 通常の描画
1. 描画モード：[乗算] を選択

この他に、シミを付ける方法や区切り線を入れる方法などが載っている。

• C101：5a3222
• C102：d17939
• C103：e09843

環境：Photoshop CS3

Yossy’s 手抜き TUTORIAL：レイヤーを使って窪みを作って立体的な凹みを表現する
→試してないけど、カッコいい！

環境：Photoshop CS3

NEVER：自分で描ける！【Wood texture】厳選チュートリアル【Ai,PSD素材探しに疲れたら】

Web Design Library：フォトショップで木目を描く方法
→すぐできる。自然なシミができる。

Yossy’s 手抜き TUTORIAL：もっとリアルな木目調テクスチャをPhotoshopで一から作ってみる
→少し時間がかかる。画像が小さくて数値はよく見えない。年輪のような模様を表現できる。

DESIGN TIPS：Photoshopでリアルな木目のテクスチャを作る
→途中まではすぐできた。ベニヤの質感。「うねり」や「つまみ」は未試行だけど、こういうのができるのは面白い。

TECHACADEMY magazin：意外と簡単！Photoshopで木目を描く方法【初心者向け】
→木目を自分で描くのではなく、オブジェクトに木目を適用する手法を２種紹介。

PHOTOSHOP VIP：やさしい質感を表現する、無料ウッドテクスチャ素材30枚まとめ

LAB：Photoshopを使ってフローリングの様な木目板を作る方法

木目調のテクスチャを作成する

Illustrator で、幅：100px、高さ：100px の四角形を作成して
その四角形をコピーし、Photoshop へペーストすると、
小さい画像になってしまう。

このとき、Photoshop で表示されるバウンディングボックスが
オブジェクトより相当大きい物になる
という状況も不明だけど、サイズが変わるのは困る。

MdN：Photoshopの上級者でさえなぜか曖昧な5つの基本機能

Adobe 製品を Javascript で制御できるそうな。
素敵～。

上記実行行程の [読み込み] をクリックする際に
Alt を押しながらで、デバッグウィンドウが開く。

よくわからないので、スクリプトを書いて検証中。
現在のところ、下記のような感じ。
正解は不明。
layers：第１階層のレイヤー（グループディレクトリもレイヤーとしてカウント）
artLayers：第１階層の画像を含むレイヤー

Photoshopでテキストレイヤーを作成するスクリプト

JavaScript コンソールへ出力する方法。

Excel VBA のときに散々お世話になった「マクロ記録」。
Photoshop にもあった～♪

Scripting Listener というプラグインを利用する。

各紹介記事では
公式ヘルプ：Photoshop CC アドオン（プラグインおよび拡張機能）
から DL と紹介されているけど、実際は、上記ページの下部「ダウンロード可能な内容」をクリックして
Photoshop Help：Downloadable plug-ins & content | Photoshop CC
へ飛び、ScriptingListener plug-in から DL。

2016-02-19 現在
Win_Scripting_Plug-In.zip（Windows 用）

アプリケーションディレクトリ（32bit か 64bit 次第）を photosho と称する。

Photoshop を起動中であれば再起動。

これで、[ファイル]-[スクリプト] に

• ScriptListenerOff
• ScriptListenerOn

が表示されるようになるので
記録を開始したいときに On を、終了したいときに Off を選択すればよい。

記録内容は、デスクトップに

というファイルが生成される。

追記式なので、必要に応じてファイルをコピーして
本体ファイルのテキストをクリアすること。

Adobe：API Documentation　com.adobe.photoshop

Adobe Photoshop CS6自動化作戦
→サンプルスクリプトがいっぱい♪

Adobe CS1〜C6, CC バージョンJavaScript リファレンス＆ライブラリ

Google ブックス：Photoshop自動化基本編
→これなんだろ。。。抜粋でなくて全部読めるっぽい。

表示アイコンのドラッグ。

ドラッグ開始レイヤーの切り替えに準拠。

つまり、ドラッグ開始レイヤーが表示中の場合
クリックすることで、非表示に変わるわけだから
クリックでなくドラッグすることで、残りのレイヤーも全て非表示に。

Alt + 表示アイコンクリック。

２回連続でクリックすれば元へ戻る。

coliss：Photoshopで、レイヤーを操作する便利な33のショートカット

ライブラリ集。

ROSA：10 Golden Photoshop Styles for Christmas
Golden_styles_Divena.zip
Divena_golden_styles.asl

　
DEVIANT ART：Metal pack layer style text fx
metal_pack_layer_style_text_fx_by_giallo86-d34m88r.zip
ALL_shiny_metal_styles.asl
big_metal_styles.asl
medium_metal_styles.asl
small_metal_styles.asl

DEVIANT ART：Revnart Styles
Revnart_Styles_by_revn89.asl

また見てみたいリンク集。
　
clipping：透明感のあるPhotoshopレイヤースタイル37セット
coliss：美しい半透明のパネルを簡単に作成できるPhotoshopのスタイルのまとめ

「レイヤー効果」と「レイヤースタイル」の言葉の違いがピンとこなかったので
レイヤー効果　レイヤースタイル
にまとめてみた。

1. 当該レイヤーを選択
2. [スタイル] ウィンドウのスタイルをクリック

　
これで、スタイルを適用できる。
　

1. レイヤー効果ダイアログを開く
2. [新規スタイル] をクリック
3. スタイル名称を決める

1. [スタイル] ウィンドウのオプションメニュー
2. [プリセットマネージャー] をクリック
3. 開いたダイアログで [読み込み] をクリック
4. 当該 .asl ファイルを選択
5. [完了]

.asl ファイルの場所

.asl ファイルがあれば、他人が作成したスタイルも利用できる。
Google 先生に質問すれば、フリーのものもいっぱいある。

デフォルトの外部 .asl ファイルの保存場所
(ユーザディレクトリ)\AppData\Roaming\Adobe\Adobe Photoshop CS6\Presets\Styles
まぁ、実際はどこでもいいんだけどｗ
　

1. [スタイル] ウィンドウの当該スタイルを右クリック
2. [スタイルを削除] をクリック

1. [スタイル] ウィンドウのオプションメニュー
2. [プリセットマネージャー] をクリック
3. 開いたダイアログで当該スタイルを選択（複数選択可能）
4. [削除]（削除自体はこの時点で完了している）
5. [完了]