Slicing and linking images in Photoshop.

Note as of 3/19/10: My website was updated, so when you look on my website, the background to this image will no longer be aqua.

Okay, so as you all know, I was having issues with my photos on my post secrets page. I couldn’t get them all to line up how I wanted to. Can you believe photoshop let’s you do this…AND add a link to that image? Crazy stuff, eh? Well, here’s how you do it. Granted, I’m sure there’s more ways than one. Prof JSB told me about using a vector mask, but I found another way by messing around and watching various tutorials. First off, you’re going to want to line all of your images up, like so in the picture below.

Make sure each photo is in a separate layer. Then, you are going to want to select your slice tool (click crop and hold down, switch to slice tool NOT slice select tool.) Next, draw “boxes” around your photos. After each slicing, I selected the next layer I was going to slice, just because I’m paranoid like that, but you don’t necessarily need to do this. Now, notice there are other slice on your image, besides the one you created. These are called “auto slices” and photoshop makes these automatically. Pretty neat, huh? You can see this in the image below.

Okay, now to add your HTML links to these images. Go to your slice tool again and change it to your slice SELECT tool…now go to your horizontal tool bar and to the right of “Hide auto slices” is a little square box that looks sort of like a folder with the bullets and three lines on it. Click it. A box should pop up asking you the name, url, target, message text, and alt text. For name, simply enter the name of your image, make it unique because EVERY slice will be in the folder you decide to hold this in. As for url, simply the url of the image. As you know, target is if you want it to open in another window or not and alt text is for the visually impaired. Do this for every image on the page that you want to be clickable. For an example of how to do this, look below.

It’s optimization time. Save your psd file. Then, go to Save for Web & Devices. Now click on your slice select tool (it’s on this screen, magically, of course) and click on each image. Go to your compression size dropdown (says very high) and see how low you can go without reducing the color and graphics too much. This way, your images will load much quicker when someone’s looking at your site. For an example, look below.

Now, hit the magic save button. Pick your site root folder that you use for DreamWeaver. Now, I made a new folder because ALL of the slices (your own user-slices AND the auto-slices are going to go here and be saved). Choose save HTML & IMAGES from the dropdown, create a title for this (i did wtf.html, just because I was having a ton of problems at first when experimenting, then linking this in DreamWeaver.) The example is below.

Okay, now the fun part. I’m going to save you a lot of time and just tell you to open this HTML file in DreamWeaver and add your style sheet to it. Now, add all of the rest of the HTML you want on your page around the code for the photoshopped image (for, example I added the HTML for my links, footer, banner, content, etc. to this HTML page). The code for the image will start and end with a comment. For an example of how the code will appear in DreamWeaver, look below.

Okay, there you have it. Now just link this HTML file to the others on your site and there you have it.

Note: I had some issues when viewing this image on my web page in IE and Safari, but not in Firefox. What I then did,  was just deleted the other auto slices from the code and just left my images because I had the same background color as I used in Photoshop. Best of luck. If you have any questions or concerns, just comment or email. The DreamWeaver part of this can be a bit of a pain in the butt.

Results may be seen on my Post Secrets page by clicking here and then going to Digital Composition, Post Secrets. Enjoy!


Tiffany Nebraska

~ by spiffytiffy2009 on January 30, 2010.

One Response to “Slicing and linking images in Photoshop.”

  1. This is a great post. Besides some tiny grammatical errors, this was clean, neat, and easy to read. The screen shots helped tremendously. This post goes step by step and takes the viewer all the way to the end of the process.
    I was a little confused when you said, “Open this sheet in Dreamweaver,” and it took me a couple reads to get that we are importing the HTML with the images into Dreamweaver, and building the code/style around it, versus just starting fresh. That could be helped with a little rewording.
    Otherwise, I could definitely follow this, and since it is something I struggled with as well, I think it is a useful post. I also like that you included a link directly to your site to view your version, and you also mentioned some of the issues that you had with browsers. Awesome.
    -Abby V.

Comments are closed.

%d bloggers like this: