FILE: PXM ZIPPED
VERSION: PM 2.0+
SIZE: 11MB

Set the Stage!

Here is a fun graphic that you can open in Pixelmator and use as a template to show off your Stuff! Here are a few examples of what you can do with Stage Show:

Use it to show off your pictures, videos, even make an email announcement!

Show your fun new app to the world!

Share your latest art piece!

How to Customize

You can totally customize Stage Show to the look and feel you want. Below are some ways to do just that.

Here are the main groups. You'll want to create a Props group between the Spot Lights and Back Curtain, this is where you'll put your stuff.

You can change the color of the Left, Right, and Back Curtains by simply adding a layer above the existing color layer (turn the existing color layer off). Add a clipping mask to the new layer by right clicking and choosing "add clipping mask" and change the blending mode of the layer to Multiply. Finally fill the layer with the color of your choice!

The same technique applies to tinting the wood the color you want. Find the existing color layer and turn it off. Add your new color layer above like we did for the curtains and follow the same process. If you get real adventurous you can try to add a different texture for the floor and front wall!

Free Download

Get this cool PXM file!

FILE: PXM ZIPPED
VERSION: PM 2.0+
SIZE: 11MB

Here’s how the tutorial series is going to be spilt down:

• Part 1 - Planning and Design Decisions.
• Part 2 - Design Mockup in Pixelmator.
• Part 3 - Slicing and Coding using HTML5 and CSS3.
• Part 4 - Creating a WordPress Template.
• Part 5 - What Next?

Let’s Get Started

Often the most difficult stage of the design process is getting started, I’ve been there myself, sat in front of a blank screen with designer’s block. So, where do we begin? Ask any good designer this and they’ll usually say something along the lines of planning or research, but most will agree that the design process begins with the client. After all we currently no nothing about them, what their requirements are or exactly what we will be designing. So let’s first introduce our fictitious client, well, he’s actually not so fictitious as we will be designing a blog for myself. So, we have our client, which brings us nicely onto our first stage of the design process - Research & Discovery.

Research & Discovery

The research phase begins with us gathering as much information about the client and the project as possible. Here are a few of the things I like to know:

• Purpose - What is the purpose of the site? Are we selling a product or offering information?
• Existing branding - Does the client have any existing branding in place such as a logo or web site? Remember, the design should be coherent with existing media, thus enforcing brand identity.
• Audience - Who is the target audience? Are there any commonalities between them such as gender, age, interests or profession? This can push the design in a certain direction, for example an audience consisting of predominantly children could have a more playful feel.
• Content - Content is key, after all that’s why the target audience has visited your site. So what exactly will they expect to find from your site? This can play an important part in the page anatomy and content placement.

Those are just a few of the things I like to consider when undertaking a new project, feel free to expand on these and add your own points of consideration. Now let’s see how these tie in with our client:

I want a blog designed to coexist with my current homepage (www.ashleyrich.com), which promotes my services as a web designer and WordPress developer. The current website demonstrates a clean, modern and minimalist design and it is important that the blogs design demonstrates these qualities.

The purpose of the blog is for me to journal my personal experiences in the design industry and to provide articles related to web design and development (in the hope that I can assist others in the industry).

The audience will vary by gender, age and location, however they should all have an interest in web design and development.

The content will primarily consist of text based articles, however the ability to embed media such as images and videos will be required. It is also important that I have my social accounts and current projects easily accessible.

Our client

Now that the client has provided us with a brief explanation of their requirements we have gained a considerable insight into which direction we need to push the design. We know exactly what they intend to use the site for, the kind of content they will be providing and the type of audience they expect to attract. They have also provided us with an existing website and informed us that the blog design should incorporate their existing branding. Not bad from a few simple paragraphs provided by our client.

Planning

With the research and discovery phase complete we can begin to plan our design based on what we have learned from the client. I like to start by creating a simple mind map to visualize the anatomy of the design and help understand what page components we need to incorporate.

At this stage you should feel comfortable enough to begin sketching our thumbnails. The thumbnail sketches allow us to quickly experiment with different layouts and the positioning of the various page elements from our anatomy above. I like to keep them fairly small and quite rough, however I use graph paper as a makeshift grid. Grids play an important role in design and you should definitely add them to your design arsenal. Check out this article for a quick lesson in grid theory and the rule of thirds.

As you can see I’m no Van Gogh, but the thumbnails serve their purpose and we have experimented with a few different layouts. At this stage I’m leaning more towards the two right hand sketches and here’s why:

Blogs are all about content, therefore lets allow it to occupy the full width of our design, this also aids in achieving the clean, modern and minimalist design that our client requested. At the top we will continue the current sites branding with a large chunky text based logo, thus enforcing brand identity and keeping the blog design coherent with the existing web page. Let’s not clutter our design with complementary content (search, projects, tags and socials), if the user requires any of these items they can easily be found in a mega style menu, which will sit above the content with our branding.

Design

I’m really starting to get a feel for how I want the blog design to look and I’m almost ready to open Pixelmator. However, a few of you may be wondering why we even bother creating a mockup in Pixelmator, especially if we are dealing with a predominately text based design. I prefer to do this because designing in a graphics application gives you the freedom to try various layouts, compositions and generally experiment more easily than designing directly in the browser. At this stage we are concerned primarily with the design of the site and we don’t want to get bogged down with writing HTML/CSS. So let’s open Pixelmator and prepare our grid and color palette.

Grid

For this project I’ve decided to use the 960 grid, which consists of 12 columns at 60 pixels with 20 pixels gutters. I have put together a blank Pixelmator document containing the grid which can be downloaded at the top of this tutorial. As discussed earlier in the linked article, the grid will allow us to easily align our components and create proportion within our design. To toggle the grid on and off use the shortcut (ALT CMD ;).

