Alright, start out with a new document 600px x 600px and fill it with #89c3db. Now grab your rounded rectangle tool and set the rectangle radius to 25. Change your foreground color to #e4bf84 and draw out a rectangle that is 510px x 80px. You are gonna wanna space it somewhere near the bottom. Right now there are no specific pixels for spacing yet. We will worry about the spacing once our hamburger is done.

Now, grab your pen tool and choose the Add Anchor Point tool. Add an anchor point at the center of your rectangle and pull it down to give our bottom bun just a little bit of a rounded feeling.

The Burger

Ok, now we are going to create our simple burger patty. To create our burger patty we are going to change our foreground color to # and then we are going to grab our rounded rectangle tool again. This time I want you to draw out a rectangle that is 550px x 95px.

Now grab your Add Anchor Point tool again and give the top and bottom a slight curvature as well.

The Condiments

We are on our way, now we just have to give our burger that little extra something to make it look delicious: the condiments. We will start out by adding the cheese to our burger. To do this you can either use your polygonal lasso tool or your pen tool. In either case you will want to create a new layer above your burger layer and change your foreground to #f3ad53.

Now make a selection that looks like the cheese is curving over the burger. It’s basically a rectangle on the sides and top, with a triangle at the bottom. This is what we got for our selection:

Now fill your layer and you have your cheese.

Now to draw out the next condiment, our lettuce. Depending on how detailed you want to get with it you can use your pen tool, but I found an easier way to make some nice lettuce. Grab your freeform pen tool so you can just draw out some nice lettuce shaping. If you have a tablet to draw on now is a great time to use it, but you can do it with your mouse as well. I have never seen a perfect piece of lettuce on anything, so why make ours look perfect?

This is our shape, on a new layer and filled with #56b861:

Now for the tomato, my favorite piece of a sandwich. The tomato is made up of another simple rounded rectangle with a little curve to them. So, grab your tool again and choose 10px for the radius and #ca4a4a for your foreground color.

Drag out a new rectangle that is 535px x 65px. Again we want to grab our add anchor point tool and give the tomato some curvature to it. We want to add a little more of a curve to our tomato than anything else.

Oh yea, the condiments are all finished. Now to finish off our burger with the top bun.

The Top Bun

Change your foreground color to #e4bf84 and drag out a circle that is 545px x 300px. It will overlap the rest of our design, which is fine for now. We are going to take care of that in the next step.

Now, buns all have a little curve to them, so we will add that in now. Go ahead and rasterize your layer and then grab your elliptical marquee tool and draw out a large selection with the same curvature that you would like your top bun to have.

Once you have your selection, right click and hit Select Inverse. Once you have the inverse selected you will want to hit your delete key, and that is your top bun curvature. You may need to play with it a few times to get it exactly how you want.

You will notice that the tomato is barely showing, which is what we wanted. The top bun still feels just a little to much like a circle so enter into free transform mode (CTRL+T) and just shrink the buns height a smidge until you are satisfied and enough of the tomato is showing.I shrunk ours down to 95% height to get the right feel that I wanted.

What is our burger missing? Well the top bun is sure missing its sesame seeds and then the burger still feels to be lacking something….grease. Let’s get started on the sesame seeds first as this is one of the easiest steps.

Change your foreground color to #FFF and grab your ellipse shape tool. Now drag out a simple ellipse that is 25×4 and place it on your document. Now just duplicate your layer over and over, moving them around and rotating if you want, to give yourself the sesame seeds.

And to add the grease simply grab your Blob 1 Custom Shape Tool and draw out some grease shapes with #f0a45a set as your foreground color. Be sure your place them underneath your burger layer and there you have it, your grease!

Our burger looks great. Now, you can start playing around with some effects and textures to really get a nice looking illustration. We added a few shadows, some texture to the burger, and an overlayed noise layer and get another version.

Conclusion

We now have our drink and our burger for our Illustrative Poster. Next we will be creating the fries and fry basket and then will put them all together with some simple text to create our poster. Be sure to check out the article that spawned this tutorial series and Part One of the series.

Want to share your results? Go ahead and post them to our Flickr group, Facebook, Twitter, or just post them in the comments for us to see.

As always let me show your our final product. Below is the full version of what we will be creating over the next week. Today we will be working on creating the beer glass.

To get started create a new document that is 600px by 600px and fill it with #89c3db

Setting Up Our Outline

Alright let’s get started by drawing out the outline to our glass. Go ahead and change your foreground color to #a1a1a1 and grab your Ellipse Tool. Drag out a circle that is 355px wide by 90px tall. You are going to want to center it horizantally and space it 60px from the top of our document.

Now, this will be the only time we open up the layer styles and that is just to reduce the fill and make it a solid outline circle. If you have your shape styles set up you can just choose a stroke only ellipse to draw, but in case you don’t apply the following:

