photoshopデータをFireworksで作業したい

Question

WEB関連の仕事に就いたばかりです。
経験が少なくわからない事だらけですが
宜しくお願いします。
グラフィックデザイナーに渡されたphotoshopデータををHTML化しなければならないのですが・・・

●例えば右側にボタンが3つ縦に並んでいて
左側に大きな画像、画像の右斜め下に文章があります。

1.右側のボタンはロールオーバーして色が変わるようにする
2.右のボタンの一つの色が変わったときに
左側の大きな画像の周りがぼやっと色がつく
3.色が変わったと同時に画像の右斜めしたに文章が表示される

このようなものをつくるんですが
photoshopデータには
レイヤーでボタン、ハイライト、背景と
それぞれのパーツごとにレイヤーがさらに分かれていてセットに（フォルダみたいのに）なっています。

それをそのままの状態でファイヤーワークスで開いて
スライスしようとしたいのですが
うまくいきません。


１.　
色が変わってしまう（特に薄いブルー）
＃DCF2F2⇒＃C3F2E3
（PsdではRGBになっているのに・・・）

２。
photoshopデータはレイヤー数が多くそれぞれセットになっているがファイヤーワークスで開くと全部バラバラで表示される。

３.画像の一部が表示されない
　（水色の背景の枠に濃い水色の枠がついていたが・・）

なにしろ凝った色のデザインのため
（ボタン一つに対しレイヤーがいくつも重なっている）
ファイヤーワークス上で作業する事で問題がないか
不安です。
photoshopにもスライス機能があるようですが
使い慣れていないのでよくわかりませんが
photoshopでスライスするのが一般でしょうか？

画像のロールオーバーはファイヤーワークスで
ビヘイビアをつかう程度はわかるのですが
同時に画像の色を変え、
文章を表示させるのは
ファイヤーワークス上で可能でしょうか？
ご指導宜しくお願いします

EFA15EL · Accepted Answer

1.カラーマネジメントの問題だとは思いますが、恐らくデザイナー側の問題です。（汎用なRGBの環境を選択していればまずそんな問題は起きません）
デザイナーとやり取りしつつ微調整するしか無いでしょう。

2,3.ま、違うソフトですしね。買収したとはいえ、まだソフトの仕様統一には至っていませんので仕方ないです。

FireWorksで無ければいけない理由が無いなら使うのを止めて下さい。あなたが心配している通り、Photo Shopでレイヤーを重ねる事で効果を出している部分は、FireWorksでは完全には表現出来ません。つまりデザイナーの意図したものと違う画像になってしまう可能性が高い訳です。
どうやらPhoto Shopは持っている様ですから、Image Ready（AdobeにおけるFireWorksにあたるソフト）を覚えた方が便利ですよ。
少なくともPhoto Shop5.5以降なら Image Readyも付属しています。

僕が知る限りではPhoto Shop+Image ReadyでFireWorksのほぼ全ての機能をまかなえるはずです。

また、jsのロールオーバーは単純に画像を入れ替えるだけです。
＞同時に画像の色を変え、文章を表示させる
これをビヘイビアと同列に考えている理由がよく分かりません。
先の回答にもありますが、画像素材を作る事とコーディングする事を別々に捉えておいた方が良いですよ。

あと、これは個人的な意見ですが、
僕はデザイナーがPSDのまま納品する事が必ずしも良いとは思いません。
少なくとも効果として作ったレイヤーなどは全て統合しておくのがマナーだと考えます。
その辺はデザイナーとよく相談してみた方が良いと思いますよ。

chirashizushi · Answer

１．ボタンを押す前と押した後の画像をそれぞれ作る。

レイヤー状態になっているのだったら、押す前のレイヤーだけ選んで後は表示しないようにして画像を統合して別名保存する。

押した後も同様に

２．大画像の周りの画像も作っておく（中抜きで）

３．これはCSSですからPhotoshopやFireworksは関係ありません。Dreamweaverなどで設定してください。

１．元になってる画像のカラースペースを聞いて、それに合わせる。
２．便利ですね(^_^)v
レイヤー毎に別名保存すれば、それだけで画像が出来ます。
３．画像のサイズを間違ってるのでしょー、よーく見なおしてください。

スライスは画像を分割分割するだけの機能、１枚の画像を右と左に分けるだけ。

右側表示用の画像と左側表示用の画像をそれぞれ切り分けてるだけ、これはPhotoshopやFireworksでも同じこと。

FireworksってのはMacromedia社のPhotoshopみたいなソフトなんです(^^;　で、やりたい事のほとんど（ロールオーバーで色が変わるとか）はDreamweaverで指定する作業です、その辺を混同（混乱）されていますからご注意くださいね。

sassakun · Answer

>> ２。
>> photoshopデータはレイヤー数が多くそれぞれセットになっているが

すごい親切なデザインじゃないですか。
パーツがバラバラにできるんでしょう。
それはベストな状態です。

>> photoshopにもスライス機能があるようですが
>> 使い慣れていないのでよくわかりませんが
>> photoshopでスライスするのが一般でしょうか？

なんでスライスなんて変なものを使うんです？
スライスということを考えること自体が変だと思いますよ。

パーツがバラバラになっているんですから，
ボタンはボタン，背景は背景。
それぞれを，別のJPEGやGIFなどの部品にして，
例えばDreamweaver（HTMLエディタ）で組み上げれば良いんじゃないですか。
スライスが出てくること自体よくわかりません。

>> 同時に画像の色を変え、
>> 文章を表示させるのは
>> ファイヤーワークス上で可能でしょうか？

ページを作成するんでしょう？
なんで，Fireworks が登場するのですか？
ページの作成は，普通テキストエディタかHTMLエディタでしょう。
それで CSS や JavaScript で動かすのですよ。
Fireworks は画像処理ソフトですよ。
たまたま，

> 画像のロールオーバーはファイヤーワークスで
> ビヘイビアをつかう程度はわかるのですが

と言われるような便利機能があるだけで，
ページ作成とFireworks はそもそも関係ありません。
Fireworks や Photshop はページを作る物ではなくて，
ページに貼り付ける部品を作るのに使用する物です。

そもそもの根本的な部分が変だと思いますよ。
なんで，Dreamweaver がこの世に存在していて，売れているのですか？
Fireworks でそこまでできるのだったら，HTMLエディタはいらないでしょう。
そもそもHTMLエディタなどは必要なく，
テキストエディタでタグ打ちが一番という意見もあるとは思いますが，
どっちにしても，HTMLの世界です。


あと，全体的に思ったのですが，
HTMLでページを作るより Flash の方が向いている気もします。
ボタンにロールオーバーで様々なもの（オブジェクト）を動かすことだけを考えると，
Flash が最も簡単です。

HTMLでページを作成するのではなくて，
本当は Flash作成の仕事の依頼ではないのですか？

どっちにしても，

>> 同時に画像の色を変え、
>> 文章を表示させる…

というのは
HTML(CSS，JavaScriptを含む) か Flash など，Fireworks とは直接関係のない部分の話だと思います。

photoshopデータをFireworksで作業したい

1.カラーマネジメントの問題だとは思いますが、恐らくデザイナー側の問題です。

この回答への補足

１．ボタンを押す前と押した後の画像をそれぞれ作る。

>> ２。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング