• Lesson Index:
• Overview
• Layout
• Getting Started
• Setting Colors
• Draw Layout
• Enhance Photo
• Import Image
• Gradients & Masks
• Components
• Making the Header
• Smudge Tool
• Write Title
• Navigation Bar
• Footer
• Finishing
• Slicing
• Export
• Export Options

Slicing the Side Image

We got the following from the last lesson: creativework.png.

When creating a website, we have to determine which part of the comp will be implemented as a graphics and which part of the comp will be implemented in HTML. The side image for example, will be implemented as an image. Because we can not do drop shadows in HTML and the text font is in an distinctive font of Black Chancery that most user would not have on their system, the title will also be implemented as a graphics.

The navigation menu bar is a solid color and the menu items are just text using a common Arial font. This can be easily done in HTML. And hence the nav menu will not be implemented as a graphic. Plus it contains link and interactivity that needs to be implemented in HTML. The content text is just text and should also be implemented in HTML. Same for the footer.

So the only graphics that we will need for this website is the side image and the title.

We need to slice out these images. In the industry, we call this stage slicing the website. We will slice out the side image first. We need to slice to pixel accuracy; no rough eye-balling. Hence we need to use guide. Zoom in close and adjust the guides onto the left edge and top edge of the image as shown below. We don't want the black border to be part of the image that we are slicing out.

Similarly, adjust the right guide as shown...

With the side image selected as shown below, you can snap the bottom guide to the bottom edge of the image

Now that the guides are in place, we are ready to slice. Make sure that View -> Guides -> Snap to Guides is checkmarked. Then use the slice tool to slice and drag out the area as shown.

Note that an new slice object was placed in the Web Layer. Rename that object to be called "sideimage".

Slicing the Title

Similarly, we adjust the guides for the title image...

and slice out the below area, renaming it to "titleimage".

You should now have something like my file here: creativeworks.png

We had sliced the whole rectangular area of the masthead to be the titleimage slice even though many areas of it is simply solid color that can be easily implemented in HTML. A rule of thumb for quick loading of webpages is to have as few and as small images as possible. So ideally, we should have sliced the title image as ...

However, that would mean more complicated HTML coding (which we will do in the Intermediate Design Series). But for the Intro Series, let's keep things simple for now and leave the title image to be the whole masthead.

In the next lesson, we will learn to export.