タグ

Tipsとfireworksに関するWebDesignScrachのブックマーク (7)

  • 【Fireworks】文字を 3D っぽく加工する | バシャログ。

    はい、シーブレインの toyama でございます! 今日は Firetuts.com さんのチュートリアルをやってみたいと思います。 テキストオブジェクトを立体っぽくみせる技です。 1. 文字を打ってナナメに 文字を45度回転させた後、新しい高さの 50% を引いた数をオブジェクトの高さとして入力してあげると、いい感じに奥行き感が出ます。 2. 文字に白い縁取りを 別になくてもいいですが、ここはチュートリアル通りに。縁取り線をつける場合は、[塗りをストロークに重ねる]にチェックをいれるのが好みです。塗り部分と線部分の間に変な隙間ができなくなります。 アウトライン化してグループ化しておきましょう。 3. 立体感を出すフチを作る 日のキモその 1 。オブジェクトを選択した状態で、[フィルタ]→[シャドウとグロー]→[ソリッドシャドウ]を選択。こんな効果があったのか… 角度と距離、色をを適宜設

    【Fireworks】文字を 3D っぽく加工する | バシャログ。
  • The Ultimate Round-Up of Fireworks Tutorials and Resources — Smashing Magazine

    Fireworks was originally created as an image editing and web design application by Macromedia, for quick web mock-ups, and optimizing images for the Web. It has since been transformed into a powerful environment for designing and prototyping applications that integrates easily with Dreamweaver, Flash and Photoshop &ndash making it, perhaps, the most powerful (that’s controversial) and versatile gr

  • 続:PNG画像をより美しく、より軽量に最適化するテクニック | コリス

    上記のように半透明な箇所がある画像の場合、PNGで保存する前にモードをグレースケールにすることは非常に重要です。 グレースケールモード:[イメージ]-[モード]-[グレースケール] 2. 色数はより少なく 画像のカラーを減らす方法として、前回紹介したポスタリゼーションに代わる方法を紹介します。 この方法は256色限定で、カラーを最適化できます。 半透明の画像からイメージ箇所のみを抽出し(半透明は削除)、インデックスカラーに変換しマスクを適用します。 詳しい手順は下記の通り。 画像を開き、[イメージ]-[複製]で画像を複製します。 複製した画像に、[フィルタ]-[PhotoWiz]-[Remove Transparency]で透明箇所を取り除きます。 ※「PhotoWiz」はRemove Transparencyを参照ください。 [イメージ]-[モード]-[インデックスカラー]を選択し、イン

  • 【Fireworks】よく使う矢印の作り方 すごく初歩 | バシャログ。

    突然雨がアホみたいに強く降ってきたりして困ります。シーブレインの toyama です。 STOP!熱帯雨林化! WEB サイトをデザインするときに避けて通れないのが矢印イメージの作成です。 テキストの頭に、ボタンの中にと、使いどころ満載。 普段 toyama がよく作る矢印の作り方をご紹介します。 1. しっぽ付き矢印 正方形を矩形ツールで書いて[修正]→[変形]→[数値を入力して変形]で回転を選択し、45°回転させます。 [数値を入力して変形]はサイズ変更、拡大縮小、回転のダイヤログボックスが一度に表示されてとっても便利です。 ダイレクト選択ツールで頂点のひとつを選択し、Delete で三角形に変形。 最初に書いた正方形が奇数×奇数の場合は三角形の頂点が 1 ピクセルになりますが、偶数×偶数の場合は 2 ピクセルの三角形になります。 パスが切れたままで気持ち悪い人は、ペンツールでパスを閉

    【Fireworks】よく使う矢印の作り方 すごく初歩 | バシャログ。
  • 【Fireworks】GIFで支給されたロゴを簡単に白抜きに加工する方法 | バシャログ。

    例えば Web サイトのリニューアル案件では「ロゴのデータはありません。現サイトで使っている gif 画像を使ってください」というケースがよくあります。 「ロゴを白抜きにしたデザインパターンを作りたいんだけど…」という場合には、ロゴをトレース→パス化して使い勝手の良い素材を用意するのがベストな方法ではありますが、トレースする時間が取れない時は以下の方法がお手軽でオススメです。 使用した画像加工ソフトは Fireworks です。 ↑支給された(というか Web サイトからコピーした)ロゴの例。透明化もされていないし、切り抜くのも面倒。 STEP 1 ロゴ画像をグレースケールで保存します。 STEP 2 グレースケール化したロゴ画像を背景の上に配置。 STEP 3 ロゴ画像を選択して「フィルタ」→「カラー調整」→「カラーの塗り」を設定。 カラーは何色でも良いですが、ブレンドモードは「反転」に

    【Fireworks】GIFで支給されたロゴを簡単に白抜きに加工する方法 | バシャログ。
  • PNG画像をより美しく、より軽量に最適化するテクニック | コリス

    先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記:2009/07/27 エントリには続きがあります。 続:PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop(あるいは他の画

  • JPEG画像をより美しく、より軽量に最適化するテクニック

    JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ(8x8ピクセル)です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため

  • 1