Color Palette

Color theory is beyond the scope of this tutorial, however because our client has provided existing branding it can help to create a palette containing those colors. Thats not to say we cannot use any other color in our design, however sticking to the colors in our palette and tints/shades of those will really help tie the blog design to the existing branding.

I like to add the colors into Pixelmator’s color window. Simply take a screenshot of the existing web page (CMD + Shift + 3) and use the color picker in Pixelmator to select the colors. Then drag the swatches to the bottom of the window.

Conclusion

Thats concludes part 1 of this tutorial series. I appreciate that there was a lot of theory in this tutorial, however, I wanted to document my entire process from conception to completion and I hope that you have found it useful. Stay tuned for part 2 where we will design our clients blog in Pixelmator.

Thanks for reading and until next time!

What are Gradient Shape Overlays?

They are special grey and white gradients that form shapes which can be expanded, rotated and blending into your projects. We had to rebuild them to work with Pixelmator 2.1 so these are totally new.

How do I use them?

They are gradients so they work just like any other gradients. You'll want to place them on separate layers and test out the different layer blending modes to really make these work in your project!

How do I install them?

After downloading the Gradient Shape Overlays pack drag and drop each gradient onto the gradients panel and they will be installed! If you decide to tweak them a bit and mess them up, just remove them and drag them from the folder again to reset.

Examples:

Intro

In this Pixelmator tutorial we have a hybrid of photographic effects married with some vector UI pieces to create an inspiring sign-up page to create buzz about a imaginary new project. We'll be using the Effects Browser a lot with Blurs, and Color effects. You'll learn how to add masks to keep effects confined to certain areas in addition to combining vector shape layers to create cool floating sign-up element. Remember you can click on any image to view it full size and hit the back button in your browser to go back to the tutorial.

Resource Links

• Starfield Photo
• Sunrise Photo

Step 1 - Enhance, Blur, Color

First duplicate a copy of the photo so we keep the original intact. Select the new copy and go to the Effects Browser, find the Vintage Effect and drop it onto the canvas. Now you'll see a few options to enhance your photo, choose Freesia, set the Saturation to 5% and the Vignette to about 20%. Label this layer "Freesia".

Next Duplicate this layer one time and label it "Blur". Go back into the Effects Browser and drop the Miniaturize Blur effect onto the canvas. The target rope will default to the center of the canvas which is perfect. Set the type to Eliptical, the Blur to 90% and the Transition to 50%. Now drag the blur effect larger till it looks like what is shown.

So far you should have an Original, Freesia and Blur layer in your layers panel. Lower the opacity of the Blur layer to about 40%.

Duplicate the Freesia Layer by holding Option and dragging it to the top of the layer stack and letting go, this is an easy way to duplicate layers and place them where you want.

On this new copy layer drag the Zoom Blur Effect onto the canvas and set it to about 20px. Move the targeting rope to just below the sun to match the existing rays.

Since we want to change this layer into one color, first we need to drag the Desaturate effect onto the canvas.

Next drag the Colorize Filter onto the canvas from the Effects Browser and set the color dial to 100. Change the saturation to 40% and the lightness to 20%.

Change the Blending Mode of this layer to Soft Light. Now we are starting to see a beautiful green color on the grass, but we've also effected the color of our sky which we don't want.

Step 2 - Masking and Layering

To fix this we will right or control click on our layer and choose "Add Mask". Next we'll use a black to transparent, linear gradient to hide the effect from the sky area. Using the Gradient Tool pull from where the sun is to just below the tree line. This will hide the effect from the sky and fade the it into the grass area so we don't have a hard edge line that would look unnatural.

To make the grass almost fantasy-like, duplicate this layer one time. This will increase the sun ray effect and turn up the green color.

Next drag and drop the Starfield photo onto the canvas and place it at the top of the layer stack. To reduce it's size hit Command > "F" and change as needed.

Now change the Blending Mode to Soft Light. You'll notice that our sky is now a beautiful deep blue, but our grass area is way too dark and contains a few stars.

We'll follow the same procedure we learned above, that of adding a mask to this layer and using a black to transparent linear gradient to hide some of the Starfield from the grass area. With the mask thumbnail active, pull the gradient from the top area of the grass to just below the tree line.

Duplicate the Starfield layer to the top of the layer stack and remove the mask from it. Change it's blending mode to "Screen". This adds that beautiful starry mist without adding more color we don't need.

Now add a mask to this layer and using the same gradient we want to fade the stars away into the horizon. Pull the gradient from just above the sun upward a bit as shown.

To lighten the sky just slightly go back to the original Starfield layer and turn down it's opacity to about 32%. Awesome, you finished the photographic part of the tutorial and next we'll move into the UI and text of our sign-up page.

Step 3 - Build the Sign-up Panel

Now we'll make a cool, semi-transparent, frosted glass element to use as our email imput interface. Select the Rounded Rectangle shape tool and pull a 872px wide by 172px high rectangle. Use white as the color, turn the layer opacity down to 47%. In the Shape Settings panel add a shadow to the shape by clicking the checkbox, choosing black as the color, leave the angle at 270 and set the Offset and Blur to just 1px.

If you zoom in to the top-left corner you'll see the little blue handle that you can adjust your corner radius, I'm using 12px. You won't see the pop-up info near your cursor unless you hide the Info Bar from the View Menu. Don't ask me why, I hope they fix this in the future.

Duplicate this shape layer one time and turn it off for now.

Go back to the previous shape layer and while still having the Rounded Rectangle shape tool active go up to the Tool Options Bar and change the Option for "Draw New Shape" to "Add to Shape". This will allow us to add a shape to the same layer.

