とみながです。 今日は資料も何も届かず、特にする仕事もないので、このサイトのリニューアル用のカンプをがーっと作りました。 今のもそうなんだけど、私はWeb用のデザインは全部Fireworksで作っていて、今はCS3を使っています。 Photoshopと比べると美しくないとよく言われますが、工夫次第ではかなり良い感じに使えるのでは‥‥と思うのですが。現行バージョンだとテキストのアンチエイリアスがあまりキレイじゃないかなーと思うぐらいで、フィルタ関係は使い方を工夫すれば大丈夫です。 Fireworksでうまく影をつける よくやるのが、ぼかしをフィルタでやらないで、ぼかしをつけたいオブジェクトを複製し、背面に配置してエッジをぼかす方法。 これはあれこれ試行錯誤して、どうやったらPhotoshopの「光彩（外側）」に近づけるかと考えて、結果的にこの方法になりました。 わかりにくいので図を作っ
アドビとマクロメディアのような企業が経営を統合する場合、ユーザ（そして従業員も）は、今後の各製品がどうなるかの発表を不安とともに待たねばなりません。お気に入りのツールが発売中止になるかどうかは、百戦錬磨のプロフェッショナルでも気が気でならないはずです。 経営統合から約１年が経った今も、フォーラムやブログにはさまざまな情報が飛び交っています。アドビは Director をサポートし続けるのか…、FreeHand の搭載機能は Illustrator に吸収されるのか…、Fireworks は Photoshop によって抹消されてしまうのか……。残念ながら筆者は、すべての製品の将来展望に関する情報を入手していません。しかし Fireworks に限って言えば、今後も単体製品ならびにバンドル製品としてこの製品が存続することを、皆さんにお伝えすることができます。 現に、Fireworks 9 は
そろそろ「Web2.0的デザイン」という言い回しが恥ずかしくなってきましたが、それはそれでおいといて。グラデーションは今っぽいデザイン（ちょっと言い方を変えてみた）では外せない要素と言えるかと思いますが、プロのデザイナーの方はさておき、素人が挑戦すると、色の選択に失敗してイマイチ・・・なんてことになりがちです。 » A Gradient Tutorial » 9rules Network Official Blog こちらのサイトでは、グラデーションを作る際のポイントが説明されています。 さて、どれが一番きれいでしょう？1 は彩度（鮮やかさ）が足りません。上のサイトでは「a classic problem」と紹介されています。2 はマシですが、ちょっと素人臭さを感じます。まぁ好みは人それぞれだと思いますが、やっぱり 3 が一番きれいだと思います。 ちなみに僕は、次のようにしてグラデーション
『Movable Typeプロフェッショナル・スタイル』 2008年4月5日に開催したMT4LP5の連動書籍として企画。 Movable Typeの使いこなし情報を配信されたり、オリジナルプラグインなどを開発されている著名な著者によるオムニバス。 『変革期のウェブ 〜5つのキーワードから読み解くウェブとビジネスのこれから〜』 ［Web標準の日々］の出演者を中心に行った座談会を書籍化。 『Dreamweaverプロフェッショナル・スタイル［CS3対応］』 2006年12月に刊行した『Dreamweaverプロフェッショナル・スタイル』の全面改訂版（CS3対応）。 CSS Nite LP, Disk 2に出演した講師陣＋αによるDreamweaverの解説書。 サイト制作の効率とクオリティをアップする実践的かつ即戦的なワザを凝縮。毎日コミュニケーションズから発行
斜線の背景も最近のWebデザインの特徴の一つです。Background Image Maker を使えばカンタンに斜線の背景画像を作ることが出来ます。が、もっと便利でかつ汎用的な斜線の背景画像の作り方が Super Stripes で紹介されていたので試してみました。 まずは Fireworks で 4 x 4 ピクセルの新規ドキュメントを作成します。このままだと編集しにくいので、表示比率を 3200% にしておきます。 ラインツールで 1px の「硬い線」を斜めに引きます。 最適化パネルで書き出すファイル形式を GIF にし、さらに「透明化するカラーの追加」で線のカラーを選択します。 書き出しをすれば画像は完成です。 あとは、css で背景画像と背景色を同時に指定します。
もはや「Web2.0デザイン」といえば外すことが出来ない角丸（Rounded Corners）。実現させるにはいろいろな方法がありますが、今回は CSSで角をもっと丸くする方法いろいろ - GIGAZINE で紹介されている方法にチャレンジしてみました。 » More Rounded Corners with CSS - Schillmania.com まずは、利用する角丸の画像を作成。Fireworks でやってみます。 角丸矩形で横幅が1600pxぐらいの角丸矩形を描画します。 スライスツールを使って以下のように6つのスライスを作成します。 [最適化]パネルで書き出すファイル形式を「GIF」にして、書き出しを実行します。すると、6つのGIFファイルが作成されます。 これで画像の用意ができました。次に HTML と CSS です。
今回は、Mac OS X のDashboard っぽいバーを作ってみます。（ちなみに、私は根っからのWindowsユーザーで、Dashboard を触ったことはありません・・・） まず、角の丸みが100%の角丸矩形を描きます。塗りの色は#000000、ストロークは「なし」にしておきます。 描画した矩形をコピー＆ペーストで複製します。（下の図ではわかりやすいように複製したほうの塗りの色を変えています。）元の矩形を「base」、複製したほうを「gradation」とします。 次に「gradation」の大きさを変えておきます。幅と高さをそれぞれ2pxずつ小さくしてください。 矩形ツールで「gradation」の半分の高さの長方形を描き、「gradation」の上辺と揃えます。長方形の塗りの色を#000000、透明度を50%ぐらいにすると、重なり部分が見えるので調整しやすいです。 ここで、Par
FireworksでWeb2.0デザインしてみる - Part.3 そろそろネタが尽きてきましたが、第三弾です。今回はバッジに挑戦！ 星型で適当な大きさの星を描きます。 画像を選択すると黄色のポインタが5つ現れると思います。これらのうち、「頂点」というのを動かして頂点の数を24ぐらいにします。さらに、「半径2」も動かして、下の図のようにします。 次は塗りを調整します。「塗りの種類」で[グラデーション]-[線形]を選び、左右の色を調整します。 さらに、グラデーションの方向を縦にします。shiftキーを押しながらだときれいに90度回転させることができます。 ドロップシャドウをかけます。各設定値はキャプチャのとおりです。 完成！これは簡単に出来ました。 ちなみに、PingMag - 東京発 「デザイン＆ものづくり」 マガジン » Archive » ウェブデザインのトレンド：死の宣告にもあるよ
先日、勢いで Macromedia Fireworks 8 を購入しました。私はどうも Photoshop や Illustrator が苦手、というか使いこなせません。メニューが豊富すぎてわけがわかんない。が、Fireworks はバージョン2 ぐらいから会社で使っていて、相性がいいのです。 で、せっかく買ったので、Web2.0っぽいデザインにチャレンジしてみました。まずは第一弾。「mirror reflection（反射）」です。 こういうやつ。 反射させたいオブジェクト（A）をコピー＆ペーストで複製（B）します。 複製したオブジェクト（B）を選択して、[修正]-[変形]-[縦反転]で反転させます。 反転させたオブジェクト（B）を元のオブジェクト（A）の下に移動させます。 反転させたオブジェクト（B）を選択して、[コマンド]-[クリエイティブ]-[イメージのフェード]を選び、メニューか
FireworksでWeb2.0っぽいデザインを試みるこのコーナー。第二弾はMacのAqua風ボタンを作ってみましょう。 下の図のような感じの角丸矩形（「くけい」って読むのね。）を描きます。角の丸みは20-30%程度。塗りの色は淡い色に、ストローク（線）の色はなしにしておきます。 次に描画した矩形を2回コピー＆ペーストして複製を作ります。（つまり全部で3つが重なっている状態。）便宜上、上から順番に「base」「100% round」「temp」という名前をつけます。下の2つはしばらく使わないのでロックをかけておくとよいでしょう。 一番上の「base」を編集していきます。まず、ストローク（線）の色をつけます。「塗り」よりも濃い目の色にすると見栄えが良いです。（例では塗りの色を#DDFF88、ストロークの色を#99CC00、ストロークの種類は1pxの柔らかい線にしてみました。） 次に「シャドウ
Sams Publishing was developed to provide content for anyone who wanted to learn new technologies. Sams is now a part of Pearson, the world's largest learning company. Pearson will continue the Sams tradition of delivering trusted and quality content and resources to help you get started with new technologies and programming languages. Featured Series Titles in the Sams Teach Yourself series are ca
In this tutorial we are going to learn how trace and draw an image using Fireworks. You will learn how to draw a Panda in Fireworks by tracing an image. The source .png file can be downloaded at the end of the tutorial. Read More In this tutorial, we are going to learn how to create a simple typography illustration in Adobe Fireworks. We will use the transformation tool and paste inside property o
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
