image slicing tutorial

Photoshop Tutorials


Click on thumbnailed images to enlarge

Ok, this tutorial wil be kinda long because I am going to be explaing a few things out in detail. If you have any questioons or would like to submit a problem with my tutorial, Im me on msn messenger at:

[color=red][size=18]Slicing :: Intro[/size][/color]
In this part we will be looking at the benifits of slicing and how to do a basic image slice.

Slicing an image is very helpful for making a layout that flows together. It is also faster than than making lots of other images that don't fit right together.

Now lets look at the slice tool:
User posted image
See that tool that is circled? That is the clice tool. We will be using it often so remember were it is.

Basically, to make a slice, select the slice tiil and use it to select part of an imae that you want saved differently from the rest of the picture. You may have multiple slices im an image.
Yours should look something like mine below:
User posted image

Now that you know the basics of slicing, it is time to set up photoshop so you can export all the slices.

[color=red][size=18]Setting up Photoshop[/size][/color]

To set up photosho to export all the slices you made, follow these easy steps.
1.) Go to file>save for web
2.) follow this diagram:
User posted image
so you first select that little blue arow to pull up a menu. Next you select Output settings.
3.)When a box appears like the one below, change the settings to match mine:
User posted image
Then click ok, and save the file as you wish.

[color=red][size=18]Coding it all together. Dreamweaver.[/size][/color]
This part only applies to those of you who are doing this in dreamweaver. If you are not, scroll down a ways to see a notepad version.

Ok, Make a new file and title it whatever you wan't. Then save it as index.html or .php ot whatever. Now, depending on what type of layout you made, you need tro make tables were the images will fit into.

Another way to do this would be to open the html file that photoshop generated and play around with that untill you get it right. It is kinda hard to give a tutorial on what to do since it will all be different, and I am assuming you have faire knowlege of html. If not, read the very beggining to this tutorial.

[color=red][size=18]Coding in Notepad[/size][/color]
Now since you are using notepad, I will elaborate a little more than I just did for the Dreamweaver users.
open notepad and create a new HTML document and save it as index.html or.php or ect...
Just so you know were I am headed, it might help to check out my site, This is what I will be showing you how to code.
In the document write the code like this:
<!-- begin code provided by -->
<!--Code copyright 2004 Vurtune technologies.-->


<TITLE>Vurtune Technologies</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: #AAC894;

<link href="style.css" rel="stylesheet" type="text/css">
<TABLE WIDTH="780" HEIGHT="253" BORDER="0" align="center" CELLPADDING="0" CELLSPACING="0" ID="Table_01">
<TD height="176"><IMG SRC="images/index_01.jpg" WIDTH="780" HEIGHT="176" ALT=""></TD>
<TD height="25" align="left" valign="top"><IMG SRC="images/index_02.jpg" ALT="" WIDTH="780" HEIGHT="25" border="0" usemap="#Map"></TD>
<TD align="left" valign="top" bgcolor="#495D2A"><p class="basic">Welcome to the new Vurtune Technologies. First, lets see what is new. You will notice a new downloads section. This section contains a multiple of files including free desktops made by our award winning graphic staff. And secondly, you will most definitely like this part. We are making a user section which will include free email, up to the minute news and more. This section won't be done for a while but until then, you can use our forums for the time being. If you already have an email account, go ahead and click the "Your Account" link to read your existing emails. </p>
<p class="basic">Comming soon! >> Why not to mess with Vurtune Technologies </p>
<map name="Map">
<area shape="rect" coords="34,1,92,25" href="index.html">
<area shape="rect" coords="92,0,149,23" href="about.html">
<area shape="rect" coords="149,-8,221,23" href="articles.html">
<area shape="rect" coords="220,-12,301,23" href="portfolio.html">
<area shape="rect" coords="303,-7,361,24" href="prices.html">
<area shape="rect" coords="363,-8,415,22" href="links.html">
<area shape="rect" coords="415,-29,516,22" href="downloads.html">
<area shape="rect" coords="516,-10,578,22" href="" target="_self">
<area shape="rect" coords="579,-14,697,23" href="">
<area shape="rect" coords="696,-12,744,23" href="staff.html">
<!-- end code provided by -->

Now don't just copy and past my code, it won't work right. As you can see I used a css file to maintain functionality between browsers.
To sum up what I did above:
1.) made a css file
2.) Made 3 tables
4.) added the images to the tables
5.)create a mapped area for the links in the nav bar
6.) add text

Now if any of this confuzed you at all, I want to help. Please IM me on msn an I can help you out even further. If I get enough request I will start writing tutorials daily.


Tutorial Comments

Showing latest 1 of 1 comments

there are no visual guides:(

By blousey on Feb 1, 2008 9:01 am

Tutorial Details

Author anunknownuser View profile
Submitted on Feb 16, 2006
Page views 17,963
Favorites 8
Comments 1

Tutorial Tags