2010年11月30日火曜日

オーバーダウンとは?

講師の真喜志です。
Fireworks歴はバージョン1以前のベータ版から使っていますので、かれこれ10年以上になります。

いつから(最初から?!)だったか、「シンボル」という機能が使えるようになり、Fireworksの使い勝手は飛躍的に向上しました。

シンボルにはいくつかの種類がありますが、その中に「ボタンシンボル」があります。
ボタンシンボルには、4つのシチュエーションによって異なるボタンのデザインを、ひとまとめにして格納しておくことができます。

異なるシチュエーションとは下記の通りです。

  1. アップ      ・・・素の状態
  2. オーバー    ・・・マウスカーソルが乗った状態
  3. ダウン      ・・・クリックされた状態
  4. オーバーダウン・・・???
最後の4。これが問題です。
この機能が実装された際には理解していたつもりでしたが、長年使わない間にすっかり忘れてしまいました。

そこで、授業のテキストとして使わせていただいている書籍『Fireworksレッスンブック』(渥美聡子さん著/ソシム刊)の解説を読んでも・・・チンプンカンプン(失礼)!

一回クリックしたダウン状態のボタンからマウスポインタを離し、もう一度マウスポインタで触れるとオーバーダウン状態になります。「一度選んでみたけれど、もう一回同じボタンをクリックしようとしている」ことがわかるようになります。
そこで、いったいどういう状態なのか、実際にボタンを作りこんで検証してみることにしました。
まずわかったこと。
オーバーダウンを説明するのに、ボタン単品では理解できません。
複数のボタンが並んでいる状態でないと、難しいです。

では、図解でどうぞ!
図では「コース・カリキュラム紹介」というボタンが変化しています。
他のボタンと見比べてみてください。

1.アップ(素の状態)


2.オーバー(マウスカーソルが乗った状態)



3.ダウン(クリックされた状態)


4.オーバーダウン


オーバーダウンとはつまり、ダウン状態がキープされている(マウスカーソルを離してもアップ状態に戻らない)ことが前提で、そこへ再度マウスを乗せた際のオーバー状態を定義することを言うらしいです。

図解すれば理解しやすくなるかな・・・と思ったんですが、やっぱり動作サンプルがないと完全にはご理解いただけないかもしれない、という不安に駆られてきました。

ということで、下記にFireworksから書き出されたままの状態のHTMLと、制作に使用したPNGファイルを格納しましたので、ご参照ください。



グリッド

デザインするときにあると便利なグリッドですが  普段の画面はこのように表示されています。

















表示からグリッドをクリックしグリッドを表示をクリックするかショートカットキーCtrl+Alt+Gを押すと

















このように画面上にグリッドが表示されます。


















ちなみに任意でマスのサイズを変えることができます。




















整列!


高さや間隔の揃わない複数の画像をマウスで1枚1枚丁寧に並べていくのはとーっても大変です!
一瞬で一列に並べる機能・・・・・・「整列」を紹介します♪








選択ツールで整列させたい画像を選択します。

 





画面上部にある整列パネルをクリックし、どのように整列させるのかを指定します。





  

     

  











今回は3つの画像を上方向に一列に揃えたいので、上揃えを指定します。


すると、見事に整列できました!




これで時間も大幅に短縮です!
左揃えや分布などのメニューがあり、画像がメインのページでは大活用できると思います(^^)

もっと!時短 ~ 図形や画像を簡単に移動 ~

Firefoxで図形や画像を移動させるとき、
通常は図形や画像をドラッグしたり、矢印キーを押して1px単位で移動させることがよくある。

しかし、あらかじめ動かす距離が決まっているなどの場合、
キーを押しながら<矢印>キーで動かしたい方向へ移動させれば、
10px単位で動かすことができ効率的に操作することができる。

例えば、下の緑の四角形の図形を下へ50px移動させるときは、
キーを押しながら<矢印>キーの<↓>を5回押だけでよい。

               ・
               ・
               ・

2010年11月29日月曜日

画像でよくつかわれるファイル形式まとめ

