Fireworks で簡単にハートの絵を書く方法を記載します。
]]> 1.まず楕円ツールを選択して円を書きます。
2. 円を書く際は、「Shift」キーを押しながらドラッグしていくと、正確な円を書くことが可能です。
3. 「ペンツール」をクリックします。
4.ペンツールをクリックすると、アンカーポイントが円に表示されますので、下部にあるアンカーポイントをクリックします。
5.今度はダイレクト選択ツールをクリックし、以下の画像のように Alt キーを押しながらアンカーポイントを上げていきます。その際、グリッドを表示させておくと、左右対称に作りやすくなります。
6. 両方のアンカーポイントを上に上げた状態。
7. 以下の画像のように、上部真ん中のアンカーポイントを下に下げて行きます。
8. ハートの完成です。
Fireworks の使い方で、今回は左の写真のような、Web 2.0 風？の画像の作成方法を説明します。
]]> こちらの写真は、当サイトをキャプチャーして、Fireworks にて加工したもの。
Fireworks では、簡単な操作でこのような画像も作れますので、ぜひお試し下さいませ。
まず、画面をキャプチャーしてきて、Fireworks に貼り付けます。
こちらの画像は、当サイトの画面をキャプチャーして貼り付け、サイズを300pxに縮小しました。
次に、画像を選択した状態で、傾斜ツールをクリックします。
画像は上記写真のような形で、黒い枠に囲まれます。
続いて任意の形に画像を変形させていきます。
最初慣れが必要ですが、慣れると思うとおりの画像が作れると思います。
上記のように形をずらしていくと、以下の画像に仕上がります。
様々な Web Site でこのような画像を見かけますよね＾＾
続きまして出来上がった画像をコピー＆貼り付けを行い、当初画像の下に移動します。
このままですと、形がおかしいですので、こちらも傾斜ツールにて画像の形をそろえます。
綺麗に画像がそろいました。
次に『コマンド』→『クリエイティブ』→『イメージのフェード』を選択します。
こちらの画面で、右上の画像(上から下にかけて透明になっていく)を選択し、『OK』をクリックします。
以下の状態が出来上がります。
この画像の状態で縦に伸びた棒を移動させることで、影の分量を調整します。
今回調整したのは以下のような形です。
最後に『キャンパスをフィット』をクリックして完成です。
簡単に出来ますので、ぜひ試してみてくださいませ。
]]>
【線形】
【放射】
【四角】
【円錐】
【輪郭】
【サテン】
【つまむ】
【褶曲】
【楕円】
【バー】
【波紋】
【波動】
Fireworks では、このような形で様々なグラデーションを簡単に作成することができます。
また、ここで掲載した画像は、単純に各グラデーションを選択した場合に出来上がる画像で、ここから様々なグラデーション画像に修正を加えていくことが多いです。
簡単な操作で面白いグラデーション画像を作成できますので、色々と試してみてみると面白いです。
ちなみに私は【サテングラデーション】がひそかに気に入っておりまして、ボタンを作成する際に利用する事が多いです＾＾
このサイトのヘッダー部分の背景もサテングラデーションですし、高級感を出したいのであればこんなボタンも作成することが可能です。
ぜひ、色々と試してみてくださいませ。]]>
]]>
上記のようにグラデーションボタンを作成するための元ネタを製作します。
最初は少し大きめのサイズで製作し、完成後に実際に利用する為のサイズに変換するのが宜しいかと思います。
続いて上記画像のように対象画像を選択し、プロパティインスペクタ内にあるグラデーションを選択します。
今回は、線形を選んでみます。
このようなグリーンと白のグラデーションボタンが出来上がりました。
ただ、このままですと少し素人っぽい感じもしますので、別の色を使ってみます。
画像を選択した状態で、プロパティインスペクタ内にある塗りのカラー部分をクリックします。
白の部分を『#00B000』に変更してみました。
これだけでちょっと良い感じのグラデーションボタンが出来ます。
こちら完成画像。
ping 形式のままアップしていますので、Fireworks をお持ちの方、宜しければご利用下さいませ。
]]>
パネルグループをドッキングするには
パネルグリップをパネル格納領域にドラッグします。
パネルをパネル格納領域にドラッグすると、配置される場所を示すラインまたは四角が表示されるので、格納するパネルグループを確認できます。
パネルグループを折りたたむ
パネルグループまたはパネルのタイトルをクリックします。
パネルグループの左上隅にある矢印をクリックしても同じように折りたたまれたり開かれたりします。
]]>
拡張子 |
ファイル形式 |
ファイルの説明 |
| .ai、.art | Illustrator | Adobe Illustrator の標準ファイル形式。 |
| .bmp | BMP | Windows や OS/2 で標準となっているビットマップファイル形式。 |
| .eps | EPS | ベクターオブジェクトのファイルとして使われるファイル形式。 ベクトルデータとビットマップデータの両方を含むことができ、ベクトルデータのみを含むEPSファイルは画像を拡大しても画質が落ちることはないが、ビットマップデータを含むEPSファイルに関しては、画像を拡大するとビットマップ部分の画質が落ちます。 |
| .ft | FreeHand | Macromedia FreeHand7～10の標準ファイル形式。 |
| .gif | GIF | インターネット用の画像として使われることが多い画像形式で、非常に高い圧縮率を持つ。サイズが小さいのでカラーをあまり使わないボタンやラインなどに多く使われます。 |
| .htm、.html | HTML | ホームページに表示される HTML 形式のファイル。 |
| .jpg | JPEG | インターネット用の写真画像として使われることが多い画像形式で、高い圧縮率を持ちます。インターネット上の写真画像の多くはこのファイル形式のものが用いられています。 |
| .jp2 | JPEG2000 | JPEG の後継規格で、可逆圧縮など JPEG に無い特徴を持っています。 |
| .png | PNG | Fireworks の標準ファイル形式で、W3C が提唱する画像形式。 |
| .psd、.pdd | Photoshop | Photoshop の画像形式で、Fireworks で開くと、Photoshop で適用した様々な効果をそのまま含められて編集することが可能です。 |
| .rtf | RTFテキスト | 書式の互換性を持つリッチテキスト形式。 |
| .sgi | SGI | Silicon Graphic 社のワークステーションの標準イメージファイル形式。 |
| .tga | Targa | Truevidion 社のビデオボードで使われる画像形式。 |
| .tif | TIFF | Aldus 社が開発した画像形式。 |
| .txt | テキスト | ASCII のテキストデータ。Fireworks で開くとテキストオブジェクトになります。 |
Fireworks のパネルは、選択されたオブジェクトの様々な部分を編集するツールです。
パネルでは、フレーム、レイヤー、色見本など様々な操作をすることが可能です。
ここでは、パネルの全体的な操作方法について説明いたします。
各パネルはドラッグして、自由に複数のパネルをグループにまとめることができます。
大半のパネルは、必要に応じてグループ化することが可能で、パネルをグループ化すると、パネルグループのタイトルバーにすべてのパネルグループ名が表示されます。
以下に各パネルの説明を記載します。
| 最適化 | |
 |
最適化パネルでは、ファイルのサイズと種類に対して様々な情報を管理する事が出来ます。 |
| レイヤー | |
 |
レイヤーパネルでは、各ドキュメントの構成を管理する事が出来ます。 このパネルには、レイヤーの作成、削除などのオプションが含まれています。 |
| 共有ライブラリ | |
 |
共有ライブラリパネルでは、Common Library フォルダの内容が表示され、ここに表示される様々な素材をドラッグ＆ドロップで使うことが出来ます。 |
| ページ | |
 |
ページパネルには現在のファイルのページが表示され、ページの削除、複製などをコントロールすることが出来ます。 |
| フレーム | |
 |
フレームパネルには現在のファイルのフレームが表示されます。このパネルには、フレームの複製・削除などを行うことができ、また、アニメーションを作成するオプションがあります。 |
| ヒストリ | |
 |
ヒストリパネルでは、最近実行したコマンドのリストが表示され、コマンドの取り消しとやり直しができます。 このヒストリパネルは非常に便利なパネルですので、使用率は非常に高いです。 |
| シェイプ | |
 |
シェイプパネルには、ツールボックスのオートシェイプに含まれていないオートシェイプがあります。 |
| スタイル | |
 |
スタイルパネルでは、既存にあるスタイルを利用したり、保存しておいたスタイルを利用したりすることが出来ます。。 |
| ライブラリ | |
 |
ライブラリパネルには、グラフィックシンボル、ボタンシンボル、アニメーションシンボルが格納され、このライブラリパネルから、ドラッグ＆ドロップできます。 |
| URL | |
 |
URL パネルでは、よく使う URL が含まれるライブラリを作成できます。 |
| カラーミキサー | |
 |
カラーミキサーパネルでは、新規カラーを作成して現在のカラーパレットに追加したり、選択したオブジェクトに適用したりする事が出来ます。 |
| 色見本 | |
 |
