画像のスライス　adobe imageready　イラストレーターを学ぼう

■adobeのphotoshopに付属しているimageRedyで画像のスライスってのをしてみる

■どういう時に使うか？というとホームページのボタン等でマウスを当てたときに画像が変わるロールオーバー効果。。でも普通の文字だったらしなくてもイラレで表示すればいいのですが。。

背景等に画像が入っている場合に使います。

この様なページを作りたいわけです。イラレで作っておきます。

これは横幅500ピクセルですけど。。普通はもっと800とか900ピクセルで

イメージレディで開きます。imageready

下記のように６つにスライスします

スライスツールを押します

左上から右下までドラッグします。（下記の画像は途中まで。。画像の右端までドラッグ）

きれいに黄色のラインがうまく重なるようにしないとたくさん画像がスライスされる

これで一旦保存した。

デスクトップにhtmlとimagesフォルダーが出来ています

イメージフォルダーの中身はこのような感じです

少し離して並べました・・

色調補正等で別の色の画像もつくります。今回は明るめの画像。

別名で保存する。imageフォルダも名前を書き換える。。でないと上書きされる。

ファイル名も変更しておく。

完成です。各文字にマウスを当ててください

上の完成は画像の切れ目のラインが出ていますけど。。ちょっと画像を間違えたから。。

普通は。。きれいにつながります。。あしからず