グリッドやガイドのお助けツールから、グループ化したエレメントのサイズ調整、ダミー画像やテーブルの作成、ショートカットの強化など、そんな便利なFireworksの機能拡張を紹介します。 Optimizing The Design Workflow With Extensions 上記で紹介されている7つのツールを紹介します。 Grids Panel Guides Panel Smart Resize Tables Placeholder Orange Commands QuickFire Grids Panel 「Grids Panel」は、数値を入力してレイアウト用のグリッドを作成します。 Grids Panel カラムの幅、数、溝の幅、を選択するだけで簡単に作成できます。また、作成したグリッドは不透明度を調整できる優れものです。 Photoshopにも同様にグリッドを作成する便利な機能拡
ややうさんくさい感じのするタイトルですが、ホントの話なんです。 海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。 SPECCTRについてごく簡単に説明すると… フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる というものです。 これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。 また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄
フォーマットはタブを切り替えることで、6つまで設定することが可能です。 例2) CSSを書いているときに、画像のwidth,heightを目視で調べて、 またエディタに戻って打ち込んで、、、という作業は続けているとすごく疲れます。 そんなときに、こんなフォーマットを書いておきます。 width:%wpx; height:%hpx; left:%xpx; top:%ypx; それで、またスライスを選択して、挿入ボタンを押すとこんなコードが吐き出されます。 width:99px; height:95px; left:47px; top:60px; あとは、挿入ボタンのとなりのクリップボードボタンを押して、クリップボードに転送して、 好きなエディタに戻ってコピペすれば楽ちんです。 フォーマットには好きな文字列をいれることが可能なので、案件や普段使っている書き方を 書いておくと良いと思います。 ま
こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド> Smart Resize > Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的
英語でブログを書いてたのが海外のコミュニティの目に留まったのか、インタビューのオファーがきたので機械翻訳片手に答えてみました。 Thanks @chunwui. Fireworks Interviews 以下日本語だとこんな感じ。 まず最初に住んでる国と自己紹介を。 ハンドル名はyoropan。 東京に住んでいます。 日常のお仕事でどんなことをしていますか? 小さなプロダクションでデザイン、コーディング、プログラミングをしています。 どんな案件にFireworksを使ってますか?それらの案件でどのようにFireworksは役に立ちましたか? キャラクターを使ったFlashアニメーションでプロモーションを行うことになりFireworksのドロー機能を研究してみて結構使えることがわかり、それ以降好んでFireworksでイラストを描いたりしている。 また別プロジェクトではFlexでフォームアプ
Fireworks用のスライス関連の機能をまとめた拡張パネルです。 以前、スライス関連のコマンドはアップしましたが、 UIかぶせて、スライスコード出力の機能も追加しています。 スライスの作成・名前付け、コード出力など「PI_Slice」 複数スライスの一括作成 複数スライスの一括画像フォーマットの設定 連番ベースでの名前づけ 独自の値配列による名前づけ 複数スライスの一括リサイズ 複数スライス名の一括設定 複数スライス名の一括変更 複数スライスコードの一括出力(クリップボードにコピー) スライスコードの出力について 今回のパネルは、選択しているスライスの情報をもとに、HTMLやCSS用のコードを 生成・コピーする機能を実装してて、画像まわりのコード作成を楽にしてくれると思います。 初期設定では、HTMLやCSS用のテンプレートがありますが、 5件まで編集・保存可能なので、自分好みにカスタマ
世のFireworksユーザーの方はどのように機能拡張して使っているのでしょうか? Photoshopに比べれば少ないですが、作成・配布、解説・紹介をされている方が確かにいらっしゃいます。 探した中で、僕が実際に使用している7つの拡張の紹介です。 テクスチャを増やす Fireworks texture gallery Fireworksで使えるテクスチャファイル300種類を無料で配布しているWEBサイトです。 単純な縦線や斜線のバリエーションなどから作り込まれたものまで、種類豊富に揃っています。 Fireworksの和風・伝統紋様テクスチャ – ProjectDD Blog 「ProjectDD Blog」さんの記事内でも複数のテクスチャファイルが配布されています。 【テクスチャファイルの使用方法】※Mac版 Fireworks 8の場合 /アプリケーション/Macrome
Yoropan blog - Fireworksに入れてみた機能拡張機能拡張いろいろFireworks AutoBackup utility - Adobe Marketplace - Offering Detail自動バックアップツール。adobe謹製Tool Force Software | ForeverSave Lite自動保存ツール自動化のすすめ(Fireworks CS4 コマンドでより効率化!) - EC studio ...(none)Fireworksでマルチアイコンのfavicon.icoを書き出す。|linker journal ...(none)Fill With Background - Adobe Fireworks Extensions - johndunning.comボタンの文字を消すアレOrange Commands | workflow automat
Fireworks用のテクスチャ管理パネルを作成しましたので、公開します。 以前公開した、フォント一覧管理パネル 「PI_FontList」と使用法はまったく同じです。 フォント一覧管理パネル「PI_FontList」完成(FW,FL,PS,AI) 使用されてない方は、こちらも合わせてご使用ください。 テクスチャ管理の機能 Fireworks上で、テクスチャを管理し選択オブジェクトに適用するほか、 ついでにこまごましたものも、管理できます。 テクスチャ グラデーション ブレンドモード カラー パターン あと、検索したり、マークしたり、無駄に高機能です。 ScreenShot 対応バージョン FireworksCS4以上です。 ダウンロード MXPファイルになってますので、ダウンロード後、「PI_TextureList.mxp」をクリックすれば、 EXTENSION MANAGERが起動し、
※Light版を追加したので、エントリーを全体的にアップデートしてます(2010/04/14 )。 以下のエントリーのつづきです。 オリジナルツール / フォント一覧管理パネル 「PI_FontList(AI用)」を作りました。 前回はAI用だけリリースしましたが、今回は、以下のバージョンをリリースします。 機能限定、軽快動作のLight版も追加してます。 Fireworks CS4用 Flash CS4用 Photoshop CS4用 Illustrator CS4用 CS3の場合は、アプリごとに動いたり、動かなかったりして、検証が大変なので、CS4以上としています。 もうすぐ登場するであろうCS5については、当然、未検証です(たぶん、いけると思うけど)。 ■ScreenShot 通常版「PI_FontList」 Light版「PI_FontList_Light」 ■「PI_FontLi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く