Now just outside the previous one, pull a new rectangle to 634px wide by 74px high. Move this new rectangle to the center of the larger one and offset to the right side. Finally right or control click and choose Path Composition > Subtract from Shape, to "cut out" the shape from the larger one. Adjust the corner radius of the smaller rectangle as needed.

Now to create a highlight edge on the top, go and turn on our duplicate shape we made earlier. In the Shape Settings panel, uncheck the Fill option and add a white 2px Stroke. Whenever you have a stroke and no fill the stroke will always stay in the Center option by default, which is fine.

We only want the highlight edge to show on the top and corners so we'll need to add a mask to the highlight shape layer and by using our same black to transparent linear gradient, pull from the center upwards until you've hid the bottom half of the highlight as shown.

We need to also add a highlight edge to the bottom of our Email input, "cut out" area. To do this, duplicate the original shape layer to the top of the layer stack. Now just as we can add shapes to a single layer we can also delete individual shapes on the same layer as well. When you have the Shape Tool active you'll notice both the inner and outer rectangles are selected. Click just outside of them on the canvas to deselect them, then click just on the larger rectangle. Once you have just the larger rectangle selected hit delete and you'll be left with the inner rectangle. Uncheck Fill and add a white 2px stroke.

Just as with the larger rectangle, we need to hide the top half of the highlight on the inner rectangle. Add a mask and use the black to transparent gradient to do this.

Step 4 - Beveled Shine

To create a beveled shine effect on our email sign-up element, we need to go back up to the Tool Options Bar and switch back to the "Draw New Shape" Option. Then pull a rectangle as shown, sitting halfway over the existing shapes.

Command-click on the thumbnail of the original shape layer (the one with multiple shapes on the same layer) to get it's selection shape. Then with this selection active go to the new rectangle we just made for our bevel effect and right or control click on the layer in the layers panel and choose "Add Mask".

You can see it hides the rectangle everywhere but within the selection we made. Why not use a clipping mask you say? Because whenever you clip a layer to another that has it's opacity turned down it will take on the same opacity setting. So basically you wouldn't see anything!

Step 5 - Custom Logo Shape

Next let's focus on our simple logo. Select the Elliptical Shape Tool and holding SHIFT, pull a perfect 120px circle. Use #FB3F35 for the orange fill color and finally center the circle in the space left for our logo. Go into the edit mode to show the anchor points, then drag horizontal and vertical guidelines until they snap to the bottom and left anchor points. Double-click to add an anchor point to the indicated area.

Double-click on the point again to change it from a curve to a sharp point and pull it over till it snaps in the corner of the guidelines and we are done with our custom logo shape.

Step 6 - Adding Text

To finish the sign-up page add the text of your choice using different font sizes and weights and center them on the page as shown!

Conclusion

I'm glad we could share how to produce some cool photo effects and overlay vector UI elements to create the ultimate Sign-up page! Try and make your own imaginary product launch page and feel free to share a link to your work in the comments below. If you enjoy these tutorials, please share a link to our site or a specific tutorial with others and if you feel like showing your support, we'd be greatful! See you in our next Pixelmator tutorial.

Hello guys and gals,

We have been so happy to research, build and post free tutorials & resources for the Pixelmator community. It's the reason we started the original Gamrcobe Studios and Blissfully Bold sites, finally moving on to collaborate here at PXM-Tuts. We both love working with Pixelmator and sharing our knowledge for free. We've had many requests for us to add a way for members to support the work we are doing by "buying us a coffee" as it were. This has been very humbling and in the past we've always politely declined. We always want to keep the site free for all and personally hate dealing with paywalls to get at a simple tutorial. We realized a couple of things though, we want those who have the desire to be a part of what we are doing by supporting us in this way, well, to be able to do so. For someone to be appreciative enough to want to reach out and do what they can is rare and awesome!

Two, we want to continue to improve the site to be the most secure, fastest, quality site we can make it. We have many ideas for helping the Pixelmator community that have costs associated with them. One example is we want to be able to pay contributors for quality tutorials in addition to our own, to reach out to those with experience in different aspects of design, drawing, photography, illustration, etc, and invite them to share their techniques with all of you. I'm not mentioning these things because we expect the community to "pay" for these things, that would be absurd. We simply want you to know if you had the desire to further support our work, that is one way we would use it. We want to see how far we can take our little idea of providing high quality, creative tutorials to help all to learn and enjoy Pixelmator like we do! We wish you the best in your endeavors to learn Pixelmator and will always be around to help! If you'd like to contribute to our project head over here. Thanks for your support!

Sincerely,

In this simple Pixelmator photo tutorial we will take an average picture and give it a fun toy camera style to it, adding a viewfinder frame, some grunge, and a colorful vintage effect. If you can't see what's going on, click on the any of the images to see the full size version, then hit the back button in your browser to return to the tutorial.

Resource Links

• Grunge Texture
• Ocean Sunset Photo

Step 1 - Getting Started

First take the photo resource from above and drag it from your desktop on to the Pixelmator icon in your dock. This will open Pixelmator automatically and size the canvas right to the picture. It's a little big so go to Image > Image Size and reduce the width down to something manageable like 1000px wide. Remember when using your own photos make sure to resize and crop them where you want, leaving some room for an inner border before you start this tutorial.

Next add a new layer under your photo layer in the layers panel and fill it with black. Then Command-Click on this new layers thumb-nail to create a selection around the outside border.

Step 2 - Refine Selection

With this selection still active go to Edit > Refine Selection and reduce it's size to about-36px, then hit ok.

Your selection should look like this at the moment.

Now go back to Edit > Refine Selection and as you increase the size back up to about 24px you'll notice the corners start to round. To exaggerate the rounded corners move the Smooth slider to about 47% and finally Feather the edges to about 17% and hit ok.

Step 3 - Add Mask

Now go immediately to the layers panel and make sure the Ocean photo layer is selected, then right or control-click on the Ocean photo layer and choose "Add Mask".

