In this tutorial, we’ll show you a simple technique to create a realistic brushed metal texture using Pixelmator.

Step 1:

Create a new document – we use our standard 400x400px set at 72px resolution for patterns or textures.

Step 2:

Create 2 layers.

On the first layer, fill it with a nice grey colour #c0c0c0 using the paint bucket tool.

On the second layer, we will add in a custom gradient. You can download the custom gradient file for free from our store.

Note that the gradient has a natural brown metal tint. To import the new gradient, Open the Gradients panel (CMD+5), use the gear icon, and choose Import Gradient to select your gradient file.

Using the gradient tool click and drag the gradient at a 45 degree angle (holding down Shift while you click and drag will restrict it to 45 degrees).

Once you’ve added in the gradient, now go to the layers panel, ensure the second layer is selected, and change the layer blending options to Linear Burn.

Step 3:

Now go back and select the first layer in the layers panel. Next we will add two effects to this layer.

For the first effect, open the Effect panel (CMD+3), then select Stylize, and choose Noise.

Drag the Noise effect onto the first layer, and set it as follows:

You should get something like this:

Step 4:

For the second effect, go back to the Effects panel (CMD+3), select Blur, and choose Motion Blur.

Drag the motion blur onto the first layer, and use the following settings:

All going well, you should have something like the below:

Step 5:

