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

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

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

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

長方形スライスを挿入

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

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

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

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

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

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

複数のスライスを一括作成

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

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

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

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

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

多角形スライスを挿入

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

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

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

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

スライスの書き出し

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

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

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

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

最適化パネル

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

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

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

ファイル保存ダイアログ

スポンサーリンク

特集記事

  • WordPress Image

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

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

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