FireworksでWeb2.0デザインしてみる – Part.1

先日、勢いで Macromedia Fireworks 8 を購入しました。私はどうも Photoshop や Illustrator が苦手、というか使いこなせません。メニューが豊富すぎてわけがわかんない。が、Fireworks はバージョン2 ぐらいから会社で使っていて、相性がいいのです。

で、せっかく買ったので、Web2.0っぽいデザインにチャレンジしてみました。まずは第一弾。「mirror reflection(反射)」です。

こういうやつ。

foldlogo.jpg

  1. 反射させたいオブジェクト(A)をコピー&ペーストで複製(B)します。

    reflect-1.png

  2. 複製したオブジェクト(B)を選択して、[修正]-[変形]-[縦反転]で反転させます。

    reflect-2.png

  3. 反転させたオブジェクト(B)を元のオブジェクト(A)の下に移動させます。

    reflect-3.png

  4. 反転させたオブジェクト(B)を選択して、[コマンド]-[クリエイティブ]-[イメージのフェード]を選び、メニューから右上のボタンを選択して、[OK]を押します。

    reflect-4.gif

    reflect-4.png

  5. プロパティパネルの「透明度」を適当な値に変えます。

    reflect-5.gif

  6. 完成!けっこうカンタンでしょ?

    reflect-6.png

[参考サイト] mirrorReflect . Fireworks . Learn . solarDreamStudios

なお、Reflection.js というJavaScriptのライブラリを使えば、同じようなことができるそうです。すげー!

FireworksでWeb2.0デザインしてみる – Part.1」への5件のフィードバック

  1. yoshi

    「mirror reflection(反射)」を参考にしてサイトのトップを作ってみました。自分の場合はphtotshop+イラレですが。記事大変参考になりました。

    返信
  2. モカ

     はじめまして!
     私もFireworks大好きです。
     こんなに簡単に鏡面反射イメージが出来るとは知りませんでした。
     有り難うございます。
     活用させてもらいます。

    返信
  3. ピンバック: Koji Murakami Weblog » FireWorks

  4. ピンバック: Roo Note » 【Fireworks】チュートリアル imblog.jp

  5. ピンバック: ブクマ! » Blog Archive » Web2.0がどうかは別として:FireworksでWeb2.0デザインしてみる

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>