Awesome! Now you are going to want to duplicate your layer and bring it down 310 pixels. You can do this by selecting your move tool and holding down the ALT key, moving down and duplicating your layer all at the same time.

Now let’s enter into free transform mode, CTRL+T, and shrink our circle to 75%.

Ok, now go ahead and rasterize your layer for your small circle because we aren’t going to need the full circle for our design. Once you have the circle rasterized grab your rectangle marquee tool and draw out a 240px rectangle, drag it down just a little over the top line of your circle, and hit the delete key.

Now, grab your line tool and draw out a 4px line that is 395 pixels tall. Enter into free transform mode again and now we are going to rotate our object to give us one side of our glass. Hold down your SHIFT key and rotate it -7 degrees and line it up with our glass.

Now simply duplicate your layer, enter into free transform and flip horizantal, and line it up on the other side of your glass. Now we have the outline for our glass and it’s time to move onto the next step, the actual creation of the glass.

Creating the Glass

Alright, now comes the glass creation. The first thing you want to do is make a selection that just barely goes beyond our glass and change your foreground color to #c7c7c7. My selection is 367px(w) by 480px(h). Create a new layer above your outline layers and fill it with our foreground color.

Awesome, now unselect your image and move your layer down below your outline. To make things easier you might want to Group together your outlines, that way you only have to bring it below the group instead of the other layers. Now for the very tedious part. Hold down the CTRL key and the SHIFT key and begin selecting each of your layers to have a full selection of your outline.

Now, right click and hit select inverse. Grab your eraser tool and begin erasing away the extra from our grey layer. You will want to really zoom in on the document so you don’t erase any of what we need. This will definitely take some time. Make sure you are letting go of the eraser tool every once in a while just in case you have to go back you aren’t going back too far.

When you have finished lower the opacity of our layer to 50% and you have the makings of the glass.

Create the Beer

Now it’s time to really get going on this baby. Change your foreground color to #eed7a0. Grab your rectangle marquee tool again and create a selection that is 355 by 330 and space it 35px from the top glass spacer and fill it with our foreground on a new layer.

Now, select the thumbnail of our glass layer (holding down ctrl and clicking the thumbnail) so you have a selection of your layer. Now we need to shrink our layer. Go to Select–Modify–Contract and choose 15px so you have a selection. Now select inverse and hit delete. It should look like below-

Awesome, now change your foreground color to #dcd6c0 and grab your ellipse tool again. Drag out a circle that is 305px by 85 px at the top of our glass. Depending on how high you want your foam you can line it up directly at the top, but we kept it down a little bit and showing some of the corners from the beer.

Looks funny right? Well now we are going to be creating the next layer of foam. Duplicate your circle and nudge it up 3px. Change the color to #ece5cb. Now, duplicate your circle one more time and nudge it up 7px. Change the color to #f5f1e4. If you want more foam you just add more spacing and a few more of our last layers. We are sticking with small foam though.

That there could be your beer, if you wanted to go for the most basics, but we are going to add just a few more things to make it look more realistic. We want to add some bubbles to our beer so we are going to grab our ellipse tool, change the foreground to #d5cca7, and draw out some random bubbles, rotate them, to whatever your hearts desire.

Now we want to give a few subtle glass highlights. To do this we are going to create a new layer, change our foreground to standard white, and lower our layers opacity to 45%. Make a selection of our glass layer and fill it with white. Contract the layer by 15, using our earlier method, and then delete the inverse selection. Shrink it down a little bit to get the right reflection for whatever you are doing.

Do the same with the top of the cup, using only our top circle for selection, instead of the full glass. This time when you do your selection you will also want to move your selection down 15px so all you are left with is a line type shape. Lower the opacity to 25% and your are finished!

Conclusion

We now have a super amazing glass of beer without effects. The next stage will be creating our fry basket, continuing with no effects. If you want to take your glass to the next level start playing around with colors on your outline, giving your glass layer more shadows and highlights, different style bubbles, and play with the foam to give it more feeling. Starting out with no effects can really get you the feel that you are looking for and then you can start adding in the additional details to get something really fantastic. Watch our Dribbble feed for what you can turn this glass into.

We will be building our application screen at a 960×640 pixel resolution, but will be keeping in mind that screen size will change all the time, so we want our design to be functional as a fluid design, as well as a static design so when the app would be implemented on anything but the iPhone it is easy to bring over. Anyway, let’s get started with our design.

Open up a new document in Photoshop at 640×960 (obviously). Create a new layer and fill it with #343434 and then go download the Carbon Fibre pattern from Subtle Patterns (http://subtlepatterns.com/?p=22). Go into your layer style options and apply the CF pattern we just downloaded, changing the scale size to 55%.

