How to Slice and Save Images in Photoshop for the Web

Definition of a Photoshop slice: a Photoshop slice is a part of a bigger image.  So, if you have a big image, which is usually the case with designs for websites, you want to be able to “slice” that big image into multiple smaller images that will each have a different role on the website.

Step by step

  • Press “K” in Photoshop to get the slice tool. You have two of them. One for slicing, the “Slice Tool”, one for selecting and adjusting slices, the “Slice Select Tool”.
  • Slice the part of the image you want.
  • Zoom in.
  • Switch to the “Slice Select Tool”
  • Click on your slice and adjust it by dragging on the corners and edges.
  • Double click on the slice to bring up the “Slice Options”.
  • Rename the slice to “whatever you want” and now you can save just the sliced image.

  • File>Save For Web will bring up a window that will allow you to select just the slices you want to save. (Keep “Control” key down as you select the slices you want to save.)
  • If you don’t want any HTML pages, make sure you select to save “Images Only” in the “Save as Type” box.

Hints on how to minimize the amount of images your website has

  • Don’t slice any solid backgrounds. If your image has a lot of solid background, slice only the image part and set the background using CSS.
  • You only need a sliver (1px width or height depending on the direction) for a gradient, which can be repeated with CSS.
  • Any solid borders should just be done with CSS.
  • The text on links, should never be images, it makes them hard to change and they’re some of the things that are most often modified.

Bits of HTML and CSS code for your images

  • Here’s the code to make an image into a link. (It’s a good idea to set the border=”0” for your linked images in case someone still has some ancient browser.  The alt tag is very important, leave it without any value, but never leave it out if you want to have valid HTML. The text in the alt tag is the text that appears if the image is broken or missing.)

<a href=”/”><img src=”/images/logo.jpg” alt=”the name of my website” border=”0”></a>

  • Not really about images, but a good thing to check for when things don’t align properly: padding, margins and borders have to be subtracted from the width and height in div tags, not so for td tags.
  • Example CSS for a gradient that goes from right to left:

div#gradient {

width: 900px;

height: 140px;

background: blue url(/images/banner_gradient.jpg) top right repeat-y;}

  • For old times sake, because you can do all of this now with just CSS, here’s how to do rounded corners retro style:

 

For a box with rounded corners and no border you only need four images, one for each corner. Check out the slices :).

There are two ways to code this box, one is with tables and one is using divs. I will show the divs way because it’s the newer way (EDIT: this was written back in year 2006) to do things and the harder way too.

One way to code this using divs is to use five of them and put them all one inside the other. The first one (outer div) will set the width and the background color. Each of the nested divs will add a corner and the most inner div will set the padding and any other styles the content inside the rounded corners box will have.

CSS

.background {width: 200px; background-color: red;}

.top_left_corner {background: red url(top_left_corner.jpg) 0 0 no-repeat;}

.top_right_corner {background: red url(top_right_corner.jpg) 100% 0 no-repeat;}

.bottom_left_corner {background: red url(bottom_left_corner.jpg) 0 100% no-repeat;}

.bottom_right_corner {background: red url(bottom_right_corner.jpg) 100% 100% no-repeat; padding: 5px;}

HTML

<div class=”background”>

<div class=”top_left_corner”>

<div class=”top_right_corner”>

<div class=”bottom_left_corner”>

<div class=”bottom_right_corner”>

<!– content goes in here–>

</div>

</div>

</div>

</div>

</div>

For a box with rounded corners and a border you need eight images. In this case, I would actually use a table, the code ends up being much cleaner.

Of course if your box is always going to be the exact same width you can always just get a slice for the top and one for the bottom and solve your problem in three divs. Having the corners divided like this creates a more flexible box that can be used for different widths across the website. If you get even more advanced you can write yourself a JavaScript of PHP function which you could call like this: drawRoundedCornerBox(mycontent, width).

 

 

The New Theatre

