はじめてのfireworks。もっと便利になる拡張機能とは？ | webデザインライダーwebデザインライダー
FireworksやDreamweaverを使ったwebデザインの作業効率化の提案や、デザイン全般の話。はたや、使えるのか分からないネタ要素の強いものなどを紹介しています。<最近バイクに乗れなくて気分転換ができていないozakkuです。今週はfireworksを使い始めた人向けに、作業効率化をはかるための拡張機能を紹介します。 一度に使い始めると混乱の元になるかなと思い、今回は頻繁に使う5つに絞りました。 目次 拡張機能の導入方法 導入する前の注意点 拡張機能 スライス名の入力が簡単に1SliceNameChanger スライス名に連番がふれるSequenceNumSlice 編集できるアタリ画像が作成できるPlaceholder テーブル作成、整列に便利なTables コーディング中の要素のサイズ、色等の確認に便利specctr 拡張機能の導入方法 まずは、拡張機能を配布しているサイトか
Fireworksでテキストボックスの幅を変えるとベースラインがずれる件 | FireWorks.20
タイトルまんまですが、Fireworksでテキストボックスの幅をカーソルで伸ばしたり、コマンド「固定の幅を切り替え」の操作を行うと、選択中のテキストのベースラインがずれるという現象が起きます。今回は、そんな場合の直し方をご紹介。 テキストボックスをカーソルで伸ばすと、ずれます。 「コマンド」→「テキスト」から選べる操作「固定の幅を切り替え」は、テキストボックスの幅をテキスト量ぴったりに合わせる事ができる便利なコマンドなのですが、やはり同時に、文字のベースラインが、ずれます。およそ4pxほど。なんで。 バージョン8やCS3では、ずれてなかったと思ったんですけどね。 おそらく、テキストのレンダリングエンジンが変更になった、CS4以降から発生したバグだと思います。 未だに直ってないので、もしかしたら、このずれにはなにか意味があるのかもしれませんが…。（んなわけねー） 直し方 ずれた場合の直し方は
Specctr | Home
768 px 100 px 200 px 200 px Fill: none Stroke: Solid 13pt #4990E2 Stop spec'ing by hand Design. Iterate. Spec. Sync. Add specs to your designs in an instant. Simplify your design to dev production with Specctr's panel and new automated annotation features. Now open source and free to use. Download Here Introducing Specctr 3.0 Spec in just a few easy steps! Our newest panel is better than ever. New
Adobe Fireworks使い方、いつも使っているバナー制作テクニック その2(制作データダウンロード付き) - Sedori Plan
画像をつかって作るバナー（サイズが足らない画像を使う場合） 横幅494pxのバナーを作るとします。 この画像は横幅442pxで50pxほど足りない画像です。 足りない横幅は、背景に矩形を入れたり、文字など入れて足りない横幅をカバーします。 画像の一部を透過させる 透過させるための矩形を作る 画像と矩形を使ってマスクをします 画像の上に、先ほど作った矩形を重ねます。 この矩形を「カット」（Ctrl + X）して、画像を選択して、「マスク」をクリックします。 マスクはここにあります。 クリックすると、赤枠で囲ったようになります。 ここに先ほど「カット」した矩形を「ペースト」（Ctrl + V）します。 「画像の一部を透過させる」のですが、まだ透過になっていません。 透過させるには、マスクした矩形を選択して「グレースケール表示」にチェックを入れます。 こんな感じで透過ができました。 背景色と文字
Adobe Fireworksで作る、いつも使っているバナー制作テクニック その1(制作データダウンロード付き) - Sedori Plan
画像をつかって作るバナー この写真を使ってバナーを作るときに、サイズはこのままで文字だけを入れてバナーっぽくしたいと思います。 文字だけを入れてみました 文字の色を白で、入れてみましたが「Title」の文字が少し見ずらい気がします。 文字を見やすく「光彩」を使う 文字を見やすくするために「フィルタ」の「光彩」を使ってみます。 「光彩」の設定数値は、 「Title」の文字にも同じ設定で「光彩」を使いました。 「光彩」を使った文字のほうが見やすい気がします。 まだ見にくいと思う方は、数値などをもう少し高くして見やすくしてもOKです。 矩形を作る もう少し、見やすくしたいし、「webデザイナー」をやっていたのでテクニックを使って見やすくしたいと思います。 画像と同じサイズの矩形を用意します。 ※矩形ですが、グレーの色で作ったのですが、次の工程で見にくかったので黒色に変えました。 矩形の塗りの設定
Specctr | Home
768 px 100 px 200 px 200 px Fill: none Stroke: Solid 13pt #4990E2 Stop spec'ing by hand Design. Iterate. Spec. Sync. Add specs to your designs in an instant. Simplify your design to dev production with Specctr's panel and new automated annotation features. Now open source and free to use. Download Here Introducing Specctr 3.0 Spec in just a few easy steps! Our newest panel is better than ever. New
Tables
The Tables panel enables you to quickly mock up HTML-style tables without having to laboriously position each cell or border. Although it's relatively straightforward to arrange elements in a grid using Fireworks' alignment and distribution commands, as soon as the table contents change you'll need to reposition everything manually. The Tables panel automates this tedious process. Unlike the table
Fireworksでのウェブ制作の作業をかなり楽にする機能拡張のまとめ
グリッドやガイドのお助けツールから、グループ化したエレメントのサイズ調整、ダミー画像やテーブルの作成、ショートカットの強化など、そんな便利な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にも同様にグリッドを作成する便利な機能拡
CSS Professionalzr - Fireworks Extension - Firewoiks: Extensions, resources & tutorials for Fireworks, Dreamweaver & HTML5/CSS3
Return to Firewoiks Extensions, resources & tutorials for Fireworks, Dreamweaver & HTML5 / CSS3 by UI developer, Matt Stow. CSS Professionalzr v1.1 Posted: August 1 2013 Fireworks CS6 introduced a fantastic feature with the CSS Properties panel. It allows the user to copy an element's attributes as CSS3 to make the build process more efficient. It doesn't produce the cleanest, most professional co
作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。
ややうさんくさい感じのするタイトルですが、ホントの話なんです。 海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。 SPECCTRについてごく簡単に説明すると… フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる というものです。 これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。 また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄
CSSスプライト書き出し機能の使い方 | ADC - Adobe Developer Connection
「CSSスプライト」とは、複数の画像を1枚の画像ファイルにまとめ、表示の際にCSSでクリップ位置をずらすテクニックです。これにより、通信回数を減らし描画速度を上げることができます。既に定番化したテクニックですが、これまでFireworksをはじめとするデザイン用のソフトウェアには、直接CSSスプライト用の画像＆CSSを生成する機能はありませんでした（生成をサポートする拡張機能やWebサービスは存在しました）。 Fireworks CS6には、CSSスプライト用の画像＆CSSを生成する機能が追加されました。本記事では、この機能の使い方から、書き出した素材を使ってDreamweaverでマークアップするまでを解説します。 CSSスプライトの作り方を簡単に説明すると次の流れになります。 CSSスプライトでまとめたい画像を作成、もしくは、既にある画像からピックアップする。 Fireworks上で集
制作中の面倒を解決するFireworksの拡張機能のまとめ（2011年7月版） | Webデザインのタネ
一定期間更新がないため広告を表示しています
Favicon
The Export as Favicon command creates a favicon file from the current document, which must be 16px by 16px. You can create a document of this size with the New Favicon - 16X16 command. If you want to create a favicon that also contains a 32px version of the icon, the document must have a second page with a size of 32px by 32px. The easiest way to create this is with the New Favicon - 16X16 and 32X
FireworksとPhotoshopで書き出した画像の色の違いを防ぐ方法 | Arch
FireworksとPhotoshopで書き出した画像の色が、微妙に違うことがあります。これを防ぐ方法を紹介します。 Fireworksの書き出し方の違い 検証のために同じ色の画像（#e8d3a2）をPhotoshopとFireworksで書き出しました。 上の画像は「Photoshop」・「特定256色」・「ディザ100%」で書き出したものです。色は#e8d3a2で、元画像と同じ色になりました。 下の画像は「Fireworks」・「最適化256色」・「ディザ100%」で書き出しました。色は#e9d5a6になりました。 Fireworksの書き出しを「最適化256色」⇒「すべての色を割り付け」にすると... 色が戻りました。 ということで、Fireworksで書き出した画像の色が微妙に違ったら、書き出し方法を「すべての色を割り付け」にすると良い...と思います。
シンボルを使用して作業効率を高めよう | デベロッパーセンター
はじめに Fireworksには画像やパスデータ、テキスト等のオブジェクトをシンボル化するという機能が搭載されています。 シンボル化はライブラリに登録され、ライブラリからいつでもキャンバスに配置することができます。 シンボルはキャンバスに配置するとインスタンスというオブジェクトになります。 オブジェクトのシンボル化は、制作作業に様々なメリットをもたらしてくれるのですが、中でも大きなメリットとして以下のようなものがあります。 インスタンスはオブジェクトのオリジナル情報を保持したままリサイズが可能 複数配置したインスタンスは一括修正が可能 今回はこの二つのメリットを利用したワークフローを紹介します。 必要ソフトウェア Fireworks CS4 体験版購入 1．オリジナルを大きめに用意することで、デザイン時の効率化や後々の変更対応の効率化を目指す 写真などのビットマップデータは、拡大・
Fireworksでfaviconを作成
Fireworksでfaviconを作成 CSS Nite in Omotesando, Vol.1 「Fireworksビギナーのための120分徹底トレーニング」でFireworksでは拡張機能を利用すればfavicon(ファビコン)を作成できると紹介されていたので早速試してみました。 拡張機能のダウンロードとインストール Favicon - Adobe Fireworks Extensionsより拡張機能（ExportAsFavicon-100.mxp）をダウンロードします。 mxpはAdobe Extension Managerで利用できる拡張子で実行することでAdobe製品に拡張機能をインストールすることができます。 実行後、Adobe Extension Managerが立ち上がり拡張機能インストールの免責が表示されますので承認してインストールを行います。 (注意:Windows
Fireworks コレ、5分で作ります。その１ : RedLine Magazine
Fireworks コレ、5分で作ります。その１ ※このエントリはFireworks CS4を元に書いています。 Fireworks の日本語チュートリアル少ないなーという話を先日Twitterでしていたので、なんか作ってみます。あまり超大作のチュートリアルは手順を書く気力が途中でなくなりそうだったので、今日は5分くらいでコレ作る方法を書きます。 今回の完成形 見出しの背景画像によくありそうなこういう画像をパパっと作ります。 今回は素材集等、Fireworks の機能以外のものは使いません。 土台を用意 まずは一番下の土台を作ります。よくあるアクア風のやつにしますね。矩形で適当なサイズで長方形作って、塗りを線形のグラデーションに。４色決めてスライダーを調節。外側には1pxの線も加えます。 ここでのサンプルのサイズはW 470 * H 40 としました。 こういう見出し用の背景画像でよく左側
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
IDEA * IDEA
Adobe Fireworks CS4 * Web サイトとアプリケーションインターフェイスのプロトタイプ作成