Tipsカテゴリー

Adobe Fireworksでのスライス作成方法

公開日：2014年4月4日
最終更新日：2014年4月30日

Webページに画像を組み込むには、画像編集ソフトで制作したデザインからそれぞれの画像をパーツとして切り出さなければなりません。その切り出すエリアのことを「スライス」と呼びますが、Adobe Fireworksにおけるスライスの基本的な作成方法を解説します。

Webページで使う画像を制作するAdobeのソフトは、Photoshop、Illustrator、Fireworksの３つがあります。
それぞれ特徴を持っているソフトですが、FireworksはもともとWebデザイン用に開発されたソフトですので、スライスも簡単に作成することができます。

【記事執筆時の確認環境】
Windows 7 Professional 32bit SP1
Adobe Fireworks CS6

長方形スライスは基本となるスライスとなります。
切り出したいオブジェクトの上で右クリックし、[長方形スライスを挿入]を選択します。

長方形スライスを挿入するメニュー

選択したオブジェクトの形に沿って長方形スライスが作成されます。

長方形スライスが作成された画面

オブジェクトにドロップシャドウなどの効果が付いている場合は、効果の分も含めたサイズでスライスを作成してくれます。

ドロップシャドウオブジェクトのスライス作成画面

複数のオブジェクトに対して一括してスライスを作成したい場合は、以下のようにします。

複数のオブジェクトを選択した状態で右クリックし、[長方形スライスを挿入]を選択します。
すると下記のダイアログが表示されますので、[複数]をクリックします。

複数オブジェクトのスライス作成ダイアログ

オブジェクトごとのスライスが一括して作成されます。

複数オブジェクトのスライスが作成された画面

長方形以外の複雑な形のスライスを作成したい場合は、
オブジェクトの上で右クリックし、[多角形スライスを挿入]を選択します。

下図のように多角形スライスが作成されます。

多角形スライスが作成された画面

なお、多角形スライスの主な用途は、クリッカブルマップ(イメージマップ)を利用する時です。

カンバス上かレイヤーパネルで書き出すスライスを選択します。
複数選択するにはCtrlキーを押しながらクリックします。

また、書き出す際のファイル名を指定したい場合は、レイヤーパネルのスライス名を変更します。ここでは、image1とimage2に変更しています。

書き出すスライスを選択したレイヤーパネル

最適化パネルで、書き出すファイル形式を設定します。

最適化パネル

オブジェクトの上で右クリックし、[選択したスライスの書き出し]を選択します。

選択したスライスの書き出しメニュー

書き出しダイアログが現れますので、下図のように設定して、[保存]ボタンをクリックします。

ファイル保存ダイアログ

WordPress の基礎から応用まで

Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
jQuery Mobile を基本から覚える

スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。