アニメーションgifの配置について

質問

よろしくお願いいたします。
初心者ですがとりあえずＨＰビルダー8.0を使ってＨＰを作りUpしました。ただあまり凝ったデザインができなかったので、PhotoshopとImageReadyを使っていろいろ試してみました。スライスした画像をビルダーで表示することも何とかできるようになり、今回初めてアニメーションgifに挑戦しました。
そこで質問なのですが、たとえばImageReadyで編集中のページの中央にアニメーションgifを配置することはできますか？私的にはImageReadyでページ全体を制作し、任意の場所にアニメーションgifを配置し、すべて完成したところで、HPビルダーへ持っていきたいんです。別々にもっていった場合、通常の編集モードでうまく配置できないと思うんです。どこでも配置モードを使えばいいかもしれませんが。
そのあたりの事をご存知の方教えてください。よろしくお願いいたします。

回答No.3

noname#8448 · ベストアンサー

>アニメーションgifを貼り付けたのはドラッグ＆ドロップでやりました

No2の2でも書いたように基本的にPhotoshopではアニメーションgifは扱えませんので、ImageReadyで扱って下さい。既に出来上がっているアニメーションgifを貼り付けたい場合も、まず、Photoshopで背景となる画像等を配置して（最初からImageReadyでも可）アニメーションgifを貼り付ける場合は必ずImageReadyで作業して下さい。
保存もImageReadyでやったほうがよいですね。Photoshopですとレイヤーが統合されてしまうことがあります。
（先の回答で混乱させてしまっていたらごめんなさい）

>アニメーションを貼り付けた新規書類はweb用に保存でjpgで保存しました
他の部分はjpgでもgifでも画像に適したものでよいですが、アニメーションgifの部分のスライスだけは、必ずgifで保存して下さい。
ImageReadyのレイヤーでアニメの部分のレイヤーを選択し、［レイヤー］－［レイヤーに基づく新規スライス］を使えばアニメ部分だけのスライスが簡単にできます。そこをレイヤー選択ツールで選択し、最適化パレットにGIFと表示されていれば大丈夫です。それを最適化ファイルの保存をすれば、適切なhtmlが保存されるはずです。

お礼

大変遅くなり申し訳ありません。
いろいろご指導頂きありがとうございました。

補足

こんばんは。
返事が遅くなり申し訳ありません。
40代も半ばを過ぎますと、飲み込みガ悪くなりまして・・・
やっとできました。でも何か自信がない。
これでよいのか最終確認させてください。
1.アニメgifをImageReadyに貼り付けてもアニメは動かない。
それを「最適化ファイルの保存」してもアニメは動かない。
2.「最適化ファイルの保存」したファイルをHPビルダーへ持っていってもHPビルダー上ではアニメは動かない。
3.HPビルダー標準モードで、メニューバーの真ん中辺りにある「e（IEの起動）」のボタンを押してIE上でプレビューしてもアニメは動かない・・・
これって絶対おかしくないですか？特にIEでも動かないなんて。
1と2は「そんなものかな」て思ってましたけど・・・
アドバイス頂けましたらよろしくお願いいたします。

回答No.2

noname#8448

１.ごめんなさい。これは私の癖(保存はPhotoshopでやる)でした、ImageReadyで保存されても問題ないと思います。

２.既存のアニメーションgifをPhotoshopで開くと一番最初の画像(フレーム)だけの静止画になってしまうと思います。
既存のgif形式のファイルをアニメーションのままPhotoshopで使いたい場合は、一度ImageReadyで開いて(こうするとアニメの全コマがレイヤーとして表示されます)、その後Photoshopに戻ればいいかと思います。
また、作成した画像を保存する際はWeb用保存(最適化保存)だけでなくPSD形式でも保存されることをお勧めします。そうでないと後から再編集する時面倒なので。

３.ご質問のように「ページ全体」をスライスで作られる場合は問題なさそうですね。
ページの一部だけにスライスされた画像を使う場合はhtmlを直接コピー＆ペーストしたほうが早いのですが、この場合はこっちのほうが楽ですね。

PhtoshopとHP作成には人それぞれやり方があるなーと再認識しました。
htmlの右クリで「HPビルダーで編集」があるなんて気づかなかった・・・(笑)
ご不明な点がありましたら、何度でもどうぞ。判る範囲のことはお答えいたします。

補足

遅くからすみません。
試行錯誤に悪戦苦闘。ちょっと凹んでます。
何とかできましてHPビルダーで開いてみました。画面上では全く問題ないのでIEでプレビューしましたが、アニメーションは動きません。どこが悪いのでしょうか？Photoshopで新規の書類（800×600　72PPI）にアニメーションgifを貼り付けたのはドラッグ＆ドロップでやりました。Photoshop上ではアニメーションは動きません。アニメーションを貼り付けた新規書類はweb用に保存でjpgで保存しました。
こんなやり方でよいのでしょうか？
よろしくお願いいたします。

回答No.1

noname#8448

出来ますよ。私の場合はHPの画像(写真なので基本的にjpg)の一部だけアニメーションgifにして(ここまでImageReadyで作業)、それをPhotoshopでスライスし、保存したhtmlソースをHPビルダーに貼り付けました。
注意点としては、htmlをHPビルダーに貼り付けると、
スライスした画像と画像の間に隙間が出来ることがあります。
この場合は画像の属性の枠表示にいったんチェックを入れて、枠の幅を0にし、枠の表示のチェックをはずすと隙間は消えます。

あと、私は「どこでも配置モード」は一切使いません。どこでも配置モードは、上から何ピクセル、左から何ピクセル、にこの画像を配置する、というやり方ですので、作成者の環境で綺麗に見えても、
閲覧者のディスプレイの解像度によってはめちゃくちゃな表示になったりします。
(HPB8あたりはその辺が改善されているかもしれません。私はHPB6.5使用なので)

上記のスライスした画像の配置も、単にテーブルで画像を配置しているだけなので、これも、通常モードで綺麗に出来ますよ。

ただ、ページ「全体」でこれをやってしまうと、画像が大きくなって読み込みに時間がかかる場合もありますからご注意を。
(通常、ページ全体でこう言うことをやる場合はFlashのほうが適しているかと思います)
ご参考までに。

補足

どうもありがとうございます。
回答の中で３点ほど質問があるんですが
1.＞(ここまでImageReadyで作業)、それをPhotoshopでスライスし・・・
とありますが、スライス→最適化保存の作業はImageReadyではなくPhotoshopでやるわけですね？
２.Photoshopへのアニメーションの貼り付けはページ全体とアニメーションのファイル両方を開き、アニメーションをドラッグ＆ドロップしてやる方法でよろしいでしょうか？
３.＞htmlをHPビルダーに貼り付けると・・・
とありますが、私がやった方法は、htmlファイル（IEのアイコン）を右クリックし、HPビルダーで編集をクリックしてますが、その方法でよろしいでしょうか。
重ねてお願いいたします。