PhotoShop

コーダーが最低限覚えておくべきPhotoShopの使い方

みなさんこんにちは、運営のAdobe神(@taipei_freedom)です!

過去のたいペー
過去のたいペー
コーダーはPhotoShop使えないといけないの?

今回はこのようなお悩みにお答えしていきます。

結論から言うとコーダーとして仕事をしていく上では最低限、PhotoShopは使える必要があります。

今回の記事では最低限使えるべき機能とその使い方を解説していきます。

この記事の内容

・コーダーが使えるべき最低限の機能
・その使い方

前提として下記のようなコーダーを想定しています。

・自分でデザインはしない
・デザイン内の細かい修正は他のデザイナーがしてくれる
・画像は自分で書き出す必要がある

コーダーが使えるべきPhotoShopの機能

結論から下記の機能です

・書き出し
・スライス
・レイヤー結合
・数値取得
photoshop 使い方

今回はこちらのデータを使いながらそれぞれ方法を解説していきます。

書き出し①

まずは画像の書き出し方法を解説していきます。

2パターンやり方を説明しますのでやりやすい方で書き出していってください。

photoshopコーダーが最低限使えるべき機能

「ファイル→生成→画像アセット」をクリック

photoshopコーダーが最低限使えるべき機能②画像のレイヤーの名前の最後に好きな拡張子をつける

adobe神
adobe神
最近ではjpgかpngが主流じゃ!

これだけで元々PhotoShopのデータがあったフォルダ内に画像が書き出されていきます。

書き出し②

photoshopコーダーが最低限使えるべき機能

①書き出したい画像のレイヤー上で右クリック

「PNGとしてクイック書き出し」orその下の「書き出し形式」をクリック

③保存先や保存名を設定

こうすることで指定した通りに書き出すことができます。

レイヤーの結合

レイヤーの結合は複数のレイヤーを1つの画像として書き出したい時に使えます。

photoshopコーダーが最低限使えるべき機能 スライスツール

command(ctrl)を押しながら結合したいレイヤーを選択します。

photoshopコーダーが最低限使えるべき機能 スライスツール

②3つを選択した状態で右クリックをし、「レイヤーを結合」を選択します。

photoshopコーダーが最低限使えるべき機能 スライスツール

上記画像のように1つにまとまりました。

スライス

次はスライスという書き出し方法です。

スライスは

・レイヤーが分かれすぎてて全てのレイヤーを結合するのは大変すぎる!
・書き出し要素の周りの空白も含めて書き出したい

このような時に使える手法です。

photoshopコーダーが最低限使えるべき機能 スライスツール

「スライスツール」を選択

photoshopコーダーが最低限使えるべき機能 スライスツール

②書き出したい範囲を選択(背景も含め、書き出されます。)

photoshopコーダーが最低限使えるべき機能 スライスツール

③「ファイル」→「書き出し」→「Web用に保存(従来)」を選択

photoshopコーダーが最低限使えるべき機能 スライスツール

④保存情報を入力

ここで

・ファイル名
・保存先
・保存形式
・保存サイズ

などの設定を行なっていきます。

最後に「完了」を押せば保存終了です。

数値取得①

photoshopコーダーが最低限使えるべき機能 スライスツール

デザイン通りのコーディングを行なっていく際にはこちらは必須になってきます。

画面端からの距離や他の要素との距離の関係などを数値として取得できます。

やり方は簡単で「command(ctrl)」を押しながら各要素にカーソルを合わせるだけです。

上記の画像のように数値情報が出てきます。

数値取得②

コーディングをしていると数値取得①では取得できない場合も出てきます。

そんな時にこちらの方法を使います。

photoshopコーダーが最低限使えるべき機能 物差しツール

①「ものさしツール」を選択

photoshopコーダーが最低限使えるべき機能 物差しツール

②長さを知りたい場所でドラッグアンドドロップで線を引く

この際、「shift」を押しながらドラッグアンドドロップすると真っ直ぐな線を引くことができます。

その線の長さが上記画像内の上の方の赤枠のところに数値情報が出てきます。

まとめ

コーダーが覚えておくべき最低限の機能は下記の4つ!

・書き出し
・スライス
・レイヤー結合
・数値取得

コーダーは他の機能も使えると強いですが、まずはこれらの機能をしっかり覚えましょう!

PremiereProを使ってYouTube編集のするための全て【素材サイトから編集順まで!】みなさんこんにちは運営のAdobe神(@taipei_freedom)です。 今回はこのようなお悩みを解決していきます。 ...
ABOUT ME
アドビ神
自身がadobeのスキルを取得するのに苦労したためこのサイトの作成を決意。 読者の皆様のadobe学習の効率化を目指します。