第1回エンジニア向けフォトショップ勉強会

サブタイトルは「エンジニアでもそこそこのスクショを作れるようになろう!」です ( ¨̮ )

この記事では「アプリを申請する際のスクショをエンジニアが作れること」をゴールとします!
勉強会とは言いつつ、どこかで開催したわけではありませんがww
エンジニアでもこのくらい使えたら良いよねってレベル感でまとめてる感じです。
もしデザイナーさんが見ていたら「こうした方が便利だぞクソが」と思う事が多々あると思いますので、その際はコメント欄にて教えていただけると助かります m(_ _)m

ではさっそく作っていきます!

まずはカンバスを作る

このカンバスというのは作業する際の台座みたいなものです。
この上で画像を置いたり、文字を入れたりします。
iOSエンジニアの方は、カンバス = UIViewController と思ってください。

カンバスは「ファイル → 新規」で新規作成できます。(ショートカットは command + ‘)
その際、カンバスの初期設定を入力するポップアップが表示されます。
最終的に画像として書き出す際、カンバスのサイズで書き出されるので、ここの設定は大切です。
なので、スクショのサイズでカンバスを作成します。

縦スクショ 横スクショ
5.5インチ 1242 x 2208 px 2208 x 1242 px
6.5インチ 1242 x 2688 px 2688 x 1242 px
12.9インチ 2048 x 2732 px 2732 x 2048 px

今回は、6.5インチサイズの縦スクショを作ろうと思うので、
幅:1242px 、高さ:2688px 、カンバスカラー:白 で設定します。(スクショは透過NG)

ガイドを作る

ここはアイコンとかあるので、画像内で説明します。
PhotoShop のバージョンが変わっても頑張れば探せる…はず!w






Storyboard でオブジェクトをドラッグしているとき、View の真ん中や端にきたら磁石みたいに自動で移動しますよね?
それと同じ効果が得られます (*‘ω‘*)

ここまで出来たら、ナビゲーションバーから「表示 → ガイドをロック」を選択します。
そうすると、ガイドが選択できなくなり作業がしやすくなります。
これでひとまずガイド作成は終了です!

次回は実際にオブジェクトを配置してみたいと思います!

コメント