Photoshopの画像保存の方法色々ありませんか、、？画像の保存方法についてのまとめてみました！

最近Photoshopを使い始めたエンジニアです。
そこで画像保存をよく利用するようになったんですけど、Photoshopでの画像保存の仕方色々ありませんか、、？？
そこで今回は保存の仕方についてまとめてみました。

# 目次
* [まずPhotoshopの画像保存の方法って何があるの？？](#まずphotoshopの画像保存の方法って何があるの)
* [書き出し](#書き出し)
    * [書き出し形式](#書き出し形式)
    * [クイック書き出し](#クイック書き出し)
    * [Web用に保存（従来）](#web用に保存（従来）)
* [生成](#生成)
    *  [画像アセットの抽出](#画像アセットの抽出)
* [保存](#保存)
    * [保存](#保存)
    * [別名で保存](#別名で保存)
    * [コピーを保存](#コピーを保存)
* [最後に](#最後に)

### まずPhotoshopの画像保存の方法って何があるの？？
Photoshopの画像保存の方法は以下7個あります。
* 書き出し
    * 書き出し形式
    * クイック書き出し
    * Web用に保存（従来）
* 生成
    * 画像アセットの抽出
* 保存
    * 保存
    * 別名で保存
    * コピーを保存

それぞれの使い方の違いについて説明して行きます！！
## 書き出し
書き出しで画像保存する方法は以下の3つあります。
それぞれの何が違うのか説明します。
* 書き出し形式
* クイック書き出し
* Web用に保存（従来）
![スクリーンショット 2023-10-01 21.38.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524155/bb0e036e-4a1f-fe4a-5f02-e0c8c5b552ec.png)

### 書き出し形式
保存時のファイル形式の選択や画像サイズなどを指定できます。
![スクリーンショット 2023-10-01 22.17.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524155/3555eecc-52e3-5aa9-4aa1-1b13c9a33f1d.png)
`「ファイル」→「書き出し」→「書き出し形式」`より実行可能です。
![スクリーンショット 2023-10-01 22.28.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524155/17a3d723-82ef-b90e-c18f-604a45bba399.png)

### クイック書き出し
**「書き出しのファイル形式の設定を保存しておけます。」**

上記で説明した「書き出し形式」を、保存した設定を使って実行することが可能です！
書き出すまでの工程が少ないため、素早く画像を書き出すことができます。
`「ファイル」→「書き出し」→「◯◯として書き出し」`より実行できます。
ファイル形式の書き出し設定はメニューバーより`「Photoshop」→「環境設定」→「書き出し」`より指定できます。
![スクリーンショット 2023-10-01 21.47.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524155/c8df961a-ca63-a9a1-6348-f1f5c7662f23.png)
※(画像はPNGとして書き出し設定をしています。)

### Web用に保存（従来）
`［ファイル］→［書き出し］→［Web用に保存（従来）］`で実行できます。
画質の設定や最適化等の設定を詳細に行うことができます。アニメGIF、スライスの書き出しができることが特徴です。
![スクリーンショット 2023-10-01 22.30.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524155/233aa7a4-de10-0d81-f570-df7ef2b48f26.png)


## 生成

### 画像アセットの抽出

**レイヤーに更新がある度に、自動で画像が書き出される機能。**

メニューバーの`［ファイル］→［生成］→［画像アセット］`を選択することで有効化できます。
レイヤー名に.png等の名前を指定することで、自動に画像が書き出されるため、もっとも手間がかからない書き出し方法です。

![スクリーンショット 2023-10-01 22.37.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524155/38bd20ef-1565-d1b0-b37a-493c4a78d3a3.png)


## 保存
保存の方法が以下の３つ種類があります。
* 保存
* 別名で保存
* コピーを保存
それぞれ保存の保存の仕方が違いますので説明していきます！
### 保存
![スクリーンショット 2023-10-01 22.49.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524155/4b7a9ee5-4088-64c0-1f4b-bb1664500040.png)

### 別名で保存

**フォーマットを指定して保存します。この方法ではウェブ用途以外のファイル形式も選べます。**

<img width="400" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524155/04222f0e-be80-4127-201d-5cf4b37ecb49.png">
<img width="200" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524155/76c6f94a-bc4d-3a46-4f79-4c3d00736aa1.png">

### コピーを保存
「別名で保存」と「コピーを保存」では保存できるファイル形式が微妙違います。

<img width="400" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524155/9b250c7f-d31a-c85e-2039-4dc8f5b8587a.png">
<img width="250" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524155/4b5e2c51-259b-0572-f721-79004e4a0612.png">

## 最後に
以上となります！
それぞれの違いを覚えて、効率よく最適な画像作成をしていきたいです！！！