本投稿は TECOTEC Advent Calendar 2020 の24日目の記事です。
はじめまして！コンテンツ開発事業部にて、デザイナーをしている奈良原です。
普段からPhotoshopを使用した業務を行っているので、Photoshopについて書きたいなと思いました。
Photoshopって、便利ですよね。
写真加工からイラスト、アニメーション作成、グラフィックデザイン、UIデザインと多岐にわたったデザインが出来ます。
そんなPhotoshopですが職種によって使い方は様々で、人によっては触らない機能があったり、様々なことが出来る分、同じものを作るにしてもアプローチの仕方がいくつもあります。
それ故にデザイン業務をチームで行う場合、デザインデータの取扱いに障害が生まれやすかったりします。
従ってチームでは、デザインデータ作成にルールを設ける場合もあります。
今回、そのデザインデータ作成のルールとして、UIパーツ作成に活かせる使い方をひとつご紹介します！
これから紹介する内容はシンプルで、どんな状況でも柔軟なデータの取扱いが出来る様になると思います。
それでは、さっそく順を追って説明します！
1 UIパーツの作成は基本的にシェイプを活用する
Photoshopでパーツを作成する方法として様々なアプローチの方法がありますが、基本的に後からでも形状の編集が可能なシェイプを使って、パーツを作成します。
2 シェイプに塗りと線のアピアランス情報を持たせない
シェイプにアピアランスの線と塗りに何も設定を入れないことが重要になります。
3 1パーツに使うレイヤーは可能な限りひとつにする
このレイヤースタイルの機能はとても便利ですが、想像しているデザインをレイヤースタイルのみで再現するには、機能の内容と使い方を覚えなくてはなりません。
もちろん、デザインによっては複数レイヤーを使用しないと表現できないものもありますので、その際は複数のレイヤーを使用します。
またPhotoshopには、1レイヤーに使用したレイヤースタイルを、まとめた状態で登録する便利なスタイル登録の機能があります。
1パーツを1スタイルとして登録しておくと、使い回しがしやすく便利です。
4 まとめ
1の設定で後からも形状の調整が可能になり、
2～3の設定はレイヤースタイルのみを使用し、スタイル登録、レイヤースタイルのコピーで一括してデザインをコピーできる様になります。
UIパーツは開発の終盤でも、何度も修正や急遽新規パーツが必要になったり、臨機応変に対応するケースが多いです。
その際になるべくパーツ作成に時間を掛けない様に、細部まで調整が利きやすいデータの方が円滑に対応出来ると思います。
以上となります。
今回の内容は、Photoshopに興味はあるけれど、どうやってUIパーツを作成したら良いのかわからない方にも伝えたいなと思い、基本的なPhotoshopの機能のみを使用した使い方を紹介させて頂きました！
少しでも皆さまのお役に立てれば幸いです！
最後にもう12月24日ですし、Photoshopでケーキを描きました！
メリークリスマス！
Photoshopは、Adobe Systems Incorporated（アドビシステムズ社）の商標です
tecotec.co.jp
