Photoshop から、画像を切り出す方法には、2つの方法がある。
スライス作業は、ほとんどの場合、複数回にわけて行う。
Photoshop CCの画像を書き出す2通りの方法
１．スライス機能を使った書き出し。
２．画像アセット機能を使った自動書き出し。
１．スライス機能を使った書き出し
1. スライスツールとは？
１枚の画像を任意の大きさに分割するツール。
2. スライスツールの使い方
１．ツールバーの切り抜きツールに隠れているスライスツールを選択。
２．画像を選択
スライスすると、スライスライン（青や茶色の線）が表示される。
- 茶色の線
現在選択中。 - スライスした画像
左上に番号が自動に割り当てられ、表示される。 - 自動的にできたスライス部分
左上角に灰色のラベルが表示される。 - ユーザー定義スライス
自分で指定したスライス。
3. スライスのサイズを数値指定する。
（ユーザー定義スライスの場合）
微妙にずれたスライスを修正する。
１．スライス選択ツール
で画像の内側をダブルクリックする。
２．スライスオプションダイアログが表示される。
高さ、幅、位置を任意に指定する。
スライス機能を使った書き出しの2種類のスライスの作成方法 | KI-Web Design２．画像アセット機能を使った自動書き出し
１．PSD ファイルからの画像アセットの生成
「画像アセット機能を使った自動書き出し」を使うメリット。
- マルチデバイス Web デザインで役立つ。
- スライス作業から解放される。
PSD ファイルのレイヤーまたはレイヤーグループ
↓
JPEG、PNG または GIF 画像アセット サポートされている画像形式の拡張子をレイヤー名またはレイヤーグループ名に追加すると、アセットが自動的に生成されます。
※ 生成される画像アセットの画質およびサイズパラメーターを指定することもできまる。
２．レイヤーまたはレイヤーグループからの画像アセットの生成
１．[ファイル]→[生成]→[画像アセット]を選択。
２．画像アセットを生成するレイヤーまたはレイヤーグループの名前に適切なファイル形式の拡張子（.jpg、png または .gif）を追加する。
※ 特殊文字の : および * はレイヤー名には使用できない。
この記事を読んだ人はこんな記事にもご興味があるかも
2016-12-24 スライス機能を使った書き出しの2種類のスライスの作成方法
2016-12-09 スライスする前に考えておくべきこと
2017-10-04 Free Responsive Web PSD Template Web Site![[ JavaScript ] 変数](https://i0.wp.com/webdesign.ki-blog.biz/files/JavaScript変数.png?resize=150%2C150)
2020-06-06 [ JavaScript ] 変数
2017-08-24 [ CSS ] CSSのリセット
2016-06-02 HTML文書の基本構造
(Visited 287 times, 1 visits today)
固定ページ: 1 2