Photoshopでできる非破壊編集あれこれ

Adobeの公式サイトは文字だけしかないからわかりにくいんだなぁ😨
よく使う方法だけピックアップしてみました。とにかくスマートオブジェクトはめっちゃ使う。

非破壊編集とは、元の画像データの上書きをせずに画像を変更できるということです。元の画像はそのまま保存されているので、必要に応じて復元することができます。画像からデータが削除されないので、編集を行っても画質は低下しません。

helpx.adobe.com

調整レイヤーの使用

調整レイヤーは、ピクセル値を変えることなく、画像のカラーや色調を補正します。
元画像の上に調整用のレイヤーが作成されるのでレイヤーの表示／非表示でいろんな調整が試せます。

調整レイヤー

スマートオブジェクトの変形

スマートオブジェクトを使用すると、拡大・縮小、回転およびワープを使用できます。
これは絶対に覚えて・・！

こんな編集しても元画像は破壊されない。ちなみにスマートオブジェクトを使わずにやると、もう元には戻せない。いじればいじるほどボヤケた画像になってしまいます。

スマートオブジェクトを使用したフィルタリング

スマートオブジェクトに適用されたフィルターはスマートフィルターとなり、非破壊的なフィルターとして機能します。
スマートオブジェクトを使用せずフィルタをかけると元に戻せません。

スマートオブジェクトの状態でフィルタを掛ける

スマートフィルタが適用される

バリエーションの作成

レイヤーカンプ機能を使い、バリエーションを作成することができる。
見た目の切り替えをレイヤーカンプで保存することができるのでレイヤーを結合したりしなくて良い。

レイヤーカンプでバリエーションを作成

👆上記のレイヤーカンプを使ったドキュメントがスマートオブジェクトだった場合、元のドキュメントの「属性」ウィンドウからレイヤーカンプのバリエーションを選ぶこともできる。

元ドキュメントの「属性」ウィンドウからバリエーションが選択できる

非破壊的切り抜き

切り抜きツールを使用する際に、「切り抜いたピクセルを削除」のチェックボックスを外すと、切り抜き前の領域が保持されたまま切り抜きが実行される。

切り抜き前の領域を表示したくなったら、「イメージ」の「すべての領域を表示」コマンドを実行すれば元に戻る。

チェックを外すと切り抜きの外側の領域が保持される

切り抜き前のサイズに戻すときは「すべての領域を表示」

マスクの使用

レイヤーマスクとベクトルマスクは、非表示のピクセルを失うことなくマスクを再編集できるので、非破壊的です。フィルターマスクは、スマートオブジェクトレイヤー上のスマートフィルターの効果をマスクします。

レイヤーマスク

ベクトルマスク

フィルターマスク

マスクなので元の画像が消えてないのがわかる

ちなみに苔が生してる画像は数年前に山梨行ったときに撮りました。
旅行いきたいナァ

【Photoshop】ぼかしギャラリー使ってみた

今回はPhotoshopのぼかしギャラリーについてです。

先日ぼかしギャラリーを使って画像加工していたところ、同僚が「なにそれ？」って聞いてきたので意外と知られてないのかな？と思い、記事にしてみることにしました！

フィルター > ぼかしギャラリー > 任意のぼかしフィルタを選択

フィールドぼかし

ピンを指した場所にぼかしをかけることができます、複数ピンを打つとそれぞれぼかし具合を調整することができます。

youtu.be

虹彩絞りぼかし 

カメラのレンズに近いボケをつけることができます。

youtu.be

・・・

全部書こうと思ったけどめんどくさくなってきた・・
ぜひ試してみてください。玉ボケ作れるのがいいですね。

大きくぼかし効果を入れると、おしゃれな感じになります。
奥と手前がわかりやすくなるので良い効果だと思います！

なにより、単純に最近のぼかした背景カッコいいですよね。
Destiny2のUIとかめちゃくちゃ好きです😳

www.behance.net

実装するとなると描画負荷が高いので、リアルタイムにぼかすか、ぼかした背景を書き出して使うかは、よく考えてエンジニアさんに相談してみましょう🙋‍♀️

AdobeのExtension ManagerでZXPファイルがインストールできない問題（Win10）

こんにちは！また久しぶりの更新になってしまいました。
Adobe製品にZXP形式*1のアドオン追加しようとして躓いたので解決方法メモっておきます！

