ImageReady tutorial Page 1

Here is how a slices looks. This is a screenshot of the thumbs list in explorer, so they are not at scale. But you can see what I mean about dividing a webpage into small images.

I will not explain how to draw this webpage but you can download the file for free at my website. So here is a small look:

Ok, we are in ImageReady. The interface is really similar to Photoshop. So you can still work a little in ImageReady to modify your layouts

In window, you can see there are some others options than in Photoshop. The main of them are:

In summary, you have first to make slices to divide the webpage in small images (buttons, banners, ect.) and next add rollovers, links and the animation.

And finally you can optimize your website (.jpg or .gif, compression) and save (or export if you want) your file in web format with all the images.

You can use slice tool to divide the layout in a rectangular areas of an image (the PSD file) that can be used to create links, rollovers, and animations.

So click on this tool

to make a selection and select the cartoon character (standard selection: click, drag and release the mouse button). You can zoom to be more accurate. It should looks like this:

Now we'll convert this selection into a slice. In the "slice" menu, click on "Create Slice From Selection". Something happens, the webpage has a higher brightness, this is normal don't worry. To work with slice, you select the “slice select tool”

.Notice that we have 5 slices in the scene (There are some new icons to the left of each slices 01, 02, 03, 04, 05. When you make a slice, Image ready automatically adjust the scene because you can't have a slice in the middle of nowhere and must rectangle area, so you can't have a circle or triangle as slices.

But it doesn't mean Imageready will make 4 slices automatically when you create the first slice. The examples bellow will help you to understand how slices work.

Next step, make a selection of all buttons (with

). In the "slice" menu, click on "Create Slice From Selection"

Now click on slice 04, right click and select "Divide Slice". This tool is useful. you can divide the slice horizontally or vertically. Divide the slice verticaly in 9 slices. Now align the slices on each button in draging them. It should looks like this.

Now you can save and play with the slice to see how it works. By example, click on a slice and move it. You'll see others slices are automatically created. Another thing also, click on slice 13. You can see the slice looks lick. You can't enlarge it as the yellow squares aren't there. It's because the slice is linked. To change this, only eight click and select "Unlink slice".

The last things we have to slice are the left part where there are circles for rollover A-B-C-D. For this, you simply have to select the left part and divide into 9 parts.

At the end, it should like this. You can notice I've adjust the slice a little (15 to 23)

At the end, you have learn a slice can be created with the selection tool, duplicate, combine and divide slices.

This part isn't long to explain, but you'll have to read carefully. What is a rollover?

A rollover is a Web effect in which different states of an image appear when a viewer performs a mouse action. So by example, you can set an effect when the cursor of the mouse will be over a button, or click on a button, etc. In this tutorial, we'll make 2 effects when the cursor will be on each button A. We will use the "Web content" to add these effects.

Ok, I'll explain what we'll do. We will add a state for each buttons (Button A-B-C-D). For each appropriate state, we'll unhide the good rollover layers.

First, open the "Web content". Select the Button A with the “slice select tool”

. You can see in the Web content that the slice #5 is selected. Right click on it and click on "Add Rollover State". Be sure to select the "Over Rollover state" (blue part on the following picture) and unhide Layer "A" and "Button A Red". Easily the rollover is created. If you double click on "over" you'll see other option of rollover (over, down, click, ...). So you can open layers to unhide things when the cursor will be over the button, and you can hide things too.

You can test it. Simply click on "webpage_05" (the slice #5) and click on "Over". You'll see when the cursor is on the Button A will be red and the A at the bottom left will appear. So it will work? We need to make something because when the .html will be created, the "A" letters (also for B-C-D) will not work. It's only because the layer with the letter "A" isn't in the same slice than in the Buttons A slice. So we have to target it. Click on the small lasso icon and drag it to the slice 16 (the A letter)

Note: You can't make rollover menu in ImageReady, you'll need a script and write in the .html code. I won't covert it today, there are some really useful tutorial on the net. Check them out.

Here is an easy part. You can do this part in html editor if you want like Dreamweaver or GoLive. But I'll show you how to do this in ImageReady. Note if you make the link in ImageReady, you can change it in your favorite html editor.

We use link to open another page when we'll click on the button. First be sure to use the “slice select” tool

. Then select the "Slice" dialog box. In URL you only have to type the link “buttona.html”. It could also open a video, and image, etc. Note: Don't use spaces or capital letters, no accents. Click enter you can select the target: by example _blank to open the link a in new windowé. See the help file for descriptions of the other options.

As animation, I found 6 images from a Daniel Martinez Lara model coming with 3d Studio Max. I'll use them to be looped.

First, be sure that all characters layers are unhidden. Open the "Animation" dialog box. You can see one frame with the whole webpage. Click on this one and unhide the first animation layer. Click on "Duplicates current frame". hide layer 1 and unhide layer 2. Duplicates it and do the same trick to make the 6 frames. Click on "play" to test the animation. If you click on "forever", you can set the animation to turn 1 time, forever or the number the times you want to loop it.

This tool let you decide the compression and the format of the bitmap. You can first select all slices and apply a default presets. Then you can change compression of slice individually if you want. By example, you can put the animation slice as a .gif to have an animated gif and use .jpg for the rest of slices.

There are no secret, you can make test by example at 60% and another at 70%, see the size and the quality and tweak it to have something small and good.

Now the website is ready. How can I save it in html? The option is in File: “saved optimized as” in file. Then you can write the file name.

And in slices, you can save all slices or by example, only selected slice, really useful if you modify one slice and don't want to save all the file. You can use save optimized after if you want to make some changes.

you can see a .html file has been created and an "image" folder with the image has been added too. Just test it and you'll the website.

First: you can't directly make a background color or bitmap this program, you can use file/jump to switch to notepad or your web editor as Golive, Dreamweaver.

Second: Don't write too much text in ImageReady: copyright, banners and buttons are enough. If you write all your website here it'll be convert into bitmap format, so not selectable and will make you file bigger as you can't use default files for all pages but each page (page1, page2, ...) will needs there own image folder . You can learn html to know how to add text with notepad or use web program.

	The animation frames are hidden and nust be. The animation is made by frame by frame. You'll see later how it works. You can see 6 images. The animation will use them one by one and will loop them after, or only 1 time according to the setting you'll give in ImageReady
	circular frame, horizontal bar, background & box are just design objects. You can see the effect I used for each layers in clicking on the arrow turned to the right.
	Rollover: Layer A-B-C-D are in the left banner of the webpage. When the mouse is over Button A, the letter "A" will appear ect. One layer by button is better. Don't make them in only 1 layer or you'll be in trouble when it'll be time to make the specific layer visible. Button A are the red rollover. It's important to hide them because they have to be visible only when the cursor will be on the button only. If there aren't hidden, it'll be visible always.
	Background: This isn't the background in all the website. This is only the background in the design. We'll have to make a background code later.