thumb

Modern Website Design in Pixelmator

by

Details

Difficulty: Advanced

Files

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.

final small

Intro

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.

01

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).

02

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%.

03

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%.

04

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.

05

Add a Layer Mask and using a radial gradient from white to black fade the icon glow. Set the opacity to 35%.

06

The texture is slightly too subtle. Let’s bring out the detail using the Curves Tool (Image > Curves).

07

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.

08

Add our second two links, aligning them to the grid as appropriate.

09

Change the color of one of our links to #eda328 to simulate a hovered link state.

10

At this point it helps to organize our layers into groups.

11

Step 3 - Heading

Drag a text box the full width of our columns and add our heading using Helvetica Neue, 48pt.

12

Do the same for our sub-heading, set the size to 18pt.

13

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.

14

Go ahead and drag the first screenshot into our Pixelmator document and center it below our heading.

15

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%.

16

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.

17

Add a shadow to both screenshots as we did previously. Set the opacity of the screenshots to 60% and the shadows to 30%.

18

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.

19

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%.

20

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.

21

Set the opacity to 20%.

22

On a new layer draw a 1 pixel line in white.

23

Set the opacity to 40%.

24

Add our text using Helvetica Neue, 24pt, bold.

25

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%.

26

Group all of the button layers together and duplicate the group. Position it to the right of the original.

27

Change the shape color to #1ec800 and adjust the text accordingly.

28

Comments

  • AJX says:

    The website looks amazing. Am I right in thinking this purely for design purposes to show a concept? So to actually create this you would need to use a proper program, like Adobe Dreamweaver?

    • Ashley Rich says:

      Thanks AJX. Yeah just the mockup is created in Pixelmator, as for the code you would ideally create it in a text editor. Im not sure if Dreamweaver can be considered proper :S

      • AJX says:

        Sorry lol, I’ve never created a website before. Dreamweaver is the only piece of software I have heard of for creating websites. Is there better software that you can recommend?

      • Ashley Rich says:

        I really don’t have any experience with visual editors at all, its something I’ve never used myself, so I’m probably the last person you want to be asking. :S Personally I use a text editor and write the code myself. The design features sliders and carousels which would require javascript to work and I’m not even sure that editors such as dreamweaver can produce this for you. 

        Maybe someone else can jump in on this one?

      • I’ve used RapidWeaver from Realmac Software, a nice drag and drop website builder for beginners. The community is great and it’s pretty powerful and nicely built mac app. The plugin called Stacks makes it even easier and more extendable.

    • Channery says:

      I think you’ve just captured the awsner perfectly

  • Ashley Rich says:

    Thanks Marekzeman. I’d love to see the final result.

    • Marek Zeman says:

      Right now I have a lot of work so maybe later, If I have time I could try to do HTML/CSS version an maybe do WP version as well :)

      (but it isn’t promise! just thinking)

  • Awesome, thanks for this. I’d love to see more of these web design tutorials with PXM. But, how do you take this mockup and ‘slice’ it into an HTML page?

    • Ashley Rich says:

      Thanks for commenting! I wrote a tutorial a few months back on slicing a Pixelmator mockup and coding it into a functioning website. http://www.pxm-tuts.com/tutorials/web-design/design-code-clean-portfolio-layout-part-2/

      The principle are the same, you’d just need some extra javascript to get the sliders and carousels working.

  • Ryan Budke says:

    This is so awesome and exactly what I as looking for, but the reference files aren’t available to download for me. Am I doing something wrong?

    • Ashley Rich says:

      Thats strange they’re working for me. Do the other files work? What browser are you using?

      Here’s the direct link: http://www.pxm-tuts.com/wp-content/uploads/downloads/2012/03/resources.zip

      • Ryan Budke says:

        Hmmmm… That worked fine. It looks like it’s happening because I came in off a referral link from Google Reader: http://www.pxm-tuts.com/tutorials/web-design/modern-website-design-pixelmator/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+pxm-tuts+%28PXM-Tuts%29&utm_content=Google+Reader?file=2027?file=2028?file=2027?file=2027?file=2027 If I try to click on one of the resource files then, I get stuck in a refresh loop.

        I’m guessing since your file links are “?file=” links, it doesn’t read when clicked when appended to the referral link too. Thanks for the links though! I’m going to try this right now.

      • Ashley Rich says:

        Good spot, thats my dodgy programming. I’ll have to fix that

  • Billy says:

    Hi Ashley,

    Thanks for this great article! I am using Pixelmator 2.1 and looks like the interface is changed a bit though.

    One question if you don’t mind: Here you say:

    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 background at 100% (Filter > Tile > Affine).

    Should I tile the background or the new layer that contains the texture?

    Thanks,
    Billy

  • chris says:

    nice article, graphics superb I may say. To answer the person about web authoring packages, a nice, very inexpensive program to start with is the coffeecup html editor http://www.coffeecup.com. dreamweaver is apparently the norm, but if you really want to be able to develop, you need to master hand coding. this will include learning html and css, please lookat http://www3schools.com a totally free website that teaches EVERYTHING about coding including scripting languages in a very simple and sraightforward way.

  • shot noise says:

    Hello! I’m at work surfing around your blog from my new apple iphone! Just wanted to say I love reading through your blog and look forward to all your posts! Keep up the outstanding work!

  • MennoMan says:

    Hi Ashley,

    My compliments on this tutorial and on the looks of your work as well.
    It looks great!!!
    I have a question about a step in the process…
    In the end (almost the end) of step 1 you type the following instruction:
    “Add a Layer Mask and using a radial gradient from white to black fade the icon glow. Set the opacity to 35%.”
    But can’t find out exactly how to achieve this.
    Adding a Layer Mask is not the problem, I did that and renamed it ‘Glow’ just like you did (I think).
    But then I seem to loose track.
    I cant find a ‘radiant gradient’ or ‘black and white fade’.
    Maybe it’s the language I’m not a native speaker (I’m from the Netherlands) but I would like to master this anyway.

    Thanks in advance and keep up the good work.

    Cheers…

    • Ashley says:

      Hi MennoMan,

      Thanks for the feedback, its always appreciated!

      Once you have the layer mask added, ensure it is active (blue background around the second thumbnail). Open the gradients palette (CMD 5) and create a new gradient by clicking the gear icon and selecting ‘New Gradient’. You then need 2 stop colors, white on the left and black on the right. Finally, ensure Radial is selected. You should now be able to drag the gradient on the canvas, thus fading the glow.

      Hope this helps, any queries give us a shout.

      Ashley

      • MennoMan says:

        Yeah that sure helps Ashley,

        Thanks for that!!

        Another question is about this part:

        “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%.”

        What I did is:
        I first created a new layer, in the layer-bar it’s sitting directly below the screen1 layer. Then I selected the screenshot outline (by Cmd clicking the layer thumbnail) and filled the selection with black (Edit > Fill (in the active bar opacity is standard on 97%)). Then I added a Gaussian Blur (Filter > Blur > Gaussian) of 10 pixels and lowered the opacity to 60%. The problem is, no visible shadow……???

        Any ideas?

        Sorry about bothering again but, as you can see I’m pretty new to this and trying to learn.

        Menno

      • Ashley says:

        Glad to help.

        When applying the gaussian blur have you deselected the selection (CMD D), otherwise the blur will be refined to the selected area?

        Ashley

  • MennoMan says:

    Thats it!!..

    Thanks for helping me out!

    MennoMan

  • MennoMan says:

    Back again Ashley,

    In step 7 in this part: “Right click the smaller circle and select Path Composition > Subtract from Shape.”
    All 4 of the Path Composition menu items are grey and I can’t select them.
    Why is this?

    Cheers, MennoMan

    • MennoMan says:

      No need for an answer Ashley!

      I finally found out what I did wrong.
      It is essential to copy the circle in the same layer to make this work, so you have to do the following first:
      “In the Tool Options bar, choose Add to Shape to draw shapes in a currently selected shape layer.”

      But thanks anyway.

  • Aida says:

    Hey there this is somewhat of off topic but I was wondering
    if blogs use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding expertise so I wanted to get advice from someone with experience. Any help would be enormously appreciated!

    • Ashley says:

      Hi,

      I don’t use the built in editor. I use Markdown, which automatically creates the HTML for you. As you can imagine this has massively improved productivity and I highly recommend you give it a try. If your on a Mac check out Mou.

  • sakshi says:

    hi,
    Ashey. I am new user to pixelmator. I m not able to perform step 4 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%.
    Can you help me . thanks in advance.

  • Charlene says:

    All the images in your tutorial are broken links. Can you please fix?

    Thanks