How to create a light graphic


In designing the interface for my app, I wanted to have a nice way to display numerical information in a graphically clear and pleasing way. So I came up with the idea of creating a graphic which looks like a light and can be used as a background for labels. I taught myself how to create my idea in pixelmator.

You’ll need pixelmator to follow along. Don’t worry, you don’t need to pay for it, you can download the free trial here.

We’ll be creating a green version of the light shown above for this tutorial. Click on the images to make them larger.

 First create a new file. I made mine at 640×960 pixels as this is the Retina iPhone screen resolution.

Create a rounded rectangle using the rounded rectangle tool. This will become the light component of the graphic.

 

Fill it in blue and set the stroke to transparent. You need to set it to a slightly different color than the one you want it produce in the end as you will apply a filter later.

Create another rectangle, this time with a black fill. This will provide a background and part of the border of the light.

Set its stroke to a greyish color and set it to be on the outside of the shape. This forms the border.

Align it so the grey borders the blue rounded rectangle.

Turn the blue rounded rectangle into an image as shown so we can apply filters to it.

Apply a “Twilight” filter to the blue shape.

Apply a “Honeycomb” filter to the now green rectangle and create another rounded rectangle with a transparent fill and a grey stroke.

Set it to sit around the green rounded rectangle. This forms another part of the border.

Increase the thickness of the black rounded rectangles grey stroke until it looks good.

Apply a “Fog” filter to the green rounded rectangle.

 

Arrange the layers as shown so the light shines over the border.

Add a text layer, and you’re done!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s