EC studio EC studio デザインブログ

みなさんはデザインをするとき、どのソフトを使っていますか?
きっと多くの方はPhotoshopやIllustratorを使っていると思います。
私もEC studioに入るまではそうでした。
しかし、今は違います。
PhotoshopやIllustratorではなく、Fireworksをメインに使っています。

EC studioのサイトページは主にFireworksでつくられているため
始めはPhotoshopの方が使いやすいな」と思いながら、
すすめられるままFireworksを使っていました。

でも、1ヵ月もしないうちにPhotoshop派からFireworks派に乗り換えました。
今ではFireworksがないとWebデザインの作業が進まないほどです。

今日はそんなFireworksの良さをご紹介したいと思います。

【10月18日 ポイントを2つ追加しました。】

FireworksがWebデザインに向いている6つのポイント

1.簡単に複数のレイヤーの移動できる。
Photoshopのようにレイヤーウィンドウから画像を選択しなくても
動かしたい画像を直接クリックすることで移動できます。

2.オブジェクトの種類が多い
星形、矢印、ドーナツ形や多角形など
複雑なシェープ形状のオブジェクトもすぐに出来ます。
また数値入力で形を変形でるので、サイズの微調整も楽に出来ます。

3.簡単にオブジェクトの見栄えを変更
ストライプやグリット線、和紙など様々なテクスチャを選ぶだけで
オブジェクトの見栄えがパッと変わります。テクスチャの種類も豊富です。

4.画像の切り出し
多角形のスライスが自動的に挿入されるので
選択したオブジェクトのサイズぴったりに画像が切り出せます。

作業も動作チェックもすばやく出来るので
WebボタンをつくるならFireworksのライブラリ機能はおすすめです。

5.Webボタンを簡単に作成
【サンプル】

↑ボタンにマウスをのせると画像が変わります。

このようなボタンをつくるためには
・最初に表示されるボタン  ・マウスをのせた時のボタン
の2つのボタン画像をつくる必要があります。
そんなときに役立つのがFireworksのライブラリ機能です。

まず、最初に表示されるボタンをつくります。
そしてボタン画像を全て選択し
右クリック→「シンボル化に変換」で「ボタン」にチェックをいれ「OK」をクリックします。

するとタブが増え、最大4段階の変化が起こるボタンをつくることができます。
「アップ」…最初に表示されるボタン
「オーバー」…マウスをのせたときのボタン
「ダウン」…クリックしたときのボタン
「オーバーダウン」…クリックしたあとのボタン
「ヒット」…リンクの範囲
071018sample2.gif

「アップ」が完成したあとは「オーバー」のタグへ移動します。
そして、そのままでは白紙の状態なのでプロパティ右側にある
「アップのグラフィックをコピー」をクリックします。
すると「アップ」タブにあるボタン画像が表示されます。

そして「オーバー」タグにある画像に「べベルの内側」など効果をつけ
マウスオーバーしたときの動きをつけましょう。

また画像全体を中心から右下へ1pxずつ移動させるとボタンが
へこんだようにみせることができます。

「ダウン」や「オーバーダウン」も同様に画像をつくっていきます。
それぞれのボタンが完成した後は右下にある終了をクリックします。
画像を保存するときは
「ファイル」→「書き出し」を選択し書き出しの種類を「イメージのみ」にします。

すると「アップ」だけではなく、「オーバー」や「ダウン」など
それぞれのボタンをまとめて書き出してくれます。
ボタン一つずつ書き出す手間が省けるので、とても便利です。

6.ボタンの動作確認をIEでチェック
5.でつくった画像をIEでプレビューし、実際にマウスをのせたときの動きを
チェックすることができます。

「F12」をクリックするとIEが立ち上がり実際にマウスオーバーをすると
画像が変わるようになります。
通常、ブラウザで動作確認をする場合それぞれの画像を書き出し
Javascriptなどマウスオーバーでボタン画像が変わるようソースを組む必要があります。
Fireworksならそんな手間もなく「F12」ボタンを押すだけで動作チェックができます。

