In this tutorial, I will show you how to use the Slice Tool in Pixelmator to, of course, slice a design to be coded into a functional Web site. I will also show you the HTML/CSS walk-through process. In the end, you will be able to download the files and tinker with them as well.

Step 1

Open the Pixelmator file we created for our UI tips tutorial.

Basics of Slicing with Pixelmator

Step 2

The tool that we will use in this tutorial that will allow us to transform our design into a Web page is the Slice Tool (K). Basically we will use this tool to select the areas that will be save-as images. We won’t need the whole design, just a few parts that will be a part of the UI (background, logo, buttons, screenshots).

Basics of Slicing with Pixelmator

Step 3

With the Slice Tool (K) selected, create a rectangle slice around the logo as the first slice. Notice that I didn’t include the text next to it because that will be HTML text.

Basics of Slicing with Pixelmator

Step 4

Now select the Tab of the navigation. Try to be very precise when slicing your site because a single pixel can disrupt the alignment later on in the HTML part.

Basics of Slicing with Pixelmator

Step 5

The cool thing about the Slice Tool is that we have some options; for example, if we are slicing a photo, we can use JPEG, while for UI elements, we can use transparent PNG. Also, you can change the slice name; in this case, my slice name is “active-tab.”

I’m using transparent PNGs for the UI elements and logo, and JPEG for the screenshots.

Basics of Slicing with Pixelmator

Step 6

Keep selecting the parts of the design that need to be sliced. In the screenshot below, I created 2 more slices, including one for the line that divides the feature content that will be used twice, at the top and bottom of this section. I also selected the main screenshot.

Basics of Slicing with Pixelmator

Step 7

Here, let’s select only one screenshot, and then we repeat it in the HTML, or you can save different images later on..

Basics of Slicing with Pixelmator

Step 8

A very important part is the background. This slice will have to be exported first because we will need the background to be active for this UI element; otherwise, it will be transparent.

Basics of Slicing with Pixelmator

Step 9

This is a the shadow that we have in the feature section, but I moved it down to slice it separately from that area; once you export it, open the file and go to Edit > Transform > Flip Vertical to create the bottom shadow.

Basics of Slicing with Pixelmator

Step 10

After you have created all of the slices and named them properly, go through the layer palette hiding layers that are not necessary: all of the text and the background. As I mentioned before, the background slice will have to be exported again later on with the background active.

With all the adjustments done, click on Export for Web in the Slice Tool Option. A dialog box will open asking where you want to save the slices. Create a new folder on your computer called “Site”; inside this folder, create another folder called “imgs.” Select the imgs folder and export all of the images into it.

Basics of Slicing with Pixelmator

Step 11

If you did everything right, you will have images like those pictured in the image below.

Basics of Slicing with Pixelmator

Step 12

This is not exactly part of Pixelmator, but I will illustrate the HTML and CSS parts so you can understand what I did. Below, you can see the HTML file. We will use the “<div>” tag to create the structure of our HTML. We could use the new HTML 5 tags for that, but we would have to make some adjustments on the CSS, and it would have problems with the different browsers. However, I highly recommend that you check out HTML 5; it’s the future.

Basics of Slicing with Pixelmator

Step 13

If you take a look at the HTML code in line 8, there is a <link> tag where I linked the HTML file to the CSS file, the “styles.css” file. In this CSS file, I will define the look of the page using the images from Pixelmator.

CSS is like writing a cooking recipe: you indicate how the elements will look. You define the font properties (size, color, type, style, weight…), the background, the margins, the padding, and everything. The BODY element is the page itself. There you can find the background using the slice image from Pixelmator (bg.jpg). Also, there are HEADER styles.

Basics of Slicing with Pixelmator

Step 14

Here you can see how I coded the menu. The slice image of the tab is defined in line 71 for “#menu ul li.active a.”

Basics of Slicing with Pixelmator

Step 15

Here we have the FEATURE area; again, the backgrounds are defined in lines 79 and 85. Also, the font size for the title and the paragraph are present.

Basics of Slicing with Pixelmator

Step 16

Here is the code for the screenshots section. I used some CSS 3 properties to create some eye-candy effects, like the -webkit-transition and the transform.

Basics of Slicing with Pixelmator

Step 17

Here is the code for the footer; it is very simple.

Basics of Slicing with Pixelmator

Conclusion

Pixelmator’s Slice Tool (K) can definitely be used to design user interfaces. The secret of a good UI is simplicity and consistency, so it’s very important to optimize your design to have as few slices as possible as well as the code. Now it’s up to you. Once again, I highly recommend that you check out some tutorials on CSS and HTML; it’s not difficult, and in my opinion, it’s super fun.

Basics of Slicing with Pixelmator

Site demo

Download the Pixelmator and Demo Files

Site demo files | Pixelmator file

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.