As you can see this turns the selection we refined into a mask, revealing the black layer below it to act as a frame.

Step 4 - Vintage Effect

Make sure the Ocean photo thumbnail is selected and from the Effects Browser (View > Effects) drag and drop the Vintage Effect on to the canvas. You can play with the differing styles to see what you like. I'm using Wormwood with the Saturation at 36% and the Vignette at 45%.

Step 5 - Grunge Texture

Next drag and drop the Grunge Texture onto the canvas and make sure it's above the Ocean photo layer. Hit Command > "F" and with the constrain proportions selected reduce the texture to just outside the canvas. Rotate the texture as needed.

Change the Grunge Textures blending mode to Soft Light and reduce the Opacity to around 37%. You can control how much texture you want by playing with the Opacity.

Finishing Touches

Add another layer above the Grunge layer and fill it with black. Go back to the Effects Browser and drag and drop the noise effect onto the canvas. Turn up the noise a bit until you get the effect shown below. Finally change the blending mode to Soft light and turn down the Opacity until you just barely see some grit on your photo.

Sometimes a texture like our Grunge Texture will have unwanted parts showing on our photos so what I did is add a mask to the Grunge Texture layer and then using a Black to transparent, Radial Gradient I pulled from the center of the canvas outward until I hid a bit of the texture in the middle.

Conclusion

Because we always start with grabbing a selection from the border of the photo, this tutorial will work on all size photos. Remember the larger the photo the harder pixelmator will have to work, so keep them manageable sizes. Also some of the Refine Selection pixels and percentages will vary slightly depending on the photo size and shape as well, you'll get the hang of it after doing a few.

This week we have a nice Drawing Tutorial video contributed by Jackrow. He's a talented artist sharing a simple but effective technique in Pixelmator. In case you miss the exact method we'll cover it below. Sit back and watch him bring his Griffin drawing to life!

Getting Started

So to set up this process you would start by either scanning your drawing onto your Mac and adding it as a layer in Pixelmator, or drawing it directly within Pixelmator. Either way you will turn down the opacity of the drawing layer until it is barely showing. You should have a white background layer at the very bottom of the layer stack to make the drawing layer visible.

Masking Technique

Step 1

Add a new layer above the background layer and below the drawing layer and fill it with the base grey shading color you want to use. This color will be a middle color as we will add shading that will extend darker from this point and extend lighter using white to add highlights to it. Right or Control-click this base grey layer and put it in it's own group.

Step 2

Right or Control-click on the Group layer and choose "Add Mask". Essentially we are creating a boundary where no matter how we let our hand freely draw the mask will help us keep the shading and highlights within the lines. And because we have applied the Mask to the whole group, any layers within the group will receive the benefit of the "Boundary Mask".

Step 3

Now fill the mask you've just created with black by selecting the "Mask Thumbnail" on the group layer. You should see a blue highlight around the thumbnail showing it's active. Then use the fill bucket tool choosing black as the color and click and pull on the canvas. You'll notice our Grey layer entirely disappears. That's what a mask does, hides things!

Step 4

Now to reveal just the part of the grey base layer we need switch to the Brush Tool (B) and choose White as your color. Now paint the edges of your drawing making sure you stay pretty detailed since the mask will define how the edges will look in subsequent shading and highlight layers. Take your time here to get the outline correct. Remember you can switch brush styles and sizes to get the detail you want. Also, if you reveal too much of the grey layer, just hit (X) to switch to the color black and fix the mask, then switch back to white and continue outlining your drawing.

After brushing the outline paint the rest of the inside of your drawing and you'll have created your "Boundary Mask" for the rest of your layers.

Step 5

Finally either on the Grey layer itself or on new layers above it, within the group, add your shading and highlights.

You can also go back when your done and add a layer above the shading & highlights an start adding color to your drawing. Make sure the layers blending mode is in "Overlay".

Conclusion

Obviously it takes a lot of practice and experience with brushes to produce what Jackrow is drawing in his video, but the technique of applying a "Boundary Mask" is effective because you only have to detail the outline once, then you can freely draw the rest of the project without having to "stress" about messing up the edges again and again. We look forward to more great videos from Jackrow and thank him for his contribution! You can see more of his work here.

Though many web buttons today are CSS based and you can download an endless array of free button sets it's still nice to be able to build one yourself. Maybe your mocking up a design and need a quick custom button or just honing your Pixelmator skills a bit. We'll show you the separate subtle elements that can make up a simple button and how to build them up into one stylish little clicker. Remember you can click on the tutorial images to enlarge them and hit the back button in your browser to return to the tutorial!

Step 1 - Base Button Shape

With Pixelmators Rounded Rectangle shape we can easily pull out the shape of our button. I'm starting with a 170px x 47px base. Use the blue control in the corner to adjust the corner radius to your liking. I have a 2px stroke positioned center. Any colors will do since this base shape will be covered.

Step 2 - Add a Gradient Over a Shape

First choose a new linear gradient in the gradients palette and replace the black and white colors with #F48847 (light orange) to #E64928 (dark orange). Add a new layer above your Base Button Shape, control-click on it and choose "Add Clipping Mask". A clipping mask will restrict effects to inside the shape or objects below it. Now switch to the Gradient Tool (G) and pull the orange gradient from just above the top of the shape to just below it.

Step 3 - Subtle Drop Shadow

To create a subtle drop shadow we have to hold Option (alt) and drag the Base Button Shape layer down one level in the Layers Panel. This is a fast way to duplicate layers in place in Pixelmator. With this new shape layer selected, check the Shadow option in the Shape Settings Panel and apply the shadow settings shown below.

Step 4 - Side Shading

