閉じる

1枚の画像を分割して保存できるIllustratorのスライス機能の使い方

IllustratorにはWeb用の画像として1枚の画像を複数に分割するスライス機能があります。また、分割した画像は書き出すこともできるので、今回の記事ではスライス機能について詳しく解説します。

カテゴリ: Illustrator

本記事では、Illustratorのスライス機能の使い方について詳しく解説します。

スライスとは

スライスとは、Web用の画像として1枚の画像を複数に分割する機能のことです。Illustratorには、スライスツール、スライス分割ツール、オブジェクトメニューのスライスなど、スライスを行える機能が搭載されています。

スライスの作成方法

スライスの作成には、主に以下の4つの方法があります。詳しく見ていきましょう。

スライスツールでスライスを作成する方法

1.スライスツールを選択する

画面左側にあるツールバーからスライスツールを選択します。

スライスツールがツールバーに見当たらない場合は、ツールバー下部にある「ツールバーを編集…」という三点リーダーのアイコンをクリックします。このアイコンをクリックして表示されるツール一覧にスライスツールとスライス選択ツールがありますので、ツールバーにドラック&ドロップしておきましょう。

2.スライスツールでスライスする範囲を選択

スライスツールで、スライスする範囲を選択すると、上の画像のようにアートボードが分割されスライスが作成されます。

オブジェクトからスライスする方法

1.オブジェクトを選択

スライスの基準となるオブジェクトをあらかじめ選択しておきます。

2.メニューバーから「スライス」の「作成」を選択

画面上部にあるメニュバーからオブジェクトをクリックし、表示されるメニュー項目の中から「スライス」にある「作成」を選択します。

上の画像のようにオブジェクトのサイズに合わせたスライスが作成されました。

ガイドラインからスライスする方法

1.ガイドラインを作成する

ガイドラインをあらかじめ作成しておきます。

2.メニューバーから「スライス」の「ガイドから作成」を選択

画面上部にあるメニュバーからオブジェクトをクリックし、表示されるメニュー項目の中から「スライス」にある「ガイドから作成」を選択します。

上の画像のようにガイドラインを基にしたスライスが作成されました。

選択範囲からスライスを作成する方法

1.スライスしたいオブジェクトの範囲を選択する

上の画像は、複数のオブジェクトが組み合わさった画像です。このように、複数のオブジェクトが組み合わさった画像をまとめてスライスしたい場合は、選択範囲からスライスを作成します。スライスしたいオブジェクトの範囲をあらかじめ選択しておきましょう。

2.メニューバーから「スライス」の「選択範囲から作成」を選択

画面上部にあるメニュバーからオブジェクトをクリックし、表示されるメニュー項目の中から「スライス」にある「選択範囲から作成」を選択します。

上の画像のように選択範囲を基にしたスライスが作成されました。

スライス分割ツールの使い方

作成したスライスを後から調整するには、スライス分割ツールを用います。詳しく見ていきましょう。

1.ツールバーからスライス分割ツールを選択

画面左側にあるツールバーからスライス分割ツールを選択します。

2.スライス分割ツールで、スライスの分割を調整する

上の動画のようにスライス分割ツールを使って、スライスの分割を調整することができます。

スライスの書き出し

webデザインで用いるツールは、Adobe XDやFigmaといったUI/UXデザインやプロトタイピングも行えるデザインツールを用いることが主流となってきているのですが、デザイナーの中にはIllustratorを使ってWebデザインを行う人もいます。

ここでは、架空のサイトのデザインカンプから、実際にWebで用いる画像をスライスして書き出す方法を説明します。

1.スライスを作成する

illustratorでWebデザインのカンプ(完成見本)を作成します。

全てのグループを解除した状態で、すべてのオブジェクトを選択し、スライスを作成します。

2.メニューバーから「Web用に保存(従来)…」を選択

画面上部にあるメニュバーからファイルをクリックし、表示されるメニュー項目の中から「書き出し」にある「Web用に保存(従来)…」を選択します。

「Web用に保存(従来)…」の設定パネルで、書き出すスライス画像のファイル形式や画質を設定します。パネル右側下部に、書き出すスライスを設定する項目があるので、これも最適なものを選択します。ここでは「すべてのスライス」を書き出します。

各項目の設定が終わったらパネル右下にある「保存」ボタンをクリックします。

上の画像のように「image」 というフォルダが作成されて、その中に全てのスライスが書き出されました。

まとめ

スライスツールをはじめとしたスライス機能をを使えるようになると、Illustratorを用いてWeb用の画像制作を行うことも可能になります。

これからデザインを学ぶ人は、メインのWebデザインツールとしてIllustratorを用いることはあまりないと思いますが、Web用の素材を作成したり古いサイトのデザインを流用する際などに非常に役立つ機能なので覚えておきましょう。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。