アドオン（プラグイン）って何？って方はこの辺の記事どうぞ！

photoshopvip.net

vook.vc

Adobeの公式でも配布されているようです（日本語非対応）

exchange.adobe.com

ZXPファイルとは

恐らく、Adobe専用のプラグインファイルを固める（zip的な）圧縮形式ってことだと思います。
こいつを解凍して各ソフトにインストールするためにはExtensionManager*2というソフトが必要みたいですが、私はExtensionManagerからのインストールができませんでした。

Adobe - Exchange：Adobe Extension Managerのダウンロード

インストールできない😭

なので無理やりソフトに追加した方法を記載していきます。

 👇ここに書いてあるのを説明するだけになりますが・・
Adobe Animate に拡張機能をインストールします。

1.ExManCmd コマンドラインツール（Windows 版）をダウンロード
DL：http://www.adobe.com/go/ExManCmdWin

2.任意のディレクトリに解凍

例としてDドライブ直下

3.ZXPファイルも同じ場所に置く

ExManCmd_winフォルダ内

4.Windowsのコマンドプロンプトを起動

検索して探すと早い

5.コマンドプロンプトで参照しているディレクトリを移動させます。

C:ドライブからD:ドライブへ

D: 

「ExManCmd_win」ディレクトリ内へ

[cd]コマンドでディレクトリ移動できます。

cd ExManCmd_win

6.プラグインのZXPファイルを指定してインストール

拡張機能のファイルを指定

ExManCmd.exe /install "プラグインのファイル名.zxp" 

※引用符（""）も付けてください。

少し待つとインストールが始まる

「Successful」って文字が出たらインストール完了です！

7.Photoshop を起動して確認

ウィンドウ > エクステンション > 追加したプラグイン名

追加したプラグインを「ウィンドウ」メニューから呼び出してプラグインのツールウィンドウが表示されたら成功！

追加したプラグインが表示された

最後に

🙋‍♀️ プラグインを使うと面倒だった作業が楽になったりするので是非色々探してみてください！

🤦‍♀️ 一部インストールエラーがでるプラグインもあるみたいなのですべてこの方法でインストールできないかも知れません。

*1:ZXP形式ファイル

アドビソフトウェアプログラムに機能を追加するために使用されるプラグインファイルです。このファイルでサポートされているアドオン機能には、新しい画像効果の作成、追加のファイルサポートの提供、デジタル署名機能の追加、および追加のツールパレットがあります。

*2:ExtensionManager

拡張機能およびプラグインのインストールと管理を行うためのプログラムです。 拡張機能ファイルをダブルクリックするだけで、Extension Managerが起動して拡張機能が製品にインストールされます。

Windows用の便利ツール紹介

MacからWindowsに戻ったら不便に感じることがあったのでちょっと便利になるツールを入れてみました。

http://keypirinha.com/index.html
Keypirinha - MacのSpotlight検索ライクなツール
PC上のファイルをすぐに検索したり、アプリケーションを起動したり、翻訳、電卓多機能なランチャーアプリです。

Keypirinhaの使い方 | PC Plaza
上記のサイトにインストールから設定方法まで記載されています。

私はConfigファイルを以下のように設定しました。

[app]

launch_at_startup = yes
hotkey_run = Ctrl+Space
hotkey_paste = Ctrl+Alt+Space
hotkey_history = Ctrl+Shift+Space
show_on_taskbar = no

[gui]
always_on_top = yes
hide_on_focus_lost = yes
retain_last_search = yes
escape_always_closes = yes

theme = DarkSpotlight
# Dark minimal theme
# t.me/z4ur5d

ignored_packages = Bookmarks, FileZilla, GoogleTranslate, PuTTY, TaskSwitcher, WinSCP, URL, WebSearch, WebSuggest
Markup

[theme/DarkSpotlight]
font_face = SF Pro Text, Helvetica, Tahoma, Arial, Segoe UI

font_small_size = 9
font_small_style = cleartype
font_snormal_size = 12
font_snormal_style = cleartype
font_normal_size = 14
font_normal_style = cleartype
font_large_size = 22
font_large_style = cleartype

mono_font_face = Fira Code, Consolas

color_background = #111
color_foreground = #fff
color_faded = #888

color_textbox_back = ${color_background}

