• ピコラボ08號

ゲーム開発者を目指す学生のためのPhotoshopクソコラ講座⑥ 切り抜き

コンニチハ。忘年会候補でせり鍋を逃して悔しいクソコラぶっ壊れ英語ロボ・ピコラボ08號デス。しゃぶしゃぶ食べ放題は強い。


今回は以下の3本立てでサクサク行きます。


  1. 切り抜き

  2. クリッピングマスク

  3. レイヤーマスク


……と言いたい所デスが、案の定最初だけでそこそこのボリュームになってしまいました。

今日は1の切り抜きだけデス。



切り抜き


選択範囲から画像の一部を切り出す機能デス。

コピーの取り回しが楽になります。


まず、↓のツールを使い、選択範囲を作ります。

  • 長方形選択ツール (M) / 楕円選択ツール(Shift + M)

  • なげなわツール(L) / 多角形選択ツール(Shift + L) / マグネット選択ツール(Shift + L)

  • オブジェクト選択ツール(W) / クイック選択ツール(Shift + W) / 自動選択ツール(Shift + W)


それぞれのツールはマウス左長押しで現れるランチャーか、ショートカットキーとShiftの同時押しで、隣合うツールと切り替わります。

いちいちランチャー選択するのは面倒なので、ショートカットキーを覚えましょう。


ツールで選択すると、波打つ点線で選択範囲が作られます。


選択するたびに前の選択範囲はリセットされますが、Shiftを押しながら選択すると現在の選択範囲に追加されます。

逆にAltを押しながらだと、不要な部分だけを選択範囲から削除されます。


選択範囲が作られた状態で「選択とマスク」を選ぶと、↑のような画面になります。

切り抜きたい物がはっきりしてるなら「被写体を選択」でもそこそこうまくいきます。


あとは選択したい箇所をクイック選択ツールで選んで行くだけ、簡単!


もっとも、コントラストが低い(暗い背景に黒いとか、明るい背景に白い線とか)だと、うまくSenseiが認識してくれないので、コントラストが高めの画像を使う方が良いデス。

大きくしたり小さくしたりして、チコチコ選択

コントラストが高い画像がないなら、諦めて頑張って調整しましょう。


サイズ調整はマウスホイールスクロール、表示部分の移動はSpaceキー押しながらドラッグデス。(そういえば移動はじめて出てきた)


できた!はい汚い!

コントラストがはっきりしていれば綺麗にできますが、今回のように輪郭の色味がはっきりしなかったり、解像度が低い画像の場合はSenseiは認識してくれないことが多いデス。


便利じゃねーじゃんと思うかもデスが、コントラストが高ければ本当優秀なんデスよ…。


大人しくなげなわツール(L)/ 多角形選択ツール(Shift + L)を使いましょう。

前よりマシ、そうやって学んでいくしかないのデス

多角形ツールだとカクカクになりますが、なげなわや選択範囲の調整をうまく使えない内はソッチのほうが早いし確実デス。



選択範囲を作った後


選択範囲を作った後は、移動ツール(V)で移動出来ます。


選択範囲のレイヤーを選択し、コピー(Ctrl + C)してペースト(Ctrl + V)すれば別レイヤーとして貼り付けできます。あるいはAlt + ドラッグ。


選択範囲のレイヤーを選択し、コピー(Ctrl + C)して新規作成(Ctrl + N)してペースト(Ctrl + V)し、背景削除してpngで保存(Ctrl + S)すれば、いつでも使える画像素材になります。


この2つのムーブは割と重要デス。

別のファイルに持ってこれます

使いまわしの効く素材を増やしておけば、他の企画書でも流用しやすいのでオススメ。


選択範囲をコピーして新しいファイルを作る時、新規ドキュメントウィンドウに「クリップボード」という項目が現れるので、それを選択するとピッタリのサイズのファイルが作れます。貼り付けるだけ。

クリップボードが出ない時はミスってマス。



あと、切り抜いた後の画像は、違う色の背景の上に置いてみましょう。

背景の色が分からない状態だと抜ききれていない部分が含まれている可能性があります。


クリップボードのサイズが明らかに画像より大きい時とかも。



さすがに透過やjpegとpngの違いは説明しなくても良いよね…?

  • ゲームの絵素材は透過png(背景を消して保存形式:png)

  • ゲーム画面は無透過png(透明になってる箇所をなくして保存形式:png)

  • ゲームでjpegはまず使わない。

とりあえずこう覚えといてください。(jpegは写真と細かなグラデーションのある絵に使う)


近未来、Adobe Senseiが賢くなればオブジェクト選択ツール一択になるかもしれませんが、現状は過渡期なので選択範囲を作る能力は必要になります。

(オブジェクト選択ツールは最新のCC 2020で使えるようになるので、無い人はアップデートするか他のツールを使いましょう)



まとめ

  • 切り抜きは覚えよう。Photoshopの技術の半分は切り抜きとマスク。

  • 表示部分の移動はSpaceキー押しながらドラッグ。

  • 選択範囲のレイヤーを選択し、コピー(Ctrl + C)してペースト(Ctrl + V)すれば別レイヤーとして貼り付け。あるいはAlt + ドラッグ。

  • 選択範囲のレイヤーを選択し、コピー(Ctrl + C)して新規作成(Ctrl + N)してペースト(Ctrl + V)し、背景削除してpngで保存(Ctrl + S)すれば、いつでも使える画像素材が作れる。


次回やるマスク系を覚えればもっと楽できます。乞うご期待。

©株式会社ピコラ Picola Inc.