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.
HOW TO USE PIXELMATOR DOWNLOAD
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.
HOW TO USE PIXELMATOR HOW TO
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)
