Step One: Splice it up baby!
[current materials] Photoshop (v 6.0). I am using the file imageready.psd .
----------------------------
In this lesson, you will learn how to splice an image with Image Ready, a built in program with Photoshop 6.0 (not sure about other versions), and learn how to apply that to a web page.
I have already prepared a document especially for this tutorial called imageready.psd . Please download it and open it with Photoshop. You are more than welcome to keep this for yourself, and use it to practice slicing. Ain't I nice? ^_~
Pretty site, neh? ^^;; I had to make something for this tutorial.. so yeah.. *coughs* Anyways, see that area on the tool menu that I highlighted in red?
Step 1) Click on that!
Neat, huh? ImageReady should have opened automatically. This is what your screen should look like now.
If it doesn't, close those extra windows that aren't in the image. You won't be using them in this tutorial anyways ^_^.
Step
2) Time to Splice!
Select the Slice Tool on the menu. See the piccie to the right. It looks like a little knife. ^_^ The splice tool is a nifty tool, but is VERY often ignored because.. well, mainly because people have no idea what the hell it's for! XD Really. I'll explain quick before we use it; you use the splice tool to draw over areas you want to specifically change during rollovers, or to apply links to the assigned area, or more! What you do will NOT affect the image in ANY way until you optimize it, so don't be afraid of the slice tool!
[Also remember that when you slice an image using Photoshop, you are mainly doing it because you plan to edit it in Image Ready. Feel free to return to Photoshop to touch up the image, but return to Image Ready to complete this tutorial.]
Now, pull out the slice tool, and draw a box over four areas you want to link on the document: the main title, 'Weib Gallery', and the three button links, About, Art, and Links. Draw a slice next to the buttons links around the text. When you're done, it should somewhat look like this:
Congrats! You have successfully spliced the document with ImageReady. If any of your splices seem a little off, go to the tool bar and grab the 'Slice Select Tool'. The Slice Tool lets you slice; the Slice SELECT Tool lets you edit your slices. Hold on the little arrow in the corner, like thus-
-to select it. Then just select what you want to resize, and shape it. Easy! ^_^
NEXT! >> Using Splices to Create Rollovers
----------------------------