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
Let’s Begin
![1-canvas - How to Create Your Own UI Planner in Photoshop 1 canvas1 How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/1-canvas1.gif)
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 2 bodylayer How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/2-bodylayer.gif)
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 3 body innerglow How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/3-body-innerglow.gif)
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 4 header How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/4-header.gif)
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 5 header light How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/5-header-light.gif)
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 6 header line How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/6-header-line.gif)
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 8 header line zoom How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/8-header-line-zoom.gif)
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 9 header title text How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/9-header-title-text.gif)
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 10 header title dropshadow How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/10-header-title-dropshadow.gif)
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 11 header text innershadow How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/11-header-text-innershadow.gif)
Inner Shadow distance and size to 1px, color #787878.
![12-header-text-stroke - How to Create Your Own UI Planner in Photoshop 12 header text stroke How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/12-header-text-stroke.gif)
Stroke change the color to #ffffff and size to 1px.
![13-header-complete - How to Create Your Own UI Planner in Photoshop 13 header complete How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/13-header-complete.gif)
Here’s a preview of our header, looking good? Moving on!
![14-sidebar-body - How to Create Your Own UI Planner in Photoshop 14 sidebar body1 How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/14-sidebar-body1.gif)
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 15 sidebar innershadow How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/15-sidebar-innershadow.gif)
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 16 sidebar date How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/16-sidebar-date.gif)
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 17 sidebar date dropshadow How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/17-sidebar-date-dropshadow.gif)
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 18 sidebar date innershadow How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/18-sidebar-date-innershadow.gif)
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 19 sidebar date stroke How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/19-sidebar-date-stroke.gif)
Stroke’s color #ededed and size set to 1px.
![20-sidebar-day - How to Create Your Own UI Planner in Photoshop 20 sidebar day How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/20-sidebar-day.gif)
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 21 sidebar day dropshadow How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/21-sidebar-day-dropshadow.gif)
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 22 sidebar day innershadow How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/22-sidebar-day-innershadow.gif)
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 23 sidebar day stroke How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/23-sidebar-day-stroke.gif)
Stroke size 1px and color #ffffff.
![24-sidebar-activ - How to Create Your Own UI Planner in Photoshop 24 sidebar activ How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/24-sidebar-activ.gif)
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 25 sidebar activ text How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/25-sidebar-activ-text.gif)
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 26 sidebar bullets How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/26-sidebar-bullets.gif)
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 27 sidebar bullets dropshadow How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/27-sidebar-bullets-dropshadow.gif)
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 28 sidebar bullet innershadow How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/28-sidebar-bullet-innershadow.gif)
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 29 sidebar bullets stroke How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/29-sidebar-bullets-stroke.gif)
Stroke’s color #90aa1e and size 1px.
![30-sidebar-bullets-complete - How to Create Your Own UI Planner in Photoshop 30 sidebar bullets complete How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/30-sidebar-bullets-complete.gif)
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 31 body menu line How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/31-body-menu-line.gif)
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 32 body menu text How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/32-body-menu-text.gif)
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 33 body menu icons How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/33-body-menu-icons.gif)
Grab those pixelated icons here, and drag them on the canvas.
![34-body-content-title - How to Create Your Own UI Planner in Photoshop 34 body content title How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/34-body-content-title.gif)
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 35 body title dropshadow How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/35-body-title-dropshadow.gif)
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 36 body title innershadow How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/36-body-title-innershadow.gif)
Inner Shadow color is #aeaeae, distance and size set to 1px.
![37-body-title-stroke - How to Create Your Own UI Planner in Photoshop 37 body title stroke How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/37-body-title-stroke.gif)
Stroke size is set to 1px and Opacity 66%.
![38-body-line - How to Create Your Own UI Planner in Photoshop 38 body line How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/38-body-line.gif)
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 39 body line guides How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/39-body-line-guides.gif)
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 40 body texts How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/40-body-texts.gif)
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 41 body content complete How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/41-body-content-complete.gif)
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 42 body save button How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/42-body-save-button.gif)
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 43 body save button complete How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/43-body-save-button-complete.gif)
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 44 body complete How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/44-body-complete.gif)
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 45 body shadow How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/45-body-shadow.gif)
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 46 body shadow complete How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/46-body-shadow-complete.gif)
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 UI Planner How to Create Your Own UI Planner in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/01/UI-Planner.png)
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?