As always, this is what we will be creating:

Resources

Francois One Font by Google Webfonts

Free Pretty Little Ribbon by Orman Clark

Superhug Landscape Stock Images

Music Album Cover by 365PSD

Ribbon Texture by Designmoo

Tweeties by Designmoo

Getting Started

Start out by creating a new document that is 1024px by 2110px and fill it with #cecece.

Please note that I will be zoomed in at 100% for most of the duel so we will not be seeing the full length of the document.

Alright, now grab your rectangular marquee tool and drag out a rectangle that is 1024px by 75px. Create a new layer and fill it with #222333.

Alright, now be sure to open up the ribbon texture that we downloaded earlier from Designmoo. Now make a new selection that is 1024px by 15px and line that selection up with the bottom of the block we just created. Create a new layer and fill it with black. We will now lowere our fill to 0% so that nothing is showing up on your layer.

For the next step open up your blending options and choose pattern overlay. Choose the pattern that you downloaded earlier and leave all the values at their default.

Now, when you fill the pattern it will look a little bit funny. You simply need to move the pattern around so that it looks the way it should. Like this:

Awesome, now we just need to give it some color. What you are going to do is right click your Layer 2 and choose “Convert to Smart Object” and then right click again and choose “Rasterize Layer”. Awesome, now we can add a blending option to our layer.

We are going to add a color overlay with the exact same #222333 color that we used earlier. You should now have a flowing ribbon style for your header and its looking pretty spiffy.

Now the next step is to right click your Layer 2 again and choose “Merge Layer Down”. This will merge the two layers, obviously, but it will also allow us to add a subtle bit of noise to both layers and let it flow smoothly.

To add noise go to Filter–Noise–Add Noise and choose .58%, Gaussian, and Monochromatic for your settings.

Awesome, now we have the background for our header. Sexy right? Well let’s get moving then. Go ahead and grab your text tool and choose the Francois One font that we downloaded earlier. Set your font size to 32pt and have the color be #a2d9ff.

Now type out whatever you want for your header. I am going to be using HV-Designs for my header text. Space your header text 55px from the left of your document and 28px from the top of your document.

Alright, now that’s all that we are going to do because other than @font-face I want this tutorial to create a design that is easily rendered in all browsers but if you wanted to add a shadow to the text or other features you are more than welcome to.

And now to add our final piece to the header. Tumblr has an awesome feature that allows someone to ask you questions and you can respond to them so I figured we would include that in this tutorial, and what better way to include it than with an awesome freebie? Open up the ribbon that we downloaded earlier from Orman Clark. Now change the text on it to whatever you want. I removed both stars and simply added a question mark instead.

Once you have that finished you can drag over the whole ribbon group from the PSD file to our document. Now hit CTRL+T and drag your ribbon layers down to be 45px by 70px. A quick but important note, the transform box will not only include the ribbon and that is fine, that is what my scale is set to as well.

Now bring the ribbon over and place it on your document. The ribbon is a little bit too tall for what we are after so you will want to drag the excess of the screen until you have a nice, even spacing between the question mark. It is also spaced 55px from the right of our document.

And there you go. The ribbon comes with a nice shadow already attached to it, which fits perfectly in our design already so we don’t need to make any changes.

Now, you should have this for your header so far:

and this is what your document will look like at full size:

Pretty boring so far at full size but you are now done with your Header and its time to move on to making our first post!

Post Area

Alright, now let’s get started creating our post area. The first thing that we have to do is set up a few rulers. You will want to set up your first ruler at the 40 mark and our second at the 110 mark.

We are going to be using this 70px width of rulers we just set up for our post ribbons. Now, let’s get started on our first ribbon. Set up another ribbon at 135 and another at 170. The 35px height that we just set up will be the height for our ribbon.

Now, grab your rectangle shape tool and set your foreground to #222333. Drag out a rectangle that fits in between the rulers we just set up.

Now grab your pen tool and choose the Add Anchor Point tool, within the pen tool. Add an anchor point in the exact middle of our rectangle. Don’t do anything with it yet but add the anchor point for right now.

Now, in your pen tool area select the convert anchor point tool. Go ahead and click on anchor point we just created and convert it. Now grab your add anchor point tool again and move that anchor point back 12 pixels.

Now, grab a web safe font that you want to use. We are using Oswald, which can be found on Google Webfonts. Set your color to #a2d9ff and user 14pt as the size. Type out a filler date and center it both vertically and horizantally on your menu.

Great! Now go ahead and duplicate your two layers and space it 20px from the bottom of your first ribbon. Now change the text to say xx Notes and change the color to white and size to 11px.

