PIXEL LAB ツール&エントリー一覧 PIXEL LAB 大阪南船場のFLASHを得意とする制作会社ピクセルイメージによるブログ。AS3、AIR、デザイン、3D、オリジナルツール等。 ▼Hard Typographic Artworkシリーズ | ▼DRAWシリーズ (FLASH) | ▼FLASHコンポーネント | ▼コマンド&拡張パネル | ▼日付順一覧 Hard Typographic Artworkシリーズ 2008.07.08:Design / Hard Typographic Artwork - 03.TREE編 NEW 2008.07.08:Design / Hard Typographic Artwork - 02.FLOWER編 NEW 2008.07.06:Design / Hard Typographic Aarwork - 01.HUMAN編 NEW DRA
斜線の背景も最近のWebデザインの特徴の一つです。Background Image Maker を使えばカンタンに斜線の背景画像を作ることが出来ます。が、もっと便利でかつ汎用的な斜線の背景画像の作り方が Super Stripes で紹介されていたので試してみました。 まずは Fireworks で 4 x 4 ピクセルの新規ドキュメントを作成します。このままだと編集しにくいので、表示比率を 3200% にしておきます。 ラインツールで 1px の「硬い線」を斜めに引きます。 最適化パネルで書き出すファイル形式を GIF にし、さらに「透明化するカラーの追加」で線のカラーを選択します。 書き出しをすれば画像は完成です。 あとは、css で背景画像と背景色を同時に指定します。
今回は、Mac OS X のDashboard っぽいバーを作ってみます。(ちなみに、私は根っからのWindowsユーザーで、Dashboard を触ったことはありません・・・) まず、角の丸みが100%の角丸矩形を描きます。塗りの色は#000000、ストロークは「なし」にしておきます。 描画した矩形をコピー&ペーストで複製します。(下の図ではわかりやすいように複製したほうの塗りの色を変えています。)元の矩形を「base」、複製したほうを「gradation」とします。 次に「gradation」の大きさを変えておきます。幅と高さをそれぞれ2pxずつ小さくしてください。 矩形ツールで「gradation」の半分の高さの長方形を描き、「gradation」の上辺と揃えます。長方形の塗りの色を#000000、透明度を50%ぐらいにすると、重なり部分が見えるので調整しやすいです。 ここで、Par
紙がやぶれた感じを表現するPhotoshopチュートリアルいろいろ – DesignWalkerにて紹介されていたテクニック集のうち、最初のPhotoshop Page Tear | AdrianHerritt.comで解説されている方法を、Fireworksで再現してみました。 練習なので下手くそですが、 ↑この画像が、 ↑こんな感じになります。なんとなくそれっぽいですよね。 では、やってみましょう ↑なげなわツールで適当にギザギザをつけて選択し、カットします。 ↑「Ctrl + Shift + I」で選択範囲を反転させます。 ↑右クリックして「コピーして新規ビットマップにする」を選びます。ビットマップが2個になります。 ↑再びなげなわツールで紙の切れ端部分を選択します。 ↑「コピーして新規ビットマップにする」を実行します。ビットマップが3個になります。 ↑「フィルタ > カラー調整 >
「スポットライトが当たったような画像を作る方法 | P O P * P O P」より。 今回の諦めている不便利はfkojiさんからの投稿です。 投稿したあとで自分なりに同様の効果を出す苦し紛れの方法を見つけたのですが、それよりもはるかに簡単でした。ポイントは「選択範囲の反転」。 P O P * P O Pの記事(Photoshopの例)を参考にしたらFireworksでも同様の効果を出せたので、ここではFireworksでのスポットライト効果の出し方を説明します。 ↑ 1. 「マーキーツール」を選択 ↑ 2. 「エッジをぼかす」を選択、値は5くらいで。 ↑ 3. 効果を出したい部分を選択。(点線部分) ↑ 4. 「選択」 – 「選択範囲の反転」を選択。(もしくはCtrl+Shift+Iでショートカット) ↑ 5. 「フィルタ」 – 「カラー調整」 – 「明るさ・コントラスト」を選択。 ↑
Fireworksのスライスガイドって 消せるんですね。今初めて知りました…orz 多分きっとこんなのって初歩的な話だよね。4年間もFWを愛用してるのに全然知らなかったわ。 スライスガイド消し方 まずデフォルト(スライスガイドあり)の状態。スライスが増えてくるとガイド線のせいで画面が見にくくなる(と、私は思ってる) 上部メニューの「画面表示」>「スライスガイド」にチェックが入っているのでそれを外す。(そこクリックする) 関係ないけど「スライスのオーバーレイ」って何?そこいじっても特に何も変化しないんやけど。何だろ、これは。 スライスガイドのチェックを外すとこの通り、スッキリ。 スライスガイドなくてもピタっとくる オブジェクトをクリックして「Shift+Alt+U」じゃなくて、ピンポイントでスライスガイドに沿ってスライスを作りたい時もあるじゃないですか。そういう時スライスガイドがあるからピタ
Fireworksのスタイルライブラリを整理中。 仕事の内容によっていくつかのスタイルパレットを切り替えて使っているけど、登録したスタイルの数が多くなってくると、探している時間や使うあてのないスタイルがどんどん増えてきて、かえって使い勝手が悪くなるばかり。 Webサイトのページデザインを制作中に「これは使える!」と思ったスタイルをパレットに登録して増やしてきた。でも、意外とそういう作り込んだスタイルほど、2度と使うこと場面がやってはこない。 むしろ、基本的なオブジェクトを登録しておいた方が役に立つことが多い。 例えばグラデーション。 Fireworksのグラデーションツールはデフォルトでは横方向なってしまう。縦方向のグラデーションにするには、ハンドルをえいっと縦に回転させるひと手間が必要で、このひと手間が以外と面倒なわけ。 そこで、縦方向のシンプルな白黒グラデーションボックスをスタイルに登
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く