I’ve go blisters on my hands and my back is sore from putting this thing together, but now I can’t wait to paint this and even use my oil paints again.  I should really have read the instructions before putting hinges in, I’m not a man!  I failed to read the instructions that said to drill a hole before screwing, and I swore and broke my hands and kicked and almost gave up.  Everything went so much smoother after I bothered to read the directions. Lesson learned. Hopefully.

Puppet Show Theatre

Puppet Show Theatre

Colourful Tea Time

Yesterday I received a call, which woke my son up, so I couldn’t hear very well what the caller was saying.  I heard something like: “mumble, mumble, craigslist ad”, so I asked “what craigslist ad?” with probably a bit of annoyance and impatience in my voice since my son was up and crying. “Oh, sorry, I must have gotten the wrong number” the person on the other end of the line said and hung up.  Minutes later I get an email saying “I’ve lost your phone number, I’m wondering if I can come and see the paints you have for sale”. Ha! I guess that’s what the call was about. Nope, I’m still using them, sorry. I’m guessing two more sessions and I’ll be done with this painting.

Tea Time 36" x 30" Oils

Tea Time
36″ x 30″ Oils

Craigslist Made Me Start an Oil Painting

It has been over six years since I’ve last used my oil paints, so I decided to admit it and face the fact that I wasn’t likely to use them ever again and that they were taking precious space in my already small and overcrowded house. In fact, I’ve been spending the better part of December getting rid of things that I didn’t need, use or want, so it was only a matter of time before their turn came to leave my care and go find a new master that would hopefully show them more love. It’s late again, my mind and writing is all over the place. I can feel it. Anyway, going back to the paints. I posted them on craigslist and asked for $20.  A very, very good price. I have over 50 paint tubes, some of them, as I’ve just noticed, not even open yet. Together with the tubes, I was also including my wooden case that becomes an easel.  A real steal! I got three inquiries right away and I deleted the ad. I contacted the first person. He asked me to list all the brands. I did that and didn’t hear back from him for a day. I sent him a message again asking him if he’s still interested, he said yes, I gave him my address and told him to come before 8:00pm. He didn’t show up, he didn’t contact me. I waited till evening next day and when I still didn’t hear back, I called the second person.  Second person, very interested too. He was going to come the following day. Good thing my son was sick, or I would have been pissed to have waited at home all day, because the second person never showed up either, but that day in the evening, the first person got back to me, saying they were going to come next day at 7:00pm. I gave up on the second person and I told to myself, if the first guy doesn’t show up, I’ll forget about contacting the third and I’ll just use the paints myself! My hands are stained, my house stinks and I’m working on a 36″ x 30″ sized canvas.  For lack of a better idea, I’m painting my tea set, which is absolutely gorgeous in real life. Here’s the work in progress. I hope to be done soon cause the smell is just awful. I used to love the smell, but now all I can think of is “brain cancer, brain cancer”.

Tea Time

Tea Time

New Year’s Resolution: Sleep More

I don’t make New Year’s Resolutions, well, I don’t dare voice them just in case.  It took me 11 years to get my driving licence and I blame it on the fact that every year I had the same resolution: “get that licence” and the moment I gave up, I got it. True story.

I made a resolution this year and it’s day 3 and I’m failing right at this moment. I decided that this year I’ll sleep more. Sounds easy, but it is quite a challenge. I really need to get off my butt and go brush my teeth and go to bed.  I don’t understand why I spend late evenings with my eyes half closed reading just one more bbc, cbc or wiki article. I procrastinate going to bed. It makes no sense, yet here I am at 11pm falling asleep over this keyboard.  Sometimes I wish I didn’t live in the age of electric light, but that would probably mean toiling all day in some field, having 10 children, a bath only once a week and very likely be illiterate. I think I’ll stick with lack of sleep, as much as I love Jane Austen, I wouldn’t want to live in her time.

I will sleep more. Starting tomorrow.