webgonia

フォトショップ でウェブサイトの素材をスライスする方法

フォトショップ でウェブサイトの素材をスライスする方法

ウェブサイトのデザインカンプやサイト使う素材をフォトショップで1つづつ保存していたら時間がかかってしかたないですね。

そんなときに便利な「スライス」を覚えておきましょう、HTML&CSSでウェブサイトをマークアップするため画像を切り出していく時にも使えます。

ウェブ素材をスライスしよう

作業的にはイメージとして保存したい画像領域をガイドで囲って「スライスツール」で切り出します、今回はサイトのロゴを切り出してみます。

1.定規を用意する

スライスするために画像領域をガイドで囲むために「定規」を表示させます、メニューから「表示」→「定規」を選択して表示させます。

定規2.スライスする部分をガイドでかこう

切り取りたい範囲をガイドでかこえたら「トリミングツール」を長押しして「スライスツール」に切り替えておきます。
スライスロゴ3.ガイド線に沿ってスライスしてみよう

スライスツールに切り替えれたらガイド線に沿ってスライスします、切り取りが終わったら下の画像のようになっているか確認してください。

スライスロゴ選択範囲4.ウェブパーツ用に保存しておこう

ガイド線をスライスできたかを確認したらメニューから「ファイル」→「Webおよびデバイス用に保存」または「Shift+Ctrl+Alt+S」のショートカットキーで画像の書き出しをおこないます。

スライスロゴweb用に保存5.スライスされた画像フォルダを確認しよう

スライスされた画像を保存したら「imagesフォルダ」が自動で生成されてスライスした画像が保存されるのでウェブパーツとして使っていきましょう。

スライスロゴフォルダこれでウェブパーツに書き出すことができました、次に複数のウェブ素材をスライスする方法も確認しておきましょう。

複数のウェブ素材をスライスする

見出しやメニューなどのウェブ素材をスライスする場合1つづつスライスしていくなんて時間がもったいないので、ガイドで一気にかこんでしまってスライスしていきます。
複数スライス先程と同じようにほしいウェブ素材をスライスしたい部分をガイドでかこんで「スライスツール」にもちかえたらスライスしていきます。
複数スライス選択範囲ガイド線をスライスできたかを確認したらメニューから「ファイル」→「Webおよびデバイス用に保存」または「Shift+Ctrl+Alt+S」のショートカットキーで画像の書き出しをおこないます。
スライス複数web用に保存スライスされた画像を保存したら「imagesフォルダ」が自動で生成されてスライスした画像が全てがウェブ素材として保存されます。
スライスフォルダ複数HTML&CSSで使う素材をこのフォルダにスライスしておくとマークアップするときに便利なので覚えておきましょう。

フォトショップ でウェブサイトの素材をスライスする方法は以上になります。

最後までお読みいただきありがとうございます。

Return Top