If we Export the file as a PNG (use CMD+Shift+E custom shortcut that we showed you how to set up in Tip #37), we should have a nice brushed metal texture with a slight brown tint:

In order to remove the brown tint, ensure the second layer (with the custom gradient) is selected in the layers panel. Open the Effects panel (CMD+3), and choose Color Adjustments, and then Desaturate.

This will remove the slight brown tint, and give you a pure metal texture:

And finally, if we export this into a PNG (use CMD+Shift+E custom shortcut that we showed you how to set up in Tip #37), we get an awesome brushed metal texture, which can be saved in your toolkit and used in a number of future design project.

In this tutorial we show you how to create simple UI buttons using some basic techniques in Pixelmator. This article is part of a new series of tutorials for creating UI/UX designs in Pixelmator.

Preview

We are going to show you how to create the 9 most common types of buttons for UI / web design, so we have split up this article into a number of parts. Here is a preview of the different types of buttons you’ll learn to create. So stay tuned or subscribe to our newsletter, so that you don’t miss the next part.

UI / Web buttons are fundamental to any user oriented design. They are primarily used as “call to action” buttons, and placed in strategic points in UI / Web designs. The key to great button design is to be not only minimal, but attention grabbing, while blending in with the whole design.

The Basic Rounded Button

Rounded buttons are common place in web design. They can range in variety with brightness, colours, and highlights; however the best looking rounded buttons are found in flat designs, which is the trend these days.

So let’s get started.

Step 1:

Create a new document 640x480px.

Step 2:

In order to have a little contrast, so that we can view the buttons better (than over a transparent or plain colour background), we added a very subtle radial gradient to our background layer. The gradient settings are from colour #f3f3f3 to colour #c6c6c6. We just clicked and dragged from the top middle of the canvas to about halfway.

Bonus Tip: hold down Shift to draw the gradient in a straight line.

Step 3:

Next we are going to create our base button. Select the rounded rectangle shape from the main toolbar.

Draw a rounded rectangle in the centre of the canvas of size 300x80px. Set the fill colour to white, and the stroke to 1px and also white colour. Next zoom right into the top left of your rounded rectangle. Grab the blue shape handle, and first drag it all the way to the left, so we get a straight corner, and now move it to the right by 5px to get a nice rounded rectangle.

Great and now we have our basic rounded rectangle button.

Step 4 – Let’s add some colour

Now let’s add some colour to our button. Select the rounded rectangle shape, and open the layer styles panel (select fx to the left of the layer in the layers panel or hit CMD+7).

For both the fill colour and the stroke colour, we set it to a nice radiant blue #28bcfb.

At this stage, we have a nice rounded rectangle, but this can also be called a flat button.

Finally, we finish off the button by adding in some text. We used Helvetica set to font size 36pt, and colour white and placed the text in the middle of the button. Use the automatic alignment guides to help you centre the text on the button.

Now we have our first simple rounded button completed.

and remember you can also vary the colour to suit  your overall design. Here is our button in a basic silver grey colour. You can use simple colour variations to create different hover states for buttons.

 Step 5 – Shadows and Highlights

Let’s add in some shadows and highlights. In order to make our flat button pop off the page, and give it a little depth, we can simply add some shadows and highlights.

Select the rounded rectangle shape layer, and open the Shape Styles panel. Enable both the Shadow and the Inner Shadow options. For the Shadow, we will use a slightly darker colour blue (you can simply use the colour picker and reduce the brightness of your colour for a darker shade), set the angle to 270 degrees, with an offset of 2px, blur of 1px, and 100% opacity. This will give us a button shadow of 2px directly beneath the button.

Next for the highlight, we actually use the inner shadow option. In this case set the colour to white, angle at 90 degrees, with an offset of 2px, blur of 1px, and 50% opacity. This will give us a highlight at the top of the button as if there was a light source just above the button.

Our button now has some more depth.

and really pops off the page. This is considered a 2D style button or more commonly web 2.0 buttons, which use this traditional format.

Remember you can change the colour of your button at any point, so how about this variation with a nice flat orange #f1c40f.

Step 6 – Engraved Text Effect

Next we want to make the text look like it is sculpted into the button. The easy way to do this is to add some offset shadow.

Duplicate the text layer, and set the text colour to black (or set it to a really dark version of your button colour).

Place the duplicated text layer directly under the original text layer. Once the black text is directly underneath the white text, simply move the black text by 1px up to create a basic offset shadow.

Our text looks like it has been sculpted into the button.

And the button looks really cool.

Even with a nice basic yellow, the offset shadow makes a difference, and every small detail counts when making an attractive design.

Step 7 – Add some texture for realism

You’ll notice that our buttons still look like simple graphics up to this point; however in some designs they need a more realistic look and feel. A quick way to achieve this is to add some noise texture to your button.

Simply duplicate the rectangle shape (do this only after you are happy with the button colour), align the new shape directly on top of the old shape. The automatic shape guides will help you do this. Right click on the new shape layer, and select Convert To Pixel.

Now open up the Effects panel (CMD+3) and select Stylize, and the Noise effect.

Drag the Noise effect onto the new layer you created and set it to noise amount 1 and select monochrome.

At this point we also changed the layer blending option to Overlay or Hard Light for the new layer. Play around with the different blending options to get a range of different effects.

With a basic noise texture, we’ve now given our button a brushed texture effect.

and this looks really good in any number of colours depending on your design.

Step 8 – Adding A Pattern

Another way to add texture/depth to your buttons is to use a pattern.

We chose diagonal noise pattern from Subtle Patterns and placed it on top of our button layer as a new layer.

Open up the Effects panel (CMD+3), and then select Tile, and then Affine. Drag and drop the Affine effect onto the pattern layer.

Set the Affine Tile settings to 0 degree angle, scale of 100, and 100% stretch, and 0% skew.

This will repeat the pattern and fill the entire layer.

In order to restrict this pattern to our button, we simple right-click on our pattern layer, and select Create Clipping Mask. We also set the layer blending option for the pattern layer to Multiply. 

This will essentially give your button the pattern texture, while also preserving all the other layer styles you have already set.

And the pattern texture combined with all the previous effects, give us a really cool textured button.

Again feel free to change the colours of your button to suit your overall style.

Great, we’ve reached the end of our first UI tutorial, and now you know how to create you very own basic rounded buttons in a variety of different styles.

Next time, we’ll explore how to create glossy buttons.

If you don’t want to miss it, follow us on our social networks: facebook, twitter, tumblr, pinterest or simply subscribe to our newsletter.

In this tutorial we show you how to create simple glossy buttons using basic techniques in Pixelmator. This article is part of a new series of tutorials for creating UI/UX designs in Pixelmator.

Preview

We are going to show you how to create the 9 most common types of buttons for UI / web design, so we have split up this article into a number of parts. Here is a preview of the different types of buttons you’ll learn to create.

Last time we showed you how to make basic rounded buttons. So stay tuned or subscribe to our newsletter, so that you don’t miss the next part.

Glossy Buttons

Glossy buttons are the next step up from flat design. The gloss effect can be created using a range of techniques, and in this tutorial we’ll show you some of the basics using Pixelmator. Well designed glossy buttons can really capture your attention on a website.

So let’s get started.

Step 1:

Create a new document 800x600px.

Step 2:

Using the techniques we showed you in

Step 3 – Add some simple gloss using gradients

Make sure you have selected the main rectangle shape. Now change the Fill from Colour to Gradient. We aren’t going to use any Stroke settings for the rest of this tutorial.

Open the Gradients panel (CMD+5), and create a new gradient. We are still using the same base orange colour (#f1c40f), but we just adjusted the brightness. All you have to do is click on each colour stop (the arrow at the bottom of the gradient), which opens the colours panel. 

Once the panel is open, select the # menu in the top right, and set the default orange colour #f1c40f. Now go back to the colour wheel menu, and using the slider below the colour wheel, increase or reduce the brightness by dragging it left or right.

At this point it might be handy to drag these colours into the colour swatch to save them for later use. To finish the gradient, you need to create one light colour, and one dark colour.

When applied to the button, you will see two blue handles.  These handles will help you adjust the gradient. We just dragged the handles, so that they touch the border of the buttons, and also made sure the lighter shade is at the bottom of the button.

Have fun playing around with the handles, as you can alter the angle of the gradient and change how the button looks.

Great, we have now created our first simple gloss effect on our button using a gradient.

Step 4 – Adding a glossy shine

For the next effect, we will add a glossy shine to our button using a simple technique.

First, create a rectangle, make it just wider than our base button, and make it a white colour. In the layers panel make sure this new button sits just above the base button rectangle (and below the text layers).

Drag this rectangle to roughly cover half of the top of the button. The automatic shape guides will help you line them up correctly.

Next in the layers panel, select the new rectangle, and change the layer blending mode to Overlay and change the Opacity to 25%.

This give us a nice ghostly button. 

Now in the layers panel, right-click on the ghostly button, and select Create Clipping Mask. This will restrict the shape to boundaries of the original rectangle button.

And there you have it – our button has a nice shiny gloss.

This is one of the most commonly used gloss techniques for UI buttons as it needs very little effort to create a cool effect.

Step 5 – A more realistic gloss

The basic shiny gloss we added in the last step looks great, but still a bit static. We can make this a more realistic looking gloss by using some more gradient effects.

Select the Gloss rectangle you created in the previous step. Remember that we set it to a White colour originally. Now change that Fill from Colour to Gradient. Open the Gradient panel (CMD+5), and create a simple gradient starting at White colour on one end, and a simple Grey on the other end.

Don’t worry too much about the exact colour settings here, as it won’t be too disruptive. The final setting is to select the layer in the Layers panel and set the Opacity to 75%.

Remember to save the gradient, if you are going to use it again in future.

We need to adjust the gloss rectangle. First, we adjusted the size of the rectangle to meet the top border of the original rectangle (note: we disabled the clipping mask on this layer before we adjusted the size, but make sure to set the clipping mask again before you move on). Next we adjusted the gradient handles, so that the lighter colour is at the top and the darker part is at the bottom.

This give us a cool gradient gloss effect on the top half of the button.

Now, duplicate the gloss rectangle, move it to cover the bottom half of the button, and right-click on the new shape, choose Transform and then Flip Vertical. We also adjusted the gradient by making sure the lighter colour is at the bottom and the darker colour it at the top. On this new layer, also set the Opacity to 50% in the Layers panel. Also, right-click on the layer, and select Create Clipping Mask.

Note: We also made sure that the darker colour handle starts about halfway down, rather than at the edge of the new gloss rectangle.

Our glossy button is really coming along and looks more realistic. We are going to add one more element to complete the realistic effect. We are going to add a simple highlight at the bottom of the button, so that it offsets the darker orange shadow.

To do this, duplicate the new glossy rectangle and make sure is placed above all the other gloss layers in the layers panel. Next, we set the Opacity of this new layer to 25%. Also, right-click on the layer, and select Create Clipping Mask.

Open the Layer Styles panel by selecting FX beside the layer (or hit CMD+7).

Now set the Fill to the original Orange colour #f1c40f (and make sure it is not a gradient).  Also enable the Inner Shadow to create the highlight. We set it to a White colour, Angle of 270 degrees, Offset of 2px, and Blur of 1px.

This creates a nice 2px highlight at the bottom of the button, and now our glossy button is complete.

Step 6 – Lets really bring that gloss alive with shadows

The final stage to really bring out the gloss in the button is to actually add some shadow below the button.

Duplicate the original button rectangle, and set the Fill colour to a Dark Orange (you can just adjust the brightness of the colour below the colour wheel like we did earlier). Make sure this layer is below the original button layer in the layers panel.

Right-click on the layer, and select Convert To Pixel. Next open the Effect Panel (CMD+3), select Blur, and then Gaussian Blur.

Drag the blur effect onto the shadow button layer, and set the Radius to 10px.

Adjust the position of the shadow button layer directly under the main button. You can play around with the placement of the shadow here to change lighting on your button. 

And finally we have created an awesome glossy button using some very basic techniques in Pixelmator.

Great, we’ve reached the end of our this UI tutorial, and now you know how to create you very own glossy buttons in a variety of different styles using Pixelmator.

Next time, we’ll explore how to create metallic buttons.

If you don’t want to miss it, follow us on any social network: facebook, twitter, tumblr, pinterest or simply subscribe to our newsletter.

Have tips of your own, why not share them by commenting on this post?

In this tutorial, we show you how to create a simple checkered pattern – more commonly know as the Ben Sherman pattern.

The Final Product

Here is the seamless pattern you should be able to create by the end of the tutorial.

You can always skip the tutorial and go download the free pattern on our store.

Step 1:

Create a new document 400x400px, which is our preset for patterns/textures.

Step 2:

Fill the background layer using the paint bucket tool with a white colour.

Step 3:

Next we apply some noise to our background layer. Open up the Effects panel (CMD+3), then select Stylize, and then Noise. Drag the Noise effect onto the background layer and set it so 5% and ensure Monochrome is selected.

This give our white background a rough texture.

Step 4:

Add in a long rectangle using the rectangle shape tool (as shown below) and align it to the centre of the canvas.

Duplicate the rectangle shape two more times, and place each of these rectangles at either edge of the canvas. Make sure that each rectangle is on its own layer, and that it is only half on and half off the canvas.

Select all 3 rectangles, and set the Fill colour to a nice pink #c24b55.

Also change the Layer Blending mode for all 3 rectangles to Multiply. And finally group these rectangles together as Group 1. 

Step 5:

Create two more rectangles, and place them in-between the existing rectangles, and set the Fill colour to a nice blue #0c5791. Also make sure the Layer Blending mode is set to Multiply. Now group these two rectangles together as Group 2. 

Step 6:

For the checkered pattern we need to create vertical rectangles.

Duplicate Group 1, rename this to Group 3. Select all the rectangles in the group, right-click on the and choose Rotate 90 degrees right. Set the Fill colour for the rectangles in Group 3 to a nice deep blue #004b89.

Line up the group to the middle of the canvas, and use the automatic guides to help you do this. Also make sure the Layer Blending mode is set to Multiply for the rectangles in Group 3.

Step 7:

Repeat step 6, for Group 2. You should call the duplicate Group 4 and set the Fill colour for the rectangles in Group 4 to a deep red #a71d18. Also make sure the Layer Blending mode is set to Multiply for the rectangles in Group 4.

Step 8:

Group the four groups together in the Layers panel, right-click on the overall group and select Merge Group. This should merge the rectangles into one layer, and also convert it to pixel format.

Now let’s add some noise to this layer to give it a texture effect.

Open up the Effects panel (CMD+3), then select Stylize, and then Noise. Drag the Noise effect onto the grouped layer and set it so 10% and ensure Monochrome is selected.

Now we have a really cool checkered pattern with some real texture effect.

Great, we have now created an awesome checkered pattern using some simple techniques in Pixelmator.

Finally choose Trim Canvas (under the Image menu) to restrict the canvas to 400x400px image, and then choose Export (under File menu) to export the image as a PNG.

You can use this pattern to make some really cool images like our tribute to the original Ben Sherman shirt and tie.

In this tutorial we are going to show you how to use perspective effect with text in Pixelmator by recreating the Star Wars opening text scrawl.

Final Image:

Here is what you will be able to create by the end of the tutorial.

Let’s get started.

Step 1:

Create a new document 1024x1024px.

Step 2:

Use the paint bucket tool to fill the background with a white colour.

Step 3:

Find a star field background for your poster. It should look like a galaxy, but it should have anything that would take attention away from the text.. We pulled this one from NASA’s awesome collection – you can get your own from their picture collection.

Copy and paste the star field image onto a new layer. Adjust the size as you desire by dragging the shape handles at the edges of the image. When you are satisfied, make sure that you remove any part of the image that is outside the 1024×1024 canvas. You can do this by going to Image in the menu, and then select Trim Canvas.

Step 4:

Get the Star Wars scrawl text. We found it over in

We then changed the colour to get that Star Wars yellow/orange colour. We choose #e5bf03 using the colour picker.

Great we have a nice colour text block.

Step 5:

Next we reduced shrunk the text vertically – make sure to select the text block and then uncheck the Constrain Proportions check box that appears at the menu bar. This will help us add to the perspective effect in the next step.

Step 6:

Before we can add the perspective effect, we need to convert the text block to pixels. Simply right-click on the text block and choose Convert into Pixels.

Next, right-click on the image and select Transform.

and then right-click on the image once more, and then choose Perspective.

Great – the magic has happened inside Pixelmator. The image handles that usually control the size of the image can now be used to adjust the perspective of the image.

First click and drag the top left handle towards the middle by about 1cm, while holding down Shift (to keep it in a straight line). Next click and drag the bottom left handle away from the middle until the text perspective effect is created, again while holding down Shift to keep it in a straight line.

Be careful here but also play around with the handles to see what other perspective effects you can create using this effect.

Once you are happy, move the text picture about halfway down the canvas, so it looks like it is appearing from the bottom of the poster.

Step 7:

To finish off and enhance the poster, we are going to do some final color adjustments. Select the text picture layer, and then open the Effects Browser (CMD+3), then choose Color Adjustments, and then Brightness.

Drag and drop this onto the text picture layer, and set the Contrast to 100%.

This will give us that final Star Wars yellow we are looking to recreate.

Step 8:

The background Star field is taking a little too much attention from the text block, so let’s also adjust that with some color adjustments. Again select the star field layer in the layers panel, then open the Effects browser (CMD+3), choose Color Adjustments, and then Exposure. 

Set the Exposure to -50.

And now we have arrived at our final image, which recreates the Star Wars Opening Scrawl using Pixelmator.

Every WWDC poster from Apple is a piece of art in itself, and this years WWDC15 poster does not disappoint. It uses simple geometric shapes and vivid colours to delight.

We love this poster for its simplicity and yet its complexity, so in this tutorial we will show you how to recreate the Apple WWDC15 poster using Pixelmator.

The final product

So here is what you will be able to create by the end of the tutorial.

Let’s get started already.

Step 1:

Create a new document 1024x1024px.

Fill the background with a white fill colour.

Step 2:

If we look at the final image, we can see that essentially the poster is made up of simple shapes, each shape has its own colour, shadow, and even a highlight (if you look closely).

So first things first, let’s layout our shapes onto our canvas. Let’s create the main set of circles in the middle of the poster first.

Start by creating a circle shape, about 250px wide, and use a simple light grey fill colour for now. Don’t worry about any other settings such as shadows and strokes at this stage. Place the circle slightly above the centre of the canvas.

Next, ensure you set the layer blending option for this shape to Linear Burn, and set Opacity to 100%. This will be important to get that transparent effect, and will be more visible once we start placing shapes together and colouring them in.

Now you can copy and paste the same circle, but make sure they are on separate layers by clicking on the canvas to deselect the previous circle. Otherwise you will be in danger of having two shapes on the same layer. Start placing the circles into a circular pattern, but offset from the centre slightly.

Now, continue to add the full set of 8 circles to create the central part of the poster. You can see the Linear Burn already makes this look great – giving each shape a transparent look and feel.

Step 3:

Now lets start adding the outer layers. Firstly the smaller circles at the four corners. Start adding in smaller circle, about 100px wide using the same light grey fill colour, and the layer blending option set to Linear Burn and Opacity of 100%. Overlap the circle by about a third over the nearest largest circle.

Copy and paste the circle and move them to each of the four corners as shown.

Step 4:

Now let’s add in the rounded rectangle shapes. Create a new rounded rectangle shape on a new layer, about 115px wide, so that it is slightly larger than the smaller outer circles. Use the same light grey fill colour, and layer blending option as the previous shapes. We will need to rotate the rounded rectangle by 90degrees to that it looks like a diamond shape. Finally ensure that roughly a third of the rounded rectangle shape overlaps the nearest large circle.

Copy and paste the rounded rectangle and move them to the four corners as shown.

Great, we now have our basic geometric shapes ready, and the poster is starting to take shape.

Step 5:

The final set of shapes to add is the two large rounded rectangles that will contain the text and draw your attention to the middle of the poster.

Create a rounded rectangle, about 300px wide, onto a new layer. Use the same light grey colour, but this time set the layer blending mode to Linear Burn with an Opacity of 50%. Move the shape over the centre of the other shapes – the automatic guides will help you do this. Rotate the shape by 90degrees to create the diamond shape.

Now copy and paste this rectangle, centre it over the other rectangle, and rotate it back 90degrees. The primary shapes are all in place, and now for some colour.

Step 6:

Apple seem to cover a rainbow of colours when it comes to their WWDC posters, so this is where the poster is complex, and we will show you the exact colours to use with hex codes.

Let’s colour in the large set of circles first. We’ll go through them one by one and show you the colour, shadow, and highlight settings. We have selectively turned off the visibility of each layer to show you the exact settings we used for each circle and rectangle.

Let’s take the first circle. We fill it in with an electric pink colour #fd83ce.

Next we want to create a slight offset shadow to the bottom right side using colour #000000 with the below settings.

This creates a nice shadow effect for the circle.

Then we want to create a nice highlight effect again towards the bottom right side of the circle. For this we will use the inner shadow setting set to white colour #ffffff with the below settings.

This gives us a nice highlight for the circle. We showed you how to do highlights in our tutorial on glossy buttons.

Now continue colouring in one circle at a time using the settings below.

Use a light red fill colour #ff6855 for the next circle.

With the following style settings:

Use a flat orange fill colour #ff955f for the next circle.

With the following style settings:

Use a pale yellow fill colour #f9c157 for the next circle.

With the following style settings:

Use a light teal fill colour #3de4da for the next circle.

With the following style settings:

Use a deep blue fill colour #0084ff for the next circle.

With the following style settings:

Use a deep purple fill colour #ab5afe for the next circle.

With the following style settings:

And finally, use a lighter purple fill colour #e16df1 for the next circle.

With the following style settings:

Step 7:

Let’s colour in the smaller set of circles next. Again we’ll go through them one by one to show you the colour, shadow, and highlight settings. We will selectively show you each circle but turning off the visibility of the other layers.

For the first circle, use a light purple fill colour #dd62f1.

With the following style settings:

Use a deep blue fill colour #007dff for the next circle.

With the following style settings:

Use a light red fill colour #ff6663 for the next circle.

With the following style settings:

And finally, use a light orange fill colour #ffbe4e for the next circle.

With the following style settings:

Step 8:

Now let’s colour in the small outer rounded rectangles one by one.

For the first rectangle, use a light pink fill colour #ff85d7.

With the following style settings:

Use a light red fill colour #ff8b62 for the next rectangle.

With the following style settings:

Use a teal fill colour #23e2d7 for the next rectangle.

With the following style settings:

And finally, use a deep purple fill colour #9256fd for the next rectangle.

With the following style settings:

Step 9:

Finally let’s colour in the large rounded rectangles in the centre of the image using the settings below.

Use a dark blue fill colour #0f3686 for both rectangles. We won’t set any shadows or highlights for these two shapes.

Step 10:

To add the final touch, we add in the apple logo, and some text.

You can get the apple logo from our store for free as a PXS shape.

Use a white fill, and create a large apple logo shape and centre it to the middle of the other shapes.

This gives us a cool logo only poster.

Now let’s add in the official text – we use one font, Helvetica Neue, throughout but vary the font settings to create the desired effect.

For the text “The epicenter of change” we set it to 36px and a thin setting. For the text “WWDC” we set it to 24px and a medium setting, and finally the text “15” using 24px and a light setting. With some final adjustments and alignments, we get to our final image.

If you have been able to follow along, you should now have re-created two versions of the awesome Apple WWDC15 poster using Pixelmator.

The WWDC15 poster with the Apple logo only.

And the WWDC15 official poster. Congratulations.

As part of expanding our Pixelmator tutorials into UI/UX design, we thought a tutorial on creating a simple login form, would be useful for our users. In this tutorial we show you how to create a simple sexy login form using Pixelmator.

Whether it’s a website or app, a login form is crucial to the user experience as it is most likely the first point of entry for attracting users.

For some inspiration, we browsed around the web and found this awesome link from SpeckBoy on login forms with creative design. Using these examples, we decided to keep the form to basic elements, with minimal colours, single font, but use a slick background to make it sexy.

The Final Design

So here is what you will be able to create by the end of this tutorial.

So let’s get started.

Step 1:

Create a new document 600x800px.

Step 2:

Next we choose a nice background image. We found an image using our stock image resources, and played around with the exposure, added a vignette, and added some vintage effects to create a nice moody image.

Add this image as a new layer to your canvas.

You’ll notice that the background image is larger than our canvas, but this is okay as we will be adjusting the background to suit our form later on.

Adjust the background image on the canvas, until you are happy with what will show in the background of your form.

Step 3:

Next we start creating the form itself. Add a rectangle shape to the canvas, with a light grey fill #efefef, and no stroke. The rectangle should look like a scaled down version of the canvas itself, and we placed it just off centre of the background image.

Step 4:

Next we create our form entry areas and our form submission button. For this, we create three rectangles as shown, stacked above each other, and a few pixels apart.

The first two rectangles, there is no fill colour, and we only set a stroke of 1px with a stroke colour #cbcbcb, just darker than the form background.

For the last rectangle, which will form our button, we only used a nice flat fill color #ee634c. We used Flat UI Colors in choosing our palette for the form – this is a really great resource.

Step 5:

Next, let’s add in our logo and logo title at the top of the form.

We used our Ninja logo shape, and used the same fill colour as the button for consistency.

We then added in our logo title in a Helvetica Bold font, font color #34495e – a nice dark blue, all caps, and font size 39.

Next, inside our two form entry area rectangles, we added in some help text to show the user what data is expected in that area. We used Helvetica Bold font, with color #b9b9b9, all caps, and font size 9.5. We also aligned this to the top left of each rectangle with a few pixels for spacing.

Finally, we added in the login text on top of our button. We used Helvetica Bold font, with a white color, and font size 14.5. We aligned the text to the middle of the button.

Step 6:

Now we are getting there, so let’s finish off the form with a final few design elements.

First, we’ll add in an empty tick box and text for the “remember me” section under the login button. The tick box is just a copy of one of the text entry rectangles, but minimised and made into a square using the shape handlebars. We used Helvetica Bold font, with color #b9b9b9, and font size 11.3. We aligned the text to the right of the check box as shown.

Next we add in some sample text in the text entry areas. We used Helvetica Bold font, with color #34495e, and font size 19.5. We aligned the text to the left of the entry area, just below the helper text we added earlier.

Finally, we also add in the “Forgot your password” text below the form itself. We used Helvetica Bold font, underlined for emphasis, with a white font color, and font size 14.5. We also aligned this to the centre of the main form, and also kept it independent of the main form itself, which looks cooler.

Step 7:

To give the form a 3D effect, we will add in some shadow. First duplicate the base rectangle of the form onto a new layer. Now group all of the previous elements that make up the main form, and make this group invisible by unchecking it in the layers panel.

For the new rectangle, we change the fill color to a dark grey #666666, and no stroke.

Next, we right-click on the shape, and choose Convert to Pixels as we want to add some effects to this shape.

Open the Effects browser (CMD +3), choose Blur, and then click and drag the Gaussian Blur option onto your dark rectangle shape. We set the blur to 10px, but you can play around with this as you wish.

The new layer, looks has a dark blurred shadow effect. We move this layer below the main form group, and we re-enable the group using the check box on the layer panel.

With the shadow rectangle still selected, we align it to right behind the main form, so give it an all around depth effect, and this makes the main form pop off the page.
Awesome, you have just finished creating your very first simple, yet sexy login form.

Following on from his awesome Guest Post – How To Draw Batgirl,  Pixelmator artist, Jamie Edwards, continues to show us how he creates his style of graphic art by teaching you how to draw Angry Birds Star Wars.

The Final Image

Here is a quick preview of what you will be able to create by the end of this tutorial.

Artist Bio: Jamie Edwards

Jamie Edwards is an awesome Pixelmator ninja, and author of BattleBay series of kids fiction (now available on iTunes for free).

In his spare time he has created some masterpieces using Pixelmator – check out some of his works of art below.

Jamie also taught us how to draw Batgirl in his first guest post.

and now we handover to Jamie…

Let’s get started:

For this tutorial you will need some kind of drawing tablet hooked up to work with Pixelmator, and some basic drawing skills. I use a Wacom tablet, which are really good and easy to use. Its like drawing straight onto paper and they are fairly cheap to buy.

Step 1:

Setup a new canvas of size 1920x1080px.

Next we create a new layer called background and fill it with a grey colour, I do this to all drawings so my sketch work stands out more.

Next we create a new layer and name this sketch as shown below.

Step 2:

I then select the Sketch layer and start to draw my character outlines with a dark blue color. I typically use the pen tool with a setting of 3px diameter, but sometimes also use the brush tool also. You may also just keep it white and use a black pen, but I found its easier to see what your drawing with my colour configuration.

At this stage it doesn’t need to be perfect as we will clean the line work up later.

Step 3:

Next we create a new layer called outline and place it above all other layers.

We set the sketch layer opacity of around 60%, which helps us see our line work in the outline layer.

I then click on the Outline layer, and I go around with a black color using my brush tool and start the line work. My brush setting for the outline was 7pt, this was perfect for all the thick and thin line work for the rest of the tutorial.

As you can see I zoom in to focus more on the detail and to make sure it looks perfect. I went around all the outline with a black colour, adding detail like the ears and the strips on his face.

I change outline color from black to color #ccab80 on the horns as Angry Birds don’t use black on all their outlines.

Below is what kind of outline you are aiming for, again you can erase and redo this step until you are satisfied with outline.

Now here is the finished outline work of both the characters. Your see that I have made a thicker outline around the beak of the bird and under his eye socket. This gives it a comic art look and feel, I just went with a brush with black color, set at 7pt, and zoomed in and made the outline thicker in these areas. You may leave them thin if you want, this is something I felt would give the outline more character.

Step 4:

I created a new layer called color, and place this layer under the outline layer so that the outlines stay on top.

I colored the pig with a base color #f62c2a, this gave it a bright red color and I colored the eyes and teeth in a bright white.

For the bird I used a bright yellow #f9d73f on the beak and a light brown #684623 on the hair.

Step 5:

Next I color in the features of the bird.

I used a dark brown #291808 on his eyebrows and a medium brown #502d05 for his hair. This made all the browns work together perfectly without making it look too dark and gloomy.

Don’t forget this is a cartoon and it needs to stand out to catch people’s eyes.

I then used a #ede1cb to color the skin of the bird, it’s nearly white but not making it plain, to give it a feather look. We colour his Jedi clothes in with a medium brown #502d05 and light brown #a47541. We use #b89b71 to color under his eyelid.

Step 6:

I then right-click on the outline layer and select the option preserve transparency so that I can change the black outlines on the bird to brown – like I said early on Angry birds don’t use black outlines.

You’ll also notice the lock icon on the layer. I forgot to mention that you should lock the outline layer whenever you are not working on it – this prevents any accidental changes as you are working on the color layer. You’ll also find the option to lock a layer when you right-click on the layer itself. You need to unlock the layer, if you do have to make any changes to it.

I go back and select the outline layer, unlock it, and use a brush with color dark brown #3b1f00 to change the black outlines to brown. I did this everywhere except the teeth area as shown below.

Once you are finished with the outline layer, remember to lock it again before moving on.

Step 7:

Next we go back to the color layer, and color the horn on the pig using a brush with a light brown #fff3db.

Step 8:

Next create a new layer called shadow and highlight – excuse the spelling in the picture ;).

Make sure this layer is placed above the color layer.

Let’s start with the bird.

On the shadow and highlights layer we use color #e7b11d to make the shadow on the beak and use color #fee56f to add a highlight at the top of the beak as shown below. This doesn’t need to be perfect.

Next we use color #d1b68b to add shadow under the eye on his face to show the eye socket and use color #e4e4e4  to add shadow on his eyeball and his teeth. All going well you should have something like the below.

Next we some shadow to his hair in with color #452e1c. The shade should give the appearance of depth to the hair as shown below – again this doesn’t need to be perfect.

Next we had some highlight areas to the hair using color #926a46 as seen below. Again notice how we have added the shade and highlight colors to give the hair some depth in a truly comic art style.

Finally, we just add a few more shadows using color #452e1c on his beard. See how I have added the shadow to the beard, again trying to create some depth.

And now let’s move onto the pig.

We use color #e8d9b0 to highlight his horns as shown below.

Next we color his eyes in with a bright yellow #fffc14 and a bright red #f42d30 to show that he is an evil sith lord. We also add a few shadows to his skin, for his horns, and nose using color #d22222.

Step 9:

So at this stage, I think it is important to say that you can always add or take away elements of your artwork at any point. I decided after the last step that the pig character would look better with some clothes.

So we go back to the outline layer and draw the outline of his suit as shown below.

Next to color this in, we go back to color layer and use color #2e2c39.

And finally go back to the shadow and highlights layer and use color #5e5f7e , black and white to color in around the waist area like below. You can put any design you want in. I did this to make it more interesting around his waist and to give him a stormtrooper tool belt – kind of.

Step 10:

Next to create a light saber we used a brush with brush size set to 18pt and with an electric green color #7bff9a. Add in the light saber to the bird as shown below. I used a white color brush to paint the middle of the light sabre.

Finally, to finish the picture off I went back to the Background layer and filled it in with a black color using the paint bucket tool. You can use any color you like or try another Pixelmator effect to finish it off.

I also tried a white background and it also look cool.

Hope you enjoyed it and remember to keep drawing because you don’t get good over night. You have to keep at it!

Wow. What a year 2015 has been.

At the end of last year we really took stock of what we did and did not do, and there were many good and bad moments where we thought our love child to teach Pixelmator skills to our subscribers wouldn’t make it.

However, we are delighted to continue growing Pixelmator Templates. We are glad to see not only the continued and growing support for Pixelmator app. There has also been a lot of love from our community members and social followers.

So what went well in 2015:

Blogging:

• We showed you how to use the awesome Pixelmator tools;
• Plenty more useful tips for using Pixelmator everyday including new UI focused tutorials;
• Lots of useful resources for Pixelmator;
• Created Pixelmator Shortcuts – The Sexy Version;
• Had our first ever guest author – Jamie Edwards – who really showed us some comic art masterclass tutorials using Pixelmator;

Templates:

We also published new templates, product mockups, and freebies in our store.

Followers, Subscribers, and the rest:

We also doubled our subscriber base to 2000+ new followers who were keen to hear more about Pixelmator and what this awesome app lets you do.

We grew our followers on all our social networks – facebook, twitter, and pinterest mainly.

We also continued to reinvest most of the revenue we made from our templates and ads into maintaining this site.

What didn’t go well in 2015:

• Although we started out great in the year, the number of tutorials we could publish took a dip towards the tail end of 2015 – we really plan to fix this in 2016.
• We lost some subscribers for two reasons:
  • Relevant content – a couple of users felt that the content we published in 2015 weren’t what they were looking for. This is fair enough – although we can’t cater for every type of tutorial, we do actively try to make the effort. We also would like to ask our subscribers to suggest more content they would like to see, so that we stay relevant to you guys. After all, we are here to help you learn Pixelmator.
  • Freebie templates – a small number of users felt that they were forced to enter CC info for freebies and left for that reason. We have always said (many times) that freebies are exactly that – they are free and for you to use as you please. When you go to download the freebies, you may be asked for a donation if you found the freebie valuable; however you are in no way obliged to give us anything. If this was confusing in any way or unclear, we do apologise and hope it is clearer now.

What’s the story for 2016:

We really want to continue doing all the good stuff we talked about in 2015. Our aim is to:

• Continue our UI/UX design series for Pixelmator;
• Start a set of tutorials for designing complete IOS apps;
• Get a few more guest authors to join us;
• and publish even more sexy tutorials, templates, and resources for all your design needs.

We also want to keep growing, and encourage you to use Pixelmator more.

If you have any content in terms of tips & tutorials, templates, or resources you want to see more of – Please Let Us Know.

We are keen to help you become Pixelmator Ninjas and continue spreading the goodness of this awesome tool.

Expect a lot more here in the next few months.

We started off this year with some very sad news – one of our favourite all time musician, David Bowie passed away. In his honour, we decided to show you how to create an awesome pop art album cover using Pixelmator. This is our tribute to David Bowie and all he has done for music and the world.

The Final Design

So here is what you will be able to create at the end of this tutorial. You will of course recognise that we used David Bowies all time top selling album – Ziggy Stardust for our tribute poster.

So let’s get started.

Step 1:

Create a new document 1000x1000px.

Step 2:

Using some quick searching we found one of the original vogue images of David Bowie.

Copy and paste this image into your canvas, adjust the size, and place it in the centre of your canvas using the automatic placement guides in Pixelmator.

Step 3:

Next we are going to get rid of the white background in the image we just copied.

Select the Magic Wand from the tool menu.
Carefully click on the white area to the left side of the image, and drag. Do this until you reach a tolerance of 15%, which should remove most of the white background from the image. 

Once selected, just simply delete the selection and you should have something like the below image.
Repeat the same process for the right side of the image.

Once you selected the region, then just delete it.Now we have an image we can work with – a silhouette of David Bowie.

Step 4:

Move the image to the upper half of the album cover, and scale the image down to about 73%. You can do this by pressing CMD and dragging the corner handle of the image.Next, copy and paste the image twice and shift the new images off centre as shown.

Step 5:

Next we shall apply some pop art magic using the Effects Browser (CMD + 3) in Pixelmator. Ensure you have selected the image in the far right of your poster. Then, open the browser, and then go to Other, and select Blueprint.

Simply drag and drop the effect onto your selected image, and choose a light green colour setting #16a085.

You should have something like the below image.Repeat the same process for the middle image, using a light blue colour #00a6d9 for the Blueprint effect.

And use a light red #c0392b for the Blueprint effect on the left most image.

All going well you should have a pretty good pop art effect on your 3 images.

In the layers panel, we are going to do some additional magic to really make the images pop and melt into each other.

Select the first image or the red image, and set the Layer Blending Mode to Darker Color with an Opacity of 70% as shown.
Next select the blue image, and set the Blending Mode to Multiply and with an Opacity of 70%.
Finally select the green image, and leave the Blending mode at Normal, but reduce the Opacity to 80%.

Step 6:

Once you are happy with the pop art effect you just created, we will next create the album title text. First place a rectangle with a fill color of #16a085 and place it as shown in the image below. This will be our text placeholder.Using the text tool, add in the name David Bowie, using a font Helvetica Neue, on Condensed Bold, All Caps, and font size 144px. The text should also be centered and placed on the green rectangle as shown below.

Next add in the album title text “The Rise And Fall Of Ziggy Stardust And The Spiders From Mars“. Using the same font in a much smaller size, we just made sure to put “Ziggy Stardust” on a separate line, and increase this font size relative to the rest of the album title.

After some final adjustments to font sizes, we also selected the word “David” and then “Ziggy Stardust” and changed the font color to White to make it stand out a bit more.

Step 7:

We are nearly at the end. The final tweak we added in was to put in a Light Leak Effect. Firstly, we selected the 3 separate image layers of our red, blue, and green David Bowie images in the Layers panel, and we right clicked, and we merged these layers into one layer. Next, we open up the Effects Browser, and under Stylize, you will find the Light Leak Effect. We choose the Orion effect with the below settings, just to add in some starlight into our pop art.

Awesome, you have now created  you very first pop art album cover, and also took part in praising the legend that is David Bowie.

In this tutorial we show you how to create metallic buttons using some basic techniques in Pixelmator. This article is part of a new series of tutorials for creating UI/UX designs in Pixelmator.

Preview

We are going to show you how to create the most common types of buttons for UI / web design, so we have split up this article into a number of parts. Here is a preview of the different types of buttons you’ll learn to create.

Last time we showed you how to make simple glossy buttons, and basic rounded buttons.

So stay tuned or subscribe to our newsletter, so that you don’t miss the next part.

Metallic Buttons

Metallic buttons not only look smart, but can make the user interface. Once you know the basics of metallic effects, you can build up your skills to make realistic product mockups – we’ll have to show you how to do that another day. In this tutorial we’ll show you how to master the basic metallic effect by creating metallic buttons in Pixelmator.

So let’s get started.

Step 1:

Create a new document in Pixelmator. You can choose whatever size you want depending on the size of your button.

Next, add a circle shape and place it into the center of the canvas. Fill it with basic grey color #b3b3b3.

Step 2:

Next add a new layer above the circle layer. Fill the layer with a gradient with the below settings – we used black, white, and a simple grey color #323333.

Once you fill the layer with the gradient, it should look like the below.

Next right-click on the gradient layer and select Create Clipping Mask.

Also, change the layer blending option to Overlay. We now have a basic metallic effect, but we need to add more detail to make it look realistic.

Step 3:

Next add a new layer above the gradient layer, and fill it with a darker grey colour #2f2f2f.

Open the effects panel (CMD+3), and under Stylize, choose the Noise effect.

Set the amount to 10% and choose Monochrome.

The noise layer should look like the below.

Next, right-click on the layer and select Create Clipping Mask. 

Also change the layer blending option for the noise layer to Soft Light and play around with the opacity.

The final effect we need to add is to the noise layer. In the effects panel (CMD+3), under Distortion, choose the Twirl effect.

Set the radius to 300px and play around with the angle until the image looks like the below. We now have a circular brushed metallic effect.

Step 4:

In the layers panel, group all the layers you have added so far and call it button. Next duplicate this layer, and change the layer blending option for the group to Multiply.

This gives us a darker brushed metal effect for our button.

Step 5:

Next add a new shape, we choose the pacman shape available in the shapes window (CMD+8). We also used the twitter bird in our poster, which is available as part of our social media shapes bundle.

Click on the fx option to the left of your shape. We choose a dark blue color for the fill and used a stroke of 1px with the same color.

We also set the shadow with a basic white colour, angle at 270 degrees, offset of 2px, with a blur of 1px. We also set the inner shadow with the same blue color, but with an angle of 180 degrees, offset of 2px, and a blur of 1px.

You should have something like the below, if you have been able to follow along so far.

Step 6:

We need add the metallic effect to our pacman shape. In order to do this, copy and paste your button-copy group. Next right-click and merge this group into a layer and call it button-copy-1. 

Also change the layer blending option to Overlay, which should give you the following:

It is a bit light, but this is easily fixed. Duplicate the button-copy-1 layer, and call it button-copy-2, and then change the layer blending option to Multiply.

Awesome, we now have a metallic button, with a pacman shape blended into the button.

Here is our final image after we export it.

We also created the same button with our twitter bird shape from our social media icons bundle.

Great, we’ve reached the end of this UI tutorial, and now you know how to create you very own metallic buttons.

Next time, we’ll explore how to create social buttons.

If you don’t want to miss it, follow us on any social network: facebook, twitter, tumblr, pinterest or simply subscribe to our newsletter.

Do you have tips of your own? why not share them by commenting on this post!!

In this tutorial, we will show you how to quickly create an awesome double exposure effect using Pixelmator.

Double exposure effects have been traditionally produced by photographers using nothing but their camera to combine two separate photographs to create an abstract and surreal image. Now with Pixelmator, you can achieve the same surreal and amazing effect with a few simple steps.

For some inspiration, check out this album by Andreas Lie in Pinterest showcasing some truly inspiring double exposures using animals and their natural habitats.

The final image

Here is the effect you will be creating by the end of this tutorial.

So let’s get started.

Step 1:

Find some images that you can work with. We went with the theme of nature, oceans, and our main character is a surfer. Lucky for us all of these awesome images are available in our favourite photography resource: Unsplash.

Step 2:

Create a new document, but you can choose whatever size poster you want to create.

Step 3:

Fill your background layer with a light color – ideally one from your chosen images. We choose to go with the light sky blue, which is common to all three images. Using the color picker you can select the color an image in Pixelmator to get the hex color value. Once you have selected the color, use the paint bucket to fill the background.

Step 4:

Since our main character is the surfer, we want to remove all the background elements of that image. First you paste the original image into a new layer above the background layer, and scale it up to fill the canvas. Next in the tools menu, choose the marker pen, which is a great selection tool.

Using the marker, just start to scribble on the parts of the image you don’t want to keep, and Pixelmator will automatically select areas of similar color and contrast. Once the selection is made, just simply delete these parts. Once you have removed major parts of the image, try to zoom in and out when selection areas of the image close to surfer.

Keep doing this until you only have the surfer left from the original image. It doesn’t have to be a perfect selection as we are going to  blend it with  other images later on.

The last step we want to take is to remove color from our surfer. Open up the Effects Browser (CMD+3) and then under Color Adjustments, choose Desaturate. Drag and drop this onto our surfer.

Now our surfer, on top of our background is already looking great.

Step 5:

Now copy and paste the waves into a new layer above the surfer layer, and scale it up to fill the canvas.

Next do the same thing with the mountains, which should be a new layer above the waves layer.

In the layers panel, select the mountains layer, right-click and choose Create Clipping Mask. Do the same thing with the waves layer.

The final step is to play around with the blending modes and the opacity in the layers panel for the waves layer and the mountains layer.

First we selected the mountains layer, then chose the Multiply layer blending option and set the opacity to 60%. 

Next we selected the waves layer, chose the Linear Burn blending option and set the opacity to 50%.

We note that our main character is still too dark at this stage in certain parts, so we want to reduce this. Select the surfer layer, then open up the Effects Browser (CMD+3) and then under Color Adjustments, we’ll use the Colorize effect to desaturate it even further. Reduce the lightness by 50% and then drag and drop the effect onto the surfer image.

After a bit of further experimentation and even moving the waves layer around, we end up with a really cool double exposure effect.

And here is the final image.

and just for fun, we also created a double exposure similar to Andreas Lia’s animals and nature theme.

Today is a special day, it is our 50th tutorial, and as a special treat we are going to show you step by step how to make our favourite new droid, BB-8, from Starwars Episode 7 – The Force Awakens.

We have to warn you that this is a medium to advanced tutorial and will take some time to master. A lot of the techniques we will use are about editing and making custom shapes. We showed you the basics in previous tutorials, but you can go through them again to refresh your memory:

• Editing Shapes in Pixelmator – The Basics
• Custom Shapes in Pixelmator
• Creating Lego Man and a Christmas Ball (this is an exclusive tutorial though)

The Final Image

Here is the awesome little BB-8 droid poster that you will be able to create by the end of this tutorial. We are going to use a flat color profile and style to make it easier for us to recreate.

Good luck and as always if you get stuck anywhere, please feel free to reach out by commenting on the post or emailing us at pixelmatortemplates@gmail.com.

Here we go.

Step 1:

Create a new custom canvas of size 800x800px. You can choose any size you wish, but this seemed appropriate for a first attempt as we try to limit the level of detail we want to show.

Step 2: Creating The Basic BB-8 Structure

At its simplest form, the BB-8 droid is a circle with a semi-circle for a head.

Add a new circle shape for the body at the lower half of your canvas. 

Change the fill color to a nice dusty cream color #f6eada.

Make sure there is no stroke on the body. In the layers panel, rename this layer to body.

Next, duplicate the same circle onto a new layer to create the head. Call this layer head.

Reduce the size of the head circle and place it as shown, so that roughly half of the head intersects the top of the body circle. 

Next, right-click on the head circle, and select Make Editable.

This exposes the shape handles, which we can adjust, or even add or remove more handle points.

First we added two new points (right-click and select add point) where the head circle meets the body circle.

Next we deleted the bottom most shape handle point from the head circle.

We then added two further shape handle points just above the last two we created. Right-click on the newly added points and ensure they are set to Sharp.

Adjust the new handles to create the shape of the BB-8 droids head. 

Great, we now have the basic structure to build upon.

Step 3 – Add in major elements of the BB-8 droid’s head

Now let’s quickly create the major features of the BB-8 droid’s head – its two telescopic eyes and the antennae.

Add in a new circle shape into a new layer, fill with black color and no stroke, and place it above the head layer.

Make sure to size the circle and place it roughly in the middle as shown below. Now name this large-eye layer.

Duplicate the large-eye layer. Re-size it and position it to the bottom right of the large eye, and name this small-eye layer.

For the small-eye layer, we are going to add another circle as an outline. Just simply add a new circle, with no fill, and a stroke of 2px. Make sure it is slightly larger than the small-eye circle and align it to the center of the small-eye circle using the automatic guides in Pixelmator.

To make the antenna, first create a new rectangle shape in a new layer and place this above all the layers of the head in the layers panel. This will form the top of the antenna.

Add a second rectangle, flip it 90degrees horizontally, and adjust it as shown. This makes the body of the antenna.

Now ensure you have selected both rectangles, and duplicate them into a new layer to create the second antenna.

Re-size this to make it larger than the first one and place it roughly as shown.

Select the first antenna and change the fill color to a darker cream color (#e0dad0) than the one we used for the head and body circles.

At this stage, we also filled in our background layer with a flat teal color #a5b4b5.

In our second antenna, we didn’t like the rectangle at the top, so instead we rotated that rectangle, moved it over the body of the antenna, and re-sized it so that it covered the middle half of the antenna. We filled it using the same dark cream color as the first antenna, which gives it a nice effect.

Step 4:

The next major detail we want to add in is the base plate for the head.

Duplicate the main head circle shape, and call this base-of-head layer, and place it above all the other layers for the head. Edit the shape, so that it makes a nice oval shape at the base of the head, and which also gives us the desired 3D effect.

We fill it with a darker cream colour #bab0a6.

The final step is to ensure you group all the layers of the head together in the layers panel.

Next move the body layer above this group, which gives us a great 3D effect between the head and the body of BB-8.

Step 5: Detailing The BB-8 Body

Great – if you have managed to follow along so far, then you should have all the main parts of BB-8 droid completed.

BB-8 droid has a couple of layers of details we want to capture. There are the vivid orange and blue elements – lets call these decals, and also as this is a droid, so there are sheet metal lines and bolts we need to add in.

First let’s start with the orange decals. Add in a new circle shape into a new layer, with no stroke, and fill it with a bright orange color #d87205. Make the circle at lease a third of the size of the body circle.

Call this layer body-graphic-1 and place it above the body layer.

Next, while the first circle is selected, copy and paste the circle in the same place. This will essentially merge the two circle shapes together. Resize the second circle to be smaller than the first circle, align it to the middle using the automatic shapes handles, and then in the Mode option at the top right of the window, select the subtract option.

Your body-graphic-1 layer should look like the below image.

Next, we want to use this body graphic to create a 3D effect on the body layer. To do this, we move the body-graphic-1 layer to the right of the body layer, and we edit the shape to make it look like its is shrinking as we go from left to right.

You will need to edit the overall size of the body-graphic-1 circle, and then adjust the individual shape handle points for each circle to achieve the below effect.

Next, add in a small rectangle shape in a new layer above the body-graphic-1 layer. Make sure it is the same orange fill color.

Copy and past the same rectangle, so that you have four shapes in one layer. Now adjust each rectangle as shown in the below image.  Using a combination of resizing the rectangle, rotating it, and then editing individual shape handle points, you can achieve the same effect.

We are trying to create a 3D effect, so the rectangles will go from large to small as we move left to right.

Once you have made all the adjustments, we are going to merge two layers together – the rectangles you just created and the body-graphic-1 layer. To do this, select the rectangles, then cut it from the canvas (CMD+x), then select the body-graphic-1 circle, and paste it (CMD+v). This should merge the two sets of shapes into one layer.

Once you are happy with the first body-graphic-1 layer, then we are going to duplicate it, rotate it, and adjust the circle shape and the rectangles as shown below. Call this layer body-graphic-2 layer.

Repeat the same process one more time to create the final layer body-graphic-3.

You can see that for each of the body-graphic layers we are trying to create perspective by making the shape smaller as it move towards the edge of the body circle. This creates the illusion that the body circle is actually an orb.

Next, we are going to add in the blue decals. This is essentially just a set of rectangles and circles placed inside our body-graphic layers. This is where you can get creative – we just made this bit up ourselves.

We used a flat blue color #7197a2, which works nicely to balance the vibrant orange.

Once you have created all your blue decals, make sure to group them together in the layers panel.

Next we want to create sheet metal lines to give the effect of metal sheets bolted together to form the outer layer of the BB-8 droid.

Just add in new lines, rotate and adjust them as shown. We just connected the three orange circles and added in some rectangles with no fill to get the below effect.

We want to make the lines darker, so we used a stroke of 1px with a dark cream color #c7bcc0.

The last detail to add is the bolts. To do this we just added in some hollow circles with the same color as the sheet metal lines and placed them as shown.

Great – a few final tweaks to position of our bolts and metal lines and we are now finished with the body of our BB-8 droid.

Step 6: Detailing the BB-8 head

Now lets focus on adding in the same graphic details to the head of our BB-8 droid.

To help us focus, we deselected the body and body graphics from the layers panel to make them invisible and un-editable.

First add in some orange decal rectangles and place them roughly as shown. We make the edges of these rectangles line up perfectly with the edges of the head layer. In the layers panel, make sure these rectangles are above the head layer.

Next we add in our blue decals rectangles and place them roughly as shown. Again make sure the edges of the rectangles match the edges of the head circle perfectly.

Next we add in our sheet metal lines and bolts – we just circled the droid eyes for our sheet metal lines and added in a large bolt below the large eye. We used the same settings for the lines and bolts from the body layer.

Again this is your chance to be creative, and add as many features and details as you like. We kept it quite simple to show you what’s possible.

Great, once you re-select all the layers in the layers panel and make the visible, we can see our final BB-8 droid with all its detail.

Step 7: Shadows

In order to give the image a little more 3D effect, we are going to add some shadows.

First add in a circle with a dark grey color #747474 and place this layer below the body layer. Adjust the shape so that it looks like an oval shadow that is being cast by the body of the BB-8 on the ground.

Next we added in three more shapes to create shadows on the body of the BB-8 droid. Add all of these shadow shape layers above all other layers.

We first created a semi-circle shape, with a fill color #747474, and an layer opacity of 20%. We moved and adjusted this shape to create the shadow cast by the BB-8 head onto the body.

We then created a second semi-circle shape with the same settings to create the shadow at the base of the body, which is cast by the body itself.

We duplicated this shadow shape, and reduced the size, and changed the opacity to 30% to create a darker shadow towards the bottom of the body circle. This gives the illusion of a circular orb body for our BB-8 droid.

And we are done!!!

We have now recreated the awesome little BB-8 droid from Starwars Episode 7 – The Force Awakens.

After we export the image, we get our final BB-8 poster.

We hoped you enjoyed this tutorial, and would love to see your versions if you attempted this tutorial.

If you have any questions or get stuck anywhere, please let us know.

Ever wondered where designers get their resources to help them succeed with a project? Here is a list of free colour resources for all you Pixelmator designers out there.

(1) COLOURlovers

A great resource to help you select the perfect colour combinations – some really useful combos here. 

(2) Flat UI Colors

A really great tool to help you select flat UI colours quickly. It gives you the hex code or the hash code for the most popular flat colours quickly.

(3) Flat Color Picker

Another great tool that gives you a huge range of flat colours to choose from.

(4) Coolors

A nice web app that lets you play around with CMYK/HSB/RGB values to create your own unique colour palettes.

(5) Material Design Colors

A great site to help you select UI colour combinations and palettes.

(6) Colorful Gradients

An awesome tumblr site collection of gradients to die for.

(7) Brand Colors

A site where you can find all the colours used by your famous sites.

(8) BootFlat Color Picker

A flat colour Picker which gives you the perfect colours for flat designs.

(9) Get UI Colors

Gives your awesome UI colours for your website designs.

(10) Coleure

Create awesome colour palettes using a simple drag and drop tool.

We’ve added these to our useful resources page, where you can find all sorts of other resources for Pixelmator users.

In this tutorial, we are going to show you the basics of using clipping masks and text elements to create some beautiful posters using Pixelmator.

Clipping masks, and layer masks in general, can be used to create some great effects in your designs. Especially when you can merge clipping masks and text elements together. We showed you how to use basic clipping masks back in Tip #27.

The Final Product

At the end of this tutorial, you will be able to recreate the below poster. We chose to go with an animal zoo theme for this poster with release of the latest Jungle Book movie, which is one of our favourite movies of all time.

So let’s get started.

Merging Text and Clipping Masks – The Basics

Step 1:

Create a new canvas of size 1024x768px or whatever size you prefer.

Step 2:

Select the text tool in the tools menu.

Add in some text into the first layer and set the font size to be large enough to almost fill the poster. Align it to the center of the poster.

We went with the theme of motivational poster, hence the word “DESTINY”.

Step 3:

Next, copy and paste the image you want to use into a new layer above the text image. Re-size the image so that it fills the canvas using its size handles. Lets name this the holiday layer.

We used this serene image by Ales Krivec from Unsplash.

Step 4:

Now in the layers panel, right-click on the holiday layer, and select Create Clipping Mask.

This will now create the desired effect, where the holiday image is only visible through the text element.

Feel free to adjust the size of the holiday image, so that we show a lot of the detail within the text element.

Your layers panel should look like the below.

We also added in a background layer, and using the color selection tool and the paint bucket from the tools menu, we selected a color from the visible parts of our holiday image, and filled the background layer with that color. The reason to choose a color that is visible as our background color is to show some fluidity between the text element and the background, but at the same time to contrast the text with a solid color.

Great, we have now created a beautiful motivational poster.

Step 5:

The poster looks good, but we thought it might be an idea to make the holiday layer stand out a bit more.

Open up the Effects browser (CMD+3), and under Stylize, drag and drop the Vintage effect onto the holiday layer.

We went with Freesia, with a saturation of 100% and a vignette of 100%. Feel free to try different vintage effects and play around with the saturation and vignette settings.

Now we have finished our poster. Once we export the image, we get the final product with a background.

You can see the holiday layer has become really vibrant and enhances the text element at the same time just by adding a vintage effect.

Here is the same design without  the background.

We also created another image to show how easy it is to merge text elements with clipping masks.

And here is the same design without the background – cool right.

Merging Text and Clipping Masks – Complex Poster

Step 1:

Create a new canvas 1024x768px, and fill it with an image like we showed you earlier.

For the image here, we used a photo by Jessica Weiller available on Unsplash. All we did to this was to add a Colorize effect from the effects panel (CMD+3) to make it a blue color.

Step 2:

Duplicate the bear layer and call it bear-copy layer. Make sure that the bear-copy layer is above the bear layer, and then hide this layer on the layers panel.

Note: it is very important that you don’t move or change the bear and the bear-copy layer after this point.

Now select the bear layer, and using the square selection tool, select the right half of the image, delete it. While the selection is still active, fill the area using the paint bucket with white color.

Step 3:

Now using the text tool, add in your text. We used the line from the famous song in the Jungle Book. We use the standard Headline font, with a font size of 96pts, and all caps. We also reduced the text vertical spacing to 0.7, and the horizontal spacing to 0%.

Arrange the text so you roughly have something like the below and align it to bear image so that it looks good relative to the bear silhouette.

In the layers panel, ensure that the text layer is now in-between the bear layer and the bear-copy layer. Now right-click on the bear-copy layer, and select Create Clipping Mask.

This now gives us a cool text clipping mask like we showed you earlier. You’ll also notice that we moved the text layer to touch the bear layer slightly to ensure there is a visual flow from the bear on the left to the text on the right.

Step 4:

Now we add in some final text embellishment to the bottom right of our zoo poster to complete the look and we are finished.

We can finally export the image from Pixelmator to create this beautiful poster for London zoo celebrating the Jungle Book.

Being able to create your own paint brushes in Pixelmator is one of the basic tools you will use quite a lot as a graphic designer. In this tutorial we will show you how to quickly create you own paint brush from text.

The final image:

Here is what you will create by the end of this tutorial – a “pixelmator” text brush (PXB).

You can also download our free brush set, so that you can play around with some custom brushes.

So let’s get started.

Step 1:

Create a new canvas size 800x600px.

Step 2:

In the tools panel, there are two types of brushes available – the standard brush tool and the pixel brush tool (paintbrush with a pixel). For this tutorial we will use the normal brush tool, and we will do a separate tutorial on the pixel brush tool.

Click on the standard brush tool.

Step 3:

To open the Brush tool panel, there are a few ways. You can select the settings wheel on the canvas and then “Show Brushes”, after selecting the brush in the tools panel – as shown below.

Alternatively, you can go to the View in the main menu, and then select Show Brushes (CMD + 4).

This will open up the Brush tool panel.

Brushes are stored under a brush collection, which can be accessed through the brush tool panel. In the panel you can also select a brush, and adjust a range of settings to get the exact brush effect that you desire.

To change brush collections, click on the setting wheel in the brush panel, which should give you the following menu and a list of options.

Here you can not only change collections, you can also add/duplicate/and remove brushes, you can also remove an entire collection and also import brush collections.

Let’s select the Default brush collection for the moment as the location for our new brush.

Step 4:

We are going to create a text brush, so the first step is to create the text element. We chose to use the word “pixelmator” with a font called Jane Austen. Don’t worry too much about size and color of your text here, as once you convert this into a brush, you can change all of those settings as needed.

Next export this image and save it as a PNG called brush-text.png.

Step 5:

In the brush panel, we are going to use the option “New Brush from Image…” to import our newly created brush text image.

Once it is imported, you should see it in your brush collection.

Now the fun part is to modify the brush settings, and playing around with various combinations until you come up with a setting you are happy with.

Great, you have now finished creating your very own text brush.

And we export the final image.

Using the same technique, you can create your own custom brushes for shapes too.

Step 6 – Importing and Exporting Brushes

To export your brush, all you need to do is select the brush from the brush panel and drag and drop it into the desired location. This will create the PXB brush file.

In order to import your brush, you just need to open the brush tools panel, make sure you have selected the brush collection first, and then select “import brushes” and then select all the PXB files you want to import.

Feel free to download our freebie brush set containing the text, hearts, and ninjas brushes, so that you can import them and play around with the settings.

Awesome, you should now be able to create your very own custom paint brushes in Pixelmator.

We all know about using Masks, but the lesser know feature here in Pixelmator is gradient masks. Gradient masks can be used to do all sorts of neat graphic design work. In this tutorial, we show you how to create a great color fade effect using gradient masks.

The final image:

Here is what you will be able to create by the end of this tutorial.

So let’s get started.

Step 1:

Create a new canvas – we chose 1280x800px.

Step 2:

Find a source image and make sure that the colors are really vibrant. We found this awesome picture on Public Domain Archive – one of our free photo resources.

Drag and drop you photo into a new layer, and adjust and align the image as you desire.

At this stage, duplicate the layer. Call the first layer b/w and the second layer color.

Make sure the color layer is above the b/w layer.

Step 3:

Make sure you have selected the b/w layer. At this point you might also want to deselect the color layer in the layers panel to hide it from view.

Open up the effects panel (CMD+3), and then under Color Adjustments, select Black & White. Drag and drop this effect on top of the b/w layer.

Set the Brightness to -40% in the Black & White settings panel.

The b/w layer now contains our initial image in black and white.

Step 4:

Un-hide the color layer in the layers panel. Next right-click on the color layer in the layers panel and select Add Mask.

Your layers panel should look like the following:

Click on the mask to make sure it is selected and not the color image.

Next select the gradient tool in the tools menu to open up the gradient panel (CMD+5).

Make a basic linear gradient using white color at one end and black color at the other as shown.

A fun thing to experiment with is the different types of gradients you have and how that changes your gradient mask and your final image.

Now click and drag the gradient tool from the left part of the girl’s body to the middle of her hand in our image. This will in essence give us that nice color fade effect.

You will need to play around with where you place the start and end points of your gradient until it works for you.

Once we are happy with the gradient placement, we get that awesome color fade effect.

And once we finally export the image, we can see how impactful this color fade effect can be.

For some more fun, you can play around with the layer blending options and even add more image effects to the color layer to create some amazing images.

We created the following image just by changing the blending option from Normal to Overlay.

We hoped you like this tutorial. Keep an eye out for further tips and tutorials on fun things you can do with gradient masks in Pixelmator.

One of the really awesome tools we use regularly is the Automator application in your Mac. It is one of the best tools to automate some of the more simple but repeatable tasks very quickly.

In this tutorial we will show you how to set up an automator action to quickly add watermarks to your images using Pixelmator.

The final image

Here is our final image with our pixelmator templates ninja watermark added using our automator action.

Note: There are some limitations to automator actions, and we will talk through those as we go through the tutorial.

Step 1

Go to the applications folder in your Mac, and open the Automator application. The icon is a robot holding a metal tube.

Step 2

When the dialog opens up, select the type of document you want to create. As you can see Automator allows you to create a number of different types of actions such as creating a calendar event, creating a folder action, or even triggering a print event.

For the sake of this tutorial, we will create an Automator Application, so select this option and hit Choose.

Step 3

Now in the search dialog (with the magnifying glass icon), type in the name of the application you want to automate. In our case type in Pixelmator and hit return.

This gives you the list of options available for Pixelmator, which we can automate.

Scroll down to the Watermark Images option and hit return.

Step 4 – Setting up the watermark action

Once you opened up the Watermark Images option, you get two sequential actions to run one after the other.

The first action is to copy / replace the image you provide and place it somewhere on the computer. We left this to the default, which places the copied and watermark image onto the desktop.

The second action will place a given watermark image into a preferred location on the image provided.

For our second action, we used our ninja watermark and placed it in the bottom right hand corner of the image provided.

Next, save the action (CMD+S), which will save the action as a mac application.

We called our application – Watermark.app and saved it to our desktop for easy access.

Step 5

Here is our test image we want to watermark from one of our useful photographic resources.

Now here is our Watermark.app automator action, and our test image in our desktop.

All you need to do is drag and drop the test image onto the Watermark.app file, which then should produce a copy of your test image with your watermark.

Additional Tips/Notes:

• Keep the watermark image size small – ideally no bigger than 150x150px. We can’t control the size settings of the watermark image relative to your test image – this will be more of a trial and error to get this right.
• Avoid small text in your watermark image – they won’t show up well.
• Ideally use white color and with some transparency for your watermark images – you may notice we did this for our final image.
• To preserve transparency in your watermark images – ensure you save them as PNG files.
• Make sure that you finalise your watermark images as needed before you add them to this action – especially for things like rotating the image, color, transparency etc.

Excellent, you should now be able to create your own watermark automator action to help you quickly create watermark images using Pixelmator.

Gradient masks can be used to do all sorts of neat graphic design work. We showed you how to create a great color fade effect using gradient masks in Pixelmator Tip #53.

In this tutorial, we show you how to create an awesome text fade effect using gradient masks.

Text fades are being used to create some kick ass posters – here are some images we put together using the technique we teach you in this tutorial.

The final image:

Here is what you will be able to create by the end of this tutorial.

So let’s get started.

Step 1:

Create a new canvas – we chose 1280x800px.

Step 2:

Find an image that you like. For this tutorial, ideally choose a landscape with some layers of depth, so that you can find a good place to embed your faded text.

We found this fantastic landscape on Unsplash by QingBao-Meng.

Using the Magic Wand, we chose to split the landscape into two parts – the foreground and the background. Firstly use the magic wand to select the background – use small selections and take your time. Hold Shift and continue to add more to the selection you have already made.

Next right-click and select the option Copy and Paste as Layer.

Ensure this layer is at the top and call it background.

While the selection is still active, ensure you select the original layer in the layers panel, then right-click on the selection, and select Invert Selection. Now repeat the process of Copy and Paste as Layer. Call this layer the foreground, and ensure it is place below the background layer.

Step 3:

Now using the Text tool, add in your text. Ensure the text layer is placed above the original image layer, and below the background and foreground layers. Play around with position on the image and angles until you are happy.

Right-click on the Text layer and select Add Mask.

Select the Mask, and using the gradient tool, use a simple gradient (white colour on one end and black colour on the other end). Select the top the text and drag the gradient to the bottom of the tool.

Play around with the placement o the gradient to ensure that the fade looks more natural and can blend into the background seamlessly. This give the effect of the text rising out of the landscape.

Step 4:

Finally, we’ll just do some quick enhancement to make the image and text blend better.

Select the foreground layer, then change the Blending mode to Screen and set the Opacity to 50%.

Similarly, select the background layer, and set the Blending mode to Soft Light, and set the Opacity to 50%. 

Once we are happy with all the settings and blending modes, we can export the final image.

We hoped you like this tutorial. Keep an eye out for further tips and tutorials on fun things you can do with gradient masks in Pixelmator.

Pixelmator is a great many things to photos, but what it can also be used for is designing amazing app user interfaces and app icons. Through all the work put into the functionality of an app, you now have the ability to showcase that functionality in a beautifully crafted app icon.

Bad app icon designs are among the top three reasons why apps keep getting rejected from the App Store.

The app icon is usually the first place most people will notice your app. You have to truly stand our from the noise to be noticed. Below is a screenshot of the Top Grossing Games in the Mac App Store currently. Being simple, beautiful, and instantly recognisable are the three main traits of awesome app icon design.

Does your eye get drawn to any particular design?

Do these icons have some similarities – what do you like about them – what about them was eye-catching?

The following 9 simple rules will help you create amazing app icons using Pixelmator:

1. Keep it simple and don’t drown in the detail

Keeping the details to a minimum in app icons, the better. With only a few key elements, you can convey the essence of you app adequately. Below is a weather app icon we created in an earlier tutorial.

2. Stay away from words and numbers

Words are dangerous on the face of your app icon. The saying “a picture is worth a thousand words” should be your motto when designing your app and your app icon. Words will clutter the message you are trying to convey, and in the split second that someone sees your app icon it could convey complication. Although Pixelmator has great tools to incorporate cool fonts into your images, this is not an instance in which they should be utilised. It is okay to use a letter or number as part of your logo, but in general stay away from using words or numbers that will overcomplicated the design. Most likely the user won’t be able to read the word or number when looking at the app icon on their phone.

3. Design for your audience, but also for global use

You want to make sure that not only your audience will know what you app is about, but also anyone who looks it up will also get it – ideally without having to read the summary of your app to figure it out. Even apple has taken to simplifying all of their apps to make them noticeable and simple for use by everyone. You can take a leaf out of Apple’s design trend and very quickly design something similar in Pixelmator.

4. Design for the right size

Make sure you design the right size of the icon – rookie mistakes will cost you by getting rejected from the app store. Make sure you stick within the app store guidelines for maximum success.

5. Be consistent with shadows and highlights (and don’t go crazy either)

Use simple shadows and highlights to really make your app icon pop; however be warned that you can take this too far trying to make a 3D effect, and completely lose the plot. Just be consistent.

6. Easy on the perspective and 3D effects

Creating some awesome perspective and 3D effects using Pixelmator will make you app icon stand out; however use this wisely. Ideally test out a few designs and see how it looks relative to other app icons on your device.

And don’t worry even Apple makes mistakes in that department. So learn from the best.

7. Don’t use real pictures in your app icon

Please don’t do this – they are just terrible, so don’t even try.

8. Choose your colours wisely

It is important to utilise the vibrant colours Pixelmator offers carefully. The goal of the colour is to stand out and catch someones eye in a crowded app market. Choosing the right colour, and limiting the number of overall colours used can make the difference between great design and random art. Here is a screenshot of poker apps in the app store – see the apps that use colour wisely and those that just look far to busy and messy.

9. Be unique and instantly recognisable

Remember that you have only a second to capture a potential users attention. Therefore the app icon you create in Pixelmator needs to be deliberate and thoughtful. Every detail needs to be focused on the app and what the potential interpretation can be.

Pixelmator has the versatility to create beautiful and elegant app icon designs, so take the time to learn how to make an app icons that are amazing.

Check out our earlier posts on How to Design A Simple IOS App Icon and How To Create A Cool Game App Icon.