スクリプト -> 9Patch

Posted by muchag | Photoshop | 2016-05-20 (金) 19:18:36

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

【環境】
Photoshop:CS6
OS:Windows 10 Home 64bit
作り方

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

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

引き伸ばす領域

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

コンテンツ領域

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

基本タイプイメージ
patch 領域
引き伸ばし領域
コンテンツ領域
JSX
仕様
  • 引き伸ばす範囲は、元画像の周囲 1px 部分
  • コンテンツ領域は、元画像の周囲 1px 以外の部分
  • 2行目に元となる PSD ファイル名を列挙(利用者が入力)
    • Android 側、解像度名に対応する順番にすること
    • 現仕様では、6種のサイズを吐き出すことになっているけど、不要なものは削除可能
    • 不要なものを削除する場合は、ファイル名と同時に、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)

Photoshop | 2016-05-20 (金) 19:18:36 |

木目

Posted by muchag | Photoshop | 2016-01-16 (土) 14:05:45

library_woody_11
Effects

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

E101

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

  1. 新規レイヤーを追加
  2. 描画色を黒(#000000)に設定
  3. [フィルター]-[描画]-[雲模様1」
  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. 描画モード:[乗算] を選択
E201

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

  1. 新規レイヤーを追加
  2. キャンバスを白に、描画色を黒にする
  3. [フィルター]-[ノイズ]-[ノイズを加える]
    1. 量:65
    2. 分布方法:[ガウス分布] を選択
    3. [グレースケールノイズ] にチェック
  4. [フィルター]-[ぼかし]-[ぼかし(移動)]
    1. 角度:0
    2. 距離:80
  5. [イメージ]-[色調調整]-[明るさ・コントラスト]
  • 明るさ:0
  • コントラスト:66
  • レイヤー効果:初期設定
    1. 通常の描画
      1. 描画モード:[乗算] を選択

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

    Colors
    • C101:5a3222
    • C102:d17939
    • C103:e09843
    Photoshop | 2016-01-16 (土) 14:05:45 |

    立体感

    Posted by muchag | Photoshop | 2016-01-16 (土) 0:27:11

    環境:Photoshop CS3

    【環境】
    Photoshop: CS6
    参考サイト

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

    Photoshop | 2016-01-16 (土) 0:27:11 |

    テクスチャ -> 木目

    Posted by muchag | Photoshop | 2016-01-15 (金) 17:20:52

    環境:Photoshop CS3

    【環境】
    Photoshop: CS6
    参考サイト

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

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

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

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

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

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

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

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

    Photoshop | 2016-01-15 (金) 17:20:52 |

    Illustrator から Photoshop へコピペするとサイズが変わる

    Posted by muchag | Illustrator,Photoshop | 2016-01-15 (金) 11:02:19

    【環境】
    Illustrator:CS6
    Photoshop:CS6
    状況

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

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

    解決方法

    [編集]-[環境設定]-[一般]
    オプション
    [画像サイズを変更して配置] のチェックを外す
    [OK]

    Illustrator,Photoshop | 2016-01-15 (金) 11:02:19 |

    ベベルとエンボス

    Posted by muchag | Photoshop | 2016-01-15 (金) 10:26:12

    【環境】
    Photoshop:CS6
    参考サイト

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

    Photoshop | 2016-01-15 (金) 10:26:12 |

    Photoshop -> スクリプト

    Posted by muchag | JavaScript,Photoshop | 2016-01-06 (水) 13:00:11

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

    【環境】
    Photoshop:CS6
    OS:Windows 7 SP1 64bit
    実行

    [ファイル]-[スクリプト]-[参照]
    JSX ファイルを選択して [読み込み]

    デバッグ

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

    layers, artLayers

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

    テキストレイヤー

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

    ExtendScript Toolkit
    コンソール

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

    1. $.write('hoge');
    2. $.writeln('moge'); // 改行あり
    マクロ記録

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

    概要

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

    DL

    各紹介記事では
    公式ヘルプ: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 と称する。

    1. Win_Scripting_Plug-In
    2. └─Scripting_Win32(または Scripting_Win64)
    3.     ├─Documents
    4.     │      略
    5.     │
    6.     ├─Sample Scripts
    7.     │  ├─AppleScript
    8.     │  │      略
    9.     │  │
    10.     │  ├─JavaScript
    11.     │  │      略
    12.     │  │      ScriptListenerOff.jsx → photosho\Presets\Scripts
    13.     │  │      ScriptListenerOn.jsx → photosho\Presets\Scripts
    14.     │  │      略
    15.     │  │
    16.     │  └─VBScript
    17.     │          略
    18.     │
    19.     └─Scripting Utilities
    20.             ScriptListener.8li → photosho\Plug-ins
    再起動

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

    利用

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

    • ScriptListenerOff
    • ScriptListenerOn

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

    記録結果

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

    ScriptingListenerJS.log

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

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

    参考サイト

    Adobe:API Documentation com.adobe.photoshop

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

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

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

    JavaScript,Photoshop | 2016-01-06 (水) 13:00:11 |

    ショートカット

    Posted by muchag | Photoshop | 2016-01-06 (水) 12:16:51

    【環境】
    Photoshop:CS6
    OS:Windows 7 SP1 64bit
    レイヤー
    表示・非表示一括切り替え

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

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

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

    特定(1枚)のレイヤーだけ表示

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

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

    メモ

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

    Photoshop | 2016-01-06 (水) 12:16:51 |

    レイヤースタイル -> ライブラリ

    Posted by muchag | Photoshop | 2015-02-11 (水) 13:09:26


    ライブラリ集。

    テキスト
    Metal

    2015-02-11_Style_goldenstyles_previewROSA:10 Golden Photoshop Styles for Christmas
    Golden_styles_Divena.zip
    Divena_golden_styles.asl

     
    2015-02-11_Style_metal_pack_layer_style_text_fx_by_giallo86-d34m88rDEVIANT 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

     

    パネル

    2015-02-11_Style_Revnart_Styles_by_revn89DEVIANT ART:Revnart Styles
    Revnart_Styles_by_revn89.asl

     

    リンク集

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

    Photoshop | 2015-02-11 (水) 13:09:26 |

    レイヤースタイル(スタイル)

    Posted by muchag | Photoshop | 2015-02-11 (水) 12:01:00


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

    【環境】
    Windows:7 Home Premium SP1
    Photoshop:CS6
    適用
    1. 当該レイヤーを選択
    2. [スタイル] ウィンドウのスタイルをクリック

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

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

     

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

    .asl ファイルの場所

    (Photoshop)\Presets\Styles

     

    ライブラリ

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

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

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

     

    複数
    1. [スタイル] ウィンドウのオプションメニュー
    2. [プリセットマネージャー] をクリック
    3. 開いたダイアログで当該スタイルを選択(複数選択可能)
    4. [削除](削除自体はこの時点で完了している)
    5. [完了]
    Photoshop | 2015-02-11 (水) 12:01:00 |
    次ページへ »