自動シェイプの利用法

簡単に図形を作成する方法

Fireworksには、自動シェイプと云う便利なツールがあります。自分で作らずとも、最初からプリセットとして入っているシェイプで、スタイル同様に様々な種類があります。




今回は、試しに3Dボックスを使用してみましょう。

1.まず、自動シェイプのパネルの3Dボックスをクリックし、そのままカンバスへドラッグします。




2.すると、カンバスに立方体が現れます。しかしこのままではまだのっぺりとしていて今ひとつ立体感がありません。




3.そこでボックスを選択すると、中心にハンドルが現れます。




4.これを色んな方向にクリック＆ドラッグすると、3Dボックスが回り、立体感を出す事が出来ます。




5.塗りの色をお好きに変えて完成です。今回はプリセットの白黒のグラデーションを設定してみました。



普通のオブジェクトと同様に設定したのですが、面に合わせてグラデーションが自動で切り替わっていますので、手軽に立体的なボックスを作りたい場合はとても便利です。

画像・ファイル名の名前のつけ方

今日の授業ではスライスを切るという内容を学びました。
その時に気になったのがスライス名(=切り出した画像名)の名前の付け方。
ボタンとしてシンボル化したもののスライス名を
btn01,btn02,....
という風に名前をつけていったのですが、この名前のつけ方によって作業効率も変わってくるとのこと。

ということで、画像やファイルの名前のつけ方をまとめてみます

ヘッダー部分

logo
maintitle
title_main
head

ナビゲーションバーなど

btn
btn_○○　(○○部分にoverなどを入れたりする)
nav_bar

見出し

bg_h1
bg_h2
bg_03
title_〇〇(category,profile等)

コンテンツ内

pic_〇〇
photo_○○

リスト

bg_li
title_li

後ほど追記予定

参考:WEBサイトで使用するファイル名の付け方について相談です

Webデザイン用語一覧

講座で出てくる理解しているようでしていない専門用語を、
改めて調べてみました。
自分の中で理解できたものを、なるべくわかりやすいよう図解をつけています。

自分で調べて解釈した結果なので、間違えているところがあればご指摘ください。
これから先も、少しずつアップしていきます。



■テンプレート（ひな形）

文書やデザイン等をある程度整形されているひな形（素材）のこと。
テンプレートがあれば、書類の作成やWebサイトなどを容易に制作することができる。




















■グリッドデザイン

グリッドデザインとは、文字や画像、カラムなどの要素を格子上にレイアウトする手法のこと。グラフィックは直感的なアプローチであるのに対し、グリッドはきわめて論理的に情報を整理する。




















■トリミング

トリミングとは画像の加工方法の1つで、画像の一部だけを切り出す処理のこと。











■リサイズ

リサイズは、画像全体を拡大したり縮小したりすること。





















■ベベル

ベベルとは、もともと斜角という意味で「面取り」のこと。










































































































































■エンボス

エンボスとは、文字や図形、文様が浮きだしたように見せる効果のこと。




















■ オブジェクト

ドキュメントウィンドウ内のテキストや画像、図形などの操作の対象をオブジェクトと呼ぶ。









■ 階調

階調とは、色の濃淡を表すグラデーション、つまり色の段階のこと。例えば白と黒の場合、その中間には灰色があるが、さらに灰色 には濃いもの、薄いものがある。この段階を多く取れば、白と黒の2色でも、滑らかな色の変化を持った表現力豊かな画像を構成することができが、グレイス ケールはまさにこの白と黒の階調である。

階調の段階の中で最も明るい階調部分を「ハイライト」、中間の階調部分を「中間調」、最も暗い階調部分を「シャ ドウ」と呼ぶ。



■ アンチエイリアス

オブジェクトの輪郭などをなめらかにする処理のこと。

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

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



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

<前提>



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

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

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

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





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

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

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



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

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

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

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

1．図形を作る

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



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

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

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



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



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



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

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

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

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

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



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


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

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


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

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

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

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

1．ドキュメントの作成

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



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



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

2．ガイドを引く

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



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

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



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

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

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



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

4．背景をひく

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



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



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

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

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