Next we will add some gradient shading to the bottom and sides of our button, this will give us a slight thickness to our button. First create a new linear gradient with both colors being black. Then choose the color-stop on the right side and in the colorpicker turn the opacity slider to 0%. Now we have a Black to Transparent gradient. Add a new layer with a Clipping Mask just above the orange gradient layer. Pull the new gradient from just outside the button edges to just inside the edges using the SHIFT key to keep it straight. Make sure the sides look the same it may take a few tries to get it just right.

Now turn down the opacity to about 20-30% so it's a very subtle effect.

Step 5 - Outer Stroke

We want the outer stroke to be on it's own layer. Switch to the Shape Tool and holding Option (alt), drag the Base Button Shape to the top of the layer stack in the layers panel to duplicate it. Then uncheck "Fill" in the Shape Settings panel, change the stroke to 1px and choose #AB3311 for the color. Zoom in and adjust the dimensions to 171px x 49px. Re-align as needed, use the keyboard arrow keys to "nudge" in 1px increments.

Now we want the stroke to get lighter towards the top of the button. To do this, add a new layer above the Outer Stroke shape and add a Clipping Mask. Then using a White to Transparent linear gradient, switch to the Gradient Tool (G) and pull the gradient from just above the button to about the middle until you see the stroke lighten at the top and sides.

Finally turn down the opacity of the Lighten Stroke layer until it is a subtle effect.

Step 6 - Top Edge Highlight

We have one last effect to add before we apply some text. We are missing a nice 1px highlight edge at the top of the button. We can easily create this by holding Option and drag to duplicate the Outer Stroke layer to the top of the layer stack. You should have the Shape Tool selected and change the stroke color to white in the Shape Settings panel. Using the resizing handles change the dimensions to 169px wide and 47px high. Finally move this stroke shape down 1px below the darker stroke at the top.

Since we only want the highlight stroke to be along the top edge and slightly on the corners we need to Control-click on the "Top Highlight layer and choose Add Mask. This will allow us to hide part of our stroke without erasing it in any way. Next with the Mask thumbnail selected we'll use our Black to Transparent linear gradient we made earlier. Switch to the Gradient Tool (G) and pull the gradient starting a few pixels below the highlight and move towards the bottom of the button a few pixels. Finally tone down the highlight by turning down it's opacity a bit.

Step 7 - Inset Text

Now for the easy part, switch to the Text Tool (T) and add a label to your button in white. The font I'm using is "Avenir Next Bold" at 14px, which comes with Mountain Lion.

To create a subtle inset or pressed in look on small text, simply hold Option and drag to duplicate the text layer one level below in the layers panel. Change the text color to black and using the keyboard arrow keys, nudge the black layer up 1px. Finally turn down the opacity to about 37%.

Finish

Select all of the layers except for the background and put them in a group. This way you can drag to duplicate copies of the groups and go in and just change the gradient and stroke colors to create new buttons. Everything else should stay the same, though you can make minor adjustments in the layer opacity of different elements to change their intensity.

Additional Styles

Glossy Style

Creating the gloss look is very easy. Just create a white rectangle shape and position it over the top half of the button. Make sure you place the layer in the layers panel as shown below.

Add a Clipping Mask to the rectangle shape and turn the opacity down to 13%. This gives your button the illusion of shine off a glossy surface.

Texture Style

We can add some subtle texture on the surface of our button by first duplicating the orange gradient layer one time and then selecting it. Next drag the Noise Filter from the Effects Browser onto the canvas and adjust the noise to about 2%.

It should look like the button below, you just want a hint of texture.

3D Style

We can make our button look popped up by holding Option and dragging the Base Button Shape layer down one level in the layers panel. Change the color of the Fill and Stroke to the same color of the dark stroke around our button. In this case I used #AB3311 as the color. Finally move this shape down a few pixels with the keyboard arrow keys. Make sure to move the Drop Shadow layer down as well so it peeks out from bottom of the new shape we've made.

Different Colors

Changing button colors is easy. Add new layers with Clipping Masks and pull any color linear gradients you can think of. You'll need to change the outline shape color as well. To get the right color for each new outline stroke, first I use the magnifying glass in the Colorpicker to sample the darkest part of the color gradient I'm using. Then with the Colorpicker in Colorwheel mode you can use the right hand slider to darken that color just a bit further for your outline stroke to stand out.

Conclusion

I hope you've enjoyed this Simple Button tutorial! Please subscribe or follow us for a unique Pixelmator tutorials each week. If you make cool stuff in Pixelmator, join our Flickr group and share your stuff!

The Brush Tool, Filters, the Gradient Tool, Layer Masks and other features of Pixelmator are used in this tutorial.

Resources

• Landscape Stock Photo by Andrew Kudrin
• Desert Stock Photo by Stephen Hill
• Tortoise Stock Photo by elChrizzo
• Rock Stock Photo by dynamosquito
• Moss Stock Photo by Firehouse Designs

Step 1

Open Pixelmator and create a new document. The image size used in this tutorial is 1000x600 pixels. Then, drag the stock photo of the Landscape onto the Pixelmator canvas. Rename the new layer to “Landscape” and use the Move Tool (V) to position it as in the example below.

Next, alter the colors of the image and make them less vivid. First, choose View > Show Effects to open the Effects Browser. Then, choose the Color Adjustments group in the Effects Browser and double-click the Brightness thumbnail. Set Brightness to 10% and Contrast to 5% and click OK.

Next, click the Hue thumbnail in the Browser. Set Saturation to -30% and click OK. Then, click the Color Balance thumbnail. Select the Midtones tonal range in the Color Balance dialog. Then, set the Cyan/Red to 10% and Yellow/Blue to -10%. Next, select the Highlights tonal range and set the Cyan/Red to 10% and Yellow/Blue to -10%. Finally, click OK.

Step 2

Now, drag the image of the desert onto the Pixelmator canvas and rename the new layer to “Desert”. Control-click the layer and choose Add Mask from the shortcut menu. Then, select the Gradient Tool (G) and fill the mask with a black to white gradient as in the example below.

Next, choose the Color Adjustments group in the Effects Browser and double-click the Levels thumbnail. Set Black to 30% and Gray to 65%. Click OK. Then, double-click the Exposure thumbnail. Set Exposure to -25% and click OK.

Step 3

Drag the image of the tortoise onto the Pixelmator canvas and rename the new layer to “Tortoise”. Use the Polygonal Lasso Tool to select the outline of the tortoise. Then, choose Edit > Refine Selection. Set Smooth to 20% and Size to -2 px and click OK. Choose Edit > Transform and reduce the size of the tortoise to 70%. Then, use the Move Tool (V) to position the image as in the example below.

Now, let’s enhance the colors. Choose the Color Adjustments group in the Effects Browser and double-click the Levels thumbnail. Set Black to 5%, Gray to 50% and White to 80%. Click OK. Then, choose the Sharpen group in the Effects Browsers and double-click the Sharpen thumbnail. Set Sharpness 40% and click OK.

Step 4

Next, Control-click the “Tortoise” layer and choose Add Mask. Then, select the Brush Tool (B) and choose a soft rounded brush. Control-click anywhere on the canvas to open the shortcut menu. Set Diameter to 35px and reduce the Hardness to 0%. Then, add strokes of the brush in the layer’s mask to hide the lower part of the tortoise in the sand. The final result should look similar to the example below:

Step 5

Add a shadow underneath the tortoise. First, create a new layer and name it “Shadow”. Then, select the Brush Tool (B) and use the same brush as in step 4 to add strokes of black underneath the tortoise. Use the image below as an example. Then, choose the Blur group in the Effects Browser and double-click the Motion thumbnail. Set the Radius to 10px and Angle to 90 degrees. Click OK. Finally, reduce the “Shadow” layer’s Opacity to 30%.

Step 6

Now, duplicate the “Shadow” layer. Set the new layer’s Blending to Soft Light and increase the Opacity to 100%. The final result should look similar to the image below:

Step 7

Drag the image of the rock onto the Pixelmator canvas. Then, use the Polygonal Lasso Tool to select the outline of the rock. Choose Edit > Refine Selection. Set Smooth to 10% and Size to -1px and click OK. Next, cut and paste the selection into a new layer and name it “Rock”. Delete the original layer with the rock image as it will no longer be used.

Next, choose Edit > Transform and reduce the size of the rock to 65%. Finally, use the Move Tool (V) to position the rock as in the example below:

Step 8

Now let’s make the colors of the rock less vivid. Make sure that the “Rock” layer is selected and choose the Color Adjustment group in the Effects Browser. Then, double-click the Brightness thumbnail. Set Brightness to 50% and Contrast to 30%. Click OK. Next, double-click the Exposure thumbnail and set Exposure to -20%. Click OK. Then, double-click the Hue thumbnail and set Saturation to -30%. Click OK.

Next, fine-tune the sharpness of the rock to make it appear more defined. Choose the Sharpen group in the Effects Browser and double-click the Sharpen thumbnail. Then, set Sharpness to 20% and click OK.

Step 9

Let’s make the rocks gradually blend in with the tortoise’s shell. Control-click the “Rock” layer and choose Add Mask. Then, use the Gradient Tool (G) to fill the mask with a black to white gradient as in the example below.

Next, hide the upper part of the shell that is not hidden by the rocks. Select the Brush Tool (B) choose use the same brush as in step 4. Add strokes of black in the “Tortoise” layer’s mask to hide the part of the shell that is visible behind the rocks.

Step 10

Now, add some wear and tear to the tortoise’s shell by applying a moss texture. Drag the image of the moss onto the Pixelmator canvas and rename the new layer to “Moss”. Make the image transparent by reducing the “Moss” layer’s Opacity to 50%. Then, choose Edit > Transform and reduce the image’s size to 60%. Use the Move Tool (V) to position the moss texture as in the example below.

Next, make the colors of the image a bit blander. Choose the Color Adjustment group in the Effects Browser and double-click the Hue thumbnail. Set Saturation to -30% and Lightness to 5%. Then, click OK.

Step 11

Now, hide the unnecessary part’s of the moss texture. First, make sure that the “Moss” layer’s Opacity is set to 50% and Control-click the layer. Choose Add Mask from the shortcut menu. Then, select the Brush Tool (B) and open the Brushes Palette. Choose View > Show Brushes. Now, select a rounded brush and set Hardness to 90%. Add strokes of black in the “Moss” layer’s mask to hide the parts of the image that are situated outside the outline of the tortoise’s shell. After you’re done, set the layer’s Opacity to 100%. The final result should look similar to the image below:

Step 12

Next, select the brush that situated second from the left in the third row of the Brushes Palette. Use this brush to make the transition from moss to rock a bit smoother. Add strokes of black in the “Moss” layer’s mask near the edges of the tortoise’s shell and where the rock meets the moss. The result should look similar to the image below. Finally, set the layer’s Blending to Overlay.

Step 13

Now, let’s apply the moss texture to the tortoise’s head and front legs. First, Control-click the “Moss” layer and choose Duplicate from the shortcut menu. Select the new layer’s mask and choose Edit > Fill. Select black as the color and click OK. Then, use the same brush as in step 4 to add strokes of white over the tortoise’s head and legs. This should reveal part of the moss texture as in the example below. Finally, change the layer’s Blending to Soft Light.

Step 14

