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

質問

WEB関連の仕事に就いたばかりです。
経験が少なくわからない事だらけですが
宜しくお願いします。
グラフィックデザイナーに渡されたphotoshopデータををHTML化しなければならないのですが・・・

●例えば右側にボタンが3つ縦に並んでいて
左側に大きな画像、画像の右斜め下に文章があります。

1.右側のボタンはロールオーバーして色が変わるようにする
2.右のボタンの一つの色が変わったときに
左側の大きな画像の周りがぼやっと色がつく
3.色が変わったと同時に画像の右斜めしたに文章が表示される

このようなものをつくるんですが
photoshopデータには
レイヤーでボタン、ハイライト、背景と
それぞれのパーツごとにレイヤーがさらに分かれていてセットに（フォルダみたいのに）なっています。

それをそのままの状態でファイヤーワークスで開いて
スライスしようとしたいのですが
うまくいきません。

１.　
色が変わってしまう（特に薄いブルー）
＃DCF2F2⇒＃C3F2E3
（PsdではRGBになっているのに・・・）

２。
photoshopデータはレイヤー数が多くそれぞれセットになっているがファイヤーワークスで開くと全部バラバラで表示される。

３.画像の一部が表示されない
　（水色の背景の枠に濃い水色の枠がついていたが・・）

なにしろ凝った色のデザインのため
（ボタン一つに対しレイヤーがいくつも重なっている）
ファイヤーワークス上で作業する事で問題がないか
不安です。
photoshopにもスライス機能があるようですが
使い慣れていないのでよくわかりませんが
photoshopでスライスするのが一般でしょうか？

画像のロールオーバーはファイヤーワークスで
ビヘイビアをつかう程度はわかるのですが
同時に画像の色を変え、
文章を表示させるのは
ファイヤーワークス上で可能でしょうか？
ご指導宜しくお願いします

回答No.2

EFA15EL · ベストアンサー

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のまま納品する事が必ずしも良いとは思いません。
少なくとも効果として作ったレイヤーなどは全て統合しておくのがマナーだと考えます。
その辺はデザイナーとよく相談してみた方が良いと思いますよ。

お礼

ご回答ありがとうございます
1.カラーはRGBモードになっているのですが・・
やはり互換性の問題でしょうか？

Photo Shop+Image Readyですか？
そのような使い方もできるのですね？
ＧＩＦアニメで少々使った事ありますが・・
ロールオーバーするようにもつくれるんでしょうか？
時間があったら試してみます

また、jsのロールオーバーは単純に画像を入れ替えるだけです。
＞同時に画像の色を変え、文章を表示させる
これをビヘイビアと同列に考えている理由がよく分かりません。
先の回答にもありますが、画像素材を作る事とコーディングする事を別々に捉えておいた方が良いですよ。

そうなるとJavascriptで指定するんでしょうが（？）
私には難しくなってきました。

＞少なくとも効果として作ったレイヤーなどは全て統合しておくのがマナーだと考えます。

デザインの仕事の範囲なのでしょうか？WEBでどのように使われるかなどは理解されていないようです

私もなれていないためどこまでできなきゃいけないのかが解っていません。
色々な問題が生じるんですね(*_*;
相談してみます。

色々とアドバイスありがとうございました

補足

ImageReadeyでロールオーバーも画像の入れ替えも
問題なくPSDファイルからできました！

とても便利ですね！色も効果も消えずに安心しました

教えていただいてありがとうございました

回答No.3

chirashizushi

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

レイヤー状態になっているのだったら、押す前のレイヤーだけ選んで後は表示しないようにして画像を統合して別名保存する。

押した後も同様に

２．大画像の周りの画像も作っておく（中抜きで）

３．これはCSSですからPhotoshopやFireworksは関係ありません。Dreamweaverなどで設定してください。

１．元になってる画像のカラースペースを聞いて、それに合わせる。
２．便利ですね(^_^)v
レイヤー毎に別名保存すれば、それだけで画像が出来ます。
３．画像のサイズを間違ってるのでしょー、よーく見なおしてください。

スライスは画像を分割分割するだけの機能、１枚の画像を右と左に分けるだけ。

右側表示用の画像と左側表示用の画像をそれぞれ切り分けてるだけ、これはPhotoshopやFireworksでも同じこと。

FireworksってのはMacromedia社のPhotoshopみたいなソフトなんです(^^;　で、やりたい事のほとんど（ロールオーバーで色が変わるとか）はDreamweaverで指定する作業です、その辺を混同（混乱）されていますからご注意くださいね。

お礼

ご丁寧にありがとうございます。
やはり別々にPHOTOSHOPで統合して保存していって
Dreamweaverで編集ということでしょうか？
あまりにレイヤーが細かく分けられていて
複雑で混乱していました。
まず部分的にレイヤーを統合していく事からですね(*_*;
学校ではFIREWORKSで作成しフレーム機能を使い
ロールオーバーボタン機能を加えたり
してDreamweaverからFIREWORKSＨＴＭＬを読み込む
機能が使えるのかなと思いまして・・

３.Photoshopでは水色の角丸の背景に濃い水色の枠が
付いていたのにファイヤーワークスでは表示されていないみたいです。
地道にやってみます。ありがとうございました

回答No.1

noname#35109

>> ２。
>> 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 とは直接関係のない部分の話だと思います。

お礼

ご回答ありがとうございました
確かに変かもしれない気がしてきました(^.^;f

考えが混乱していたのは
背景に色が付いてて角が丸くなっていた事
やボタンの角が丸くなっていた事と
微妙な位置に文章やボタンや画像がおかれていたので
これは一枚の画像を切りわけた方が無難なのかと
思っていましたが・・・

パーツに分かれていたのを使えばいいんですね？
しかし効果や余分な効果だけの
レイヤーとかが入っていて
どことどこを統合してよいのかわからなくなってしまったため・・・・混乱してました。すみません。

＞Flash の方が向いている気もします。
わたしもそう思います。
たぶん前回やった方がプログラマーだったので
Javascriptを使えばできるものだと考えて
いるんだと思います。

Fireworksでビヘイビアをいれて
DreamWeaverで読み込めるかな？と思っていたのですが・・

色々やってみます
アドバイスありがとうございました