色見本パネルでは、現在のドキュメントのカラーパレットを管理できます。 |
| 情報 | |
 |
情報パネルでは、選択されたオブジェクトのカラー情報、サイズ情報が表示されます。 また、キャンバス上のポインタの正確な座標が表示されます。 |
| ビヘイビア | |
 |
ビヘイビアパネルでは、ビヘイビアを管理できます。 ビヘイビアとは、JavaScriptによる動作のことで、Fireworks では、複雑な JavaScript も特別な知識が無くても、効果的に作成することが出来ます。 |
| 検索 | |
 |
検索パネルでは、テキスト、URL、フォント、カラーなど、単一のドキュメントまたは複数のドキュメント内の様々な属性を検索したり、置換できます。 |
| 整列 | |
 |
整列パネルでは、キャンバス上でオブジェクトを整列したり分散したりさせることが出来ます。 |
| オートシェイプのプロパティ | |
 |
オートシェイプのプロパティパネルでは、ドキュメント上のオートシェイプの情報が表示され、そのプロパティを変更したりすることが出来ます。 |
| カラーパレット | |
 |
カラーパレットパネルでは、カラーパレットの作成や入れ替えを行うことが出来ます。 |
イメージ編集 |
|
 |
イメージ編集パネルは、ビットマップ編集でよく使用するツールやオプションを まとめたものです。 |
| パス | |
 |
パスパネルでは、パスに関連する多くのコマンドが含まれており、ここからパスを作成することが出来ます。 |
特殊文字 |
|
 |
特殊文字パネルでは、様々な特殊文字が表示されます。 |
| シンボルプロパティ | |
 |
シンボルプロパティパネルでは、グラフィックシンボルのプロパティを管理します。 |
]]>
Fireworks のプロパティインスペクタには、現在選択されているオブジェクトのプロパティ、現在のツールオプションまたはドキュメントプロパティが表示されます。
Fireworks での作業は、様々な調整をこのプロパティインスペクタにて行うことになりますので、プロパティインスペクタの使用方法は一通り覚えておく必要があります。]]>
プロパティインスペクタをドラッグ
プロパティインスペクタのドッキングが解除された
ワークスペースの下部にプロパティインスペクタをドッキングするには、プロパティインスペクタのサイドバーを、画面の下部までドラッグするか、図の部分をダブルクリックする事で元に戻すことが出来ます。
プロパティインスペクタを元の位置に戻す
元の位置に戻った
また、プロパティインスペクタの高さを半分にしたり非表示させたりすることも可能です。
プロパティインスペクタの高さを半分にするとプロパティが 2行表示され、フルにすると 4行表示されます。また、プロパティインスペクタを完全に折りたたんで、タイトルバーだけの状態にしてワークスペース内に残しておくことも可能ですので、自分好みやオブジェクトのサイズに合わせて変更すると良いでしょう。
プロパティインスペクタの高さを変更するには、二通りの方法があります。
プロパティインスペクタの右下隅にある拡大矢印をクリックします。
プロパティインスペクタの右上にあるアイコンをクリックして、プロパティインスペクタのオプションメニューから「高さ - フル」・「高さ - ハーフ」を選択します。
標準の大きさのプロパティインスペクタ
半分の大きさになったプロパティインスペクタ
]]>
ツールボックスは、『選択』、『ビットマップ』、『ベクター』、『Web』、『カラー』、『画面表示』の 6 つのカテゴリから構成されています。
ここでは概要のみを説明し、別途各ツールの使用方法を説明いたします。
Fireworks で新規ドキュメントを開くと、上記の画面が表示されます。
こちらが Fireworks の作業画面となり、この画面上で様々なツールを利用して作業を行っていきます。
]]>
スタートページの使用について
ドキュメントを開かずに Fireworks を起動すると、上記のスタートページが表示されます。
スタートページから、Fireworks チュートリアル、最近使用したファイルおよび Fireworks Exchange にアクセスし、Fireworks 新しい機能などを追加することができます。
スタートページを無効にするには、
1. ドキュメントを開かずに Fireworks を実行します。
2. 「今後表示しない」をクリックします。
]]>
Fireworks で作業して作られたファイルは、基本的に Web グラフィックとして利用される場合が中心です。
Fireworks では、新規ドキュメントを作成したり、既存の Fireworks PNG ファイルを開いたりすると、ドキュメントのファイル名に .png という拡張子が付きます。
.png は Fireworks の基本となるファイル形式で、.psd や .ai など他のファイル形式のファイルも PNG ファイルとして開き、Fireworks 上で作業します。
Fireworks の新規ドキュメントを保存する
1. ファイル／名前を付けて保存を選択します。
名前を付けて保存ダイアログボックスが表示されます。
2. 保存場所を選択し、ファイル名を入力します。
png 形式の場合、拡張子は自動的に付けられるので、入力する必要はありません。(他のファイル形式で保存した後は、そのファイル形式になります)
3. 「保存」をクリックします。
こちらは gif 形式で保存を選択した場合ですが、保存ダイアログの右側に『オプション』というボタンが有効になっています。
ここでは他のアプリケーションで作成したイメージを Fireworks に挿入させるための方法を説明いたします。
]]>
1. Photoshop にて開いているこちらの画像をドラック＆ドロップします。
Fireworks をモニタの画面上に表示させます。
Photoshop で開いている画像をドラックし、Fireworks の画面にドロップします。
Fireworks 上に Photoshop で作業していた画像ファイルが移動されました。
このままではFireworks のワークスペースと画像がずれていますので、『キャンパスをフィット』をクリックし、ワークスペースにあわせます。
Fireworks に画像ファイルが移動できました。
また、他の対応している他のアプリケーションで作成しているファイルをコピー＆ペーストする事も可能です。
コピー＆ペーストをするには、
1. 他のアプリケーションで、ペーストするオブジェクトまたはテキストをコピーします。
2. Fireworks で、オブジェクトまたはテキストをドキュメントにペーストします。
ペーストされたオブジェクトの位置
Fireworks にペーストされたオブジェクトの位置は、選択内容によって異なります。
ペーストされたオブジェクトのリサンプリング処理
Fireworks ドキュメントに解像度が異なるビットマップドキュメントをペーストすると、ビットマップのリサンプリング処理を行うかどうかを確認するメッセージが表示されます。
リサンプリングとは、読み込んだビットマップのピクセルを追加・削除して、オリジナルのビットマップの外観をできる限り再現する処理のことです。
解像度を変更すると、リサンプリングの際にピクセル間の補完や圧縮などの処理が行われるため、元のイメージデータと異なってしまい、画質が低下することがあります。
ペースト時にビットマップオブジェクトのリサンプリングを実行するには、
Fireworks や他のプログラムで、ビットマップをコピーし、Fireworks のワークスペースにてペーストします。
クリップボード上のビットマップイメージの解像度が現在のドキュメントの解像度と異なっている場合は、ビットマップのリサンプリング処理を行うかどうかを確認するダイアログボックスが表示されます。
・「リサンプリング」を選択すると、ペーストするビットマップのオリジナルの縦横サイズを保持するために、必要に応じてピクセルを追加または削除します。
・「リサンプリングをしない」を選択すると、オリジナルイメージのピクセル情報をすべて保持します。
この場合、ペーストするイメージのサイズが Fireworks の解像度に合わせて相対的に伸縮されますので、予想していたサイズと異なる場合も発生します。
例えば、Photoshop で作成された『psd』、Adobe Illustrator で作成された『ai』、JPEG、GIF、アニメーション GIF などです。
ファイル／開くを使用して PNG 以外の形式のファイルを開くと、開いたファイルに基づいて新しい Fireworks PNG ドキュメントが作成され、Fireworks のすべての機能を使用してイメージを編集できます。
その後、「名前を付けて保存」を選択して、作業内容を新規 Fireworks PNG ファイルとして保存するか、他のファイル形式で保存できます。
]]>ドキュメントを元の形式で保存すると、イメージは 1 枚のレイヤーに統合され、イメージに追加した Fireworks 固有の機能を編集することができなくなります。
Fireworks を使用すると、Fireworks PNG、GIF、アニメーション GIF、JPEG、BMP、WBMP、TIFF、SWF、AI、PSD、PICT（Macintosh のみ）といった様々なファイル形式を直接保存できます。
また、Fireworks は、他の adobe アプリケーションとの連携が非常に取れており、Photoshop や Illustrator で作られたファイルを開く際、レイヤー情報、エフェクト情報、カラー情報、グラデーション情報、透明度など様々なファイル属性を保持したままファイルを読み込むことが可能です。
以下に代表的なファイルについて具体的に説明いたします。
こちらから作業したいファイルを開くか、
ファイル／最近使用したファイルを開くを選択し、作業したいファイルを選択することが可能です。]]>
1. ファイル／開くを選択します。
開くダイアログボックスが表示されます。
2. ファイルを選択し、「開く」をクリックします。
]]>