Depending on how you went about changing things you may have to recenter the text, but that’s not very hard so I will leave that up to you guys.

Anyway, our post ribbons are done now and we need to move on to creating our main conent area. Grab your rectangle tool again and change your foreground to white. Drag out a rectangle that is 510px wide by 415px tall and line it up with the very end of our ribbons.

Now move your white box up 30px and to the right one pixel. Now apply a 1px stroke to the box and use the color #c0c0c0. Now everything should line up quite nicely.

Now open up whatever stock image that you chose from Superhug and crop/scale the image down to 480px wide by 315px tall and give it a 1px inner stroke, black. Now drag over your image and space it 15px from the left and 15px from the top, not including your stroke, of your white box.

Now grab your text tool again and choose standard black for your foreground color. Choose whichever web safe font that you want, I am going to be using Verdana, at 14pt. Drage out a text area that is 480px wide by however tall you want to fit in, I am using 40px tall. Since this is a photo post most of the captions are not very long so we are typing out just a quick two sentences.

We want to make sure we cover our basis so we are going to add a link state in the text as well. Just select whatever text you want to use and change the color to #de5400.

Now space it 15px from the bottom of your image and 15px from the left of your content area.

Alright, now time for our tag icon. You could just use a tag icon from one of the millions of icon sets, but I wanted to create our own little icon for this because its pretty easy. Grab your rectangle tool and change your foreground color to #c0c0c0. Drag out a rectangle that is 20px wide and 15px tall. Space it wherever right now because we will be moving it after we are finished.

Now grab your add anchor point tool again and add two points to the rectangle. The top point will be 5px from the top and the bottom 5px from the bottom.

Now convert those points with the convert anchor point tool and then drag them up 5 pixels. This gives us that nice tag icon.

Now go ahead and rasterize your layer as we don’t need this icon to be vector. Grab your ellipse marquee tool and create a perfect 3px circle and space it 2px from the left end of our tab. Hit delete to remove the selection and then you have your tab.

Now hit CTRL+T to enter Free Transform mode and rotate your tag three times while holding the shift key to give it a nice angle.

Now grab your text tool again and choose #c0c0c0 for your color. I am again using verdana at 12pt for the tags. Type out whatever tags that you want to use and then space it 5px from the bottom and 15px from the right.

And there we go, that’s our post area. Now to create more posts you can just duplicate your layers, you may want to group them first, and then resize the post content area to fit whatever you need. The colors are all used the same, so by the preview you can see what we are using.

The font sizes are as follows:

Quote: 18pt Bold

Quote Source: 18pt Bold (same color as ribbon)

Text Header: 30pt Bold

Link: 18pt Bold

Link Source: 16pt

Video Header: 24pt Bold

To achieve the subtle background for the quote just type out a quote and give it a huge size and lower the opacity. Really, that’s all you do to get that super awesome background.

About Me Area

Sweet! Now let’s move on to our sidebar. We need to set up our sidebar spacer really quick. Grab your line tool and change your foreground color to #c0c0c0. Set your size to 1px and drag out a line that is 1950px tall. Space it 35px from the right side of your post area and 25px from the bottom of your header.

Now grab your rectangle marquee tool and drag out a perfect square that is 85px. Create a new layer and fill your selection with #212232. Move your layer over so it is space 25px from your spacer.

Now give it a nice 5px inner stroke with the color #FFFFFF. Yea, it’s white.

Now grab your text tool and choose Francois One, 24pt, and use #212232 for the color. Type out your name and space it 3px from the top of your photo and 25px from the left of your photo.

Now, grab your text tool again and choose Verdana for your font, 12pt for your size, and #1da3ff for your color. Type out your description of yourself. Line it up with your name and space it 10px from the bottom of your name.

Sweet, now open up those awesome icons by Rogie that we grabbed earlier and choose the four icons that you want to use. We will be using the facebook, gowalla, twitter, and wordpress icons, all resized to 20px by 20px. You will want to space your icons 5px from each other, 15px from the bottom of your description, and center them on your description.

Now grab your ecpliticle marquee tool and drag out a perfect circle that is 2px with #b3b3b3 for your color. Duplicate your layer 35 times and space them 5px between each other to create a nice spacer. Space it 35px from the bottom of your icons.

This is what you should have so far:

Links Area

Now grab your text tool and choose #b5b5b5, Francois One for your font, and 18pt as your size. Type out whatever you want for your “links” and center it on your spacer, and 15px from the bottom of your spacer.

Now duplicate your spacer layer and space it 15px from the bottom of your link. Repeat the step as many times as you want for however many pages you want to show in your PSD file.

Search Area

Now, create a new layer. Grab your rectangle marquee tool and drag out a new rectangle that is 285px by 45px and fill it with #afafaf. Space it 15px from the bottom of your spacer and if everything was done right it should be the same length as your spacer and line right up. Duplicate your spacer layer and space it 15px from the bottom of the search bar you just created. For the final touch grab your favorite Magnifying Glass icon, change its color to #9a9999.

Twitter Area

Now, we are going to follow the same principle for our twitter area. Grab your favorite icon for twitter and drag it over. Then set up your tweet header, and tweet area. Our font for the header is Francois One, #1da3ff, 22pt and is a standard Verdana, Black, 12pt for the actual twitter area. The only differences in the spacing is we are using 10px spacing between each of our tweets instead of 15 so it’s not too spread out.

Following Area

Now, for the final piece of the puzzle. Grab your type tool again and use Francois One for the font, #222333 for the color and 24pt for the size. Type out “I’m Following These Guys” and line it up with your spacer and 15px from the bottom of your last spacer.

Grab your rectangle marquee tool again and drag out a perfect square, by holding the SHIFT key, that is 35px by 35px. Create a new layer and fill it with #222333. Now give your layer a 3px white inner stroke to finish it off. Space your layer 15px from your header and line it up on the left with your header. Now duplicate your layer so you have two rows of eight (8), spaced 8px from each other.

And that is all you need to do. To finish off your theme duplicate your top layer, flip it horizantally, and move it to the bottom. You may want to make it a little bit smaller, but the exact size is up to your preference.

Conclusion

As alwaysI hope that you enjoyed the first part of this tutorial. In Part II we will be designing the actual pages themselves before moving on to converting the theme to HTML, and then of course to Tumblr! I would love to see what you guys come up with for the tutorial. At the end of the series you will be able to purchase the entire tutorial series source files from the HV-Shop.

As always this is what we will be creating:

Resources

Pixel Patterns V2 by Rich Hemsley

50 Free Menu Android Icons by AndroidIcons

Cabin Font by Google Fonts

Gettings Started

Start out by creating a new document 600px by 600px, and fill it with #ffffed.

Now grab your rounded rectangle tool and choose 10px for your radius. Change your foreground color to #f5a0a0. Now drag out a rectangle that is 510px by 80px. For now go ahead and center the rectangle on the document.

Now, make sure you load the Pixel Patterns V2 that we downloaded in our resources earlier. Open your layer styles for your rounded rectangle and apply the following three layer styles.

The pattern I am using is Pixel 15

You should have a nice looking rounded rectangle that will be the background for your message box. As you can tell by color the first alert box we will be making is an error box.

The Icon

Alright, now open up the Android Icons freebie that we downloaded earlier. You can choose whichever icon that you want, but make sure to resize it to 42px tall. Drag it over to your document and space it 20px from the left and center it vertically on your alert box.

Go ahead now and set your layer style to Luminosity. This will give your default style an letterpress style look.

The icon I used was the stop icon resized to 42px.

The Typography

Alright, now choose your favorite font, <sarcasm>or a font that would look good if your favorite font is something incredibly weird that only works in one document </sarcasm>

Change your foreground color to #b56060. Type out your information into the text box. Depending on the size of information you want in there will depend on the font size. Since I am using dummy text, and I don’t put a lot in my alert boxes, my font size is going to be 30pt. Center your text vertically on your icon and space it 20px from the right of your icon.

And there you have it. Our first box is finished. To create the other two boxes you will just duplicate your layers, change the background color of the box, your inner glow, and your stroke, and then your icon. You can find the colors and icons we used below.

Yellow

Background: #f5f2a0

Inner GLow: #faf560

Stroke: #c9c431

Icons: light (resized to 42px tall)

Green

Background: #a0f5c0

Inner Glow: #69f999

Stroke: #08b248

Icons: tick (resized to 42px tall)

The Tooltip

Now let’s go ahead and create our tooltip style alert box. We will be using the same color scheme, same colors, and same layer styles as our larger alert boxes, but we will be changing the shape and icon size.

To get started grab your rounded rectangle tool again and keep the radius at 10px. Set your foreground color to #f5a0a0, just as before, and draw out a rectangle that is 175px by 100px.

Alright, time to add our bottom piece. To do this grab your Custom Shapes tool and make sure you have them set to symbols. Choose the rounded triangle tool (Sign 3). Keep your foreground color the same and draw out a triangle that is 30px by 15px. Set up your rectangle to come just at the bottom of your rounded rectangle, and horizantally centered.

