Photoshopを使用したUIパーツ作成について

本投稿は TECOTEC Advent Calendar 2020 の24日目の記事です。

はじめまして!コンテンツ開発事業部にて、デザイナーをしている奈良原です。
普段からPhotoshopを使用した業務を行っているので、Photoshopについて書きたいなと思いました。

Photoshopって、便利ですよね。
写真加工からイラスト、アニメーション作成、グラフィックデザイン、UIデザインと多岐にわたったデザインが出来ます。
そんなPhotoshopですが職種によって使い方は様々で、人によっては触らない機能があったり、様々なことが出来る分、同じものを作るにしてもアプローチの仕方がいくつもあります。
それ故にデザイン業務をチームで行う場合、デザインデータの取扱いに障害が生まれやすかったりします。
従ってチームでは、デザインデータ作成にルールを設ける場合もあります。

今回、そのデザインデータ作成のルールとして、UIパーツ作成に活かせる使い方をひとつご紹介します!
これから紹介する内容はシンプルで、どんな状況でも柔軟なデータの取扱いが出来る様になると思います。

それでは、さっそく順を追って説明します!



1 UIパーツの作成は基本的にシェイプを活用する


f:id:teco_7hara:20201207133720p:plain
シェイプツール
UIパーツを作成する上で、シェイプは頻繁に扱われる程、UIパーツ作成と相性が良い機能のひとつです。
Photoshopでパーツを作成する方法として様々なアプローチの方法がありますが、基本的に後からでも形状の編集が可能なシェイプを使って、パーツを作成します。

f:id:teco_7hara:20201207134158p:plain
塗りつぶしレイヤー
またモーダルウィンドウの背面等に使用されるオーバーレイや、画面を構成する素材は可能な限り、シェイプ塗りつぶしレイヤーを使用します。

2 シェイプに塗りと線のアピアランス情報を持たせない


f:id:teco_7hara:20201207141051p:plain
アピアランス設定
今回紹介するルールでは、シェイプの機能をフル活用しません。
シェイプにアピアランスの線と塗りに何も設定を入れないことが重要になります。

3 1パーツに使うレイヤーは可能な限りひとつにする


f:id:teco_7hara:20201207172118p:plain
レイヤー構成
ボタンパーツ等のデザインをする際に、複数レイヤーを使用して作成する方法と、レイヤーひとつにまとめて作成する方法がありますが、基本的にはひとつのレイヤーでデザイン出来る内容なら、ひとつにまとめます。

f:id:teco_7hara:20201207173049p:plain
スタイルパネル
ひとつのレイヤーにまとめようとすると、必然的にレイヤースタイルを使用することになります。
このレイヤースタイルの機能はとても便利ですが、想像しているデザインをレイヤースタイルのみで再現するには、機能の内容と使い方を覚えなくてはなりません。
もちろん、デザインによっては複数レイヤーを使用しないと表現できないものもありますので、その際は複数のレイヤーを使用します。

またPhotoshopには、1レイヤーに使用したレイヤースタイルを、まとめた状態で登録する便利なスタイル登録の機能があります。
1パーツを1スタイルとして登録しておくと、使い回しがしやすく便利です。

4 まとめ


1の設定で後からも形状の調整が可能になり、
2~3の設定はレイヤースタイルのみを使用し、スタイル登録レイヤースタイルのコピーで一括してデザインをコピーできる様になります。

UIパーツは開発の終盤でも、何度も修正や急遽新規パーツが必要になったり、臨機応変に対応するケースが多いです。
その際になるべくパーツ作成に時間を掛けない様に、細部まで調整が利きやすいデータの方が円滑に対応出来ると思います。

以上となります。
今回の内容は、Photoshopに興味はあるけれど、どうやってUIパーツを作成したら良いのかわからない方にも伝えたいなと思い、基本的なPhotoshopの機能のみを使用した使い方を紹介させて頂きました!
少しでも皆さまのお役に立てれば幸いです!



最後にもう12月24日ですし、Photoshopでケーキを描きました!

f:id:teco_7hara:20201207190230p:plain
メリークリスマス!

Photoshopは、Adobe Systems Incorporated(アドビシステムズ社)の商標です

tecotec.co.jp