How to Create Your Own UI Planner in Photoshop

On 22 Jan, 2012 By With 9 Comments

I’ve been experimenting with the planner app I found on Google, after a couple of minutes I had a “what if” moment. Then I open my good ‘ole pal Photoshop and started throwing some pixels, minutes later I am done with the design.

Today I will show you how to create your own planner UI in Photoshop, I am pretty new on UI design so if there are UI Ninja’s out there you’re opinion is much appreciated. 🙂

You can download the PSD at the bottom of this tutorial!

UI Planner

UI Planner How to Create Your Own UI Planner in Photoshop

Let’s Begin

1 canvas1 How to Create Your Own UI Planner in Photoshop

Open your canvas (CTRL + N) and set the width to 450px and height 300px.

2 bodylayer How to Create Your Own UI Planner in Photoshop

Grab your Rounded Rectangular Tool (U), set the radius to 3px and create the same shape as above. Name this layer index.

3 body innerglow How to Create Your Own UI Planner in Photoshop

In your index layer, right click > Blending Option > Inner Glow set the color to 2b2727, leave the rest to default.

4 header How to Create Your Own UI Planner in Photoshop

Create a new layer (CTRL + SHIFT + N) and select Marquee Tool (M) draw the rectangle shape and fill it with #bababa. Name this layer main-header

5 header light How to Create Your Own UI Planner in Photoshop

Create a new layer again (CTRL + SHIFT + N), using your Marquee Tool (M) create a rectangle half the shape of the main-header layer, fill it with #c0c0c0. Name this layer light-header.

6 header line How to Create Your Own UI Planner in Photoshop

Now on new layer, select Single Row Marquee Tool (M) and create a 1px line at the bottom of main-layer, use the color #a2a1a1 Opacity 63%. Name this line-header-dark, do not deselect the Marquee Tool yet, create a new layer again and use color #ffffff. Name this light-header.

8 header line zoom How to Create Your Own UI Planner in Photoshop

On your keyboard, select light-header layer and press arrow key down once. This will move the layer 1px.

9 header title text How to Create Your Own UI Planner in Photoshop

Type in those text, I use Arial Bold 22pt, fill it with #686767.

10 header title dropshadow How to Create Your Own UI Planner in Photoshop

In Drop Shadow, set Blend Mode to normal and distance, size to 1px.

11 header text innershadow How to Create Your Own UI Planner in Photoshop

Inner Shadow distance and size to 1px, color #787878.

12 header text stroke How to Create Your Own UI Planner in Photoshop

Stroke change the color to #ffffff and size to 1px.

13 header complete How to Create Your Own UI Planner in Photoshop

Here’s a preview of our header, looking good? Moving on!

14 sidebar body1 How to Create Your Own UI Planner in Photoshop

Create a new layer (CTRL + SHIFT + N) and select Marquee Tool, draw the shape same as above. Go to Filter > Noise > add Noise, set it to 1% and hit OK. Name this layer sidebar.

15 sidebar innershadow How to Create Your Own UI Planner in Photoshop

On your sidebar layer, Inner Shadow set the angle to 51% and color #a5a3a3 and size to 10px.

16 sidebar date How to Create Your Own UI Planner in Photoshop

Now create a date number I use Arial Bold 36pt color #91ab16.

17 sidebar date dropshadow How to Create Your Own UI Planner in Photoshop

Drop Shadow Blend Mode is set  to normal, color is #ffffff distance and size are default.

18 sidebar date innershadow How to Create Your Own UI Planner in Photoshop

Inner Shadow’s color #8fae11 and angle 51%, distance and size set to 1px.

19 sidebar date stroke How to Create Your Own UI Planner in Photoshop

Stroke’s color #ededed and size set to 1px.

20 sidebar day How to Create Your Own UI Planner in Photoshop

Here is the effect of what we’ve done. I added the day text, font is Arial 13pt color #c0c0c0.

21 sidebar day dropshadow How to Create Your Own UI Planner in Photoshop

Drop shadow’s Blend Mode is normal, color #ffffff and the rest are default.

22 sidebar day innershadow How to Create Your Own UI Planner in Photoshop

Inner Shadow’s color #aeaeae, distance and size are set to 1px.