Alright, now let’s start with our logo implementation. In a normal design process you will already have a completed logo ready to use on the app, but for now we are going to just be using a text filler logo with some basic metallic styling. Grab your favorite font and type out whatever you want for the logo. We are going to be using the Carbon Block Font, 110px, #e6e6e6. You will want to horizantally center the text/logo on your document and space it 110px from the top of our document. (If you are following our guide then the left and right margins are 202px)

\

Now to give it a metallic look you will want to apply the following texture, if you are following our color scheme.

Now, just underneath you will want to add your site tagline if you have one. We are using an #e6e6e6 30px Caviar Dreams for our tagline, Photoshop Tutorials.

Amazing! Now let’s begin to work on the sign in form for our log-in screen! We want to use the two main aspects of a log-in, username and password, as well as the obvious submit button and then a recover p/w option as well as a Register feature.

Because this is a mobile app I am going to diverge away from the standard label to the left or top and we will be putting the label into the actual input field. With such a limited space and the fact that users are using this on their phone you want to keep the information as readily accesible as possible.

We will start our by changing our foreground color to #efefef and grabbing our rounded rectangle tool. Set your radius to 10px and drag out a rectangle that is 510×75 pixels, horizantally center it, and space it 65px from the bottom of your site tagline or logo (If your logo is a little smaller then you may want to add some additional padding between the logo and first input area).

Now to make it look just a little bit better we are going to add in some simple styles that will give it that extra pop.

Now to add in the label. Grab your text tool and choose whatever font you want. We are using Comfortaa, a free font you can find and download at Google Fonts and is safe for Web Use, but you may want to use a safer font, such as Tahoma or Arial. Whatever font you choose pick a size that is relevant to the image below, and use #979393 for the color. Type out whatever label you want, ,such as Username or Email Address, and space it 20px from the left and vertically centered.

Now grab our two layers we just created and duplicate them to create our second input field. Space our second input box 60px from the bottom of our first one. I recommend using rulers to keep to the left and right side grid so everything remains pixel perfect.

Alright, now lets get to work on our two call to action buttons, cancel and log in. We will start work on the Cancel button, using very simple layer styles and effects to create an amazing button. Grab your rounded rectangle tool again and set the radius to 5px this time and your foreground color to #a31313. Drag out a rounded rectangle that is 150×70 pixels. Line it up with your left hand ruler and space it 65px from the bottom of our last input box.

Now to give our button a little bit of style, apply the following layers:

Now, I played around with what I wanted to do with our cancel button a lot before finally deciding. At first I wanted two small buttons with just icons in them, but it just didn’t look right on the screen. I decided that I would just go with the standard text, but again it just didn’t look right. Finally I decided to try them both and it turned out excellent.

First we are going to want to create our icon. Grab your custom shape tool, go to all shapes, and choose the x icon, easy to find as it’s the only one. Change your foreground color to #530a0a and draw out a shape that is 16px by 17px. Vertically center it and space it 15px from the left of the button.

Now we want to apply a very basic drop shadow to our icon to give it a letterpress style effect.

Now grab your text tool again and choose a very bold font. We are going to be using Delicious Heavy at 34px. Whatever font you choose should be a little bit taller than our icon and #530a0a. Center your text vertically and space it 15px from the right side of our icon.

Now apply the following layer styles:

Amazing! Our button is almost finished but we have just one more step. Change your foreground color back to #FFFFFF and grab your rectangle marquee tool. Create a new layer and make a rectangle shape around our button, about halfway down the button and fill it with white. Select the thumbnail of our button, select the inverse, and hit your delete key. Now change the opacity to 20% and you have an awesome, and finally finished, button.

Now, for our log in button all we are going to do is duplicate our layers and change some colors around. The button bg color is going to be #30a012 and the color for the icon and font is going to be #13530a. You can use whatever icon you want, but we are using the standard checkmark icon that comes with PS, same sizes as the x icon.

Looking amazing, right? We could stop there, but what about people that don’t have an account? What if you can’t remember you password? To keep with the simplistic feel of our app design we will just use simple text links, with a standard line underneath them. We are using 16px Tahoma for our font on both lines. Our first line color is #a9a9a9, same with the line underneath, and for our forgotten password line we are using #a41919.

The first line is spaced 80px from the bottom of our buttons and the password link is 25px from our register link.

There we go, we are all done with our sign-in screen. You might notice that there is a little bit of extra space at the bottom. We left that space there so if the menu key is up the design won’t interfere with the log in screen (a design we will get to later on) and also because our forms will be pushed down a little bit with validation issues, if present.

If you feel like something is missing you can always add in a button for the registration instead of a standard link or even a simple gradient on our patterned background would look nice. This is our final product:

and here is our final project with a few personalized changes.

I hope you enjoyed this tutorial and we look forward to bringing you more App Design tutorials in the near future. Let us know what you think in the comments or continue the discussion over on our Facebook Page.

First we start off with a new document. This document needs to be 1280 x 768 and filled with Black.

For the next step you will need to download these Fibre Styles from DeviantArt.

Now access the Blending Options of the main background layer and add the following styles.

Now we are going to create a rounded rectangle to host our information. Drag out a rectangle, with an radius of 20px, our to 1135 pixels wide by 350 pixels tall. Center the rectangle vertically and space it 35 pixels from the left of the screen.

It is now time to style our rectangle. We will be giving it a simple gradient overlay (as shown below)

Now to add our character to the Coming Soon Page. You will need to download THESE icons.

We will be using the singular green character for our coming soon page, though of course you can use any of them.

Place your green character on the screen 143 pixels from the top of the screen and 17 pixels from the right (measuring from the tentacle).

Now we need to remove the coloring between the eyes and mouth to make the character look more friendly. Use the magic lasso tool to select the purple coloring for the eyes and mouth.

Click the delete key on your keyboard to remove the selection. Use the eraser tool to get rid of any extra coloring that was not deleted. You should have only the background of the rectangle now instead of the purple and teeth.

Now we will use the magic lasso tool again to remove the white shadow underneath our character. Select the shadow and press the delete key to remove it.

Now select your magic lasso tool again. Select the space in the eyes and mouth one more time. When you have them selected, choose the rounded rectangle layer and hit the delete key so that only the background is showing through the eyes and mouth.

Now use the eraser tool, still selecting the rounded rectangle tool, and erase the extra pars of the rectangle, below the tentacles.

Now its time to add the content. For the first part of the content we will be using the font face Cooper Black and size 72pt. For the remainder of the content we used the same font face but used a 30pt size. This is our content, which you can use, or add your own. Be sure that, if you are adding your own, you leave enough space for the sign up bar.

Now its time to add our sign up bar. We will be using the rounded rectangle again, this time with a 10px radius using White. Draw the rectangle out to be 548px wide by 63px tall. You need to space it 33 px from the left side of our black rectangle and 20px from the bottom. Now we are going to add some styling to our sign up bar. Use the following styles.

Now using the rounded rectangle again, with a 5px radius. Space it 22 pixels from our sign up bar. Drag it out to be 154px wide by 48px tall. Now lets add some styling to our sign up button. Use the following styles:

Now using the font face Eras Bold ITC, at a size of 30pt, and using black for the color. Type out the word Sign Up and center it, both horizontally and vertically, on your button.

Now, using the basis from THIS tutorial we are going to place our Social Navigation on our page to finalize the tutorial. You are dong with your photoshop document of the Coming Soon Page. You should have something like this:

Getting Started

Start out by creating a new document 1010*790. (If you would like to use this as a background you can make it bigger).

Leave the background white for now as we will be working in various stages of black and white before adding color.

Our Tree

First start by creating a new group and naming it “Tree”. Create a new layer in photoshop and grab your Custom Shape Tool. Choose the group “Shapes” and grab the full black triangle tool.

Now drag out a triangle that is 325*185 anywhere on the document for now. (make sure your foreground is set to black).

Now duplicate your shape layer and drag your new shape under your first triangle. Hit CTRL+T (CMD+T on Mac) and drag out a triangle to be 475*200. Now drag it down so you get a layer effect like this:

Repeat the process again but this time make your triangle 600*242 and arrange it to give it the final step of our tree. Like this:

Now select all the shape layers and choose “Merge Layers” from your menu. Now you have just one layer that you can name “tree body”.

Time to start on our tree base. This will be a simple rectangle, using the rectangle tool. Drag out your rectangle to be 105*130. Now bring that layer under the other layers and line it up so it is flush with the bottom of our tree.

Now our tree looks good but it is pretty boring right? Let’s go ahead and add a simple layer style to our Tree Body layer.

Now go to your Tree Base layer (our tree trunk) and add this layer style to it:

Now create a new layer and grab your rectangular marquee tool and make a selection of half our document, right down the center of our tree.

Fill this layer with White so that you will only see half the tree now. Use CTRL+Thumbnail to select both our TreeBody and our TreeBase layers (You will have to hold down the Shift key to select both thumbnails).

Now right click, choose select inverse, and hit the delete key. Change the layer mode to Soft Light and the Opacity to 20% so you have this:

Alright, now duplicate your Tree Group and rename it to Tree Small. Hit CTRL+T and choose to shrink it to 53% by 66%.

Now duplicate our original tree group again and rename this one to Tree_Skinny. Hit CTRL+T and choose to shrink its Width to 65% leaving the height the same.

