In this week’s tutorial we are going to go through the process of designing a modern website in Pixelmator. Follow step-by-step as we build our design from the ground up, resulting in a mockup redesign of the Pixelmator homepage.
Before we begin let’s briefly explain what we’re hoping to achieve. We are going to completely re-design the Pixelmator homepage. Our design should reflect the product, therefore we want the design to have a modern, clean feel. A grid will be used help align all of our components and we will add very subtle textures to give the design a more realistic feel. The design should be very minimalist and showcase the product, not the other way around.
Getting Down with the Grid
Our grid is going to be nothing more than a series of vertical and horizontal lines that we will use to organize our various website components. The grid simplifies the positioning of elements and helps to add unity to the overall design.
Go ahead and download the attached grid. The grid is made up of 12 columns, each 60 pixels wide with gutters of 20 pixels, giving us a total width of 960 pixels. Once you have downloaded and opened the grid you will notice that the Pixelmator document is in fact 1200 pixels wide with the grid horizontally centered. This allows us to simulate how the design will look in larger browser windows.
With that done, let’s begin!
Step 1 - Header
Drag the Pixelmator icon from the resources folder into our document and resize it using the Transform Tool (Edit > Transform) so that it fits within the center 4 columns.
Create a new layer below the Pixelmator icon. Using the Rectangular Marquee Tool make a selection similar to below and fill it with the color #1b1b1b (Edit > Fill).
Let’s add a subtle shadow below our header. Duplicate the previously created layer and drag it below the original. Add a Gaussian Blur (Filter > Blur > Gaussian) of 10 pixels and change the opacity to 70%.
Grab the first texture from Subtle Patterns and drag it into our document, ensuring that it sits above the header’s background layer. Tile the texture at 100% (Filter > Tile > Affine).
Add a Clipping Mask and set the opacity to 80%.
Duplicate the Pixelmator icon and place it below the original. Add a Zoom Blur (Filter > Blur > Zoom) of 100 pixels from the center of the icon.
Delete the blur from below the header using the Marquee Tool.
Add a Layer Mask and using a radial gradient from white to black fade the icon glow. Set the opacity to 35%.
The texture is slightly too subtle. Let’s bring out the detail using the Curves Tool (Image > Curves).
Step 2 - Navigation
Add a new horizontal guide to help align our navigation and input our first two links using Helvetica Neue, 18pt and the color white.
Add our second two links, aligning them to the grid as appropriate.
Change the color of one of our links to #eda328 to simulate a hovered link state.
At this point it helps to organize our layers into groups.
Step 3 - Heading
Drag a text box the full width of our columns and add our heading using Helvetica Neue, 48pt.
Do the same for our sub-heading, set the size to 18pt.
Step 4 - Image Carousel
We’re going to add an image carousel below our heading to showcase in-app screenshots but before we do we need to extend our canvas.
Go ahead and drag the first screenshot into our Pixelmator document and center it below our heading.
On a new layer beneath the screenshot we are going to add a subtle shadow. Select the screenshot outline (Cmd click the layer thumbnail) and fill the selection with black (Edit > Fill). Add a Gaussian Blur (Filter > Blur > Gaussian) of 10 pixels and lower the opacity to 60%.
We are now going to drag the remaining two screenshots into our document and position them below our centered screenshot. I have added a horizontal guide to help align them.
Add a shadow to both screenshots as we did previously. Set the opacity of the screenshots to 60% and the shadows to 30%.
Step 5 - Download and Buy Buttons
With the Rounded Rectangle Shape tool drag a button three columns wide by roughly 60 pixels in height. Add a fill color of #0078f0 and a 1 pixel inside stroke with the color set to black at 40% opacity.
Duplicate the button shape and place it below the original. Change the fill color to black and convert it to pixels (Right click the shape in the layers window). Add a Gaussian Blur of 3 pixels and change the opacity to 40%.
Create a new layer above the button shape and add a clipping mask. With the gradient tool add a linear gradient from white to black.
Set the opacity to 20%.
On a new layer draw a 1 pixel line in white.
Set the opacity to 40%.
Add our text using Helvetica Neue, 24pt, bold.
Duplicate the text and place it below the original. Change the color to black and convert it to pixels. Add a 1 pixel Gaussian Blur and lower the opacity to 40%.
Group all of the button layers together and duplicate the group. Position it to the right of the original.
Change the shape color to #1ec800 and adjust the text accordingly.