Last week we've linked the Tinysong site in our Sites of the Week. Beyond being a great app, it has an really well executed design, and I thought it would be a good idea to reproduce the same design and make a fireworks tutorial out of it.

For this tutorial we're not gonna apply any great effect or use a unknown tool, but only show you a simple way of making neat effects that will make the difference in a layout.

STEP 1 - NEW DOCUMENT

To begin, open a new 600 x 600px document, background #BFD2E5.

STEP 2 - RECTANGLE

Let's build a white Rounded Rectangle, size 578 x 555px. Make the spacing as shown, a little bigger bellow, so we can place a final element there. Build this rectangle with small rounds, so this can be really soft. Apply a Drop Shadow with values 1 - 50% - 2 - 270º and color #46586A.

STEP 3 - BOX #1

In order to make the background of what will become our textfield, we're gonna use 3 overlayed Rounded Rectangles. In all of them, we're gonna apply a lineat gradiente, and notice that they get 2px smaller as we create them. 2px less tall and wide... doing that, we're gonna achieve the illusion we're want. Just follow the instructions bellow.

STEP 4 - ALIGN THE RECTANGLES

Here you can see how the 3 rectangles are displayed. After making placing them in this order, select all 3, vertical and horizontal align them, to be sure that they will be well centralized. After that, group them.

STEP 5 - SHADOW AND REFLEX

To finish Box #1, let's apply a little shadow and reflex effect. Both effects will be done using rectangles as well. To make the shadow (1), make a rectangle as shown and apply a Feather 3 and Alpha 55. After that, place this layer under the rectangle group we've done before. To make the reflex, make a rounded rectangle at the base of the rectangle group and apply a linear gradient, colors #E6EEF5 to #FFFFFF. In the #FFF side make a Alpha 0. Done that, apply a Alpha 90 for this whole rectangle. Take a look at the end of this image how the layers are ordered.

STEP 6 - BOX #2

For this box, we're gonna do the same process we've done in step 3. Notice the gradients colors and the rectangle sizes. After doing all 3, vertical and horizontal align as well, and group them. Place this new group bellow the reflex we've done in the last step.

STEP 7 - SHADOW

Here we're gonna create the shadow rectangle we've done before. Copy it and place it as shown, in Box #2 group.

STEP 8 - TEXFIELD

To build the textfield, we're gonna use 2 rectangles. Both of them will be #FFFFFF. For the first one, make a 1px #D6E4F0 border. Make the second one above it and make a 1px #93AEC7 border and move it 1px up. Look at the image how the rectangles must be displayed.

STEP 9 - SEARCH ICON

The icon we're about to build will be done with a Doughnut and a Rectangle. Place them next to each other and rotate them a little bit. Select both elements and go to Modify > Combine Paths, Union. Position the figure nex to the textfield and apply a Linear Gradient, colors #99ABBB to #5D768C. Notice that we gotta create an inner shadow in this figure. After that, duplicate this layer, delete the Inner Shadow and use a solid #F3F7FA. Move this lighter layer beneath the other. After that, move it 1px down to make a 3D look. Take a look at the image to see how the icon 2 layers should be.

STEP 10 - ELEMENTS

Now that we've got everything done, use other elements to compose the layout, such as a logotype, some texts, and a logo at the footer.

FINAL RESULT

The final result is quite similar to Tinysong's layout, but we could play a little bit applying other colors. I hope you all enjoyed it, and feel free to show your results here.

About the author

I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.

Sponsored Links: