Here we have the FEATURE area again, the backgrounds are defined in lines 79 and 85.
The slice image of the tab is defined in line 71 for “#menu ul li.active a.” There you can find the background using the slice image from Pixelmator (bg.jpg). You define the font properties (size, color, type, style, weight…), the background, the margins, the padding, and everything. In this CSS file, I will define the look of the page using the images from Pixelmator.ĬSS is like writing a cooking recipe: you indicate how the elements will look. If you take a look at the HTML code in line 8, there is a tag where I linked the HTML file to the CSS file, the “styles.css” file. However, I highly recommend that you check out HTML 5 it’s the future. 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. We will use the “” tag to create the structure of our HTML. This is not exactly part of Pixelmator, but I will illustrate the HTML and CSS parts so you can understand what I did. If you did everything right, you will have images like those pictured in the image below. 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.
A dialog box will open asking where you want to save the slices. With all the adjustments done, click on Export for Web in the Slice Tool Option. As I mentioned before, the background slice will have to be exported again later on with the background active. 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.Īfter 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. 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. Here, let’s select only one screenshot, and then we repeat it in the HTML, or you can save different images later on.Ī very important part is the background. 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. Keep selecting the parts of the design that need to be sliced. I’m using transparent PNGs for the UI elements and logo, and JPEG for the screenshots. Also, you can change the slice name in this case, my slice name is “active-tab.” 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. Try to be very precise when slicing your site because a single pixel can disrupt the alignment later on in the HTML part. Notice that I didn’t include the text next to it because that will be HTML text. With the Slice Tool (K) selected, create a rectangle slice around the logo as the first slice. We won’t need the whole design, just a few parts that will be a part of the UI (background, logo, buttons, screenshots). Basically we will use this tool to select the areas that will be save-as images.
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). Open the Pixelmator file we created for our UI tips tutorial. In the end, you will be able to download the files and tinker with them as well. I will also show you the HTML/CSS walk-through process. 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.
0 kommentar(er)