23 sidebar day stroke How to Create Your Own UI Planner in Photoshop

Stroke size 1px and color #ffffff.

24 sidebar activ How to Create Your Own UI Planner in Photoshop

Type in these text, and select Monday layer right click > copy layer style, now head on to activities layer right click > paste layer style. Save’s us some time.

25 sidebar activ text How to Create Your Own UI Planner in Photoshop

Now I added a few text, I use Arial 10pt color #949393. You can write here whatever you want 🙂

26 sidebar bullets How to Create Your Own UI Planner in Photoshop

Grab your Ellipse Tool (U) and create a circle bullet. Tip: Hold CTRL while dragging the shape to create a perfect sphere.

27 sidebar bullets dropshadow How to Create Your Own UI Planner in Photoshop

Drop Shadow’s color #000000, size and distance is 1px, angle should be 90.

28 sidebar bullet innershadow How to Create Your Own UI Planner in Photoshop

Inner Glow set the Opacity to 57%, color to #ffffff and size to 1px.

29 sidebar bullets stroke How to Create Your Own UI Planner in Photoshop

Stroke’s color #90aa1e and size 1px.

30 sidebar bullets complete How to Create Your Own UI Planner in Photoshop

Duplicate the bullet layers and you should have a good looking list.

31 body menu line How to Create Your Own UI Planner in Photoshop

Grab your Single Row Marquee Tool (M) and draw a line, once selected use your brush and select color #dbdbdb the said line.

32 body menu text How to Create Your Own UI Planner in Photoshop

Type in those text, I use Arial 10pt #6f6f6f, make sure they have equal spacing.

33 body menu icons How to Create Your Own UI Planner in Photoshop

Grab those pixelated icons here, and drag them on the canvas.

34 body content title How to Create Your Own UI Planner in Photoshop

Put those text at the bottom of the menu, I use Arial 11pt color #7e7e7e.

35 body title dropshadow How to Create Your Own UI Planner in Photoshop

In title text Drop Shadow, set the Blend Mode to normal and color #ffffff, distance and size are set to 1px.

36 body title innershadow How to Create Your Own UI Planner in Photoshop

Inner Shadow color is #aeaeae, distance and size set to 1px.

37 body title stroke How to Create Your Own UI Planner in Photoshop

Stroke size is set to 1px and Opacity 66%.

38 body line How to Create Your Own UI Planner in Photoshop

We will use the Single Row Marquee Tool again for creating a line. Set your foreground to #e0e0e0 and fill the area selected.

39 body line guides How to Create Your Own UI Planner in Photoshop

Here is my line guide to help, delete the excess line on the new layer we just created earlier.

40 body texts How to Create Your Own UI Planner in Photoshop

Create a new text and use the line guides before, (I removed them so you can see clearly) Just copy the layer style of title text and were ready for the next one.

41 body content complete How to Create Your Own UI Planner in Photoshop

Duplicate the lines that we created earlier, I also added time text, the font is Arial 11pt #c7c7c7.

42 body save button How to Create Your Own UI Planner in Photoshop

For our save button, select Rounded Rectangle Tool (U) and set the radius to 3px. Fill it with #d9e0b9.

43 body save button complete How to Create Your Own UI Planner in Photoshop

From the downloaded icons, select the tick icon and drag it on the canvas. Type in save, font was Arial 11pt #6f6f70.

44 body complete How to Create Your Own UI Planner in Photoshop

Select Rounded Rectangle Tool (U) and fill it with #e1e1e1, text color and size are the same. Use the cross icon from the file.

45 body shadow How to Create Your Own UI Planner in Photoshop

The hard part is already done, now to make it float we will use Marquee Tool (M) and draw a thin rectangle shape fill it with #545454.

46 body shadow complete How to Create Your Own UI Planner in Photoshop

After that go to Filter > Blur > Gaussian Blur and set it to 5% depending on the shadow effect. Set your Opacity to 48%.

UI Planner How to Create Your Own UI Planner in Photoshop

After that, add some background and you are done! We have our very own UI that we can use on our next development. Feel free to download and use it for your next project.

Now, I wonder how we can use this PSD if we want to incorporate this into an Iphone app? Any ideas?

9 Responses to “How to Create Your Own UI Planner in Photoshop”