Fireworks チュートリアル＆記事Fireworks チュートリアル＆記事
jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.5
斜線の背景も最近のWebデザインの特徴の一つです。Background Image Maker を使えばカンタンに斜線の背景画像を作ることが出来ます。が、もっと便利でかつ汎用的な斜線の背景画像の作り方が Super Stripes で紹介されていたので試してみました。 まずは Fireworks で 4 x 4 ピクセルの新規ドキュメントを作成します。このままだと編集しにくいので、表示比率を 3200% にしておきます。 ラインツールで 1px の「硬い線」を斜めに引きます。 最適化パネルで書き出すファイル形式を GIF にし、さらに「透明化するカラーの追加」で線のカラーを選択します。 書き出しをすれば画像は完成です。 あとは、css で背景画像と背景色を同時に指定します。
jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.4
今回は、Mac OS X のDashboard っぽいバーを作ってみます。（ちなみに、私は根っからのWindowsユーザーで、Dashboard を触ったことはありません・・・） まず、角の丸みが100%の角丸矩形を描きます。塗りの色は#000000、ストロークは「なし」にしておきます。 描画した矩形をコピー＆ペーストで複製します。（下の図ではわかりやすいように複製したほうの塗りの色を変えています。）元の矩形を「base」、複製したほうを「gradation」とします。 次に「gradation」の大きさを変えておきます。幅と高さをそれぞれ2pxずつ小さくしてください。 矩形ツールで「gradation」の半分の高さの長方形を描き、「gradation」の上辺と揃えます。長方形の塗りの色を#000000、透明度を50%ぐらいにすると、重なり部分が見えるので調整しやすいです。 ここで、Par
jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.3
FireworksでWeb2.0デザインしてみる - Part.3 そろそろネタが尽きてきましたが、第三弾です。今回はバッジに挑戦！ 星型で適当な大きさの星を描きます。 画像を選択すると黄色のポインタが5つ現れると思います。これらのうち、「頂点」というのを動かして頂点の数を24ぐらいにします。さらに、「半径2」も動かして、下の図のようにします。 次は塗りを調整します。「塗りの種類」で[グラデーション]-[線形]を選び、左右の色を調整します。 さらに、グラデーションの方向を縦にします。shiftキーを押しながらだときれいに90度回転させることができます。 ドロップシャドウをかけます。各設定値はキャプチャのとおりです。 完成！これは簡単に出来ました。 ちなみに、PingMag - 東京発 「デザイン＆ものづくり」 マガジン » Archive » ウェブデザインのトレンド：死の宣告にもあるよ
jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.2
FireworksでWeb2.0っぽいデザインを試みるこのコーナー。第二弾はMacのAqua風ボタンを作ってみましょう。 下の図のような感じの角丸矩形（「くけい」って読むのね。）を描きます。角の丸みは20-30%程度。塗りの色は淡い色に、ストローク（線）の色はなしにしておきます。 次に描画した矩形を2回コピー＆ペーストして複製を作ります。（つまり全部で3つが重なっている状態。）便宜上、上から順番に「base」「100% round」「temp」という名前をつけます。下の2つはしばらく使わないのでロックをかけておくとよいでしょう。 一番上の「base」を編集していきます。まず、ストローク（線）の色をつけます。「塗り」よりも濃い目の色にすると見栄えが良いです。（例では塗りの色を#DDFF88、ストロークの色を#99CC00、ストロークの種類は1pxの柔らかい線にしてみました。） 次に「シャドウ
jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.1
先日、勢いで Macromedia Fireworks 8 を購入しました。私はどうも Photoshop や Illustrator が苦手、というか使いこなせません。メニューが豊富すぎてわけがわかんない。が、Fireworks はバージョン2 ぐらいから会社で使っていて、相性がいいのです。 で、せっかく買ったので、Web2.0っぽいデザインにチャレンジしてみました。まずは第一弾。「mirror reflection（反射）」です。 こういうやつ。 反射させたいオブジェクト（A）をコピー＆ペーストで複製（B）します。 複製したオブジェクト（B）を選択して、[修正]-[変形]-[縦反転]で反転させます。 反転させたオブジェクト（B）を元のオブジェクト（A）の下に移動させます。 反転させたオブジェクト（B）を選択して、[コマンド]-[クリエイティブ]-[イメージのフェード]を選び、メニューか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
noupe - THE magazine for webworkers and site owners
