A great tutorial from Graphic Web Design

Slicing Your Images To Create a Website

There are a number of different ways to create websites. Some may choose to hand draw a concept then start coding HTML. Others may want to take a graphical approach to the design and layout. The graphical approach is what I am here to show you.

Being very visual I find it easier to start with an image when designing websites. I will illustrate to you the design process I go through when a new customer hires me. There are a few basic steps to this process. The first is to create an image. Using Photoshop create the image to mimic the general layout you would like for your site. After creating the image you will need to “slice” it up for use in your website template. Next it is time to create an HTML document made up of those slices. This will be the template you will use to create all the pages of your website.

To make it easier to follow along there is a downloadable Photoshop image that is yours to use, alter or demolish as you choose.

CLICK HERE to download the Photoshop Image.   Now let’s get started.

Interface Design

This is the most critical part of the whole design process. The design of your interface is very important for usability. If your visitors cannot find all your content or they are confused they are only one click away from leaving your site.

Planning Ahead

With any new design you must plan ahead. This will enable you to adapt to changes quickly and easily. An example of this is you want to add another section to your website. Does the navigation of your site allow for this, or will it entail a complete redesign. That is wasted time and money. See where you would like to be in the future. Websites are like any other business. You must change with the times.

Layout

We are going to start with an image that is 740×460. In this we need to include the header, navigation and content areas.

Here we have our image that I created in Photoshop (the image on the right). The dark blue bars at the top and the bottom of the page is where our navigation will be. This design is very effective if you have a lot of content and you like fast downloading pages (Our index page for Graphic Web Design is only 16k with all the content and images, so it downloads lightning fast). After you have created your image in Photoshop it is time to slice it up, so we can use it in an HTML document. Let’s slice it up.

Slicing Your Image

Although you can use any graphics software to create your image, I recommend using Photoshop because it will make slicing your image much easier. Packaged with Photoshop is ImageReady. This software can be used to save images for the web, to create gif animations and my favorite feature slicing. Now slicing an image means we are going to make smaller individual images out of the larger one you created to place it in an HTML table. You could just have a large image as a page in your website, and make image maps over areas you want to be links. The problem with this is that it will seem like forever before it downloads. As you will see in this example when you slice a large image you can optimize each section individually to make the total file size smaller. Also as in this example some slices are duplicated so you need to only use one of them. This will make the file size even smaller. The example image I created for this is only 26.1k. What this means to you is that this page will only take 9 seconds for a person to download with a slow 28.8 modem speed. Are you starting to see the benefits?

Here we have our image still in Photoshop (refer to top image on the right). By looking at the larger view you can see that there are blue lines placed on the image. These are guidelines you can simply drag out of the ruler area in Photoshop. These guidelines are where we are going to slice the image. It helps to have a working knowledge of HTML. You must know how tables work, so you can slice your image in a way that will work with tables.

After you import your image into ImageReady go to the top of your screen and choose “Slices”. From the drop down menu click “Create Slices from Guides”. Your image should look like this (refer to bottom image on the right).

You should notice that all the slices have been created from the guidelines and are numbered. The numbers are merely the default way that ImageReady names the sliced images. We will change those later.

Slicing Your Image Pg. 2

Now that you have created your slices, goto the top of the page and in the “Windows” dialog box choose “Show Slices”. It looks like this.

It is time to combine some of the slices and name them. Choose the “Slice Selection Tool”. The two vertical guidelines split up the header into three images, and we need to combine those slices to make the header one image. Using the Slice Selection Tool and the shift key, first click on Slice 01 in the top left corner, then holding the shift key click on Slices 02 and 03. Next right-click on the center slice and choose “Combine Slices” from the dialog box (Mac users goto the Slices dialog box at the top and choose “Combine Slices” from the dialog box). Your image should look like this (refer to the image on the right).

