Recently on Dribbble there was an excellent No Effects Challenge posted by the amazing Jonathan Ogden (who we are going to reach out to and see about getting a tutorial from his awesomeness) that really inspired this post. Each and every shot in the challenge was, obviously, created without using any layer styles or effects in Photoshop, just standard graphic talent. They are all amazing, amazing shots, but what is the point of them? Why have the layer styles if you aren’t going to use them? The importance and reason are both one and the same in their answer, because it’s important.

I am not by any means saying that we should just give up effects all together, but I am saying that it is VITAL to practice without them. I find that whenever I am strugling for inspiration on a design or wondering what Typography will look good on this poster, that if I just step back from the effects and put everything into an almost matte like look, that it flows together nicely. Let’s take a look at a few areas that can really benefit from using little to no effects.

Typography

Typography is one of the most important aspects of any design, if not the most important. You can have an excellent looking website, but if the typography sucks that’s all people are going to notice. Believe me on this because typography has to be the weakest aspect to my design and it really sets me back sometimes. Honestly, without the great people over on Dribbble and Forrst I would be lost in the dark when it comes to typography, but the best advice I ever got was to just step back from the effects and play on font and placement only, before bringing any of the layer styles into anything.

Here are a few of my favorite Typographic images from the no effect challenge:

A Very Simple Sports Style Typographic With No Effects

Free Binder Cover by Brad Blackman

Berlin Likes Fancy by Julie Ann Horvath

Those are, without a doubt, my top three typographic elements from the No Effect Challenge. Every single submission has been awesome and they just keep building and getting better. If you want to submit a typographic to the No Element Challenge and are a member of Dribbble post it up and let us know in the comments. If you are not a member of Dribbble then post it in our Flickr group so we can see the awesomeness.

Random Elements

Throughout the main challenge there were so many inspiring posts but not really a category to fit them in but I still wanted to show off the most inspiring no effect elements from the challenge, in my opinion.

No Effects Turntable by Alpis Design

NoFX by Jow Fawkes

Rum Runner by Mike Kamanski

I chose those three as my most inspirational because it just goes to show you how versatile design really is and that you can use less effects and still come out with an amazing design, whether all together or just as an element in the design. All three of the above designs can stand on their own as excellent designs or be placed into a project at any point, but most importantly you can then take the basis of what you created, add some effects, and bring your design to the next level, if that is what is required.

Conclusion

Be sure to check out and follow the design contest as I am sure it will continue to grow and post. I hope that what we talked about today helps you guys with any inspirational/technical issues that you might be having. I am interested in hearing what you guys have to say about the subject and seeing some of your no effect work.

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

With the same purpose, my today’s tutorial is about a menu which has all the decent and stylish animated functionality, what you may be looking for. I’ll not go into details of HTML and CSS, I’m assuming you know about that or you can copy the HTML and CSS from below.

Slicing PSD

We have a free PSD for this tutorial and we’re using that in our tutorial, scroll down to download the PSD. Following is the snapshot how we will slice out.

The HTML Structure

As you can see in the PSD, there are Menu items and one Search Bar on right side. The HTML for all those elements goes here.

<div class="main-navigation">
	<ul>
		<li><a href="#">Home</a>

			<ul>
				<li><a href="#">Sub Menu Item 1</a></li>
				<li><a href="#">Sub Menu Item 2</a></li>
				<li><a href="#">Sub Menu Item 3</a></li>
				<li><a href="#">Sub Menu Item 4</a></li>
				<li><a href="#">Sub Menu Item 5</a></li>

			</ul>

		</li>
		<li><a href="#">Services</a>

			<ul>
				<li><a href="#">Sub Menu Item 1</a></li>
				<li><a href="#">Sub Menu Item 2</a></li>
				<li><a href="#">Sub Menu Item 3</a></li>
				<li><a href="#">Sub Menu Item 4</a></li>
				<li><a href="#">Sub Menu Item 5</a></li>

			</ul>

		</li>
		<li><a href="#">Portfolio</a>

			<ul>
				<li><a href="#">Sub Menu Item 1</a></li>
				<li><a href="#">Sub Menu Item 2</a></li>
				<li><a href="#">Sub Menu Item 3</a></li>
				<li><a href="#">Sub Menu Item 4</a></li>
				<li><a href="#">Sub Menu Item 5</a></li>

			</ul>

		</li>
		<li><a href="#">Contact</a>

			<ul>
				<li><a href="#">Sub Menu Item 1</a></li>
				<li><a href="#">Sub Menu Item 2</a></li>
				<li><a href="#">Sub Menu Item 3</a></li>
				<li><a href="#">Sub Menu Item 4</a></li>
				<li><a href="#">Sub Menu Item 5</a></li>
			</ul>
		</li>
	</ul>

	<div class="search">
		<input type="text" name="search" class="search-input" />
		<input type="submit" name="search" value="" class="search-btn" />
	</div>

