Today, the expression “Time is money” is true more than ever, so spending your time wisely is a problem you should think about. Many people are using to-do apps to divide their activities in order to obtain a better work flow or more time to spare with family.

The today`s tutorial is about a to-do app. I want to show you how to design one in Photoshop. If you think to create an app, the design process is the first step, so stay close to us to see what we`ll deliver!

What we`ll be doing today:

First step is to open Photoshop, create a new document of 600×500px. Set the “Background Contents” to “Transparent”.

Build the background by grabbing the Paint Bucket Tool(G) and painting the blank canvas with the gray color #72727d. Convert the layer for filters by going to Filter->Convert for Smart Filters. Then apply a noise filter of 2.5% (Filter->Noise->Add Noise).

A last touch for the background, apply this gradient overlay. It makes it look better:

We have the background done and we can carry on designing the app:

Let`s build the app shape. Select the Rounded Rectangle Tool, put it in “Shape Layers” mode, set the radius to 5px, the color to #f8f7f5 and draw a rectangle of 380×360px. Then apply to it the next blending options:

We have a shape now:

Now I want to show you how to create a nice effect. I want to give the impression of multiple files, one on top of another. For this, duplicate the shape layer and resize it from bottom only with -5px. Also, hide the Outer Glow effect by clicking on the eye in layer`s palette, because we want it only on the first layer.

Repeat the process but resize the shape with only 3px. Now we have a nice base for the app.

Let`s build the header. The header will have 2 rounded corners and 2 straight corners. We`ll use a simple technique to make this possible. Ctrl+Click the shape layer`s thumbnail to reveal its selection. Select the Rectangular Marquee Tool(M), put it in “Intersect with Selection” mode and draw a rectangle starting from above the shape and ending at 55px under the top-margin of the shape. You should obtain a selection which has 2 rounded corners and 2 straight corners as well. Now create a new layer and paint with the Paint Bucket Tool(G) into selection.

Prepare the layer for filters by going to Filter->Prepare for Smart Filters.

Stylize the shape with the next gradient overlay and an uniform-monochromatic noise filter of 2%:

Now repeat the process of creating a shape with 2 rounded and straight corners but make the shape only 23px high (to occupy only the first half of the header). Color it with white and reduce its opacity to 15%.

To make the header look even better, draw 2 lines under the header, first lighter and second darker than the header.

The last touch for the header is a title, added using a nice old classic typeface called League Gothic. Stylize it a bit with a smooth drop-shadow. The header is done.

Select all the layers you used for the header and group by clicking Ctrl+G. Now we`ll work under the header layers to not reveal any further elements over it. So, please create any layer under this group. You can always check out the .PSD file of the tutorial, if you`re not understanding something.

Let`s build the app`s tabs. Grab the Rectangle Tool(U) and draw a rectangle of 380×40px. Make it white.

We`ll build now some shadows…this part is very important. Firstly, create a new layer. Now, grab the Rectangular Marquee Tool(M) and make a selection just under the header, 10px high. Then select the Gradient Tool(G) and set a gradient from black to transparent. With the tool set, create a shadow inside the selection by dragging a vertical line from above the selection until the middle of selection. Now, you should obtain a nice shadow.

Repeat the process and create a similar shadow at the bottom of the white shape.

Now, split the width in 4 to get 4 tabs. Create the current tab by drawing a rectangle of 95×41px and same color as the rest of the app and put it in the place of second tab.

As you did earlier, create 2 shadows on the left and right of the current tab. This will beautify the button and will make it stand out.

The tabs are done. We have to build now the activities list, but before, please download these 2 icons: checked icon and unchecked icon.

The activities in a to-do app should be classified by “done” and “not done”. So I decided to use the unchecked icon and black normal text for undone activities and the checked icon + gray and strikethrough text for activities already made. Separate each activity in the list with 2 lines, which creates a clean in-depth effect.

Now that you know how to do the first one, continue to populate the list with more activities. When you`re done, you`ll finish the design of the to-do app.

As you could see, designing an app is simple, but building one can be harder than you think. At least, the first step has been made and you have a starting point. I thank you for watching me, it was a pleasure to write the tutorial for you and if you have any questions, don`t hesitate to drop them into the comments area. Until then, take a look at what we`ve done today:

Related posts:

1. How to Design a Flip-Clock Countdown in Photoshop
2. How to Design a Sleek Progress Bar in Photoshop
3. How to create a clean and design portfolio layout using Photoshop