作成した画像を分割して保存する方法(ガイド線×スライスツール)

記事で見たい方は下へスクロール▼

作成したWeb画像をクライアントに納品した時に

「画像を分割して送って欲しい」

と言われることがあります。

どういうことかというと、下のような感じです。

なぜこのような依頼があるかというと、

画像の容量が大きくて、アップロードできない

からです。

画像をアップする環境によっては、

アップロードできる画像の上限容量が決まっているところもあります。

そのため、このような依頼がイレギュラーとして起こる場合があります。

そのため、今回はそのような場合に使える

【ガイド線】【スライスツール】について説明していきます。

ガイド線

ガイド線とは

「折り目のような線」

という認識で大丈夫です。

ただ、このガイド線のよいところは、

作成・削除・移動ができるという点です。

作成したい場合は、「表示」→「新規ガイド」を選択します。

その後、

横線を入れたい場合は「水平方向」に、

縦線を入れたい場合は「垂直方向」にチェックを入れ、

入れたい位置情報を入力し、「ok」をクリックします。

※今回は「幅500px、高さ1000pxの画像を縦に4分割したい」

という想定で作業を進めていきます。

ガイド線が入ると、下画像のようになります。

この作業をガイド線を入れたい分繰り返すことで、

下画像のようになります。

ガイド線を入れ終わったら、

次はスライスツールを使っていきます。

スライスツール

スライスツールとは

パーツ分けと保存を効率化してくれる便利ツール

という認識で大丈夫です。

左のツールバーから、赤枠で囲ったものを選択します。

そうすると、上部のオプションバーに「ガイドに沿ってスライス」

という枠が表示されるので、こちらを選択します。

そうすると、下画像のように「01,02,03,04」と

ガイド線を境界線とした画像に番号がふられました。

後は保存をするだけです。

メニューバーから「ファイル」→「書き出し」→「Web用に保存」を選択します。

画質の形式やサイズを確認・選択後、

「保存」をクリックするだけです。

こちらのテクニックは人によっては使用頻度が高いものになるのですが、

個人的にはあまり優先度として高くないため、

「こんなやり方もあるんだな」くらいで、

必要になったら改めて記事を読み返してみるくらいでよいのかなと思います。