Fireworks でワイヤーフレームを作成する際に活用したい機能 | バシャログ。
来年のテーマを早くも「断捨離」に決めた sakai です。 今回は Fireworks でワイヤーフレームを作成する際に活用したい機能についてです。 この記事は Fireworks Lover Advent Calendar 2012 の 10日目です。良記事ばかりなので、ぜひチェックしてみてください！ Fireworks でワイヤーフレームを作成することのメリット そもそも、なぜ Fireworks でワイヤーフレームを作るの？ ピクセルベースで作業ができる。 ピクセルベースでオブジェクトを作成・配置できるので、グリッドでレイアウトすることも簡単です。 ページ機能・共有レイヤー・共有ライブラリ・ステート機能が強力すぎる。 Web サイトの制作に特化したツールだけに、他のツールにはない強力な機能があります。 ワイヤーフレームの作成からコーディング直前までの工程を Fireworks オンリ
背景パターン簡単作成「Generate Pattern」使ってみた | バシャログ。
だいぶ暖かくなってきました。もうすぐ連休ですね！ seki です。 さてさて今回は連続する背景画像やドットアイコンなどを、実際に使用したプレビュー画面を見ながら、簡単に作る事が出来るWebサービス「GeneratePattern」のご紹介です。 詳細は以下より。 はじめに 【GeneratePattern】 こちらが実際の画面です。継ぎ目の無い単純な背景画像を作ったり、Fireworksのテクスチャの作成などで大活躍！中々使い勝手が良くて面白いツールです。 ※保存にはユーザー登録が必要 基本機能 使い方は単純に、ペンと色を選択したら、描画していくだけ！ スポイト、消しゴム、塗りつぶしや全消し、保存方法など、最低限の機能は上部に。 右サイドには、キャンパスサイズの変更や、拡大・縮小、ユーザー情報の変更などが出来るようになっています。至ってシンプルなUIですね。 作ってみる 実際に、ものすごく
初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color
はじめに 先日ちょうどAdobe Creative Cloudを申し込みました。 Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします！ もくじ 定規などの単位はpxで統一 「自動選択」で図形からレイヤーを選択する 「バウンティングボックス」を表示して選択や変形をしやすくする 「ピクセルにスナップ（エッジを整列）」で端がぼやけるのを解消 レイヤーコピー時に「〜のコピー」とつけないようにする スライス書き出し時に「images」フォルダを作成しないようにする 【CS6/CCの場合】カラーテーマをグレーにする 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする 起動画面。か、かっこいい…！ CS6/CCはUIが黒いのですね。ちょっと慣れない。 従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください！ 1.
「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について
2013/5/7に、Adobe Fireworks の事実上の開発終了が発表されました。 ただし、「バグ修正やセキュリティ関連のアップデートは継続する」とのことですが、いつまでも使い続けられることを保証するものではないので、Fireworks ユーザーの方はそう遠くないうちに別のアプリケーションに乗り換える必要があると思います。 Adobe、Web画像ツール「Fireworks」終了へ – ITmedia ニュース 移行先アプリケーションの候補の1つである Photoshop について、Twitterを見ていると「Photoshop でのWebデザインは制作効率が悪い」という方が多いようですが、私はそんなことはないと思っています。 なぜそう言えるのかについて、簡単にまとめてみました。 目次 FireworksとPhotoshop、それぞれのメリットとデメリット なぜ「Photoshopは効
WebParadise» Blog Archive » 【商用利用可】Fireworks「質感系」テクスチャ15種無料配布します
Fireworksで使えるテクスチャーを配布するサイトが増えてきましたね！私もよくデザインに活用させてもらってますが、水平線や斜線やグリッドなどが主でFireworksに元から入っている木目のようなの質感系テクスチャ（勝手に名づけ）のはなかなか配布されていなかったので自作してみました。 身の回りのものをスキャンしたり、photoshopのフィルターを利用して作成したものですが、よかったらご活用ください（＾＾） Fireworks「質感」テクスチャ15種 ご利用方法 ダウンロードしたいテクスチャ画像の上で右クリック名前をつけて画像を保存でダウンロードしてくださいFireworksテクスチャの利用方法や、質感テクスチャの活用方法については下記のサイトが参考になるかと思います。 fireworksでのテクスチャの使い方 | シンプルパターン研究所 ナチュラル系ブログデザインをFireworks
効率的にサクサクスライス！Fireworks CS5スライス書き出しTips - EC studio デザインブログ
Fireworks CS5 でのスライス書き出しTipsをまとめてみました。 スライスするときによく使う、使えそうな小技をご紹介します。 スライスの作成 長方形スライスの作成 オブジェクトを選択した状態で、 右クリックから「長方形スライスを挿入」を選択すると、 選択した画像を覆うスライスオブジェクトを作成できます。 複数オブジェクトを選択した場合は選択したすべてのオブジェクトの 画像を覆うスライスオブジェクトを作成できます。 多角形スライスの作成 オブジェクトを選択した状態で、 右クリックから「多角形スライスを挿入」を選択すると、 オブジェクトのパスに沿って画像を覆うスライスオブジェクトを作成できます。 イメージマップを設定するときに便利な書き出し方です。 ※テキストオブジェクトのみの場合、オブジェクトを選択した状態で、 右クリックしても「長方形スライスを挿入」と「多角形スライスを挿入」
Fireworksで[選択したスライスを書き出し]のフォルダ指定を簡単にする2つの方法 | Webデザインのタネ
一定期間更新がないため広告を表示しています
![Fireworksで[選択したスライスを書き出し]のフォルダ指定を簡単にする2つの方法 | Webデザインのタネ](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf5329b9d6c314d8d6afbec1e9bf2c2a2a27fd00/height=288;version=1;width=512/http%3A%2F%2Fimg-cdn.jg.jugem.jp%2F92c%2F73210%2F20100602_1620947.gif)
Photoshopユーザが今すぐFireworksに乗り換えるべき10の理由 | ベイジの社長ブログ
Webデザインにおけるメインのデザインツールとして多く使われているPhotoshopとFireworks。我々の業界内において、どちらの方がデザインツールとして便利か、という議論がよく行われますが、いずれか一つしか使いこなしていないユーザによる比較論ではあまり意味がないでしょう。日頃から使いなれているツールの方が使いやすい、と感じるに決まっているからです。ここで参考になるのは、両方のツールを同等に使った経験を持ち、かついずれにも過剰なこだわりや愛着を持ってないデザイナーの声なのではないでしょうか。 実は私自身はもともとPhotoshopでWebサイトのデザインを作っていました。しかし以前勤めていた会社でFireworksを使っていた人が多かったため、あるプロジェクトで一時的にFireworksを使ってみたところ、色々な面でFireworksの方が優れていると感じ、Fireworksに乗り換
Fireworks の “ページ機能” でスライスなどの作業効率が 3.5 倍アップ！ (フェンリル | デベロッパーズブログ)
こんにちは！デザイナーの長谷川（ヒロユキ）です。 僕は Fireworks 大好きっ子なのですが、残念ながらフェンリルのデザイナーは殆ど Illustrator や Photoshop でデザインしているので、今日は僕が Fireworks を手放せない理由のひとつであるページ機能を紹介したいと思います。 ●動的なコンテンツや背景などのスライス書き出しがメッチャ楽 Fireworks CS3 で実装されてしばらく使わずにいたページ機能は今では無くてはならない機能です。 こういうデザインの場合、メニューの背景の画像とボタンの画像をそれぞれスライスしたいのですが、レイヤーのみで管理しているとスライスを重ねるしかなく、必要な画像をスライスする時に他のスライスを非表示にして背景レイヤーを消して…などと非常に面倒です。 ここでページ機能が威力を発揮します。 デザインができたら、ページを複製します。複
Fireworksを使いこなそう！ワンクリックでパスをアウトライン化 - EC studio デザインブログ
Fireworksの「パス」ウィンドウには、作業効率をアップさせる機能がたくさん！ でも、正直たくさんありすぎて機能がいまいちわかりにくい！！ そこで自分のマニュアルもかねて、デザインブログで 少しずつ使い切れてない機能を紹介していきたいと思います。 今回は、「ワンクリックでパスをアウトライン化」と その応用として「オシャレな文字づくり（テキストの縁取り）」の方法を紹介します。 オブジェクトをポイント無しの状態で選択。 そして「パス」ウィンドウの「ストロークを塗りに変換」をクリック。 たったこれだけ！ アウトラインをとる前に、パスの線をお好みの太さにしておきましょう。 【応用】オシャレな文字づくり（テキストの縁取り） テキストを打ち込みます。 ツールバー「テキスト」→「パスに変換」を選択。 そのあと、線と塗りを逆転させ塗りを透明にします。 線の太さをお好みに調整して、「パス」→「ストローク
Fireworks ショートカットコンボ : RedLine Magazine
Fireworks ショートカットコンボ(追記有) あまりにも放置気味なので何か更新しようかな、ということで、よく使うFireworksのショートカットコンボでも。 >>080912：パスパネルについて追記しました。 最前面のオブジェクトでマスクするショートカットコンボ 例えばこんなん。適当な背景の上にオブジェクトを乗せてマスクする時。 テキストにフチ線がついてるのは白背景だと分かりにくいからつけただけ。とりあえず重ねる。 いくよっ！ 「Alt+M」→「M」→「G」 （「修正」→「マスク」→「マスクとしてグループ化」） さぁ！みんな声を出して覚えて！ (n'∀')η＜オルト エム エム ジー！ 最前面のオブジェクトでマスクの小ネタ え？こんなの誰でも知ってるって？ んじゃ･･･これを合わせて知ってると便利だよ！ 最前面のオブジェクトでマスクする時はオブジェクトを半透明にして合わせる位置を確
Fireworksの星ツールで書けちゃう、星以外の模様いろいろ | Fireworksマニア
デザイナー 春山 有由希のポートフォリオサイトです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fireworksで覚えておくと便利な文字設定まわりのTips | Webデザインのタネ
Fireworks初めての方にオススメしたいサイトと参考書 | Webデザインのタネ
Fireworksのページ機能の細かすぎて伝わりにくい使いどころ | Webデザインのタネ
YUKI HARUYAMA Portfolio Site | 春山 有由希
Fireworks VS Photoshop | Webデザインのタネ