Website Designed in Photoshop - Part 2

If you have any questions or comments about this tutorial, please post them here.


SECOND PART SECTION - Slicing The Banner For Links
Make sure you Flatten all Layers, then click on the ImageReady icon in the menu, looks like this:

Make sure once you have ImageReady to go to View/Show and UNCHECK Autoslices and to CHECK Slices. Then go to Window in the top menu and make sure that Slices is checked.
Then select your Slice Tool in the menu, it will look like this:

Then go over to your menu and draw a box around each menu subject, mine for example is Home so I used my Slice Tool to draw a box around the word Home. Now you can Nudge your box to get the right position and if you look in the Slice Window you can see a preview where your slice ends and begins. Also in the Slice window you can see where you can type in your information about your Link. *If you can't read the image below, click on it and it will become clearer.* Example as follows:

In my example the things to change are the URL and I know it shows greyed out like you can't choose a target, but you can, just click on the arrow and choose where you would like the link to open.
Repeat these steps for the rest of the menu. Then when that is all done, you may preview your work by clicking on the Internet icon in the menu, looks like this:

After you have things the way you want them, go to File/Jump To/Notepad and you can browse where you would like to put the html document and the images that are sliced.

Now you are ready to go upload your images that are now placed in a folder. And get ready to place your code into your webpage!

| Back To Step 1 | Next To Step 3 |