Alright, now rasterize both layers. We are doing this because we need just one shape for our Layer Styles. To make one shape you can right click your triangle shape and choose Merge Down, or you can select both shapes and choose Merge Layers.

Now, go back to your first alert box and copy the layer styles. To do this right click your box background layer and choose copy layer styles. Now go to the rectangle we just designed and choose Paste Layer Styles.

Please note that this may not work with your version of Photoshop. If it does not you will have to manually apply the layer styles.

Alright, now grab your type tool again and make a text selection that is 155px by 55px. Use the same font, change the size to 23pt, and type out whatever text you want to use. center it horizantally and vertically on your rounded rectangle.

Now, grab the same icon you used for the first alert box, or a different one if you want to, and re-size it to 30px tall. Drag over the icon and place is on the bottom right corner 10px from the bottom and 10px from the right side.

Alright, now we are done with that box as well. You can create the other two boxes using the same layer styles from the other two boxes. Just copy and paste the layer styles.

Conclusion

Our document is finished! You can add a nice input box to see how it will look as well if you wanted to. These input boxes are pretty simple to design, good looking, and easy to turn into CSS3 and HTML5 forms *hint hint*.

Be sure to check it out on Dribbble!

Resources

Fugue Icons :: http://p.yusukekamiyamane.com/

Delicious Font :: http://www.josbuivenga.demon.nl/delicious.html

Get Started

Start out by creating a new document that is 800px by 400px. Fill your background with #181818.

Change your foreground color to #e7e7e7. Now grab your rounded rectangle tool and set the radius to 10px. Drag out a rectangle that is 580px by 275px.

Alright, now grab your text tool and choose whatever font that you want to use. For the entire document I will be using the font Delicious. Type out whatever you want, using color #2e90b4, and space it 15px from the top and 15px from the left.

Alright, now its time to add some basic text explaining what the form is. I am just going to use Lorem Ipsum dummy text from the lipsum.com generator. You can choose a different font or keep with the same font. I changed the size to 14px and the color to #5d5d5d. I spaced the font 15px from the left and 10px from the bottom of our header (Going off the “g”).

Grab your line tool now and change your foreground color to #c9c9c9. Draw out a line that is 540px by 1px. Center it horizantally on your login form box and 15px from the bottom of your text.

Now change your foreground color back to #5d5d5d and type out the word “User Name” in your chosen font. If you are using Delicious you will want to choose a font size of 18px. Space it 50px from the left and 30px from your seperator line.

Change your foreground color to #f8f8f8 and grab your rounded rectangle tool. Change the radius to 5px and drag out a rectangle that is 350px by 30px.

Now add the following layer style:

Grab the “users.png” icon from our icon set and add it to the login bar. It should be centered vertically on the login bar and spaced 10px from the left.

Grab your text tool again and type out the word Admin if you want to. This will let you see how it will look when they log in.

Alright, now follow the same procedure, with the same spacings, for our Password area. You will want to change the text, obviously, and the icon. I have used the safe-pencil.png. This is what you should have:

Ok, now that we have that done its time to set up our Sign In Button. You will want to grab your rounded rectangle tool again, but this time set the radius to 3px. This will give us a nicely rounded edge but not too round.

Change your foreground color to #2e90b4 and drag out a rectangle that is 90px by 35px. Space it 25px from the bottom of your Password bar and line it up with the right end of both bars.

Now add the following layer styles to your button to give it a more in depth feel:

Grab your text tool, color white, and insert your “Sign In” Text. Center it horizantally and vertically on your button to give it a nice feel. You may need to edit the kerning if you are using the Delicious Font, depending on your settings.

Well our sign in form is pretty much complete. We could leave it there, but why not bring it up another notch or two? The simplest thing we can add is an “Not Registered? Sign Up Today!” text. I am using the same color as our header, font size 10px. Type out your text and place it on the left side of your document where you think it looks good.

To take it to our final notch we will create a new layer below the main body. With your new layer selected hit CTRL + the thumbail of our main body layer. This will make a selection of our main body. Now go to Select, Modify, Expand and choose 5px. Fill your layer with #d2d0d0. This will give our login layer a huge visual advance.

Conclusion

I hope that you enjoyed today’s tutorial in our new UI Series. It was a pleasure for me to design the log in form and even more of a pleasure to post a tutorial about it for all of you to read.

Looking for More About the UI Series?

You can find more about our UI Series on our Facebook Discussion board. On the board you can request UI tutorials, articles, and even figure out how to submit your own site’s UI for review.