Notice how it is now one slice and it is highlighted with a yellow border. To name it goto the “Slices Interface” (see image above) in the name field type in “header”. Repeat this process for the footer area and name it “footer”. We still have a few more slices that need to be named. Just under the header on the left side you should see what is now slice 02 (small dark blue square). Because this is the same dimensionally as Slices 04, 08 and 10, we only need to save one of them. Click on Slice 02 with the Slice Selection Tool and name it “blue_square”. Next click on Slice 05 and name it “gray_bar”. If you notice again that it is the same as Slice 07, you only need to save one of them.

Optimizing and Exporting

We are now going to optimize each slice and export them. Use the the “Slice Selection Tool”. to select the gray_bar slice and hold down the shift key and click the blue_square slice. Since these are single color images we are going to optimize both of these at the same time as gifs. Use these settings to optimize the two slices.

Use the the “Slice Selection Tool”. to select the header and then holding the shift key click on the footer too. Since these slices have complex color transitions it is best to save them as jpegs. Uses these settings.

The reason for the small amount of blur is to smooth out some of the pixelation often associated with jpeg images. This is not a common practice when optimizing photographs, because the photo will look out of focus.

To export these images use the “Slice Selection Tool”. to select the header, footer, blue_square and the gray_bar and in the File menu choose “Save Optimized As”. With this you have a few option. You can choose the destination (where the images and code will be saved) then click save or you can choose to save the HTML only and it will create an HTML page that will fit the layout you designed. The third option is what we are going to do. I want to just save the slices that we have selected, so in the “Save as type” dialog box choose “Images Only”. Then below that choose “Selected Slices”. The default in this is that ImageReady will save all the images in an “images” folder. You can click on the “Output Settings” box and in the lower part of this box deselect the “Put images in folder:” check box. I generally create the folder structure of a new website first before slicing the image up. Then click save.

The next step is to create the HTML page we will later use as a template for the rest of the website. If you are wondering why we did not save the center slices, the center large gray box is going to be for your content. The top and bottom blue horizontal bars (that are below and above the header and footer) are going to be where you will put the text links for navigation.

Key Note

I choose to do a design similar to the design used for our Graphic Web Design website to show you how this type of interface works. If you notice how the text seems to be indented in the content area, that is what the gray_bar image is for. You also need to change the background color of those cells to the same color (#CCCCCC) as the gray_bars, so that when the page grows in height it will still look the same. Where the text links are I merely made the background color (#374256) of the cell in the table the same color as the blue_square image. The changing of the colors on the text links is done with CSS (Cascading Styles Sheets). Let’s move on and create the HTML template.

Putting It All Together

It is time to put all the images we just sliced into an HTML document to create the template. However you build your website (either with an HTML editor like Dreamweaver or Adobe’s Golive or you hand code your HTML) you need to create a table that has 5 rows and 3 columns. Be sure to place the center tag before the table and the /center tag after the table to center it on the page. In the top row make the first cell on the left col span 3. This is so you can place the header.jpg image inside. This will also establish the width of the template. In the next row below the header make each cell’s row height 18 pixels to correspond with the blue_square.gif image and make the cells’ width 16 pixels. Do the same for the for the fourth row. Place the blue_square.gif image in the outer cells of the 2nd and 4th row. In the third row first cell (to the left) place the image gray_bar.gif and repeat for the 3rd column. Set both of their background colors to #CCCCCC. For the second column in the 2nd and 4th row set those cells’ background color to #374256. For the center column in the 3rd row (where your content will be) make that cell have a background color of #CCCCCC. In the last or 5th row choose the 1st cell and make it col span 3 to place the footer.jpeg in it. Also specify the row height of the 1st, 2nd, 4th and 5th rows leaving the 3rd row to grow with your content. And that is it. Your page should look like this(refer to the top image on the right).

Since the white background of the page did not work well with the design I created a background image to tile behind the interface. To make simple scanlines create an image in Photoshop that is 1 pixel wide and 2 pixels tall. Next select a square that is 1px by 1px and color it with a color you feel will compliment your design. Then move that selection down and fill that with another color. Save the entire image as a 2 color gif image and name it bg.gif. In the body tag of your new template simply place it in that tag and it will tile across the page. To see the end result click the image on the bottom right.

Click for Larger View

Click to view finished template

32 Responses to “Easy Website Creation from Photoshop Images”