</div>

Keep in mind I’ve added sub menus within the list item.

The CSS

Below is the CSS which used to format the menu. Apply the styles and see results in browser.

.main-navigation{
	width:890px;
	height:44px;
	border:1px dashed #a2d2cf;
	background:url(../images/nav-bg.jpg) left repeat-x;
	top:50%;
	left:50%;
	margin:-22px 0 0 -445px;
	position:absolute;
	}

ul{
	margin:0px;
	padding:0px;
	list-style:none;

	}

li{
	float:left;
	font-size:15px;
	color:#FFFFFF;
	height:42px;
	display:block;
	position:relative;

	}

li .hover{
	color:#FFFFFF;
	text-decoration:none;
	position:absolute;
	background:url(../images/hover-bg.png) top left no-repeat;
	top:0;
	left:0;
	z-index:0;
	height:44px;
	display:none;
	}

li a{
	display:block;
	color:#FFFFFF;
	text-decoration:none;
	padding:14px 43px 13px 44px;
	z-index:1000;
	position:relative;
	}

.search{
	float:right;
	margin:9px 26px 0 0;
	padding:0px;
	}

.search-input{
	font-family:LucidaGrande, Lucida Sans, Arial;
	font-size:12px;
	color:#FFFFFF;
	width:117px;
	height:26px;
	padding:0 5px 0 10px;
	padding:5px 5px 0 10px \9;/* IE 7 and 8 */
	border:0;
	outline:none;
	background:url(../images/search-input-bg.png) top left no-repeat;
	float:left;
	}

.search-btn{
	width:37px;
	height:26px;
	border:0;
	outline:none;
	background:url(../images/search-btn.png) top left no-repeat;
	float:left;
	}

ul li ul{
	width:200px;
	position:absolute;
	display:none;
	top:44px;
	padding:1px 0 0 0;
	}

ul li:hover ul{

	display:block;

	}

ul li ul li{
	display:block;
	padding:10px 10px 10px 0;
	width:200px;
	padding:0px;
	margin:0px;
	background:url(../images/nav-bg.jpg) left repeat-x;
	position:relative;
	}

ul li ul li a{
	display:block;
	color:#FFFFFF;
	text-decoration:none;
	padding:14px 43px 13px 28px;
	z-index:1000;
	position:relative;
	}

Now you can view a decent looking menu with search box. You can check it’s functionality, it’s simple. Now we go ahead and work with jQuery to apply some effects to look it more decent. Here is the CSS menu snapshot.

The jQuery

Now, the actual part of tutorial begins here. I will teach you step by step here. Go to the head section of your page and paste the following code.

<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

});

</script>

I’ve included jQuery library from google libraries. After that, a normal script is started and in the //

After this, we will go for another function. That will do the same as we use some mouseover and mouseout functions. Let’s see the code.

$("li").hover(function() {
	//This function will call the HOVER event on any li.
} , function() {
	//This function will call the HOVER OUT event on the li which was hovered.
});

A basic function is ready and we will add all the transitions for menu here.

var itemwidth = $(this).width(); /* Getting the LI width */
$(this).prepend("<div class='hover'></div>"); /* Inserting a blank div into within li above the <a> tag*/
$(this).find("div").fadeIn('10000').css({ 'width' : itemwidth}); /* Using the itemwidth for the div to display properly*/
$(this).find("ul").fadeIn('1000').slideDown('10000').css("display", "block");

After putting the above code into HOVER function, our code will look like this.

<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$("li").hover(function() {

var itemwidth = $(this).width(); /* Getting the LI width */
$(this).prepend("<div class='hover'></div>"); /* Inserting a blank div into within li above the <a> tag*/
$(this).find("div").fadeIn('10000').css({ 'width' : itemwidth}); /* Using the itemwidth for the div to display properly*/
$(this).find("ul").fadeIn('1000').slideDown('10000').css("display", "block");

} , function() {
	//This function will call the HOVER OUT event on the li which was hovered.
});

});