You should have three trees that look similar to this:

Alright hide all three groups. It is time to get started on our hillside.

THE HILLSIDE

Grab your Ellipse Tool, make sure your foreground is black. Drag out three circles and make them look like hills.

I wanted a little hill to be in the background but the rest to just appear a little distorted. Go ahead and select all three shape layers now and hit “Merge Layers”. Rename this layer “Hillside”.

Drag your hillside layer beneath all three tree groups and apply the following layer styles:

The Road

That’s our hillside. Now grab your rectangle tool, making sure you have shape tools selected, and drag out a rectangle that is xx wide and a little taller than the hillside. You can use white or black for the color as we will be applying styles later on.

Alright, now grab your Add Anchor Point tool and place an anchor point on the middle left of our rectangle.

Grab the top point of your anchor point and give it a slight curve.

Repeat the same process for the right side of the rectangle.

Now hit CTRL+T again and choose Prespective for the transformation. Drag down the top left corner of the document to give the road the appearance of going away.

Rasterize your shape layer. Now use CTRL+Thumbnail to select the thumbnail of our hillside. Right click, select inverse, and hit delete so your road stops at the hillside.

Now apply the following layer styles:

The Mountain

Alright, now it is time to work on our mountain. Grab your triangle tool again and draw out a triangle 570*525. Make sure your foreground is black. Now drag your new shape below our Hillside and road layers. Center it on your hillside and make it so the tip is just under the top of our document.

Now apply the following color overlay

Alright, now grab your rectangle tool again and draw a white rectangle the covers about a quarter of the mountain.

Now zoom in on your document because we will need to be very precise here. Grab your anchor point tool and place four anchor points at these areas.

Now grab your convert anchor point tool and click on the two middle anchor points we placed. Grab your anchor point tool again and drag one up and one down so you have this

Now rasterize your layer and use CTRL+Thumbnail of your mountain layer. Right click and choose select inverse and hit delete.

This will bring it about 1px inside our mountain so you will be able to see a tiny blue line, this is good. Go to your background layer and fill it with #01ddc6 so you have this.

The Clouds

Alright, I will be walking you through the process to create one cloud. I have four clouds on my document, using the same process, but you can have as many as you choose.

Hit the “D” on your keypad to revert to your original colors and switch it so white is your foreground. Grab your ellipse tool and draw out an oval.

Now draw out three smaller ovals and place them over our first to make a cloud shape. Play around with them until you have a nice shape that you are happy with.

Repeat the process a few more times, adding more or less circles so you have a few different looking clouds. This is what I have:

The Trees

Alright, we are ready for our trees now. This phase is entirely up to you how you want to create your forest of trees. Do you want a lot of trees? A few trees? Unhide your tree layers, making sure they are your top layers, and place them through your document. You will need to resize them to make them look good.

Remember that we want to give the appearance of the mountain being far away so the trees should get smaller the closer they get to the mountain.

This is what we have:

Finalizing

Alright, now our document is almost finished, but I feel like our mountain needs just a little bit more. Grab your rectangle marquee tool and drag out a selection that is half of our mountain, horizantally. Fill it with black. Use CTRL+thumbnail and choose the mountain and hillside, choose select inverse, and hit delete.

Now you are finished! There is so much that you can do with this scene it is amazing. A thinner forest, make it seasonal, turn it into a calendar for a month, anything you can think of.

Here are a few variations that I have done:

Download The PSD File

As always this is what we will be creating:

Getting Started

Create a new document 900×900 and leave it as a transparent bg. Put your foreground color as yellow

The Body

Now draw out our rounded rectangle 345px wide and make it go below the document.

Now grab your Add Anchor Point Tool and put it in the center of our rounded rectangle.

Now grab your Delete Anchor Point tool and remove the anchor points to the left and right of the point we just added.

Grab your Add Anchor Point tool again and drag the anchor point you added upward to give us a nice, round top.

Now drag your guy down a little bit so he is not so close to the top. Apply the following styles to our guy:

The Eye and Goggle

Alright, let’s get started on the eye. Grab your ellipse tool. Draw out a new circle, filled with white, 175×175. Center it horizantally on our minion and 70px from the top of his head.

TIP: You can rasterize your layers because we are not trying to keep this layer vectorized.

Grab your ellipse tool again, this time with black selected, and draw out a circle that is 95×95. Center it, horizantally and vertically, with our white circle since this is the our pupil.

Now grab your rectangle tool, with white as your foreground, and draw out a small rectangle 20×23 tall. Hit CTRL+T to rotate the document. Hold down shift and rotate 3 times, moving your mouse to the right. Place the rectangle at the edge of our pupil.

