みんなで使おう！Fireworks！ 〜Fireworksで画像最適化〜
自己紹介 株式会社EC studio でHTMLコーダーやってます、赤堀巴絵です。 EC studio デザインブログでコーダー向けネタやパフォーマンスアップネタを投稿してます。 Twitterは「tomo_e」でやってるのでよかったらフォローよろしくお願いします！ 最近は趣味でイラストを描いたりもしてます。 目次 FireworksとPhotoshopのPNG比較 png8アルファチャンネルでさらに軽量化！ FireworksとPhotoshopのJPEG比較 JPEGマスクで見せたい部分をキレイに！ まとめ FireworksとPhotoshopのPNG比較 実はPNGで同じ画像を書き出すならFireworksのほうが画像を軽く書き出せます。 チャンクという画像情報以外のその他の情報がPhotoshopのほうが多いからです。 実際、FireworksとPhotoshopのPNG8で書
Fireworks CSS3 Mobile Packを使ってみよう | デベロッパーセンター
Fireworksの拡張機能である「Fireworks CSS3 Mobile Pack」が、Adobe Labsにて公開されています。この拡張機能を使えば、Web標準に沿ったWeb／モバイル／タブレット向けデザインの制作をより効率的に行うことができます。Fireworks CSS3 Mobile Packをインストールすると、下記2つの機能が追加されます。 ［CSS3 Property］パネル： デザイン要素からシームレスにCSS3プロパティを抽出することができます。 ［jQuery Mobile Theme Skinning］ツール： 独自のjQuery Mobile用スプライト画像とテーマ用CSSを作成することができます。 本記事では、これらの機能の使い方を解説します。 サンプル：css3_mobile_pack_sample.zip 必要なもの Fireworks CS5／CS
リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。
こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか？ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック
FireWorksでモザイク処理をかける方法 » SHINGOLOG
今回は、私のお気に入り画像編集ソフト「FireWorks」でモザイク処理をかける方法のご紹介です。 選択範囲ツールでモザイクをかけたい部分を選択 その後、選択範囲をコピーして貼りつけ。 環境設定で画像補間方式を変更 変更 [...]
Fireworksで立体的なアイコンを7分で作る方法 - EC studio デザインブログ
さて、今回は前回の「Fireworksで立体的なアイコンを作る方法」よりも もっと簡単にできるアイコンの作り方です。 今回は5分で作れるアイコンのご紹介！！ …の予定でしたが、ブログ記事用に作り直したら7分ちょうどかかりました。 すみません… 操作自体は簡単なので、速い方は5分でできると思います。 ぜひ、5分に挑戦してみてください！ アイコンはこちら、建物アイコンです。 ページ下部で制作動画の紹介や、ベクトルデータのダウンロードも可能です。 会社概要の見出しなどに使ってみてくださいね。 速く作るポイントは2つ パスの変形「歪みツール」を使う フィルター効果「シャドウ（内側）」を2つ重ねて使う たったこれだけです。 1.平面の形を作る パースのあるアイコンですが、 まずは真正面から見た図（平面図）をつくります。 2.歪みツールで立体的にする 平面ができたら、１面全部を選択し「歪みツール」で立
Fireworksで立体的なアイコンを作る方法 - EC studio デザインブログ
サイトや広告バナーをつくる際に、イメージアイコンを使うことがよくあります。 ただ、配布されているイメージアイコンを使用する場合、 「形を少し変えたい！」 「複数のアイコンを組み合わせて使いたい！」 など、サイトなどの雰囲気に合うよう、手を加えたくなる時があります。 ただ、データの加工が不可だったり、加工するのに時間がかかったり… 時間短縮のために配布素材を使ったのに意味がなかった！なんてこともあります。 そんな時はイメージアイコンを 最初から自分で作る！ というのも1つの方法です。 今回は、Fireworksを使って簡単に立体的なアイコンを作る方法を ご紹介したいと思います。 作業は単純。 パスの合体 パスの切り抜き 拡大縮小 の繰り返しです。 1.形をつくる 楕円を2つ描きます 楕円の上に四角を重ねて合体させます 合体したパスの上にさらに四角を重ねて切り抜き、余分な部分をカットします 合
Fireworksのスタイル機能でデザイン作業効率化！ - EC studio デザインブログ
Webサイトのデザインをしているときに 「あ、このグラデーションって、どういう色だったかな？」 「ここのフォントはなんだっけ？」ってことがあります。 そういう時に便利なのがFireworksのスタイル機能です。 スタイル機能って何？って人のために、少し解説したいと思います。 スタイル機能とは、Fireworksに登録されている スタイルパレットのことで、グラデーションスタイルや フォントのスタイルを、選択したオブジェクトに対して 一括で変換してくれる機能のことです。 このスタイル機能を活用することで次のようなメリットが得られます。 デザイン作業の手間が軽減される 同じスタイルを適用する際に、色やグラデーション、 ドロップシャドウなどの値を覚えておく必要がない デザインの表現の幅も広がる スタイル機能の使い方 このように、Fireworksにはいくつかスタイルが 登録されています。 試しに1
FireworksCS4が重い・固まる現象を改善する方法 - EC studio デザインブログ
FireworksをCS3からCS4へバージョンアップしてから、 頻繁に重くなる、固まる、メモリが不足して保存できなくなる・・・ といった現象に困っていました。 でもCS4にしかない便利機能もあるし、 バージョン落とすのは勿体ない。 どうにか軽くなる方法はないかな？と色々試してみたところ、 どうも取り消し（ヒストリー）回数の設定に原因があるようです。 FireworksCS4のツールバー「編集」→「環境設定」→「一般」から 最大取り消し回数が確認できます。 CS3のデフォルト設定が「20」にたいして、 CS4はデフォルト設定は、なんと「200」！！ 桁違いの設定に、さすがにビックリ。 どおりで長時間つかってたら固まるわけですね。 今日一日、設定をCS3と同じ20に変えて試してみましたが、 昨日より確実に軽い！！ 毎日のようにでてきたメモリ不足による保存エラーもでてこない！！ (エラーで保存
RedLine Magazine : Fireworks 拡張アレコレ追加メモ
Fireworks 拡張アレコレ追加メモ Fireworks用にいろんなサイトで配布されているスタイルやパターンなどなど、いろんな素敵なものを追加するためのメモです。自分で作ったものを登録しておく方法の説明は今回は省略してます。 各素材等はmxp形式で配布されているものも多いので、その場合はExtension Managerでインストールしてください。下記はそうでない場合についてのお話です。 また、私の使用しているバージョンはCS4(Win用)なので、それに基づいてのメモとなります。バージョンやOS違いの場合は自分の環境に置き換えて確認してください。 スタイルを追加する スタイルパネルのオプションメニューで「スタイルライブラリを読み込み」を選択、スタイルライブラリの名前と場所を選択します。 「スタイルを読み込む」と「スタイルライブラリを読み込み」の違いは、前者の場合は現在のドキュメントに対
効率的にサクサクスライス！Fireworks CS5スライス書き出しTips - EC studio デザインブログ
Fireworks CS5 でのスライス書き出しTipsをまとめてみました。 スライスするときによく使う、使えそうな小技をご紹介します。 スライスの作成 長方形スライスの作成 オブジェクトを選択した状態で、 右クリックから「長方形スライスを挿入」を選択すると、 選択した画像を覆うスライスオブジェクトを作成できます。 複数オブジェクトを選択した場合は選択したすべてのオブジェクトの 画像を覆うスライスオブジェクトを作成できます。 多角形スライスの作成 オブジェクトを選択した状態で、 右クリックから「多角形スライスを挿入」を選択すると、 オブジェクトのパスに沿って画像を覆うスライスオブジェクトを作成できます。 イメージマップを設定するときに便利な書き出し方です。 ※テキストオブジェクトのみの場合、オブジェクトを選択した状態で、 右クリックしても「長方形スライスを挿入」と「多角形スライスを挿入」
Functionality of Adobe Fireworks in your Design Workflow
Many web designers work exclusively with the Adobe Creative Suite to get work done. Adobe Photoshop is the most common tool for graphics creation and manipulation along with Illustrator for freehand drawings. Fireworks doesn’t get as much of the attention, but this doesn’t mean the software is also useless. In fact Fireworks can be used hand-in-hand with Photoshop to create seamless mockup designs
【Fireworks】圧縮率による JPEG で文字もきれいに書き出す | バシャログ。
今週の木曜日はやはり早く寝て夜中に起き出すかないか！toyama です。金曜日は結構な割合で寝不足な人が多そうですね。 大きな写真イメージの上にキャッチコピーを書いてサイトの目立つところに表示、というデザインは割と多いパターンですが、画像の書き出し圧縮率は毎度悩ましいです。 写真の書き出しは jpg がセオリーですが、キャッチコピーの文字がひどく劣化してしまうことがあります。かといって gif で書き出すには色数が多くてディザでもちょっと辛いし重い！ そんなときは Fireworks さんにおまかせです。さすが web 制作の申し子！ 1. こんな感じの画像があるとします。 写真の上にテキストで文字が置かれています。 2. jpg で書き出してみます。普段はこんなに低画質で書き出すことはないですが、分かりやすく圧縮の品質を 50 にしてみます。 背景の画像はともかく、もう文字のまわりがグニ
【Fireworks】iPhone 画面パーツ集 | バシャログ。
iPhone 4 が発表されて、いつになったらそのスマートじゃないフォンやめるんだよ、ということを聞かれます toyama です。 スマートになりたいですね！身も携帯も！ というわけで、巷でもシーブレインでも iPhone 関連の制作が増えそうな気配です。 画面のサンプルを作って見せてくれ、なんてことを急に言われる可能性もありそうです。 サイトデザイン用の準備はあっても iPhone 用の画面デザインの準備は整ってない！ そんな私にぴったりのパーツを配布してくれているサイトをご紹介します。 Blog*spark Blog*spark Fireworks toolkit for creating iPhone UI mockups iPhone 3GS のあらゆるパーツがベクトルデータでみっちり集められています。 素材としても大変きれいで、作り方など見ても大変勉強になりますね。 一部 Pho
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】パスのブレンドを CS3 でやってみる | バシャログ。
横浜開港祭じゃん！こんばんは、toyama です。 やばい、早く帰らないと電車がえらいことになる！（さみしい感想） いつもありがたく拝読させていただいている RedLine Magazine さんに、大変ありがたい Fireworks チュートリアルが掲載されていました。Fireworks のネタってなかなかないのでホントありがたいです。CS4 にて作られているこのチュートリアルを、CS3 でやるとどうなるかなーと思い、やってみました。 RedLine Magazine : Fireworks コレ、5分で作ります。その１ 1. 土台をつくる 見出し画像の土台を、チュートリアル通りに作ります。 RedLine Magazine さんのチュートリアルは丁寧で作業していても全くつまづくところがありませんでした。見習わなきゃ… 2.ツイストアンドフェード RedLine Magazine さんの
CSS スプライト作成に便利な拡張機能「CSS Sprite Extension」 | デベロッパーセンター
本記事では、最近のWeb制作で利用されている「CSSスプライト（CSS Sprites）」という手法と、その実装を便利にしてくれるFireworksの拡張機能「CSS Sprite Extension」について解説します。 Fireworks CS5 体験版 今すぐ購入 CSSスプライト（CSS Sprites）とは CSSスプライトは、複数の画像を1つにまとめてCSSのスタイルで部分的に表示し使い回す手法です。 CSSスプライトの仕組み CSSスプライトはたいてい、今まで独立した１枚画像にしていた部分や画像置換※で表示していた画像と置き換えることができます。 ※ 画像置換：HTMLにテキストだけを記載しておいて、CSSのスタイルで文字を隠し、その代わりに画像を表示しているように見せる手法。画像をHTMLからimg要素で呼び出している時とは違い、CSSでデザインを変更したときに一緒に見
RedLine Magazine : Fireworks コレ、5分で作ります。その２
Fireworks コレ、5分で作ります。その２ ※このエントリはFireworks CS4を元に書いています。 前回はペンツールでパスを書いてなんやかんやしたんですが、今回はFireworksを始めたら一番最初にコレを覚えであろう長方形ツールをメインで使ってコレを５分くらいで仕上げる方法です。 デザイナさんも、デザイナさんじゃない方も、Fireworks をほとんど使った事ないわーという方にも、一度5分だけでも時間を使ってもらえたらなーという主旨も含めて書いてます。実際にやってみてもらって、「うはｗｗ Fireworks ってこんなに簡単な手順でよく見かけるこういうモノ作れたんだ」とか思ってもらえると嬉しいです。 今回の完成形 今回も前回同様、見出し画像の背景に使えそうな画像を作ります。 今回も素材集等、Fireworks の機能以外のものは使いません。 土台を用意 今回は２色のグラデー
Fireworks コレ、5分で作ります。その１ : RedLine Magazine
Fireworks コレ、5分で作ります。その１ ※このエントリはFireworks CS4を元に書いています。 Fireworks の日本語チュートリアル少ないなーという話を先日Twitterでしていたので、なんか作ってみます。あまり超大作のチュートリアルは手順を書く気力が途中でなくなりそうだったので、今日は5分くらいでコレ作る方法を書きます。 今回の完成形 見出しの背景画像によくありそうなこういう画像をパパっと作ります。 今回は素材集等、Fireworks の機能以外のものは使いません。 土台を用意 まずは一番下の土台を作ります。よくあるアクア風のやつにしますね。矩形で適当なサイズで長方形作って、塗りを線形のグラデーションに。４色決めてスライダーを調節。外側には1pxの線も加えます。 ここでのサンプルのサイズはW 470 * H 40 としました。 こういう見出し用の背景画像でよく左側
作業効率が30％アップ！スライス名を変更するFireworksのコマンド拡張 | Webデザインのタネ
一定期間更新がないため広告を表示しています
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
caraldo.net - it転職 リソースおよび情報