</script>

Now, we will work down the HOVER OUT event. Remove the HOVER OUT comments and put the following code in it.

$(this).find("div").slideUp('1000').fadeOut('1000');/* sliding up and fading out the hover div */
$(this).find("div").remove();/* removing the <div> code from html at every mouseout event*/
$(this).find("ul").fadeOut('1000'); /* fading out the sub menu */

Well. If you test the menu, it’s really amazing drop down and hover effects. The menu part has been done. We will go ahead and work on the animation of search box.

We will create two functions here. Focus and Focus out. Both are as follows:

$(".search-input").focus(function(){
$(this).animate({width:'180px'}, 500); /* on focus, increasing the input width of search to left side*/
	});

$(".search-input").focusout(function(){
	$(this).animate({width:'117px'}, 500);  /* on focus, decreasing the input width of search to left side*/
	});

Your jQuery menu including sub menu and search box are ready to use.

Conclusion

There are thousands of jQuery plugins available to use but the purpose of this tutorial is to give you a detailed practice how the jQuery work and how it creates animation in no time. I hope you will like the menu and give us feedback.

UI Kits and Elements

Icons

Conclusion

I hope that you enjoyed this freebie post and you can always check out our Freebie Network Site, Friday Freebies, for more a new freebie every Friday. I also want to thank all those featured here for their stellar contributions to the design world.

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!

The final product should look something like this:

Getting Started

The first thing to do is create a new document in photoshop that is 512px by 512px.

Base

Go to Layer>New Fill Layer>New Gradient Fill to create a new gradient fill layer. Set the settings to a 0 degree angle and a reflected style. At 0% make the color #cccccc and at 50% make a color with #e8e8e8. Then make a color at 75% with #a2a2a2 and at 90% make one with #e6e6e6. The last color will be at 100% with the color #7c7c7c. The final will look like this:

After this is complete, right click and duplicate the layer and then make a 512px by 512px rounded rectangle with a 90px border radius. Move the vector mask onto the duplicated Gradient Fill Layer. On this new layer, go into Blending Options and activate the Inner Shadow and Inner Glow options. In Inner Shadow, make the color white and the blending mode screen. Set the Opacity to 25% and the Distance to 4, Choke to 100, and Size to 0. In the Inner Glow option, set the color to white with the blending mode Overlay. Make the Opacity to around 40% with the Size at three and Choke at 100. Confused? Look at the image below to make sure you have everything right.

The Clickwheel

The ClickWheel shape can be created by making one large circle. A good way to do this is to set the shape mode to rounded rectangle and set the border radius to something high (like 300px). After this, set the shape mode to subtract and create a smaller circle inside that.

Go into blending options for our clickwheel shapes and set the drop shadow to a Multiply Black with 5px distance and 7px size

The next style is an White Screen Inner Shadow with 22px Distance and 35px Size.

Next is a 25% Opacity, Black Multiply Outer Glow. This style should have a 5px Size.

Next is a White Screen Inner Glow. The Opacity should be set to 10% with 100% Choke and 1px Size.

Next we will add a Bevel. Set it to a smooth Inner Bevel at 100% depth. The Size should be 0px and the White screen setting should be at 50% Opacity. The Multiply black setting should be at 0%.

Next is a subtle Gradient Overlay. All the settings should be the default except the colors. Set the colors to #141414 to #1e1e1e.

Now add a 1px Sized Stroke to add depth to the ClickWheel. Make sure the Fill type is Color with the color set to #191919.

White Controls

To add the next white control glyphs, some experience with the pen tool is required. The pen tool is one of the harder Photoshop tools to master which is why I suggest you use mine.

When the glyph vectors are complete, add the following layer styles.

Final Play/Pause Glyph

Again, the vector shape is supplied in the .PSD included with the tutorial. To give the glyphs an imprinted looks, the Inner Shadows and Drop Shadows can be used.

Now apply the following layer styles to the shape.

Adding Shading

To increase depth in the base, a simple gradient can be applied. The Opacity toggles in the Gradient Overlay blending option should be set to 25% (left) and 50% (right). The make the left color black and the right color white. At 50% location, add another white color fill.

Conclusion

This tutorial should hopefully give you some insight as to how to go about starting icons, as well as some easy layer styles that can give imprint or bulging 3d feels to parts of icons. The tutorial should have also helped you see how many iOS application icon bases are made. Hope you learned something or brought something away from this tutorial!

