Fireworksで画像を透過gif（透過png）として書き出す際のチュートリアル | FireWorks.20
管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ Fireworksでボタンなどの画像を書き出す際、背景を透明にしたい場合があると思います。今回はそんな「透過gif（透過png）」を作成するための手順をご説明しまです。Fireworksを使えば、いとも簡単に透過画像を作成することが出来ますよ！ 前提として、透過させる事ができるのはgifまたはpng形式のみです。jpg形式で書きだす際は透過を行う事はできませんのでご注意を。 では、まず透過させる元の画像を作成します。今回は、下記の矢印ボタンを例に進めていきます。 オブジェクトをスライスする 最初に、作成したオブジェクト（今回の場合は矢印ボタン）を、スライスツールを使ってスライスします。その際、今回は下地の背景色を白色
【Fireworks】の痒い所に手が届く！拡張機能“Transform Panel”を使ってみた | バシャログ。
最近昼間の暖房が少し暑いくらいなので、油断して薄着で出かけてみたら夜寒くて死にそうになった seki です。 今回は、先日Fireworksの拡張機能を色々復習＆整理をしていた時にたまたま見つけた拡張機能「Transform Panel」というのを入れてみたので、機能のご紹介をします。Fireworksで要素のサイズや細かい座標をプロパティで直接入力する人には、痒い所に手が届く良さを感じられるかと。 詳細は以下より。 ダウンロード http://www.senocular.com/fireworks/extensions/?entry=572 こちらからダウンロードしてください。 「Transform Panel」で出来ること まずは基本となる便利な機能を一つ一つ見ていきましょう。 実際のパネルがこちら。 簡単に言うと画像やテキストの変形を補佐してくれる拡張機能です。 1.小数点単位を表示
Photoshopのアクション機能に相当するFireworksの「コマンド」機能を使ってみよう | FireWorks.20
管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ Fireworksには、Photoshopでいう「アクション」と同様の機能として、「コマンド」という機能が搭載されています。この機能を利用すると、ある一連の操作を記憶しておき、いつでも呼び出してオブジェクトに対して実行する事ができるので、大変効率アップに繋がります。それでは、使い方についてご紹介します！ 一連の操作を「コマンド」として記録する まず、Photoshopの場合ですと「記録を開始」→「記録を中止」→「アクションを保存」といった流れで操作の記録を行いますが、Fireworksの「コマンド」には「記録を開始」に相当する操作はありません。 ちなみに、コマンドの記録には「ヒストリーパネル」を使います。 コマンドを
How To Optimize The Design Workflow With Fireworks Extensions — Smashing Magazine
Before reviewing in detail the Fireworks extensions that Ashish Bogawat recommends, he shares a few general tips and suggestions on how to work with extensions in Fireworks. I’ve been using Adobe Fireworks for over a decade now and I can recommend it to anyone searching for the optimal screen design workflow. Much has been said about Fireworks’ capabilities as a design application, but today I wan
Fireworksの「レイヤーからファイルに書き出し」が目からウロコ | バシャログ。
『哀しき獣』という韓国映画が面白すぎたので、もう一度観たいminamiです。 Fireworksの画像書き出しではもっぱらスライスの使用をプッシュしてきた当ブログですが、「レイヤーからファイルに書き出し」って便利じゃない・・・という衝撃を改めてお届けします。 「レイヤーからファイルに書き出し」使ってる？ Fireworksの書き出しメニューには幾つか項目がありますが、「レイヤーからファイルに書き出し」は今まで使ってきませんでした。 要因としては、 Photoshopと違いオブジェクトを直接編集できるので、パーツ毎のレイヤー分けを意識していなかった 画像書き出しはスライスが強力なので他の方法を気にしたことがなかった というのがあると思います。しかし、場合によってはスライスで管理するよりもこちらのほうが便利！ということで見なおしてみました。 同じレイアウトで大量に画像を作りたい 例えば以下のよ
『データ管理で作業効率がUPするデザインワーク』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは！ スマートフォンプラットフォームDivという部署でデザインを担当しているおばたです。 モック作りを進めていって、デザインの方向性がなんとなく見えてきたら その後の開発は、デザインデータの管理・運用で作業効率がずいぶんと違ってきます。 はじめにFireworks CS5.1を使い、Subversion（SVN）で管理しています。 データの管理は、忙しいとついつい後回しにしてしまいがちです。 しかし、放っておくと気づけばカオスになっていることもしばしば・・・ ちょこちょこ整理するようにすると、すてきな感じになります。 Subversionにつ
作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。
ややうさんくさい感じのするタイトルですが、ホントの話なんです。 海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。 SPECCTRについてごく簡単に説明すると… フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる というものです。 これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。 また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄
『Fireworksの拡張機能について』
アメーバ事業本部ピグディビジョンでFlashデベロッパーをしております植木(@tomohip)と申します。2011年10月に入社いたしました。最近、Dreamweaverの本を共著で書きました。 素材をインポート後は、通常は、自分の作りやすいように名前を変え、ムービークリップに入れたりと、まとめた状態になっています。そうした状態で、再度インポートを使うと、また０からになるので、インポートするのが非常に手間です。 そこで、私が考えた方法は、Fireworksにまとめてしまう方法です。FireworksはPhotoshop、Illustratorのファイルを読み込めますし、スライスの書き出しも簡単で、グラフィックが苦手な私でも簡単に使えます。使うパーツごとにレイヤーに分けて管理して、使いたい画像だけを書き出して使います。毎回、更新部分だけFireworksの編集作業が発生しますが、Flashよ
Fireworksの画像からタップ操作対応のプロトタイプを作成できる「TAP」 | デベロッパーセンター
Webサイトやアプリを制作する場合、デザインを作り込む前に触って動くプロトタイプを作ることで、あらかじめ使い勝手の良し悪しなどを検証することができます。今回紹介するTAP（Touch Application Prototypes）を使うと、Fireworksで簡単にモバイル向けのプロトタイプを作成できます。 よくあるWebサイト制作の実装工程について確認しましょう。まず、PhotoshopやFireworksなどのツールを用いてデザインの作業を行います。次に、作成したデザインカンプを元に、パーツをスライスし、コーディングをしてからはじめて「動く」「触れる」ものを作ります。こうした工程の場合、実際に動く状態を見てから問題に気づき、要素の配置や装飾の変更などが発生し、大きな手戻りが生じるというのを経験している人も多いのではないでしょうか。 そうした問題を解決・軽減するために「プロトタイピング」
FireworksのスライスレイヤーをPhotoshopで実現【決定版】
Dearpsでは今までにPhotoshopでのスライスを楽にする裏テクニックを数々公開してきました。 【WEBデザ向け】スライスチップ作成パネルver2-CS4.CS5用 スライスチップ作成パネル-CS4用 【裏技】「ちょっと変わったスライス作成テクニック」 スライス作成テクニック 今回はこれらの決定版ともいえるスクリプトを作成する事が出来たので公開します。 【今回公開するスクリプトの特徴】 ・選択範囲をスライスに変換する。 ・スライスをFireworksのようにレイヤーで管理できる。 ・スライスはWEBレイヤーフォルダに自動格納される。 ・画像名称をスライス作成時入力できてレイヤー名にも反映される。 他にもメリットたくさん！まずはだまされたと思って使ってみて下さい=3 利用方法はこんな感じ。 【1】ファイルメニューから［スクリプト］＞［参照］を選択し、ダウンロードしたスクリプトファイル”
リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)
こんにちは、イメージ担当の長谷川です。 今回は Apple がデザインしている iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラデーションの設定をします。 長方形ツールで作成するボタンなどのサイズより少し大きいサイズの四角を描き、グラデーションの塗りを円錐にします。 以下のように白とグレーを交互に設定します。右端と左端を同じ色にしないとグラデーションに線が出来てしまいますのでご注意ください。 ここでは濃いグレーを #666666、両端の薄いグレーを #999999 に設定しています。 次にノイズを適用量：10で追加します。これが同心円状のヘアラ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adobe Community
http://lab.spec5zigen.com/archives/fireworks_tips_01/
Fireworksの拡張まとめ（2012年8月版） | Webデザインのタネ
Fireworksで覚えておくと便利な文字設定まわりのTips | Webデザインのタネ
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
YUKI HARUYAMA Portfolio Site | 春山 有由希
http://www.adobe.com/jp/devnet/fireworks/articles/www.adobe.com/jp/devnet/fireworks/articles/fireworks_tap.html
http://fireworkswireframingkit.com/