このエントリーをはてなブックマークに追加

Fireworksを初めて使う人向け!「ベクター系ツール」の使い方と出来ること

引き続き、Fireworksに用意されているツールの使い方・説明について簡単にまとめていきます!これを読めば、初心者の人でもFireworksの操作で出来ることがなんとなく分かりますよ!

関連記事はこちら。
「選択系ツール」の使い方と出来ること
「ビットマップ系ツール」の使い方と出来ること
「Web系ツール」の使い方と出来ること
「カラー系ツール」の使い方と出来ること
「画面表示系ツール」の使い方と出来ること

今回はツールパネルの中段の所にある、「ベクター系ツール」についてご紹介します。

ラインツール

マウスをドラッグすることで直線が描けます。ベクター系ツールで作成したオブジェクトは、基本的に後からでも形状や色・ブラシなどを変更することができます。

また、Shiftキーを押しながらラインを引くと、45度の角度でピッタリ引くことができます。

ペンツール

AdobeのIllustratorでもおなじみのペンツールは、ベジェ曲線を用いて図形を描くことができます。初めてベジェ曲線を触るという人はその特殊な操作感に戸惑うかもしれません。が、マスターすれば思い通りの図形を作成することができるので、是非覚えて戴きたいと思います。

ここでは簡単な操作方法だけ載せておきます。より詳しくペンツールを学びたいという方は、Illustratorを取り扱っているサイトなどを見てみましょう!

ベクターペンツール

フリーハンドで線を描くと、その線のパスが作成されます。描いた後に「ダイレクト選択ツール」などで微調整をすることも可能。とはいえ「ペンツール」と違い、フリーハンドだと精度にも限界があるので注意は必要です。

おしゃれブラシツール

このツールは、パスオブジェクトを選択してから使います。パスを選択後、この「おしゃれブラシツール」を使いフリーハンドで線を描くと、選択していたパスの形状を新しく描いた線の方へくっつける事が出来ます。

ただ、個人的にツール名がわかりにくいなあ…と。この名前からこの機能は想像つかないでしょ!

矩形ツール/楕円ツール/多角形ツール

それぞれ、図形を作成することができます。作成後の図形は、「ダイレクト選択ツール」などを使って形状の調整が可能です。特に、ボタンやアイコンなどを作る際にお世話になるかと思うので、使用頻度の高いツールです。
また、多角形ツールについては「プロパティ」より、頂点の数や角度などを調整することができます。

ほかにも、ツールボタンを長押しすると、「L字ツール」や「星形ツール」など様々な図形作成ツールが出てきます。ぜひいろいろ使ってみましょう。

テキストツール

その名の通り、テキストを入力します。基本的にテキストを装飾する場合は、「プロパティ」の項目からいろいろいじることになります。また、横書きだけでなく縦書きにも対応しております。

テキストツールは、他のツールよりも「プロパティ」の項目数が多いので混乱するかもしれません。簡単にご説明すると、下記のような感じです。

パス変形ツール/パス領域変形ツール

「パス変形ツール」は、パスをドラッグして引っ張ることで、パスの形状を変形させることができます。強弱の度合いは「プロパティ」より調整可能です。

「パス領域変形ツール」も、基本的な使い方は「パス変形ツール」と同様です。より広範囲のパスを変形させることが出来ます。

スクラバーツール

パスの線にブラシが適用されている場合、この「スクラバーツール」を使って上からなぞることで、好きな場所のブラシの強さを自由に変える事ができます。一風変わった形状の図形を作成する時に役立ちそうです。

ナイフツール

ナイフでカットするようにパス上に線を引くと、その位置でパスを分割することが出来ます。1つのオブジェクトを別々にして使いたい時に。

「ベクター系ツール」では主要となるパーツを作成してゆく

以上、ベクター系ツールでした。
Webサイトで重要な役目を担うボタンやアイコンなどは、これらツールを駆使して制作していくことになるかと思います。「ペンツール」「矩形ツール」「テキストツール」などは特に使用頻度が高いので、Webデザインをする上では非常に要となるツールですね。

では、次回はWeb系ツールのご紹介をしたいと思います。

関連記事はこちら。
「選択系ツール」の使い方と出来ること
「ビットマップ系ツール」の使い方と出来ること
「Web系ツール」の使い方と出来ること
「カラー系ツール」の使い方と出来ること
「画面表示系ツール」の使い方と出来ること

< | ホーム | >

このエントリーをはてなブックマークに追加

なんかオススメ!

Adobe Fireworks CS6 Macintosh版

Adobe Fireworks CS6 Macintosh版

人気の記事

Twitter

タグキーワード

あわせて読みたい

Copyright © 2011 FireWorks.20 All rights reserved.