In order to create those switches in the image above, you’re gonna need to familiarize yourself with the Pen (P) and the Rectangle and Rounded Rectangle (U) tools. Plus, get ready to wield the Path Selection and Direct Selection (A) tools. Those will be your weapons in the steps ahead. Alright, to the Photoshops!

Step 1: Create the Background

We’ll start with a new canvas of, say, 200 x 200px. Right away, let’s create a new shape layer for the background by using the Rectangle tool. Press the keyboard shortcut U or select this icon from the toolbar:

In the Options bar, make sure the Rectangle is selected. Unfortunately, most of those tools (Rectangle, Rounded Rectangle, Ellipse, Polygon, Line, and Custom Shape) share that same keyboard shortcut: U.

If you enable Preferences > General > Options > Use Shift Key for Tool Switch, you can cycle through all those tools by holding Shift and pressing U. Nifty!

So make sure you’re using Rectangle, and drag a shape from the upper left corner of the canvas to the bottom right, covering the entire canvas. This is our background.

On that new layer in the Layers panel, double-click the colored square on the far left. Use the picker to choose a color for the background; I chose a dark grey (HSB: 0, 0, 15).

Let’s make a hole for the button to rest in. First, add a vertical and horizontal guide at the center of each axis. Since our switch is going to end up being 70 x 44px, set a vertical guide 35 pixels to the right and left of center, and two more guides 22 pixels above and below the horizontal center guide. Go to View > Rulers (Cmd+R) for help with lining everything up exactly.

Tip: Click and drag from the Ruler on either side to pull out a Guide. Hold Shift to force it to snap to the tickmarks along the ruler. If the increments between tickmarks are too big, zoom in for finer detail.

Draw a rounded rectangle with 1px radius inside these new guides. If you have View > Snap enabled as well as View > Snap To > Guides, the shape you draw should snap nicely into the corners of the guides you just set up. Handy!

Change this shape layer’s color (like you did above) to black and double-click an empty area on that layer in the Layers panel to open the Layer Styles dialog box. Click on Stroke at the bottom, and set it to 1px of black on the Outside. This will be the hole in which our switch toggles, and since we’ll building a lot of layers above it and the Backgound, let’s lock those layers so we don’t accidentally mess anything up.

Step 2: Make the Basic Switch Shapes

Using the guides, draw another 1px-radius rounded rectangle in the left half of the hole, but this time, let’s make it white, so it’s easier to see.

Now let’s zoom in for a bit, say, 300%. Switch to the Direct Selection tool (the white arrow cursor), and select the two rightmost points in the shape layer.

Delete those two points, then use the Pen tool to close the shape between the remaining two points. Hold down the Option key while you click on the two endpoints so they stay sharp corners without bezier handles.

Once the shape is closed again, move those points 1px right back to the center.

Tip: If you’re zoomed in, pressing the right arrow key to nudge the points won’t snap them to the next pixel. It will only move them a fraction of a pixel, depending on how far you’re zoomed in. For example, if you’re at 200%, each nudge will be one-half of a pixel. If you’re at 500%, one nudge equals one-fifth of a pixel. So check your zoom level and make sure to nudge the correct number of times. Otherwise, you’ll end up with shape perimeters lying between pixels, and that makes for fuzzy, anything-but-sharp lines. Bad bad bad.

So essentially, what we just did was create a rounded rectangle on the left half with sharp corners on the right. This is the flat, pushed down side of our toggle switch.

Copy that layer, flip it horizontally, then move it over to the right to mirror the first half. Try giving it a slightly darker grey color so you can tell it apart from the left side. This will be the angled, raised side of our toggle switch.

Select the two points in the top right of our angled side, and move them up 1 pixel. Same thing with the bottom two, but move them down.

Now move all four of those points left 3 pixels. This will give the illusion that the right side is flipped up in perspective. Also, let’s change the shape color to a light grey so we can tell it apart from the left side.

Next, we’ll use the pen tool (and some extra guides) to add a rhombus shape, which will imply depth on the side of our switch. Make sure this new shape layer is below the angled side and overlaps it. Also, let’s make its color darker than the right side to be more depth-y.

Alright, we’ve got our basic switch shape! Time to apply some layer styles.

Step 3: Light the Switch

We’ll start with the left side of the switch. Double-click its layer to bring up the Layer Styles dialog. Set the Gradient Overlay to a subtle dark grey ramp. I used (HSB: 0, 0, 40) to (HSB: 0, 0, 30).