color_listitem_back = ${color_background}
color_listitem_title = ${color_foreground}
color_listitem_desc = #555

color_listitem_selected_back = #116dd6
color_listitem_selected_title = ${color_foreground}
color_listitem_selected_desc = #599bd9

opacity_back = 92

layout = list_icon

satellite_pos = topleft
satellite_size = small

• Keyprinhaを呼び出すショートカットキーを Ctrl+Space に変更
• GUIのテーマを「Dark minimal theme 」に変更

https://github.com/Keypirinha/Keypirinha/issues/345

便利だったのが、Google翻訳機能。

Ctrl+Space
で検索バーを呼び出し、Translateと入力、翻訳元の単語を入力して、どの言語に訳すか指定します。

ブラウザ呼び出して検索するほうが早いかもしれないけど、便利ではある！
そして、計算式を入力すれば計算もできます➕➖➗✖️

SageThumbs - ファイルビューア
https://www.cherubicsoft.com/en/projects/sagethumbs

Windows標準のファイルエクスプローラーでPSDのサムネイルとプレビューが可能になるツールです。
AdobeBridge使ってたけど、インストールしたらすぐ使えたので便利。プチストレスが解消されました。

ざっくり紹介でした。他にも見つけたら追記していきます！

デザインイメージをまとめる

毎日記事を書くのって大変ですね。 最初の投稿から一週間経っていました…

今日はゲーム開発が始まってUIデザインをする時に私がまずやっていることを記事にしようと思います。

※あくまで自己流なので間違っていたり、いい方法あればコメントで教えてください

デザインイメージの資料をかき集める

企画者の脳内にあるゲームのイメージをうまく引き出して、ターゲットユーザーに刺さるような世界観を一緒に考えます

そして、その世界観を具体的にUIパーツに落とし込めるようにするため、色んな本やサイトをみてかき集めます。

私がよくみるのがPinterest、Behance、ArtStationです

www.pinterest.jp www.artstation.com Behance

私の場合、キャラクターの設定画やコンセプトアートなどが既にあったのでアートからUIに落とし込んでいくことが多かったです。

PinterestもBehanceも自由にボードが作れるのでコレだけまとめたい！ ということができます。

私のPinterestのボードはこんな感じです www.pinterest.jp

いっぱいイケてる画像を集めてストックしていきましょう！

トーン＆マナー資料を作る

世界観が固まってきた所でゲーム全体の配色やフォントも決めていきましょう！

トンマナを作るうえでWEB業界の話ですがとても参考になるスライドを見つけました。

講演資料「クリエイターのためのトーン＆マナー設計について」（パソナテック主催セミナー） from Concent, Inc.

自分ひとりでゲームを作っている方ならあまりトンマナは必要ないかもしれません。 が、大体は大勢が関わっていると思うので同じデザイナー間での意識共有するためにもトンマナ資料を作ることはとても大事です！

ちなみに、私は上手く資料が作れなくてちょっと苦手です。

私が普段作るトンマナ資料はあとで作って貼っときます！

モチーフを決めてUIパーツに落とし込んでいく

デザインイメージのストックとトンマナができたところで、次はUIに落とし込めるようモチーフを決めていきます。 モチーフはゲームのキャラクターの見た目や、時代、温度感、どういう世界かを意識して考えると浮かびやすいです。

例えば・・・

鏡の中を自由に行き来できるゲームがコンセプトだとしたら

私「プリズムっぽいモチーフを使って光と影が乱反射している綺麗なデザインにしたいなぁ。」

↓PRISMってボードを作っていっぱいそういう画像をまとめる www.pinterest.jp

「よし、これでいこう！」

※モチーフやトンマナを決めていくと同時に、デザインにはトレンドがあるので常に最新のアプリをインストールして意識しておくことも大切です！

最近のゲームのUIってどんな感じかな？ ゲームUIブログ |

↑こちらのブログは常に最新のスクショが大量にストックされていて参考になります

雑な〆方になりますが、資料を集めてトーンイメージを作り、それに合わせたパーツ（ボタンや見出し等）を作ってそれをまたトンマナ資料に追加していきましょう！

そうすればどんどん自分のイメージがまとまってきてブレなくなってくるはずです。

※常にトンマナを最新に保ち、チームメンバーに共有するのをお忘れなく！ www.pinterest.jp

pin.it

おわり