Alright, our eye is finished but now we need to work on the goggle. Create a new layer.Grab your ellipse toll again and use #9f9f9f as your fill color. Draw out a circle that is 222×222. Center the circle horizantally and space it 45px from the top.

Now use our CTRL+thumbail of our white circle to make a selection and hit delete to make our grey selection the proper size we need it to be.

Apply the following layer styles:

Now to set up our goggle straps. Create a new layer, just above your main character layer.Grab your rectangle marquee tool and drag out a selection that is 380×85 and fill it with black. Center it horizantally on our eye piece, making it just a bit lower than exactly center.

Now we will give it the illusion of wrapping around in a minute but first we have to delete the excess. So hold your CTRL key again and this time click the thumbnail of your character layer. Don’t hit delete yet, go to select—modify—expand and choose 1px for the space. Now you can right click and choose select inverse and hit delete.

Now apply the following layer styles to give it the wrap around appearance.

The Pants / Coveralls

Alright, we will be doing his pants now. Grab your rectangle tool again and draw out a rectangle that is 385px(w) by 75px(h). Place it directly at the bottom of our document. Do Not Rasterize Yet

Grab your Add Anchor Point tool and place an anchor in the center of your rectangle. Drag it down to give it a nice curve.

Now go ahead and rasterize your layer. Hit CTRL+the thumbnail of our main character, select inverse, and hit delete.

Now make a selection like this:

And hit the delete key to remove the selection.

Repeat for the other side:

TIP: I created a new layer and filled it with white for the other side. That way the selections were the same.

Now add the following layer styles:

Simple Arms

Now grab your rectangle marquee tool and draw out a rectangle that is 60px(w) by 130px(h). Create a new layer and fill your selection with #e6d522.

Drag your layer to be just above our main character layer. Now hit CTRL+T to free transform. Move your rectangle to the bottom of your document and rotate it until it looks like a good arm.

Now duplicate that layer, flip horizantal, and place it on the other side.

The Mouth / Smile

Now, for his mouth. You can use anything you want for the mouth, but we will be walking you through the process of creating a simle smiling mouth.

Alright, grab your rectangle tool again and draw out a rectangle that is 165px(w) by 45px(h). Center it horizantally with your goggle.

Now zoom in on your document and grab your Add Anchor Point tool. Place an anchor point in the middle of your top line and drag it down to make a smile shape.

Hold down the shift key and add another anchor point below our first one. Get it pretty close to the exact same area and holding the shift key will make it exact for you.

Before you move that one down we need to delete our left and right bottom anchor points. To do this grab your delete anchor point tool and take out both of those anchor points. This will automatically make the angle of the smile the same.

Now you just need to drag the anchor point down to give our guy a wider smile.

Now change your fill color of the shape to black and then rasterize your layer.

Alright, we are going to be creating the tongue again. Grab your eclipse tool and draw out a shape like this. The fill color is #f6abab.

Hit CTRL+click the thumbnail of our mouth layer. Choose select inverse and hit delete.

Now grab your rectangle marquee tool and create a selection like this:

Create a new layer above our tongue layer, and fill it with white.

Now, do the same CTRL+thumbnail trick that we did for our tongue to make the teeth.

Conclusion

There, you are done now! You can add some hair to him if you want, and you may want to use the burn tool to give him a little more of a rounded look, but this is our base character.

Added Styling

You can do quite a few more things with this simple guy to just by using the burn and dodge tools and a brush. This is my final character:

I do hope you have enjoyed the tutorial and as always would love any comments you guys have and to see your work.

Getting Started

Quick video showing the sketch of our icon.

http://www.youtube.com/watch?v=-7zpE4clH48

Now that we know about what we want to achieve, lets head over to Adobe Illustrator to get started. When designing an icon, its best to work in a vector based program to achieve the utmost in detail, and the ability to resize without quality loss.

Step 1:

Open a new document in illustrator, 600px wide by 800px high.

Step 2:

WIth your blank document open, choose a dark colored stroke. We will change this color later, but it ensures that we can easily see what we are working with while we are drawing the outline of our cup.

Step 3:

Choose the Ellipse tool (Shortcut: ‘L’), and draw an oval shape as shown. This will represent the bottom ellipse of the cup.

Step 4:

Create a new layer. I always feel separating pieces into layers makes life easier later. You can always merge layers if necessary.

We are going to create the outer edges of the cup.

Choose the Pen tool (Shortcut ‘P’), and stay with the dark stroke color, no fill color.

Choose a point at the top of the cup (it will be right under the lid), and select a second point toward the bottom of the cup. If you notice, we didn’t select a point that joins the line to the bottom Ellipse, this is because there is actually a small vertical line where the bottom of the cup has extra support for holding in drinks (I suppose), so then finish the line by connecting it to the bottom ellipse with a short vertical line.

Step 5:

Next, select the line we just drew in Step 4, copy it, and paste it on the same layer. Next, go to ‘Object –> Transform –> Reflect’, and choose ‘Vertical’. Now, move it into place on the opposite side of the cup.

Step 6:

Next we work on the lid. Make a new layer. Choose the Pen tool (‘P’), and select a point slightly beyond the left side of the cup. Choose a second point in line with the first on a horizontal plane, and slightly outside the right side of the cup. Set up guides if you must. Next, without letting go of the mouse button on your second point, drag your line to give it a very slight curve.

Step 7:

Now we will work on the contour of the outer edge of the lid. First, make a new layer in your layers palette. Next, With your pen tool selected (‘P’), draw the outer edge of the lid.

Step 8:

Next, select the outer edge of the lid that we just drew, and copy it, and paste in front (Command + F). Next, go to ‘Object –> Transform –> Reflect’, and choose ‘Vertical’. This gives us an identical replica of the lid edge. Now move it to its respective location.

Step 9:

Now, using the Pen tool (‘P’), connect the top of the lid, and upon choosing the second point, hold your click and drag to give the top of the lid a light upper curve.

Step 10:

Now that we have the outline complete, lets work on some shading. Since our cup is mainly white, lets set up a darker background so we can see what we are working with. Choose the Rectangle tool (‘M’). Also, choose a darker color (we are using Pink), and set the stroke to empty. Make a rectangle the size of the canvas. Next, cut the rectangle (Command + X), and paste in back (Command + B). With the rectangle selected, let’s lock the selection. Choose ‘Object –> Lock –> Selection (Command + 2). You’ll also want to make sure this is placed in the lowest, or first layer (most likely layer 1).

Step 11:

Next, we will change the fill color to white. Select all of your paths with the Selection Tool (‘V’). Just drag a square around the cup outline. This is why we locked the Pink layer. Then, in your tool palette, change the fill color to white. This probably will leave the center empty still. No problem. Go to to toolbar, and choose ‘Object –> Path –> Join’ (Command + J). This should give you something that looks much more like a coffee cup :)

Step 12 / 13:

Next, we shade. Make a new layer just above the Pink rectangle layer. Draw an ellipse with a fill of #777777 and no stroke. Make sure it is set behind the Cup.

Then, we will add a Gaussian blur to the shape. With the Ellipse selected, go to ‘Effect –> Blur –> Gaussian Blur’. Put in something like 45px, and hit ‘Ok’. Adjust as needed.

Step 14:

Next, selecting the Gradient mesh tool. It is so hard to explain how this tool works. Play around with it until you find a desired result. As you see in the image below, we went very light with the shading. Our next step is moving to Photoshop because personally, I find some shading techniques easier there.

Step 15:

Select your entire cup, shading included. Copy it. Open a new document in Photoshop. Paste it as a smart object. Hit enter.

Step 16:

Since it will paste as one layer, using the Elliptical Marquee tool (‘M’), make a short and wide selection to ‘cut’ the top off of the cup.

Cut the seleciton, and paste to a new layer. This allows us to overlap the ‘Lid’ ontop of the cup base. You’ll see why next.

Note: You may have to rasterize the layer in order to edit the ‘Smart Object’. This is ok, since the Icon is so large at this point, we won’t need to make it any larger.

Step 17:

Next, with the lid layer selected, Control-Click on the layer, and select blending options.

On the left tab, click ‘Drop Shadow’ and see the image below for the specific settings. Choose your own, or use the same as we did. Feel free to play around with the settings.

Step 18:

Now that we have our drop shadows down, lets work on shading the lid. On the tool bar, select the burn tool. This is a great way to add subtle shading. Make a new layer in the layers palette. Go to town with some subtle burning. Use a 75px soft edged brush.

Step 19:

Make a new layer. Using the Elliptical Marquee tool (‘M’), make multiple ellipse shapes to define the highlights. Too add to a selection, hold in the ‘Shift’ key while you make a new selection.

Fill this selection with a light color. Maybe a tad darker than white, with a yellowish tone. Try #f9faf9.

Step 20:

You’ll notice the highlight overlaps our lid. No problem. Take the lid layer, and duplicate it. Next, Control+Click to bring up the Blending Options. Go down to color overlay, and choose something, anything. White is fine. Make sure the drop shadow and any other options are turned off. Hit Ok.

Next, choose the ‘Magic Wand’ tool (‘W’), and select the white colored overlay. Next, go to the menu bar, and choose ‘Select –> Inverse’. Click ‘Delete’ on that layer. Overlap gone. Next, drop the opacity to your liking, as well as adding a slight Gaussian Blur.

Then, create a new layer in the utmost background, and fill it with a color a shade yellower than white.

Step 21:

Next, we’ll add some darker shading to show come curvature on the lid. You can achieve this in many ways, either the Pen tool, or make a selection and fill it, etc. I used a combination of both, along with the burn tool.

Step 22:

We can go in and do some cleaning up with the dodge, burn, and eraser tools. Play with opacity and shading to add the finishing touches. Its nice to add a highlight around some of the edges to help it roll into the shadows and give curvature to the edges.

If there are any areas where the drop shadow or shading went over the edges of the cup, feel free to duplicate a main layer (cup or lid), color overlay, select, select inverse, and delete.

Step 23:

Now its time to add some of the finishing touches. Lets add a logo.

Find or make one you’d like to use, and paste it in a new layer.

Now we have to add some contour to the mark. With the layer selected, go to ‘Filter –> Distort –> Spherize’. Tweak until correct.

Place where you think it looks best. To handle the overlap, turn off all layers but the ‘Cup’ layer. Select the negative space. Now select the ‘Mark or Logo’ layer, and delete the overlap. Take the opacity down a hair to inherit some of the shadow.

Step 24:

Next, create a rectangle using the ‘Rectangle Tool’ to represent the checkboxes. To do so, select an empty fill rectangle in the top tool bar, and give it a 1 point stroke in a dark color. Duplicate the rectangle layer until you have 4, space them accordingly, and merge all the layers together into 1.

Using the ‘Skew’ tool (‘Edit –> Transform –> Skew’), play with the checkboxes until you feel they look as if they are flowing with the curvature of the cup.

Move the checkboxes until you are satisfied with their placement.

Step 25:

Play around with the background, and voila. You have yourself a coffee cup icon, or a ‘Zohf-ee’ cup icon :)

Thanks for following this tutorial. Hopefully it was helpful.

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.

So, I thought to myself, why not create my own little emblem logo with my own style in there and share it with you guys here at HV-Designs. Here’s a look at the finished article that we will have achieved by the end of this tutorial.

About the pretty background

I’m not going to get too deep into creating the background here with you guys as I want to focus more on creating the logo itself. What I will tell you is, the colour used is that of #00b8d4 which is a nice shade of blue, with and overlayed diagonal patten to give us those nice stripes.

Getting your hands dirty

With that done and said, let’s make a start. Create a new document around 500px by 500px and using your marquee tool make a circle roughly in the center of the page and fill with a shade of grey, I’ve used #373737.

Look good eh? Well not really, no. Let’s give the circle a border of 5px, positioned inside the circle with the colour #292929.

Create a new pattern

We’ll need to create a new pattern to use as the background of our emblem, so go ahead and create a new document at 10px by 10px. Using you pencil tool set at 1px, draw a nice square pattern like so.

Once you have something that looks like this, we need to define this as a new pattern. So locate the toolbar and click “Edit” > “Define pattern…” and name your new pattern, square will do!

If we now go back to our document which contains the emblem logo, hold crtl & click the circle layer to highlight the contents of the layer. With the circle outlined create a new layer and locate the toolbar again and click “Edit” > “Fill..” and fill with your new pattern. Now set the opacity of the patterned layer to 25% and hold ctrl + E to merge with the  emblem layer bellow.

Playing with fonts

For the “Lee Grant” part of the emblem I’ve used a sweet, bold font named Bebas Neue. Using this font, set the size to 40px and write something like your name. We’ll give this a drop shadow to give the text some depth.

Create a new layer named “line” and using the rectangular marquee tool draw a 1px high line horizontally across the logo, making sure its the same with as your text. Your logo should now look something like this.

Another sweet font I use now and then is Caviar Dreams which fits well with the style of this logo. Go ahead and grab this font, once installed, use this font and write  tagline like “web designer” at the size of 19.3px and coloured white (#ffffff).

Whoo, stars!

Let’s temporarily set our logo layers to invisible so all we have is our background, select the pen tool and draw yourself a star shape like so. change your foreground colour to white and right click the star and fill selecting “Fill path”, fill the path with your foreground colour.

All we need to do now is resize the star by clicking “Edit” > “Free transform..”, and duplicating the layer 3 times, positioning 2 stars at the top and 2 stars at the bottom.

A little shadow

It’s starting to look pretty neat now, but without a shadows it’s resembling a sticker more than a logo. Let’s create a new layer named shadow and add a shadow by creating an oval shape using the rounded marquee tool, then selecting “Filter” > “Blur” > “Gaussian blur” and choose about a 5px radius.

The finale!

Look’s like you’ve made it through to the over side and hopefully you learned a thing or two. This is just my spin on creating an emblem logo, there are plenty of styles and different ways to do this, which I would love to see. So if you’ve got a cool looking emblem you’ve created or adjusted from this tutorial go ahead and post them up in the comments section.

Happy photoshopping!