Fireworks研究会201011

2010年12月6日月曜日

邪魔なオブジェクトを一瞬で見えなくする機能

Fireworksでデザインを作っていると、他のオブジェクトが邪魔で作業がし辛くなる事もしばしば。
レイヤーメニューから、目のアイコンをクリックするとオブジェクトは見えなくなるのですが

いちいちマウスを持ってクリックするのも邪魔くさい時に便利なショートカットキーがあります。

<前提>

メニューバーを作りたいのに、別の画像が邪魔しています。

この画像は後で使うので消すわけにはいかないけど、今は邪魔なので見えなくしたい、でも複数のオブジェクトで構成されているので一個一個レイヤーから目玉アイコンを消すのは大変だ
・・・という時こそ、このショートカットキーの出番です。

1．選択ツールで隠したい（一時的に消したい）オブジェクトを選択

選択ツールで隠したいオブジェクトを選択します。

複数のオブジェクトを選択したい場合には、選択ツールで複数オブジェクト部分をドラッグして選択してあげることによって一気に複数オブジェクトの選択ができちゃいます

2．ショートカットキーで選択オブジェクトを隠す

ショートカットキーのCtrl＋Lを押します。
すると・・・・

一瞬で選択したオブジェクトがすべて見えなくなりました。
レイヤーパレットを見てみると、選択した全てのオブジェクトの目玉アイコンのチェックが外されているのがわかります。

正直、このショートカットキーのありがたみはまだ実感できるほど使いこんでいないのですが、積極的に使用していきたいと思ってます(｀・ω・´)

同じ形の図形を簡単にコピー＆ペースト

メニューバーなどを作成するときに便利な機能。
ひとつの図形を作ったときに、同じものを複数コピー＆ペーストしたい時に使います。
この方法だといちいちコピーしてペーストするより簡単＆キレイにできちゃいます

1．図形を作る

元となる図形を作ります。

ここでは、矩形ツールで横156px　縦70pxの長方形を描き、更にスタイルのパステルからPastels012というスタイルを適応しました。

2．元となる図形をコピー＆ペースト

元となる図形を選択して、その図形をクリックしたままAltキーとShiftキーを同時に押してドラッグします。

すると、元の画像からにゅるんと押しだされるように、同じ画像がコピーされて出てきました！

shiftキーを押すことによって、元の画像に対してキチンと水平方向にオブジェクトを配置することができます。

コピーしたいオブジェクトを二つ選択すると、二つの図形のコピー＆ペーストに。

ポイントは、コピーしたいオブジェクトを「クリックしたまま」altキー＋Shiftキーを押すということ。
最初はそれに気がつかずに、上手くできなくて涙目でした。

コピー＆ペーストという単純作業をより簡単にキレイにできるのはうれしいことです。
よく使う機能になると思うので、忘れないように何度も繰り返して身につけようと思います。

2010年12月5日日曜日

オブジェクトの加工　～画像の一部を切り抜き～

Fireworksで画像の一部を切り抜くとき、いくつかの方法があります。

1つ目は、切り抜きツールを使って画像の一部を切り抜く方法です。

切り抜きツールを使用して、画像の一部を切り抜いた場合、
元画像をもう一度使いたい時には使用することができません。

もう1つの方法は、画像をマスク処理して切り抜く方法です。

画像をマスクとしてグループ化すると、
元画像をもう一度使いたい時にマスクを外して使用することができます。

ただし、この方法ではFireworksは切り抜いた画像ではなく元画像の大きさで認識し、
スマートガイドなどの機能を使うときに不都合なことがあります。
その時は、[変更メニュー] から [選択範囲を統合] をクリックして範囲を統合することで
切り抜いた画像の大きさで認識させることができます。

2010年12月3日金曜日

ウェブサイトのベースとなる背景の作り方

ウェブサイトを作ろう！という時に、きっと最も大事になってくるであろうデザインカンプ。
今授業では「Fireworksレッスンブック」の素材を使い、実際にテキストに沿ってデザインカンプをFireworksで作っています。
今回は、その初歩の初歩である「ウェブサイトのベースとなる背景の作り方」をまとめてみました。

1．ドキュメントの作成

ベースとなるものを新規ドキュメントから作成します。
Fireworksを開き、上のメニューからファイル→新規作成
ショートカットキーはCtrl＋Nです

ここでは、横860ピクセル・縦1500ピクセルに設定しました。

ベースとなるドキュメントを新規作成したら、その時点で一度保存しておきましょう。
何か不都合があった場合に泣きます

2．ガイドを引く

基本となるガイドを引きます。

キャンバスの上部にある定規をクリックするとガイドが現れるので
それをドキュメント上にドラッグ＆ドロップします。

ガイドをダブルクリックすると数値を入力できるので、
任意の数値を入れてガイドラインを設定しましょう。

ここでは、縦方向に40・820の位置
横方向に40・300・370・400・1460の位置にガイドを引きました。

3．レイヤーのフォルダを作る

メニュー部分からレイヤーを選択して、新規レイヤーを作成します。
＋がついたフォルダアイコンをクリックすると新規レイヤーが作成されるので、
レイヤーのタイトルをダブルクリックしてレイヤーに名前を付けましょう。

ここでは、「背景」という名のレイヤー名をつけました。
※＋のマークが付いているフォルダアイコンの隣に矢印のついたフォルダアイコンがありますが
これは「新規レイヤー」ではなく「新規サブレイヤー」を作成するものです。
間違えないように注意！

4．背景をひく

ガイドをひいたら、次にサイトのメイン部分となる背景を設定します。

矩形ツールでガイドにあわせて長方形を描きます。
ガイドがひいてあるので、ピタっとガイドにそった位置情報の背景を描くことができるのでうれしいですねー

背景が完成したら、間違えて動かしたり消したりにしないよう
背景をロックしておきましょう。
目のアイコンの隣をクリックすると、錠のマークが出てきます。
錠のマーク＝ロックされているということです。

これでベースとなる背景の完成です！

何事も土台が肝心で、このステップで狂いが生じると
後々めんどくさいことになったりします。
ポイントを忘れないようにしっかりチェックしていきましょう( ﾟーﾟ)

スタイルの基本操作2

プリセットスタイルのグラデーション

Fireworksのスタイルは種類も色も豊富です。しかし、オリジナリティを追求すれば、プリセットのグラデーションだけでは今ひとつイメージと合わないと云う場合が出てきます。かと云って、複雑なグラデーションを一から自分で作るとなると手間も時間もかかります。
そんな時は、プリセットスタイルに少し手を加えるだけで全く雰囲気の違うグラデーションにする事が出来ます。

1.まず、画像に好きなスタイルを適用します。選択すると、黒い棒が出て来ます。これはグラデーションハンドルと云い、グラデーションをコントロールする為の物です。
先端の丸い方が、グラデーション全体の位置を移動するハンドルです。