Step 1:  Create the base of the floral.

Start with opening a new layer, CTRL+ Shift + N.  Work off this layer to start.

Select the pen tool (P) and then using the path tool create a basic shape.

If you need to edit the shape because you don’t like the way it came out, use the Convert Point Tool, to modify the points.

Step 2: Fill the path.

Open up the Paths window and right click the current path and choose, fill path, color: black.  To get rid of the path outline, press delete.

Step 3: Repeat

Start a new layer with CTRL + Shift + N and using the Pen tool again, create another section of the floral, adjust, and fill with black.  Continue creating paths on new layers until you have your desired base.

Step 4: Create a leaf or flower on a new path using the same method as creating the base.  On the same layer as the leaf, create an additional path for the stem and press Delete to remove that area of the leaf.

Duplicate and transform the leaf layer to different angles and sizes and place around the base in different locations.

Step 5: Create the brush.

To turn the entire piece into 1 large brush, CTRL + Shift + Left Click the layer mask of each layer so that all of the paths are selected.  Go to Edit, Define Brush Presets, set an appropriate name, and save.

Now CTRL + D to cancel selections, and CTRL + Left Click each layer you want to create a brush for separately.

You should now be able to locate each brush you created in the Brush Preset picker.

If you have any questions, please ask!

Anyone is more than welcome to download this .psd and use it as their own for personal or commercial projects.  I do not require any credit, though I would not mind being mentioned, or at least a link back to this post.
Thanks!

Download .psd and .abr here.

Finished Product:

All of my work for this tutorial will be based out of Adobe Photoshop CS3.  I’m sure you could do almost all of this in future versions of photoshop and there would be little change if any at all.

PSD file can be downloaded Here.

First, we will start by creating a new file with the following attributes:

Name: Mobile User Interface
Width: 480 pixels
Height: 800 pixels
Resolution: 72 pixels/inch
Color Mode: RGB Color 16 bit
Background Contents: White

Next, I always like to divide my screen in half vertically and horizontally:

Now we need to create a nice background for the application.  I usually like gradients because they are very pleasing to the eye, however you can use whatever color you want.  After all, this IS going to be your application.

Left stop color: 006a52
Right stop color: 003e30

Choose the gradient tool from the toolbar or press G to choose it, and drag it from the center to the upper right corner as you will see in the following picture.  This will give you a nice clean gradient for the background and some good color to work with.  Here is the before and after:

Next, we are going to need some buttons or controls for the user to be able to select different options.  Obviously, you can do these whatever way you like, but for this tutorial we are going to do a basic square button.  Can’t really go wrong there!

First we will start by creating the spots where the buttons are going to go, and then we will create the actual buttons.  Split the left half in half, as well as the right, top, and bottom.  This should give you 16 equally sized boxes on your screen.

Now, for the buttons!  We will create 1 button almost completely, and then duplicate it to get the rest them the exact same.  After that we will add finishing touches, like the icon that will be in the middle.

Create a box with the Rounded Rectangle Tool that is 150px by 150px and has a radius of 20px.  After the box is created, click the Add Layer Style button so we can spruce it up a bit.  You will want to add the following parameters.

Drop Shadow:
Size: 10px

Inner Glow:
Blend Mode: Normal
Opacity: 25%
Color:  ffffff
Size: 20px

(Just about everything else should be left default… hoping that your defaults are the same as mine.  If not, try to match them up the best you can.

This should give you the base of our button and appear as so.

Create a New Layer by pressing Ctrl+Shift+N.  This will be for the gloss we will put over the top of the button.  Go ahead and name it Button Gloss and click OK.

Next, grab the Elliptical Marquee Tool and outline a circle over the top of the button like so:

Set white as your foreground color and then open the Gradient Editor and choose the pre-made, Foreground to Transparent gradient.

Drag the gradient from the bottom to the top as seen in the next picture and the results should be similar to what follows:

Alt+Left Click between the Button Gloss layer and the Button layer and that should clean up the excess garbage from around the edges of the button.  (Alt+Left Click right where you see the red X.  The results will follow)

Next, set the opacity of the button gloss layer to 40% or whatever you feel looks good.  Results will vary depending on how small you stretched the gradient over your button gloss layer.

Now we will duplicate the button and gloss layers and create 5 more of the exact same for the rest of the buttons.  CTRL+Left Click the Button Gloss layer and the Shape 1 layer so that they are both highlighted, and then right click and choose Duplicate Layers.  Spread them out where you would like them and repeat until you have all of your buttons.  Mine looked like the following after I created all of the buttons.

Next, you can add icons of your choice over the top of the buttons.  I chose to use the Custom Shape Tool and use some default shapes.  They usually come out looking pretty nice in the end.  Once that has been created, I usually add a few effects to make it look cut out and rounded.  I like to add a Gradient Overlay with similar colors to the background, and then an Inner Shadow.

Here are the results of my first button.

Now just go ahead and repeat the process for each additional button.  This is how mine looked when I finished.

To add some flare to the background, I took another shape and blew it up really big and set the same layer style as all of the icons on the buttons.  Then I put it behind every layer accept the background, and set the opacity to 20%.  This gave me a background which wasn’t so boring.

Lastly, I created a New Layer and called it Top Bar.  This is what we will use to put the name of the application on.  Grab the Rectangular Marquee Tool and create a box over the top of the image and fill it with your desired gradient.  I chose a black to dark gray gradient and filled it from bottom to top.  I then added a drop shadow and a stroke to give it some additional dimension.

Add the desired text to the top and choose the style you like the most.  I added a gradient stroke, inner shadow, and color overlay for the text.  My final application UI came out looking as follows.

I hope that you have enjoyed making the UI as much as I have.  Like I said, this was my first attempt at creating a tutorial so feedback would be greatly appreciated.

PSD file can be downloaded Here.

Please, for all you animal lovers out there, submit a recipe and help out the ASPCA. You have nothing to lose, aside from maybe a meal if you are a bad cook

I will post images from our soup bowl as soon as I get the files uploaded!