Finally, add some lighting to the tortoise’s body and shell. Create a new layer and name it “White”. Then, select the Brush Tool (B). Use the same brush as in step 4 to add strokes of white over parts of the tortoise’s body as in the example below. Then, choose Blur group in the Effects Browser and double-click the Gaussian thumbnail. Set Radius to 10px and click OK. Last, change the Blending to Overlay and reduce the Opacity to 70%.

Conclusion

And that’s it! Seamlessly merging different images is the key to creating a realistic photo manipulation. In this case, Layer Masks and the Brush Tool were the most important tools that were used to create a satisfying result.

Resource Links

• Vintage Grunge Pattern
• Scratched Metal Texture
• Screws & Rivets Brush Set
• Governor Font
• Wisdom Script Font
• Chrome Gradient Set
• Shining Angle Gradient

Step 1 - Main Circle

First fill your background with an offwhite color. Then we'll start with choosing the Elliptical Shape tool and holding SHIFT drag out a perfect 340px circle. Uncheck Stroke and change fill color to a nice vintage red, I'm using #BB1811

Next Duplicate the Circle Shape by holding Option (alt) and dragging the shape layer up one level in the Layers Panel. Then turn on the Stroke and uncheck "Fill", this will make the stroke default to the center option. Set the stroke color to Black and the width to 8px.

Now drag and drop one of these Vintage Textures onto the canvas. Move it between the two existing shape layers, control-click and choose create clipping mask. Finally change it's blending mode to "Overlay".

Next duplicate the texture layer one time, again by holding Option and dragging the layer up one level in the Layers Panel. Change the Blending Mode to Multiply and turn down the opacity to 33%. If it's not already, make sure this layer is "clipped" to the layer below it.

Now we will make an inner shadow on this circle. Add a new layer just above the texture layers. Use the rectangle Marquee Tool and create and fill a box around the circle with black. I've turned down the opacity just so you can see. Next using the Elliptical Marquee Tool, hold SHIFT and pull a perfect 332px circle. Center the circular selection and hit delete to "cut out" a circle from the black square.

After using Command > "D" to deselect, go to your Effects Browser and drag and drop the Gaussian Blur Filter. Duplicate this layer one time and Merge the two layers.

Next simply control/right click and "Add Clipping Mask" and your inner shadow should just show inside the red circle.

Ok let's stylize the outer stroke layer. First add a new layer above the Stroke Shape layer and add a clipping mask to it. Now switch to the gradient tool and pull the Shining Angle Gradient from the center and rotate to make sure one of the highlights is located at the top edge. Finally select all of the layers we have created so far and put them in a group named "Inner Circle".

Using the Elliptical Shape Tool pull a perfect circle holding SHIFT and dragging to 400px. Fill with black and choose no stroke. Center this shape on the canvas and place the layer just above the background layer and under the Inner Circle group.

Step 2 - Blue Name Plate

Next lets start building the name plate. Switch the the Rectangular Shape tool and pull a 408px wide by 132px high rectangle and move it till it snaps to center on the canvas. Sometimes you can turn down the opacity of a layer to see behind it as I've done here.

Now we want to arch the sides of the rectangle so right click on the shape and choose "Make Editable". This will reveal all of the anchor points. Double click along the top center of the rectangles edge to add a new anchor point. The new point we've placed is by default a bezier curve. So all we have to do now is drag the point itself upward a bit to create the arch we want. Drag out a center guideline to set the point just right if you need it.

Repeat the same process and create an arch on the bottom of the rectangle.

To add a gradient to our shape, add a new layer above the shape and control/right click and add a clipping mask. Then switch to the gradient tool and pull our blue linear gradient from the top to the bottom. For this simple two color gradient use #509DBA (light blue) and #1A5780 (darker blue).

Time to add a little texture to our name plate. Add a new layer above our gradient we just pulled and fill it with black. From the Effects Browser drag and drop the Noise Filter onto the canvas and set it to about 15% with Monochrome checked.

Control/right click on the noise layer and add a clipping mask. Change the blending mode to "Screen" and turn down the opacity to about 27%.

Next in the layers panel, go back to the name plate shape and while holding option, drag the layer to the very top of the layer stack and name it "Outline". This will create an exact duplicate. In the Shape Settings check the stroke option and uncheck the fill option. Set the stroke to 4px and the color #1A5780 (blue).

Now we want to make the outline look like a beveled edge so we'll add some light and shadows to it. On a new layer above the outline shape add a clipping mask. Then switch to the gradient tool and pull a white to transparent, radial gradient from just above the name plate for just a hint of light shine Duplicate this highlight one time.

Now add another layer and add a clipping mask to it. This time pull a black to transparent radial gradient a little below the name plate for the shadow along the bottom.

Switch to your eraser tool and choose a 40px brush. With the black gradient layer still selected, erase the very top section of the outline. This will remove any shadow from the top edge.

Now we need to create a custom drop shadow that only shows under the bottom of the name plate, within the red circle. First holding Option, drag and duplicate the name plate shape layer, then control/right click the layer and choose "Convert into Pixels". This will allow us to blur the layer.Shut off the Blue Shape for now so we can see what we are doing.

Alot is happening in the next slide, first drag the Gaussian Blur Effect onto the canvas and blur the shadow about 8px. Then duplicate the shadow layer once and merge them into one. This will intensify the effect.

Now we need to remove the excess shadow. Start by using the Elliptical Marquee tool and while holding SHIFT, pull a perfect 332px circle off to the side of the canvas.

Making sure your in the first selection mode in the Tool Options Bar, hover your cursor over the selection and drag till it snaps to the center of the canvas and just around the red circle.

Next switch to the "subtract" mode and pull an oval selection as shown below. This will cut off some of the extra selection we don't need.

Now go to Edit > Invert Selection and hit delete and you should have left what is shown below.

Select all of the layers for the blue name plate including the shadow we just made and put them in a group named "Blue Sign".

Step 3 - Metal Surround

Let's go back and work on a metal surround to our sign. Select the Outer Metal Shape layer and switch to the Rectangular Shape tool. Since we want to add a shape to the same layer we need to go up to the Tool Options Bar and select "Add to Shape". Then pull a rectangle about 442px wide and 154px high and center it on the canvas. Just like we did with the blue sign, control/right click on the added shape and "Make Editable". Double click to add bezier curves and pull them above and below the rectangle to match the arch of the blue sign.

Now we can style our Outer Metal Shape with the same Shining Angle gradient we used on the inner Circle. First add a new layer just above the shape and add a clipping mask to it. Then pull your gradient from the center and rotate it until the highlight is offset slightly to the right of the top.

Next we need some texture so drag and drop this Scratched Metal texture onto the canvas just above our last gradient layer, desaturate it and add a clipping mask to it. Change the blending mode to "Difference" and reduce the opacity to around 80%. You can use the Move tool to move the Scratched Metal texture around and get the scratches in a position that looks good to you.

Next add a white to transparent radial gradient highlight to the top of the Metal Surround. Make sure to use a clipping mask to keep it only on the metal itself. Turn down the opacity to between 70-80%.

Now let's add an outer bevel effect like we did on the blue sign. Simply select the Outer Metal Shape layer and hold Option to drag and duplicate the layer, placing it just one spot below. Turn off the Fill and turn on the Stroke and set it to 4px. You'll notice this creates a nice outline from behind the Outer Metal Shape.

Add a new layer just above our Outer Metal Border shape and add a clipping mask to it. Then pull a black to transparent radial gradient starting just below our graphic to give the bottom of the bevel some shadow.

We want to add some subtle lines to define the shape of our sign. Choose the Line Shape tool and make sure you switch back to the "Draw New Shape" mode in the Tool Options Bar. Add the lines shown just to one side of the sign. Then merge your line layers into one and duplicate the merged layer once. Finally go to Edit > Flip Horizontally and move the duplicated line over to the other side. This save you some work. Group the two line layer together and turn down the groups opacity

Step 4 - Finishing the Name Plate

Switch to the Brush Tool and use a 16px, black screw brush from the "Screws & Rivets" brush set. Set each screw on it's own layer and arrange them as shown. Select them and put them in a group named "Black Screws".

Now Command-click on the Thumbnail of the screws group to grab the selection shape and on a new layer fill with white. Command > "D" to deselect when done.

Take the Screw Highlight layer and place it below the Black Screws group. Move the highlight down 1px with the move tool and down arrow key. Finally Gaussian Blur the highlights at 0.09% and set the blending mode to "Overlay".

Next we'll focus on our retro text. Choose the Text tool and pull a bounding box from one end of the Outer Metal to the other. I'm using this font called Governor at 72px in white as a base.

Duplicate the Text layer and change it's color to a darker blue ( #899765 ). Move the text down a few pixels from behind the white text as shown.

Duplicate the text we just moved and change it's color to an even darker blue ( #908765 ). Move this layer down just 1px so it barely peeks out.

Convert this last text layer to pixels and add a 1px Gaussian Blur.

Repeat this process this time using the Wisdom Script font at about 30px. Make sure to group each of the text layers under the name of what you wrote.

Step 5 - Stars

Next we'll add a couple of decorative stars and give them some depth using shadows. Choose the Star Shape and holding SHIFT pull a perfect 30px star in white. Then duplicate the star shape and change the color to a darker red ( #270403 ). Move this layer down a couple of pixels.

Duplicate the dark star one time and convert it to pixels. Then apply a slight Zoom Blur to it from just above the star and change it's blending mode to "Overlay". If you haven't already Group these layers and name them "Top Star".

Finally duplicate the Star group and move the new star down to the bottom part of the red circle. Rename this group "Bottom Star".

Step 6 - Sign Pole

We are almost done, let's add a realistic sign pole to our design starting by pulling a Rectangular Base Shape as shown. Make sure your shape layer is behind all of the other layers and just above the Background layer. Next add a new layer just above the Pole Base layer and add a clipping mask to it. Next pull one of the Chrome Pipe gradients horizontally.

To add a brushed metal texture, duplicate the Chrome gradient layer, add noise to it and finish with an angled motion blur.

Drag and drop the same Scratched Metal texture we used earlier and add a clipping mask to the layer. Change the blending mode to "Difference" and turn down the opacity to about 50%. If needed move the Scratched Metal texture around with the Move tool until you get it were you want it to be.

Add a clipped layer just above the Scratched Metal texture and pull another Chrome Gradient horizontally. I choose the gradient with the nice dark line in it. Finally change it's blending mode to Overlay and turn down the opacity to about 60%.

Since the Pole is under the center of the sign it needs a more realistic shadow. To achieve this we simply Command-click on the Outer Metal groups thumbnail to grab it's selection shape and on a new layer just above our last Chrome gradient fill with black. Next apply a nice flared out Zoom Blur as shown.

Finally add a clipping mask to this shadow layer and it will only appear on the Pole itself! Turn down the opacity of the shadow as needed.

Finish

Awesome! You finished this fun retro gas station sign. Here are all of the layer groups you should have in your Layers Panel.

Now you can Shut off the background layer and export the sign graphic as a PNG file. Add it to a cool city skyline background image. Make your city skyline image black and white and apply a slight Gaussian Blur to create a depth of field effect. Finally try to play with the different Vintage Effects Found in the Effects Browser to apply to the sign itself and you've got yourself a rad retro scene you built from scratch!

Conclusion

We hope you had fun with this tutorial and where challenged to learn or just improve a few techniques along the way. If you want to support what we are doing here, the best way is by telling others about our tuts, a simple tweet or like is always appreciated! Feel free to share your version of this tut in the comments below.