Fireworksで作ったデータ（.png）をPhotoshop形式（.psd）に変換する方法 ｜ 福岡のホームページ制作会社・メディア総研株式会社 マグネッツ事業部
どうもこんにちは。最近本格的にPhotoshop修行を始めましたがツンデレPhotoshopさんにツンツンされっぱなしで一向に仲良くなれないかわさきです。そろそろ少しはデレてほしい(´・ω・｀) さて、マグネッツでは普段、WEBページのデザインはFireworksをメインに使用して行っております。 （2013年5月にFireworks開発終了のニュースが流れまして、ゆくゆくは段階的に他のソフトに移行しないとなぁ…という感じです。しかしFireworksはWEB制作に特化した非常に使い勝手のいいソフトでなので、とても残念です…） たまにFireworksで作成したデザインデータ（.png）をPhotoshop形式（.psd）にてクライアント様にお渡しする必要がありまして、そのまま変換してみたら当たり前だけど結構変わってしまうなぁ…となって四苦八苦… で、今後同様の作業が必要になった時やりやす
Fireworks の新規開発終了と 「使えなくなる」 は別の話ですよ
Creative Cloud への完全移行とあわせて、Fireworks の開発終了がアナウンスされていますが、それは Fireworks が使えなくなるということではないのでおちつけっていうお話。 Fireworks の新規開発終了よりも、Creative Cloud への完全移行の方がニュースとしては重要な気もしますが。 米国時間の 5月 6日、ロサンゼルスで開催された Adobe Max カンファレンスで、Creative Suite の提供を CS6 を最後に終了し、今後は Creative Cloud のみの提供とすることを発表しました。その中で、Fireworks に関しては、他製品との機能的な重複の問題などもあって、今後の新規開発はやめてバグフィックスのみの提供にしますっていう発表があったらしいんですが、それを受けて今朝から 「Fireworks おわた」 で賑わってるみたい
PhotoshopってFireworksと違ってここがダメだよねって思ってたけど使い方知らないだけだった件
Posted: 2013.04.23 / Category: WebDesign WebデザインツールとしてFireworksとPhotoshopがよく挙げられますが、私はFireworksをメインに使用しています。理由はFireworksと比べるいろいろと不便な点があったからなのですが、ちょっと調べたらいろいろと知らないだけだったのでメモしておきたいと思います。 Photoshopってキャンバスで直接選択できなくね？ Fireworksは選択ツールでキャンバスでオブジェクトを直接選択できるのに、Photoshopはレイヤーから選択しないといけないから直感的じゃないですよね。いえいえ直接選択もできますよ。 左パレットから「移動ツール」を選択ます。そのままだと選択されているレイヤーを移動させるだけのツールですが、「cmd + 左クリック」することで選択することができます。 ドラッグすれば範囲
CSSスプライト書き出し機能の使い方 | ADC - Adobe Developer Connection
「CSSスプライト」とは、複数の画像を1枚の画像ファイルにまとめ、表示の際にCSSでクリップ位置をずらすテクニックです。これにより、通信回数を減らし描画速度を上げることができます。既に定番化したテクニックですが、これまでFireworksをはじめとするデザイン用のソフトウェアには、直接CSSスプライト用の画像＆CSSを生成する機能はありませんでした（生成をサポートする拡張機能やWebサービスは存在しました）。 Fireworks CS6には、CSSスプライト用の画像＆CSSを生成する機能が追加されました。本記事では、この機能の使い方から、書き出した素材を使ってDreamweaverでマークアップするまでを解説します。 CSSスプライトの作り方を簡単に説明すると次の流れになります。 CSSスプライトでまとめたい画像を作成、もしくは、既にある画像からピックアップする。 Fireworks上で集
hanatoweb.jp - このウェブサイトは販売用です！ - hanatoweb リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
【Fireworks】の痒い所に手が届く！拡張機能“Transform Panel”を使ってみた | バシャログ。
最近昼間の暖房が少し暑いくらいなので、油断して薄着で出かけてみたら夜寒くて死にそうになった seki です。 今回は、先日Fireworksの拡張機能を色々復習＆整理をしていた時にたまたま見つけた拡張機能「Transform Panel」というのを入れてみたので、機能のご紹介をします。Fireworksで要素のサイズや細かい座標をプロパティで直接入力する人には、痒い所に手が届く良さを感じられるかと。 詳細は以下より。 ダウンロード http://www.senocular.com/fireworks/extensions/?entry=572 こちらからダウンロードしてください。 「Transform Panel」で出来ること まずは基本となる便利な機能を一つ一つ見ていきましょう。 実際のパネルがこちら。 簡単に言うと画像やテキストの変形を補佐してくれる拡張機能です。 1.小数点単位を表示
作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。
ややうさんくさい感じのするタイトルですが、ホントの話なんです。 海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。 SPECCTRについてごく簡単に説明すると… フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる というものです。 これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。 また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄
Fireworks CS6 の進化したところと不具合まとめ
さて、前回に続き、今回は WebデザイナーのためのAdobe CS6検証会 から Fireworks CS6 の情報まとめです。 Fireworks CS6 は、6月から私と一緒に Webデザインスクール の講師をされる @YumiSora さんから、詳細を詳しくまとめた資料をメールしていただけたのでそれを基に書いています。 Fireworks CS6の進化したところ CSSプロパティパネル 選択しているオブジェクトのCSSのコピペができるようになりました。 CSS プロパティパネルは、「ウィンドウ＞CSS プロパティ」より表示できます。 CSS3などの慣れないものや特殊なプロパティなど、ある程度ここからコピペして、 手動で改変やGoogle検索で調査のきっかけにするなどのワークフローに使えそうです。 線の位置を内側や中央にした場合、線幅を考慮した分、形そのものの width と heig
PhotoshopやIllustratorを組み合わせて5分でも早く！Fireworks中心に制作している僕のAdobeソフトの使い方 | Webデザインのタネ
一定期間更新がないため広告を表示しています
FireworksでAdobeRGBの写真を色の遜色を極力なくして読み込むには | Webデザインのタネ
一定期間更新がないため広告を表示しています
小さい文字が綺麗になるかもしれない方法と、コマンド「PI_CleanText」 (PIXEL LAB)
小さい文字が綺麗になるかもしれない方法と、コマンド「PI_CleanText」 ( 2012年03月22日 ) Fireworksの文字のアンチエイリアスは、 「鮮明」「強く」「滑らかに」「カスタム」の4種類がありますが、 正直、どれもあまり綺麗ではありません。 あるフォントでは、「鮮明」が綺麗だけど、別のフォントでは、「滑らかに」が きれいだったり、フォントの種類だけでなく、文字の大きさによっても、 適切なアンチエイリアスの種類は変わってきます。 このエントリーでは、アンチエイリアスのかかった小さいテキストが 少し綺麗になるかもしれない方法を紹介します。 同時に、その方法をコマンド化したので、それの解説と配布を行います。
Fireworksの画像からタップ操作対応のプロトタイプを作成できる「TAP」 | デベロッパーセンター
Webサイトやアプリを制作する場合、デザインを作り込む前に触って動くプロトタイプを作ることで、あらかじめ使い勝手の良し悪しなどを検証することができます。今回紹介するTAP（Touch Application Prototypes）を使うと、Fireworksで簡単にモバイル向けのプロトタイプを作成できます。 よくあるWebサイト制作の実装工程について確認しましょう。まず、PhotoshopやFireworksなどのツールを用いてデザインの作業を行います。次に、作成したデザインカンプを元に、パーツをスライスし、コーディングをしてからはじめて「動く」「触れる」ものを作ります。こうした工程の場合、実際に動く状態を見てから問題に気づき、要素の配置や装飾の変更などが発生し、大きな手戻りが生じるというのを経験している人も多いのではないでしょうか。 そうした問題を解決・軽減するために「プロトタイピング」
Fireworksでモザイクを掛けるプラグイン
Fireworksでモザイクを掛けるためのテクニックがいろいろと紹介されていますが、やはりプラグインを使用するのが簡単です。 フリーのモザイク専用プラグイン「Mosaic Toolkit (The Plugin Site )」があります。 以下に簡単な手順を紹介しておきます。 上記サイトからダウンロードしてきたら、zipファイルを解凍します。 FireworksのPlug-Insフォルダ（例：C:\Program Files\Adobe\Adobe Fireworks CS4\pLUG-Ins）に入れ、Fireworksを（再）起動します。 [フィルタ]メニュー→[LOtis Filters→[Mosaic Toolkit - v2.4b FM1.0 beta9d 10-20-09...]を選択します。 適当にパラメータを調整し、「APPLY」（適用）ボタンを押します。 ダイアログが消えて
良質なワイヤーフレームを超簡単に製作できるFireworks拡張機能『Placeholder』がめちゃめちゃ便利!!
フリーランスでWEB製作をされている@sou_labさんから ドラッグ＆ドロップするだけでサイズ表記付きの良質なワイヤーフレームが作れてしまう 超便利なFW拡張機能の存在を教えて頂き、実際に使ってみたのでご紹介したいと思います。 FW持ってるけど使ったことない・・という方にも是非読んでいただきたい記事です！！ ワイヤーフレームとは デザインにとりかかる前にサイトの骨組みを視覚化し、 要素の漏れを防いだり、全体のイメージを掴むために用意するものですよね。 実はわたしは今まで作ったことがなかったのですが、 しっかり骨組みをしておけばデザイン時・コーディング時の作業がスムーズに進みますし、作っておいて損はないモノですね。 Placeholderとは そんなワイヤーフレームですが、自分用ならともかく クライアントさんにお見せする場合は、要素ごとにwidthやheightの数値なども記載してあった方
Dreamweaverで画像サイズをリセットするコマンド＆半分にするコマンド（Retina対応に便利） | バシャログ。
あけましておめでとうございます。hakoishiです。 本年もよろしくお願いいたします。 正月休みはコタツと闘っては連日連敗を喫しておりました。 眠りへの誘惑危険すぎる。 さて、本日はDreamweaverの画像サイズのリセットが一気にできちゃうコマンドと、半分にリサイズするコマンドのご紹介を。 画像サイズをリセットするDreamweaverコマンド Dreamweaver 画像の幅と高さをリセットするコマンド « きんくまデザイン http://www.kuma-de.com/blog/2009-01-27/298 既存のソースを使いまわしてコーディングする時や、修正を重ねるうち微妙にサイズの違った画像が多発した時。 1つずつクリックして修正していくのは手間ですね。 と、そんな時にこのコマンド。 ソースを全選択した状態で、「コマンド」メニュー⇒「画像サイズをリセット」を適用すると、ページ
高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド＞ Smart Resize ＞ Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress › Error
https://bright-flavor.com/fireworks/entry-74.html
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
Fireworks CS6体験版を使って驚いてしまった強化点 | Webデザインのタネ