画像ファイルは様々な種類がありますが、特にFireworksやWebで使う機会の多いgif形式・jpeg形式・png形式のそれぞれの特徴をまとめてみます

gif形式




読み方は「ジフ」(まれに『ギフ』)
色のパレットが最大で256しかないので、グラデーションの多い画像には向いていない。
単純なイラスト・線など色数が少ないシンプルな画像表示に向いている。
透明情報やアニメーションファイルの作成が可能。
ディザを入れると、少しはグラデーションがきれいに出る場合もある。
※ディザとは→べた塗りではなく、点描で細かく描いてくださいという方法
※デメリットとして、ディザを入れるとファイル容量が増えてしまう。

画像はgif形式で、左上がオリジナル・右上がgif16(色の種類が16しかない)
左下がgif128 右下がgif256で描きだしたもの。
グラデーションがカクカクして、荒いのがわかるかと思います。



jpeg形式(jpg)



画像右上がjpg形式。画質は80に設定してあります。
読み方は「ジェイペグ」
写真・グラデーションが多用された画像に向く形式。
もっとも多くウェブ上では使用されている画像形式となっています。
非可逆(取り返しがきかない)圧縮なので、編集と書きだしを繰り返すと画像が劣化してしまうびが難点。
なので、元のマスタファイルを保存しておくことが重要。
シンボルに変換したりしてマスターを保存しておくと色々便利です。

png形式



画像左下がpng8 画像右下がpng32
左下の画像は、グラデーションがカクカクしているのがわかるかと思います。
読み方は「ピング」もしくは「ピーエヌジー」
gifにかわる形式として開発された。
可逆圧縮なので、何度でも再利用可能(劣化しない)
png8は色数が8で保存されてしまい、カラーパレットが最大256色なのでgifとあまり変わらないレベルの画像になる。
png24はさらに高性能(使えるカラーが増える)
png32 さらにさらに高性能。透明化ができる。

まとめ


それぞれの特徴をしっかり把握して、ケースバイケースでベストな保存形式をチョイスするのが大事!
目的にあった画像で保存→ウェブページの表示も軽くなる→ユーザーにも検索エンジンにもやさしい作り

ここから反省

画像のチョイスを間違えて、あまり違いがわからない風になってしまいました。ごめんなさい
ちなみに、この画像はうちの妹が飼っているねこで名前は国芳です。

図形に合わせて、テキストを流し込みたい!

図形に合わせて、テキストを流し込みたいときは


1. 図形を作成後、テキストを入力




2. 画像選択して、グループ解除する

      

*忘れてしまいがちなので、要注意*




3. テキストと図形を両方、選択する



4. テキストをパス(図形)内への流し込み






5. 完成












パスの結合

パスの結合
 Firewoksを立ち上げて少し長めの文章を入力して下さい。

                           図1


次ぎに楕円ツールから円を描きますがその時にshiftキーを押しながらマウスで正円を描きます。

                           図2

次ぎにテキストと正円の両方を選択してそのまま、テキストメニューから「パスに結合」を選択してクリックする
                             図3

                   そうすると図4のように表示されます

                            図5

              
                 又、色とテキストの大きさを変えることもできます。
                             図6

又内側に表示する事も出来ます、テキストメニューから「逆方向」を選ぶと図7のように表示されます。
                               図7



テキストのスタート位置を変えることも出来ます、図8のプロパティから「テキストのオフセット」に数値を入れることによりテキストのスタート位置が任意の位置に変わります。



                              図8

チュートリアル説明用画像内の文字を見やすくする

チュートリアルを作成するとき説明画像を入れることがあるが、
文字をそのまま挿入した場合、背景などと重なって
画像中の文字が読みづらいことがある。

読み手のことを考えるとこの様な細かいところにも気を配りたい。

①下のようなチュートリアル用の画像を作成し文字を挿入すると・・・



②画像内の説明文文字を選択してプロパティ画面のここをクリック



③色を白、塗りのストロークを重ねるにチェックを入れ、
さらに、パスに沿った中央揃えを選択。



④ストロークオプションをクリックして、基本エッジが柔らかい線(丸)、
チップのスライドバーを一番下までスライド、チップのサイズを5にする。



なお、画像中の文字の属性を変更した場合、
その他の文字も同じような属性で変更処理するときは、
最初の属性を変更した文字をコピーして
編集メニューから属性をペーストをクリックすると作業効率が良くなる。

ショートカットキーで時短


ショートカットキーをうまく使うことで、作業効率を上げることができます。例えば、図のように保存をする場合にファイルから保存をクリックし保存を行いますが、ショートカットキーを使うと、コントロールキー+Sを押すことで直接保存することができます。

テキストのアウトライン化

テキストツールで書いた文字をアウトライン化することでベクトルデータ(図形)として扱うことができ、自由に変形させることができます!
オリジナルのロゴが簡単に作れますよ~(^^)♪
今回は「Merry Christmas」の「i」をろうそくに見立て、炎のマークをいれました!





入力したテキストを選択し、「テキスト」メニューから「パスに変換」を選びます。












次に「変更」メニューから「グループ解除」を選びます。
これで、パスの状態(ベクトル図形)になりました。














グループを解除し1文字ずつの編集が可能な状態ですが、「i」は合体した「複合パス」なのでさらにパスを離してあげる必要があります。




「変更」メニューから「パスを結合」「パスの分離」を指示します。







分離した「i」の点を、「ダイレクト選択ツール」で炎の形に整えていきます。







整えた形状をコピーしてコピー元の形状を縮小し炎の外側をつくり、内側に入った小さい方を
白で塗りつぶして、形を整えます。





あとでロゴマーク全体の色をまとめて変更したい場合などのために、また「変更」メニューから
「グループ化する」を選択してグループ化しておきます。
これで完成!!

ペンツールの基本操作



直線の引き方


1.まず、ペンツールを選択します。




2.カンバス上で、線の始点となるポイントをクリックします。

3.線を引きたい方向にカーソルを移動させ、クリックします。この時、ドラッグしながら移動させると、曲線が引けます。


4.直線としてそのまま定着させる場合は、終点でダブルクリックします。青かった点が白くなれば、定着した証拠です。これで直線は簡単に引けます。






Fireworksで画像を補正する

撮影した写真などをもっとキレイに見せたい!という場合に
とりあえずこの方法を知っておけば大丈夫という鉄板の画像補正の方法

習った日:2010.11.26

ステップ1

画像補正ステップ1-1
フィルター→カラーを調整→レベル補正へ


画像補正ステップ1-2
グラフのような部分の下にある3つの三角形に注目。
この画像では分かりづらいですが、ハイライト部分の三角形(一番右)をグラフの山の始まる部分にあわせて暗い部分の三角形(一番左)もグラフの山のはじまる部分にあわせる。
こうすると、ハイライトと暗い部分のメリハリがついて陰影がはっきりします。
(ここでは、わかりやすいようにグラフの山がはっきりしている部分に移動させました)

ステップ2

画像補正ステップ2-1
フィルター→カラーを調整→明るさ・コントラスト

画像補正ステップ2-2
明るさを10 コントラストを10に

ステップ3


フィルター→カラーを調整→色相・彩度

画像補正ステップ3-2
彩度を10ぐらいにあげる

ステップ4

画像補正ステップ4-1
フィルター→シャープ→アンシャープマスク

画像補正ステップ4-2
適応値50 ピクセルの半径1 しきい値1 くらいにする

完成!

おいしそうなおそばになりました
画像補正最終
※クリックで拡大すると違いがわかりやすいかも

携帯のカメラで撮ったあまりクオリティの高くない画像ではありますが、補正後のほうがコントラストがあって違いがわかるかと思います。

ちなみにこの沖縄そばは、できるだけ手打ちの麺に近付けたコシのある麺というサン食品の御膳符そば&ダシです。
具の昆布と、紅しょうがではなく「しょうが」がのっている部分がポイント