GIFアニメ講座01──ImageReadyの機能を学ぼう(これさえ覚えればなんとかなる!)

Photoshopと共に使えるImageReadyはWeb用のグラフィックを作るためのソフトです。ホームページ作りに欠かせない機能を予習しましょう。

ImageReadyの画面

Imagereadyの画面とパレット、ツールなどをご説明します。ほとんどPhotoshopと同じなんですが、独特のツールもいくつかあるんですよ。


1…画面の表示方法を選択できます。
2…元画像の重さを表示しています。
3…Web用に最適化された重さ、ダウンロード時間、画質などを表示します。
4…重さと回線ごとのダウンロード時間などの表示を変えることが出来ます。

Imagereadyで画面を開き、上の画像の1の部分のタブを「2アップ」にしたところです。

「2アップ」では「元画像とWeb上の画像と2種類」を比べて見られます。

「4アップ」は元画像とWeb上の画像3種類」を比べられます。左が元画像、右が最適化(Web用に画像の種類、画質を調節すること)された画像です。

ImageReadyではこのように、Web上でどのように見えるかチェックしながら絵を描いたり、画像を加工したりできるんです。便利!

ImageReadyのパレットなど

ツールボックス

ほとんどPhotoshopと同じですが、いくつか重要なものを選んでみました。

1…スライスツール・スライス選択ツール。
大きな画像を切り分けられます。
2…スライスの表示・非表示を選べます。
3…Webブラウザーで表示。
どのように見えるか確認できます。
4…自動的にPhotoshopを開いてくれます。


最適化パレット

画像の保存方法を選ぶことができます。選んだ画像はビューの「最適化」「2アップ」「4アップ」で確認することができます。


アニメーションなどのパレット

1…アニメーションパレット
アニメを作る上で最も重要なパレットです。主にこれを使ってGIFアニメを作ります。

2…イメージマップパレット
一枚の画像の中の一部がリンクボタンになっているものはこのパレットで作れます。

3…スライスパレット
スライスツールで切り分けたパーツの設定を行うことができます。


スタイルパレット

直接GIFアニメとは関係ありませんが、ホームページ用のボタンがあらかじめ記録されているので、これを使って簡単なボタンを作ることが出来ます。左上に▲印がついているのが、ロールオーバーボタン用です。

以上はImageReadyの操作上、とても大切なパレットですから使いこなせるようにしておきましょう!


保存の仕方

「ファイルメニュー」→「最適化ファイルを保存」を選ぶと下のようなウィンドウが開きます。保存の場所とファイル名を設定して保存できます。

赤い□の部分では、HTMLのみ・画像のみ・HTMLと画像を選んで保存できます。例えば、ロールオーバーボタンを作ったときや画像をスライスで切り分けたときなどはHTMLでもデータを書き出してくれるんです。


ImageReadyの基礎はいかがでした? Photoshopを使っている方なら、それほど難しくないと思います。次回では画像の種類とGIFの透過処理の仕方を学びましょう!

このブログは2001年07月23日開設のサイト「幻想画廊」を2019年にWordpressで移築したものです。この記事は13年前の、2006年05月02日に書かれました。文章の内容を変えずにそのまま転載してあります。リンク切れなど不備もありますが、どうぞご了承くださいませ。

元サイト「幻想画廊」はこちらです。

GIFアニメ講座
この記事を書いた人
マリア・ガルシア

当サイトの作品のモデル・画像加工者・執筆者。Web・雑誌・カタログなどのデザインの仕事をしています。趣味・特技は英語、速読、ダンス、ブラックジャックを10秒で描けることです。

マリア・ガルシアをフォローする

ちなみに18年後のマリア・ガルシアこと五十嵐麻理は、こんなブログ↓を書いています。

幻想画廊・PhotoshopフォトショップCGコラージュ
トップへ戻る