Then set a similar style on the right side, but start slightly darker on top. I went from (HSB: 0, 0, 35) to (HSB: 0, 0, 30) for this.

In order to imply a rounded corner, we’ll try to create the illusion of a highlight on the top edge of the Depth shape. Set a Gradient Overlay with a light grey at the top (HSB: 0, 0, 40) that quickly fades to a darker grey (HSB: 0, 0, 25) and ends at an even darker grey (HSB: 0, 0, 18) at the bottom.

Use the Angle setting to tilt the gradient to 87 degrees so that it lines up with the angle at the top of the depth shape.

Step 4: Bevel the Edges

We want this switch to look three-dimensional, so let’s spice it up a bit and add a bevel around the edge. Start by duplicating the Flat Side layer.

Next, use the Rectangle tool in Subtraction mode to cut a hole out of the middle, leaving just a pixel width around the edge.

Change the existing Gradient Overlay to something more like this:

The HSB values for each of those points in the gradient from right to left (top to bottom) are: (0, 0, 50), (0, 0, 35), (0, 0, 30), (0, 0, 25), (0, 0, 20).

Next let’s do a similar thing to the right side, but this time, let’s cut out the hole from the middle using the Pen tool. Set up some guides for help snapping to the pixels.

Again, let’s change the gradient to some more like this:

Those HSB values are: (0, 0, 50), (0, 0, 44), (0, 0, 30), (0, 0, 20). Note the difference in their positions along the gradient compared to the bevel on the other side.

Alright, now we’ve got some beveled edges. Starting to look a little more like a physical object, eh? Let’s continue along this road and add a little more depth.

Step 5: Imply Depth

First, we’ll add another layer to the angled, right side of the switch to give it more dimension. Duplicate your Angled Side layer and drag it in the Layers panel to be above the Angled Side Bevel. I’m gonna rename this new layer “Angled Side Shadow”, clear its Layer Style, and lower its Fill to 0%.

Now double-click the layer and give it a new Gradient Overlay. This time, we’ll make both ends black and make our adjustment on the Opacity points above. Keep the left one at 100% and change the right one to 0%. Also, make sure to rotate the gradient’s Angle setting to 0 degrees. This will set the gradient to run horizontally instead of vertically (the default).

Back in the Layers panel, step down the Opacity of the layer until it looks more angle-y and dimension-y. 25% seemed to be the magic number for me.

Looking good! Let’s repeat this method to give the Depth shape some more dimension as well. Duplicate the Depth layer, clear the Layer Style, set Fill to 0%, and start a new Gradient Overlay from scratch. This time, we’ll want the darkness to run from right to left, so change the Angle setting to 180 degrees. You’ll also want to pull the transparent side of the gradient toward the middle, since the Depth shape is partially hidden under the Angled side shape.

Alright, almost there!

Step 6: Create the Glyphs

We’ve got a switch now, but it’s totally unlabeled. What are we switching back and forth? Let’s add a checkmark glyph to the left side and an X glyph to the right side.

I laid out some guides to help me draw this shape. Unlike before, however, I’ve intentionally positioned my guides on half-pixels. Usually, this would be bad, but if you want pointy corners on an angled shape like a checkmark, the best way to achieve it is by making sure the corners are dead center on a pixel. Sounds counter-intuitive, but you can see that it works.

Checkmark created! Let’s give this guy some glowiness. Add a Gradient Overlay, but make it a Radial one this time.

The green gradient I’m using is light in the center and slightly darker on the outside. I used the HSB values (120, 100, 100) and (120, 100, 75). That gives us this:

I used a similar method to create an X shape on the right side of the switch like so:

Okay, time to mess with its Layer Style. Since the X is recessed into the face of the switch, let’s give it a dark grey Color Overlay of (HSB: 0, 0, 25). And to sell that recessed look, add an Inner Shadow with the following parameters:

To further imply dimensionality, we’ll add a green Drop Shadow. This gives the impression that the edges of the X shape are beveled and reflecting some of the light cast by the glowing green checkmark. (If this looks kinda weird, don’t worry; we’ll do other things to sell this effect in a moment).

Step 7: Glows and Bounce Light

Our green checkmark is glowy-ish, but I’m not convinced. Let’s really sell the idea that there’s a light behind the button by adding a circle glow over the checkmark.

Use the Ellipse tool to create a circle shape centered over the checkmark, like this:

Lower the layer’s Fill percent to zero and add a Gradient Overlay that looks like this:

Reduce the layer’s Master Opacity to 25%, and you should end up with a nice glow over your checkmark.

Finally, let’s add a layer of bounce light to the right side of the switch. Bounce light is when a light source reflects (or bounces) off a nearby surface, changing the look of the surfaces around it. For example, on a bright, sunny day, someone standing on grass will have a slight green bounce light under their chin, which happens because the sunlight reflects off the green grass, picks up some of that color, and illuminates the person’s face from below.

Duplicate the Angled Side Shadow layer, move the duplicate above the original layer, and change the Gradient Overlay to green instead of black. I had to reduce the layer’s Master Opacity to 7% to keep it from being too strong.

Step 8: Add a Cast Shadow

This whole time, we’ve been rendering the switch under the assumption that there’s a global light directly above. In that case, the raise side of the would cast a shadow below it, so let’s create that shape now.

Use the Pen tool to draw a black triangular shape under the right side like this:

That shape is too sharp to be properly shadowy, so let’s fuzz out the edges by giving it a 3px black Outer Glow with a Normal blend mode.

Reduce the layer’s Master Opacity to 50% so it’s not so harsh. Let’s see what we’ve got now.

Tada!

That’s it! You’ve got a nice, dimensional toggle switch. Congrats :)

If you’ve been learning along the way, you should be able to create the opposite “Off” version of the switch. (Try duplicating all your layers and flip everything horizontally to get started.)

Thanks for reading this tutorial. I hope you’ve learned a little bit about shape layers and layer styles in the process of following along. Feel free to give the switch your own personal flair and send me your results. You can find me on twitter @marshallbock. Enjoy : )

View on Custom Power Designs

As always this is what we will be creating:

Let’s Get Started

Start out by creating a new document that is 600px by 600px and fill it with #161616.

Main Body

Alright, now grab your rounded rectangle tool and set the radius to 4px. Set your foreground to #4a4a4a and drag out a rectangle that is 525px by 125px. You can space it anywhere on your document for now as you can choose to move it later.

Now we will be applying the following layer styles to our simple rectangle to give it more of a 3-D feel.

The Screws

Now to create our screws. The screws are a very simple process of two shapes with some little layer styling. Start out by grabbing your Ellipse tool and drawing out a circle that is 12px by 12px. You can use any color because we will be adding the following layer styles.

Alright, now space your circle 5px from the top and left of your rounded rectangle.

Now you will want to go to your Custom Shapes Tool. Choose shapes from your drop down menu and grab your hexagon shape.

Now draw out a hexagon that reads 7by7 in your info screen. Center your hexagon on your circle to give it that screw look.

Now take those last two layers and put them into a group. Name that group Screws and duplicate the group three times. Space each group the same spacing, relevant to positioning, in each of the four corners.

The Text

Now grab your text tool and change your foreground color to #f0f0f0. You can use whatever font that you want, but for this project I recommend a nice web safe font. For that purpose I am using Verdana as my font, set at 24pt size. Type out General Settings and space it 40px from the top and 45px from the left.

Now add the following layer styles

Alright, keeping your text tool change the font size to 14pt and the foreground color to #0b0b0c. Type out “Edit and change your personal settings”. Line it up with the “G” in General Settings and space it 5px from the bottom of your header (going from the g in settings).

Now apply the following layer styles.

Lighting and Icons

Its time to start on our icons and lighting.

Change your foreground color to #03b814. Grab your ellipse tool and drag out a circle that is 55px by 55px. You will want to space it 35px from the top and 30px from the right.

Now apply the following layer styles to your circle.

You should now have this:

Now grab your favorite set of Web Icons and choose one that best fits your idea for General Settings. For me I chose to use a gear icon. Drag your icon over to your document and center it nicely in your lighting. Now lower the fill to 0% and apply the following layer styles:

Now you have one completed section.

That is, technically, the end of this tutorial. However, I just want to point out that it is easy to create more settings areas. You can just place all layers into a group and duplicate the group. Then you just change out the Gradient and Inner Glow of the lighting for a different color. You can change the icon and text simply as well so that you can have many different colors and areas

Conclusion

You can use these General Settings Areas for almost any administrator design project just by changing a few things around. I hope that you have enjoyed the tutorial and learned a few simple techniques for your future designs. As always I would love to see your designs or hear your comments. Just post anything in your comment and I will take a look at it and I promise to always reply.

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.

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.