作業も動作チェックもすばやく出来るので
ボタンをつくるならFireworksのライブラリ機能はおすすめです。

——————————————————————————————————
PhotoshopとIllustratorがあれば大体の画像がつくれるため
「わざわざFireworksを買わなくても…。」
と、Fireworksを使わないWeb担当者の方も多いと思います。
(私も以前はそうでした。)

でも一度、Fireworksを試してみてください。
逆にFireworksが手放せなくなりますよ。


関連した記事:

この記事へのコメント

私もFireworksなしではデザインできないほど、使っている
WEBデザイナーです。

一つ困ったことがございます。
Fireworksで作った画像が、Illustratorと比べると、
ぼやけて描き出されるのですが、そのように思われたことは
ございませんか?

解決策などはご存知ないでしょうか?
助けてください・・・。

投稿者: 原田 | 2010/7/28 水曜日 16:25:42

お返事が遅くなり、申し訳ありません!
ご質問の書き出し方法というのは印刷の場合でしょうか?
解像度を上げるなどもありますがソフトの仕様上、仕方がない部分が大きいと思います…

「ビットマップデータ」と「ベクトルデータ」についてこちらの記事がわかりやすくまとめられているので
ご参考にしていただければと思います。(^^)
http://midilin.sakura.ne.jp/midilin/yasuda/web_kouza/16.htm

投稿者: 端山 佳枝 | 2010/10/5 火曜日 14:40:27

私も、同じような質問になってしまうかもしれませんが、

イラストレーターで作るのと、ファイヤーワークスで作る場合に、イラストレーターで作ったものの方がキレイに感じます。

私は紙媒体ではなく、すべてWEBですので、イラストレーターで作っても、結局はビットマップになってしまうという点で、変わらないのでは?

と思うのですが、気のせいなのかビットマップでもイラストレーターの方がキレイに感じてしまう事があります。

あと、もう1点
私の認識では、Fw と Ai+Ps という認識をしておりますが、いかがでしょうか?
デザインに関しては、まだまだ素人目線です。ご指摘なども含めて伺いたいです。

お忙しいと思いますが、ご回答いただけると嬉しいです。

投稿者: 工藤 | 2011/12/15 木曜日 23:12:42

工藤さん、コメントありがとうございます!
回答をお待たせしてしまい、申し訳ありません。

過去にご紹介した「整列でアウトラインがぼけない方法」があるほど、
Fireworks はパスのアウトラインに弱い部分があります…(ちなみに現在の最新バージョンCS5では↑をしなくても、「ピクセルにスナップ」という機能が追加されています)
ただ、アウトラインがぼけてしまうのを防げば、違いはあまりわからないように思います。(^^)

あとはビットマップにする際に、画質とあわせて容量にも気をつけています。
ここは紙と違う点ですね。
Webの場合は読み込み速度に影響がでるため、画質と容量のバランスをみながら書き出し方法(形式やサイズなど)を考えています。
両方の面からみて、使いやすいツールを使われるのが一番だと思います(^^)

その点、Fireworks ではページデータの画像パーツ毎に書き出し形式・画像ファイル名を細かく設定できるところは魅力です。
(イメージ:http://ecstudio.jp/pic/xEcHxmepyCCd 上から「JPG」「PNG」「GIF」形式に設定)

あらかじめ「ファイル」→「HTML形式の設定」で命名規則を設定しておくとマウスオーバーボタンファイルも簡単に書き出せます。

ツールの使い方(パス引いたりレイヤーつくったり…)というデザインをしていく課程は、
Illustrator + PhotoShop の操作にとても似て、より直感的に使えるツールがFireworks だなと感じています。

デザイン課程の先にある、画像を書き出したりデータを修正・更新していく作業などで
ウェブデザインに特化したFireworks の良さが発揮されると思います!

ウェブデザインは、単発の紙媒体などと違い運用・管理が必要になるため
作業効率の良さも大切になってきます。
キレイさとあわせて、その面でも使い安いツールをオススメします。(^^)

投稿者: yoshue | 2011/12/29 木曜日 16:15:15
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.