基礎講座 - Webデザイン - CS2.jp

Fireworks 矢印の追加

矩形ツールの中で矢印はありますが、このような細い矢印を描く際の方法です。

１まず、ペンツールで線を描きます。

２メニューバーの「コマンド」⇒「クリエイティブ」⇒「矢印の追加」を選択します。

始点、または終点にチェックを入れ、OKをします。

完成です。

直線を描く

直線を描くには、ツールボックスの「ベクター」にあるラインツールをクリックして選択し、直線の始点から終点へドラッグします。描かれた直線はブラシカラー、プロパティインスペクタの設定の線の状態で描画されます。

描かれた直後の直線が青くなっている状態であれば、プロパティインスペクタで線の太さや画像効果をつけることができます。

拡大・縮小ツール

拡大縮小ツールは画像やテキストを大きくしたり、小さくしたりすることができます。
画像を選択肢、ドラッグすると拡大・縮小されます。

傾斜ツールは、画像やテキストを斜めにできます。

歪曲ツールは1点だけ形を変えたいときに最適です。

切り抜きツール

ここでは切り抜きツールについてです。

一枚の写真でも余白がいらなかったり、特定の部分だけをズームして載せたい時に切り抜きツールはとても有効です。

まずツールボックスの切り抜きツールを選択します。

切り抜くキャンパス範囲をドラッグします。
範囲はドラッグするか、プロパティインスペクタの幅と高さで指定できます。

ハンドルをドラッグして微調整を行い、ハンドル内をダブルクリックします。

切り取りができました。

プロパティインスペクタの「キャンパスをフィット」で画像に合わせてキャンパスがフィットされます。

WEBページの幅　最適なのは？

かつてはWEBページの幅は800ピクセルまでが基本とされてきましたが、現在では1024 * 768が定番となりつつあります。

ですが1024X768 モニタで、左側にお気に入りなどを表示した残りが、だいたい800 600 に相当します。
このことから、800 X 600 全画面表示のデザインでつくられているページが多いです。

ちなみに検索サイトの幅を見てみると、このようになっています。
Google 770px
Yahoo 950px
MSN 950px
BIGLOBE 950px
Infoseek　850px
Excite 920px

ユーザビリティを考えると、どんなウィンドウでも横スクロールバーが現れず、かつブラウザを広げたときにブラウザにあわせて見栄えが広がってくれるようなサイトが理想です。

ズームツールで拡大・縮小

ウィンドウ内の画像を拡大・縮小するには、ズームツールを使う方法とコマンドを使う方法があります。

ツールボックスのズームツールを選択します。拡大してみたいところをクリック、またはドラッグします。ドラッグした場合はドラッグした範囲が、クリックした場合は一段階、画面が拡大されます。

画面表示のショートカット
50％　　 Ctl ＋5
100% Ctl ＋1
200% Ctl ＋2
300% Ctl ＋3
400% Ctl ＋4
800% Ctl ＋8
6400% Ctl ＋6
ドキュメント全体　Ctl ＋0
選択オブジェクト　Ctl ＋　Alt＋　0

その他、「画面表示」メニューから「ズームイン」(Ctl ＋;)を選択して一段階拡大、「ズームアウト」(Ctl ＋-)を選択すると一段階縮小します。

連続してCtl ＋;キーやCtl ＋-キーを押すと素早く画像を拡大・縮小することができます。

新規作成

まず新規作成を選択しキャンパスを開きます。

数値を入力しキャンパスサイズを指定します。

Fireworksの画面構成

ここではファイヤーワークスの画面構成についてです。
各部分の名称をここで把握しておきましょう。

ツールボックスの詳細

※ソフトの型番によっては多少異なる場合があります。

IllustrarorとFireworksの違い

<イラストレーターとファイヤーワークスの主な違いについて>

・イラストレーター

絵を描く機能について特化しており、主には商業印刷物向けのデータを作成するために用いる。
同系のフォトショップは写真を加工するソフトで、これも主には額装写真を含めて印刷物向けのデータを作成するために用いる。

ホームページの制作においてこれらのソフトは、「ウェブデザイン」ではなくイラスト素材や写真素材などの「画像」をつくるための道具です。

・ファイヤーワークス
ホームページのデザインラフ画（客に見せるイメージサンプル）を作成するソフト。
ウェブデザインで考えられる主だった画像作成や写真の加工に対応し、CSシリーズならDreamweaverなどそのままホームページ作成ソフトに取り込める。

このソフトは純粋に「ウェブデザイン」をするソフトであり、使用素材の作成を含めて最初から最後まで単一のアプリケーションで作業するための機能が組み込まれれています。

要するに、イラストレータとフォトショップをホームページ関連でよく使う機能だけをかいつまんで組み込んでいると考えればおおむね合ってると思います。

Fireworks とは

Fireworksとは、Web上に配置するためのボタンやテクスチャ、イラストなど、様々な画像イメージを制作するためのアプリケーションです
作成ソフトはその他イラストレーターなどがある。

<ファイヤーワークスの特徴>

・軽くてきれい。最適な画像を選択できる
ホームページに配置する画像の形式はGIF形式とJPEG形式が主に使われます
ファイヤーワークスで作成・編集したイメージは、最終的にGIFやJPEG形式として書き出して使われますが、書き出す前にファイルサイズ(指定も可能)、色数や圧縮率、転送時間などをプレビューを見ながら自由に設定することができるので、ファイル容量と画像クオリティの背反条件から最適な条件の形式を見つけだすことができます

・オブジェクトで描画できる
ファイヤーワークスで作成される図形や配置されるビットマップ画像は、オブジェクトごとに操作が可能です。IllustrartorやFreeHandと同じようなオブジェクトの操作方法を採用しています。作成したオブジェクトを組み合わせて画像の塗りやブラシ(線)の設定、エフェクト(加工)を設定して画像を完成させます。

・簡単に高度な画像エフェクト(加工)ができる
描画したオブジェクトはプロパティインスペクタを使って、「ストローク」、「塗り」、「エフェクト」を短時間で適用できます。

料金について

９点パック

≫ 料金案内
≫ パーツ詳細はこちら

４点パック

≫ 料金案内
≫ パーツ詳細はこちら

トップページ全部パック

≫ 料金案内
≫ パーツ詳細はこちら

成約率の高いホームページをデザイン致します！
最高のクオリティで納得！満足！していただけるようご要望にお応えいたします。

お問い合わせ

≫ お問い合わせはこちら（24時間受付）

インプルーブデザインワークス
住所：〒861-8010 熊本県熊本市上南部3丁目32-10
代表：和田真徳
info@design-improve.com
電話：096-288-3124