In this post we’ll take a look at 55 responsive WordPress themes, including free and premium themes. The majority of the themes showcased here are premium. Although there are some good free responsive themes available, the time and effort required to create one is rather significant, so most of the good ones must be purchased. There are more free responsive themes available aside from the ones we’ve mentioned here, but we tried to showcase only the best ones regardless of whether they are free or premium.

Free Responsive WordPress Themes:

Skeleton

Responsive Twenty Ten

Meeta

BonPress

Mixfolio

Respo

Orion

Leon

Origin

Oxygen

Hatch

Yoko

iTheme2

Premium Responsive WordPress Themes:

Hero ($49)

Uber ($49)

Reveal ($49)

Infinity ($49)

DailyJournal ($39)

Trim ($39)

Pioneer ($35)

Angular ($35)

Swagger ($35)

innoVative ($35)

Office ($35)

Zig Zag ($35)

Next ($35)

Gigawatt ($30)

Aware ($35)

Propulsion ($40)

Good Minimal ($35)

Reaction WP ($35)

Good Space ($35)

PixelPower ($35)

Super Skeleton ($35)

Whitelight ($70)

SMPL ($70)

Unsigned ($70)

Shelflife ($70)

Olya ($70)

Beveled ($70)

Currents ($70)

PhotoTouch ($39)

Simfo ($39)

Micro ($50)

LitePress ($69)

PhotoNote ($69)

Momento ($60)

Knead ($60)

XO ($35)

Jigsaw ($35)

Akita ($35)

Website ($35)

ELOGIX ($35)

ProMotion ($35)

Modernize ($35)

For more WordPress resources please see:

• The Best WordPress Themes for Churches and Non-Profits
• 27 of the Best WordPress Themes for Photographers
• 25 of the Best Real Estate Themes for WordPress
• WordPress E-Commerce

Today we’ll see how to do an awesome categories menu, based on Pawel Kadysz’s awesome menu design.

We’ll see alternatives to WordPress wp_list_categories functions that allows full customization. Also we’ll see how to do it with clean CSS and a little jQuery for final touches to make it smoother.

So, are you ready to rock?

The Final Look

This is what we get by the end of this tutorial. Highlighted item is the hovered one and all those categories will come from WordPress. You can Download source files or visit the live demo.

#1 – Slicing and adjusting

Before getting into the coding part we need to slice the psd we downloaded, right? Actually no (I know, I know, the sub title is wrong). We’ll use CSS3 for those subtle effects so the only image there will be the background image.

We’ll need to adjust the background image to make it tileable. Each developer does it his own way, what I do is duplicate the layer, invert it vertically and delete the top part for the inverted layer with a smooth eraser. Then I flatten the result and do same thing horizontally.

You can just download the final result from the source files.

#2 – PHP (and, why not, HTML5)

When it comes to a categories listing we often just use wp_list_categories, in the best case add a few CSS rules to make it better but we just ignore all the possibilities of using better markup and completely custom menus.

Here we’ll use a standard HTML menu and for categories listing we’ll use the get_categories() function. It works pretty much same as get_posts, returning a lot of data on our categories but with no markup or styling at all, it’s just a PHP object.

Here is our main code to get the menu:

<nav>
<ul class="mainNav">
	<li><a href="#">Home</a></li>
	<li>
		<a href="#">Categories</a>
		<ul class="submenu">
		<?php
			//http://codex.wordpress.org/Function_Reference/get_categories
			$args = array (
				'hierarchical ' => 0
			);
			$cats = get_categories( $args ); //meooowww!!

			foreach ($cats as $cat) {
				echo '<li><a href="' . get_category_link( $cat->term_id ) . '">'.$cat->name.'<span class="number">'.$cat->count.'</span></a></li>';
			}
		?>
		</ul>
	</li>
	<li><a href="#">Archives</a></li>
	<li><a href="#">Search</a></li>
	<li><a href="#">Contact</a></li>
</ul>
</nav>

As for our demo this is the HTML output after processing this function:

<nav>
	<ul class="mainNav">
		<li><a href="#">Home</a></li>
		<li>
			<a href="#">Categories</a>
			<ul class="submenu">
				<li><a href="#?cat=1">Tutorials<span class="number">15</span></a></li>
				<li><a href="#?cat=2">Inspiration<span class="number">5</span></a></li>
				<li><a href="#?cat=3">Roundups<span class="number">8</span></a></li>
				<li><a href="#?cat=4">HTML and CSS<span class="number">7</span></a></li>
				<li><a href="#?cat=5">Freebies<span class="number">25</span></a></li>
				<li><a href="#?cat=6">Workspaces<span class="number">4</span></a></li>
				<li><a href="#?cat=7">Apps<span class="number">9</span></a></li>
				<li><a href="#?cat=8">News<span class="number">13</span></a></li>
			</ul>
		</li>
		<li><a href="#">Archives</a></li>
		<li><a href="#">Search</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

Now we have our raw material. Let’s make it prettier.

#3 – CSS3, gradients, text shadows…

To avoid crazy browser default values, we’ll use a CSS reset. Ok, now we need to add that wooden background and position our main nav. Also we’ll use the CSS gradients to avoid using images. This is the CSS to get this working:

body {
	background: url(background.jpg);
}
.mainNav {
	position: relative;
	margin: 100px auto 0;
	width: 500px;
	height: 50px;
	font-family: Arial, Verdana;
}

Now we need to style our links. Since our subitems are also links we need to target our rules for the top ones and then create specific rules to the submenu items, which is easier than use general rules and overwriting them all every time.

We’ll use also CSS gradients for our items. Unfortunately we still need a lot of vendor prefixes to get those items working, but their syntax is pretty similar from one to another. And the final touches will be done with text shadows to avoid using images at all:

.mainNav > li > a {
	display: block;
	padding: 20px 21px 18px;
	font-size: 12px;
	line-height: 100%;
	color: #666666;
	text-decoration: none;
	text-shadow: 0 1px 0 #f4f4f4;
	text-transform: uppercase;
	border-top: 2px solid #f8f8f8;
	border-right: 1px solid #e9e9e9;
	border-bottom: 1px solid #e5e5e5;
	border-left: 1px solid #afafaf;

	background: -moz-linear-gradient( top, #dddddd, #cdcdcd );
	background: -webkit-linear-gradient( top, #dddddd, #cdcdcd );
	background: -o-linear-gradient( top, #dddddd, #cdcdcd );
	background: -khtml-linear-gradient( top, #dddddd, #cdcdcd );
	background: -ms-linear-gradient( top, #dddddd, #cdcdcd );
	background: linear-gradient( top, #dddddd, #cdcdcd );
	background-color: #dddddd;
}
	.mainNav a:hover,
	.mainNav .hover > a {
		border-top-color: #3F3F3F;
		border-bottom-color: #272727;
		color: #ffffff;
		text-shadow: none;

		background-color: #2a2a2a;
		background: -moz-linear-gradient( top, #2c2c2c, #272727 );
		background: -webkit-linear-gradient( top, #2c2c2c, #272727 );
		background: -o-linear-gradient( top, #2c2c2c, #272727 );
		background: -khtml-linear-gradient( top, #2c2c2c, #272727 );
		background: -ms-linear-gradient( top, #2c2c2c, #272727 );
		background: linear-gradient( top, #2c2c2c, #272727 );
	}

As you can see, this CSS will give a nice divisor between elements but it won’t look good for the first and the last items, so we’ll remove this styling for them:

.mainNav > li:first-child a {
	margin-left: -1px;
	border-left: none;
	border-radius: 8px 0 0 8px;
}
.mainNav > li:last-child a {
	padding-right: 25px;
	border-radius: 0 8px 8px 0;
	border-right: none;
}

Now we’ll style our submenus. We need to position it as absolute so it won’t affect the rest of our main items. Also we have a specific styling for our links under submenus. This CSS will get you there:

.submenu {
	position: absolute;
	padding: 15px 0 20px;
	width: 350px;
	background-color: #2a2a2a;
	background: -moz-linear-gradient( top, #272727, #181818 );
	background: -webkit-linear-gradient( top, #272727, #181818 );
	background: -o-linear-gradient( top, #272727, #181818 );
	background: -khtml-linear-gradient( top, #272727, #181818 );
	background: -ms-linear-gradient( top, #272727, #181818 );
	background: linear-gradient( top, #272727, #181818 );
}
	.mainNav .submenu a {
		position: relative;
		float: left;
		padding: 8px 0;
		margin: 0 0 0 16px;
		width: 150px;
		color: #666666;
		font-size: 10px;
		text-decoration: none;
		text-shadow: none;
		text-transform: lowercase;
		border: 0 none;
		border-bottom: 1px solid #333333;
	}
		.mainNav .submenu a:hover {
			margin-top: 0;
			color: #ffffff;
			border: 0 none;
			border-bottom: 1px solid #333333;
			background: transparent none no-repeat;
		}

#4 – jQuery touch

Now that we’ve got our pretty menu we need to hide it when users have JavaScript enabled and also add the proper bindings so we’ll have the hide / reveal effect.

To make things easier we just got a CDN copy of jQuery so we don’t even need to download it (more on this technique later!):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

We’ll add our script tag after everything to improve performance. You may be aware that we need to use $(document).ready(); to avoid triggering jQuery before the DOM is actually ready (doh!). But we can also use this great shortcut:

<script>
	$(function(){
		/* your code here! */
	});
</script>

This is pretty much same as $(document).ready(); but it’s far easier to remember, isn’t it?

We’ll hide our submenu. This is pretty easy, this line will do the job:

$(".submenu").hide();

Now, we need to show the submenu when we hover its parent. Since we already selected the submenu item we can just make use of jQuery chaining and go up in the DOM tree with the “parent()” function.

Now, instead of using the hover function, we’ll use the on, and a mouseenter / mouseleave binding since the hover is just a shortcut for this. This is the corrected line to get it working:

$(".submenu").hide().parent().on('mouseenter', function() {
	$this = $(this);
	if ( ! $this.hasClass("hover")) {
		$this.addClass("hover").children(".submenu").stop().fadeIn();
	}
}).on('mouseleave', function() {
	$this = $(this);
	if ( $this.hasClass("hover")) {
		$this.removeClass("hover").children(".submenu").fadeOut();
	}
});

Notice that we’ve made use of caching also, so our performance will be a little bit better than if we called $(this) twice for each block.

[Note: the code in this section for adding jQuery is used for the HTML/CSS demo. For use in WordPress themes it is recommended that you use wp_enqueue_script().]

That’s all!

So, what do you think about it? Do you have a better idea to implement this awesome menu? What about idea for future articles? Don’t be shy and let us know via comments!

View the demo | Download the source code

About the Author:

I’m a WordPress and FrontEnd (HTML5, jQuery, CSS3) specialist from Itajubá, Brasil. I just love writing about obscure topics, doing some cool stuff and helping people out there.

Follow Rochester: Website | Twitter | YouTube channel

This set of textures is free for use in your own personal and/or commercial projects. No attribution is required to use the textures.

Download the textures (12 MB zip file)

In this article we’ll take a quick look at 9 things you can do to stay focused and productive.

1. Work from a To-Do List Each Day

One of the best ways to stay focused and on task is to have a list of specific things that you need to do each day. Without having a to-do list it is easy to get distracted or to dedicate time to things that aren’t important, but with a to-do list you’ll always know exactly what you need to do each day. Most of us don’t like to end the day with things from our to-do list still unchecked, so it serves as motivation to stay on task and to get things done.

2. Eliminate the Easy Tasks from Your To-Do List First

This may be more personal preference than anything, but for me it is one of the most important things I can do to stay focused. Each day will have a few siginifcant tasks that will take up most of the day, and a few smaller tasks that can be done in a matter of a few minutes. When I look at my to-do list and see things crossed off I feel good about my progress and it’s easier to stay focused. When I leave the little things till later my to-do list will look more intimidating all day, and sometimes it can be distracting. I prefer to take care of the easier things early in the day so I can get them off of my list and then I can focus completely on major tasks without distraction of having a to-do list that looks very full.

3. Keep Your Expectations Realistic

There is only so much that you can get done in one day. If you overload your to-do list you will be stressed out all day and you probably won’t do your best quality work because you’ll be feeling rushed. If you keep a smaller number of things on your to-do list you can focus more on doing your best quality of work.

4. Work Ahead of Deadlines Whenever Possible

Working on tight deadlines can hurt your focus in a few different ways. First, if you’re thinking more about the deadline than the details of the project, it can hurt your work. Second, if you have deadlines coming up you’ll have little choice about what you’re going to work on since you’ll need to rush to meet the deadline. When you’re not working with tight deadlines you’ll have more flexibility to choose what you are going to work on each day, allowing you to use your time and attention wherever you want.

You won’t always be able to avoid tight deadlines, but it’s a good habit to work ahead of deadlines whenever possible.

5. Close Out of Unneccesary Programs

Most designers and developers work in a lot of different programs throughout the day. If you have programs open that you are not using it’s easier to get distracted by something that you aren’t expecting. Closing the programs that you’re not using at the time will help to declutter and you’ll eliminate potential distractions before they can become an issue.

6. Turn Off Your Phone

Phones can be a distraction not only when you’re receiving calls. Most people receive and send several text messages each day. By turning your phone off you won’t hear notifications of new text messages, and you won’t pick up your phone to read it. Once you pick up your phone the interenet and apps can also be a distraction. Turning the phone off for a while obviously helps to eliminate these distractions as well.

7. Don’t Try to Multi-Task

Multi-tasking is one of those things that most of us have been programmed to do, and it’s often considered to be a great skill. The problem is that when you are multi-tasking you’re not focusing on any one thing, and your work will typically suffer in all areas.

Rather than trying to do several things at once, focus on one thing at a time and move through your to-do list by checking things off individually. This will help you to get things done faster and with better quality of work.

8. Have a Comfortable, Dedicated Office Space

Your environment has a lot of influence on your focus. If you’re working from home make sure that you have an area that is dedicated to being your work space and nothing else. A private room with a door is best, but if you don’t have the space for an office make sure you at least have a desk and a section of a room for your work space. This work space should be confortable (including a good chair) and preferrably in a quiet area of the house.

9. Take Short Breaks Throughout the Day

Trying to work for too long without any breaks will lead to poor focus. Just taking 5 or 10 minutes to stretch your legs, get some fresh air, or get a drink will help to improve your level of work. Breaks don’t usually need to be long in order to have an impact. If you feel like you are struggling to focus, take a break for a few minutes.

What’s Your Experience?

How do you stay focused throughout the day? If you have tips or advice for our readers please share in the comments.

Theme features include:

• 7 color schemes from which to choose (screenshots of each are shown lower on this page)
• Customizable homepage slider
• Events calendar
• Organization news publication
• Upload your logo, or just use the site name in text

This WordPress theme was created with non-profit organizations in mind, including features that are needed by most organization websites. The homepage slider allows you to promote your programs and services, or attract attention to any initiative. Images in the slider can be linked to any page.

Most organizations have a lot of events going on, and with this theme you can have an effective event calendar. The homepage even displays 5 upcoming events for added exposure. When you set up the events you insert the date and time, and as it passes the event will be automatically removed from your site so you don’t have to remember to delete each event as it occurs.

The theme also includes a custom post type for news announcements, so you can publish press releases or other announcements and have them featured on your website. As with any WordPress-based site, blogging functionality is included. The theme’s home page template includes links to the most recent blog posts.

WordPress’s custom navigation menu feature is used for both the header and footer menus, so you have complete control over the links that are shown in your menus. The header menu supports drop downs.

From the WordPress dashboard you can enter links to your Facebook page and Twitter profile and the footer icons will be linked appropriately. If you don’t have social media profiles, simply leave the URL fields blank and no icons will be displayed.

Scroll down to see the alternate color schemes.

Documentation for the theme is available in this PDF file.

View the theme demo | Download for free

We Recommend BlueHost

If you’re looking for a hosting company, we recommend BlueHost. They offer quality shared hosting and responsive customer service at low prices. The video below shows how to sign up with BlueHost, install WordPress, and upload one of our free themes in a matter of just a few minutes. Read a more detailed explanation of why we recommend BlueHost.

Sign up with BlueHost

Alternate Color Schemes:

Calls and Screen Sharing

Join.me
It’s simple, easy, and free. Either join someone’s screen share or share your own. You can invite up to 250 viewers into your screen share and can even let them take control of your computer. Join.me has a great list of features, such as internet calling, chat, and file sharing, which makes it a great all-in-one solution for screen sharing presentations.

Skype
Skype has over 600 million users, so chances are high that even your client will have an account that he/she can hop on to at any time. Skype is a great way to have face-to-face conversations with clients when the option of meeting them in person is unavailable. In addition, if you need to chat with more than one person in a single call, Skype comes with conference call support so you can include as many people as you want in your presentation. Most importantly, Skype has a built-in screen sharing ability that allows you to switch from video to design comp with ease.

GotoMeeting
GotoMeeting is a familiar business go-to for conference calls and screen shares. You can attend meetings from your phone or your computer and utilize its convenient scheduling features to help better organize your meetings and presentations.

Google Video Chat
You probably already have your Gmail inbox open, so why not hop on a video or audio call with your clients within the same workspace? If you live in your Gmail inbox archives and frequently reference email exchanges and attachments in your workflow, Google Video is the perfect solution for communicating with your clients.

Google Voice
This is a frequently underrated communication tool that makes living our work lives on computers that much easier. Free up your hands by using your computer as your phone. Even if you miss a call, you can easily access it via Google voicemail or email transcription!

Presenting: Information Architecture and Prototypes

Axure
Axure is a powerful and robust flowcharting, wireframing, and prototyping tool for all of your IA and prototyping needs. Axure is easy to use and is packed with every sort of web tool imaginable for creating the web wireframe or prototype of your dreams. You can even utilize its dynamic panels and widgets (including user-created widgets) to make your prototypes interactive. And if you want to get even more complex with your prototypes, you can integrate APIs and data to make your prototypes work with remote data!

Mockingbird
If you’re looking for an inexpensive, browser-based solution, Mockingbird is the way to go. If you’re working with a team, everyone can access and work on your wireframes together. Previewing and sharing your wireframes is easy, and since everything is online, you’ll avoid having to deal with more file organization and clutter. To make things even easier, Mockingbird has an intuitive UI, with simple drag-and-drop interactions, smart text resizing, and interactive page linking.

Omnigraffle
Omnigraffle is a great Mac solution for creating and presenting flowcharts, sitemaps, and wireframes. While it comes with a great span of tools to create your IA needs, it really shines with its “stencils” feature. For a fully customizable and personalized look, you can utilize Omnigraffle’s stencil or user-created libraries.

InVision
Want to create beautiful wireframes and prototypes? InVision is a simple and intuitive web application that allows you to take your design jpgs, pngs, or gifs and turn them into interactive prototypes within minutes. You’ll be amazed at how easy it is to turn your flattened PSD images into dazzling working prototypes.

Presenting: Designs

Photoshop full view mode and layer comps
Did you know you can utilize the different screen modes in Photoshop to view your PSD file? Photoshop’s Full Screen view hides everything but whatever is on your canvas and allows for easy toggling access back to the PSD in case you want to edit some nitty gritty elements of your file. Another great way to present designs is to use Photoshop layer comps. Layer comps allow you to save specific visibility, position, and layer styles for different versions or parts of your design. These layer comps are saved to your PSD so you can come back to them at any time.

Preview for Mac
If you’re using a Mac, Preview is a powerful default image viewer that allows for easy viewing of your jpgs, pngs, and pdfs. If you have Lion OS X installed, you can take preview one step further by taking advantage of the revamped Slideshow or Full Screen modes. These two modes have the same functions as Preview normally does, but they’re now packed with beautiful isolated presentation screens that allow you to swipe between multiple images in a subtle but showy sliding interaction.

Picasa Photo Viewer for PC
While Windows Picture and Fax viewer has some merit to its usability, a great image viewing app that you might want to consider installing on your PC is the Picasa Photo Viewer. It’s got a great interface for navigating through files, and its black overlay background makes viewing a single design (PSD or image file) both clean and easy.

Browser Viewing
For web-based projects, another interesting way to present a design is to drag your image file straight into your internet browser. This gives your clients the experience of seeing your design in its natural environment and helps capture a better overall impression of how the design will feel. Also, if you’re HTML/CSS savvy, you can make edits with the browser’s “Inspect element” screen to center and throw a background color behind your image. You’ll hardly be able to tell that the design isn’t live!

Feedback and Collaboration Tools

Notable
Notable app allows your clients to give feedback straight onto the designs themselves (image files only). What’s especially nice about Notable is that feedback is displayed as an overlayed highlight area that clearly indicates what parts of the design are being discussed. You can then have a threaded conversation on that feedback or even create your own notes on your design.

InVision
InVision was mentioned earlier for its wireframing and prototyping capabilities, but it also allows for collaborative feedback on these projects. So not only will you have beautiful IA and designs to show your client, you can also ask them make comments right on your InVision mockups.

Basecamp
Basecamp is one of the most popular project management systems on the web. Apart from its project management system, however, is its feedback environment for designs and PSDs. Since many of your clients will probably be familiar with Basecamp, having them provide their feedback within the app itself will be beneficial for both of you. This helps you keep your project organized, recorded, and easily accessible. If you’re looking for free alternatives that yield similar results, take a look at Freedcamp and Podio.

Google Docs
Free and popular, Google Docs is a great area for storing feedback on Word docs, Excel sheets, and many other document types. Google Docs has a particularly useful commenting system which allows for easy comment threading and discussion. Especially if your clients enjoy giving written feedback, consider taking advantage of this online resource.

About the Author:

Jessica Moon is both the blog editor and a UX/UI designer at digital-telepathy, a user experience design studio that specializes in creating products like SlideDeck, Hello Bar, and Impress. She has a passion for illustration and design, and enjoys blogging and sharing what she’s learned via Twitter and Google+.

In this post we’ll showcase examples of 21 different bright and colorful websites. Hopfully, seeing these examples will give you some inspiration when you’re considering color schemes in your own work. By seeing what other designers are doing and how they are able to make colorful web designs work, you may get some ideas of your own.

Brooks Shoe Advisor

Adventure World

Global Team Travel

SulaFest

Corona Radiata

Mastec

Hitmo

Anet Design

Belong

S.O.S. Mamute

Trinity Web Tech

Dribbble Draft

Marlin Jackson

Mark Fasel Design

Viget

House

Social Forces

Art4Web

Fuzzco

Daniel Sitek

The New Web Design Guidelines

For more design inspiration please see:

• 50 Awesome Portfolio Websites
• 25 Websites with Outstanding Illustrations
• Showcase of Amazing Websites with Attention to Detail
• 25 Beautiful Non-Profit Websites
• 21 Marketing Agency Websites

Our friends at Markup-Service have offered to give PSD to HTML credits to 2 lucky readers of the Vandelay Design Blog! The first-prize winner will get $300 worth of services and the second-prize winner will get $100 worth of services. In addition, everyone who enters will get a special surprise gift from Markup-Service.

If you’ve never tried outsourcing PSD to HTML conversion, this could be a great opportunity for you. If you already use a PSD to HTML service provider, this could be a chance to test the quality of work from Markup-Service.

In addition to standard PSD to HTML conversion, Markup-Service also offers PSD to email template coding, WordPress, Joomla, and Drupal implementation. For email template coding, they also offer implementation for popular newsletter managers MailChimp, Campaign Monitor, iContact, and Constant Contact.

Their code is 100% hand coded, W3C valid and looks equally good in all popular browsers, such as Internet Explorer 7+, Mozilla Firefox 3.6+, Safari 5+, Opera 11+, and Google Chrome. Their standard turnaround time is one business day for the first page, but express delivery is also available. To get the idea of the quality of coding Markup-service provides, check out some examples of their work and what their clients have to say.

Giveaway Details:

To enter the giveaway, all you need to do is leave a comment on this post. The winners will be selected at random on Tuesday, May 22nd. At that time this post will be updated to announce the winners, and the winners will also be contacted by email. The email addresses of everyone who enters the giveaway will be provided to Markup-Service so they can then email the free surprise gift. It will be a one-time email and you will not be added to any newsletter lists.

Good luck!

UPDATE: The contest has ended. Thank you to everyone who participated. The winners are:

1st prize: John Shaw
2nd prize: Youandigraphics

Preview

Here’s a preview of icon we are going to make.

Tutorial Resources

In this tutorial, we will use resources below.

• Wood and Knot Textures from VandelayPremier.
• 26 Repeatable Pixel Pattern from PSDfreemium

Step 1

Let’s start by making a new file with size 550 px × 550 px. Acivate Rounded Rectangle tool. In the option Bar, set its Radius to 90 px. Click and drag on the canvas to draw a rounded rectangle with size 512 px x 512 px. Make sure the color is #efcb79.

Step 2

Grab Wood and Knot Textures from VandelayPremier. Place the texture on top of the shape and reduce its Opacity to 60%.

Step 3

Alt-drag vector mask from icon base which we have made on Step 1.

Add Layer Style Inner Shadow, Inner Glow, and Gradient Overlay with following settings.

Below is the result after the Layer Styles are added.

Step 4

Paste another wood and knot texture. We are going to use this texture on the lower base. This time rotate the texture a bit, about 10°. We need rotate it so the texture match the wood grain direction.

Step 5

Reduce its Opacity to 50%.

Step 6

Alt-drag the vector mask from the main base layer. Copy and paste the path to duplicate it. Move it up a few pixels and set its path mode to Subtract. By now, we should have extruded the base and get a three dimentional shape.

Below, you can see the result in 100% view.

Step 7

Apply Layer Styles Inner Shadow, Inner Glow, and Gradient Overlay.

Here’s the result. We now have darken the lower base.

Step 8

Ctrl-click lower base and make new layer. Click Edit > Stroke. Select black for its color with Width: 1 px.

Step 9

Soften the stroke line by applying Gaussian Blur filter, Filter > Blur > Gaussian Blur.

Step 10

Activate the Eraser tool. Select a big brush with low Opacity and 0% Hardness. Erase some of the line.

Step 11

Repeat previous step, but this time use white to add highlight.

Erase some of the line using Eraser tool.

Step 12: Add Papers

Draw smaller rounded rectangle shape with radius 60 px. Set its color to #f0e9d9.

Apply Layer Style Inner Glow, Pattern Overlay, and Stroke with following setting.

For the pattern, use one of the pixel pattern from PSDfreemium.

Step 13

Ctrl-click paper shape to make new selection based on its shape. Make new layer under the paper. Fill selection with black.

Step 14

Soften the shadow by applying Gaussian Blur filter.

Step 15

Click Edit > Transform > Warp. Click and drag the boxes to distort shadow shape. We want the shadow to be as natural as possible.

Once you are happy with the shape, hit Enter to accept the transformation.

Step 16

Ctrl-click the paper, make layer, and fill selection with black. Soften it using Gaussian Blur, this time use a bigger Radius.

Reduce its Opacity.

Step 17

Activate the paper shape then hit Ctrl + J to duplicate it. Hit Ctrl + T to transform the new paper. Drag outside the bounding box to rotate the paper a bit.

Step 18

Ctrl-click paper and make new layer underneath it, right above the previous paper. hit Ctrl + Alt + G to convert the layer to Clipping Mask. Fill selection with black.

Step 19

Deselect (Ctrl + D). Soften the shadow by applying Gaussian Blur filter.

Step 20

Keep repeating the same process to add more pages. Duplicate topmost page. Rotate it a bit or modify its lower points. Add new layer underneath it and convert it to Clipping Mask. Paint page shadow. In animation below, you can see progress I did in adding more pages.

Step 21: Add Curled Pages

Duplicate the topmost page. Activate Pen tool. Click its lower right corner to ad new point. Move the new point up to modify the paper shape. We are going to make it not so perfect and make it more realistic. Don’t forget to add some shadow behind the page.

Step 22

Duplicate page and add below path on its corner. Set its Path mode to Intersect. We are going to use this shape as a page curl. Remove active Layer Style and apply only Inner Glow.

Step 23

Make a new layer and convert it to Clipping Mask (Ctrl + Alt + G). Activate Brush tool with low Opacity and 0% Hardness. Paint black for subtle shadow on the shape edge and white for highlight on center of the shape.

Step 24

Make a new layer under the page. Paint a bigger shadow to make it appear more realistic.

So far, this is our result.

Step 25

Let’s add more page curl. Duplicate last page and modify its corner. Let’s move the corner up even further to add bigger page curl.

Step 26

Maker new layer behind the page and as usual paint its shadow.

Step 27

Duplicate page and add another path on its corner. Set its mode to Intersect. Add Layer Style Inner Glow.

Step 28

Ctrl-click shape. Make a new layer above the shape. Click Edit > Stroke with color #c9c4b6.

Step 29

Erase some of the line. Use soft Eraser tool to erase some of the line.

Step 30

Add a new layer above the shape and convert it to Clipping Mask. Paint shadow and highlight on the shape to add lighting and make it appear more realistic.

Step 31

Make new layer under the page curl and paint subtle shadow on the page.

Step 32: Add More Shadow Between Pages

Let’s work on the details. Make a new layer, draw an ellipse selection, fill it with black.

Step 33

Soften the line by applying Gaussian Blur filter.

Step 34

Place the blurry lines between pages by changing its layer order on th Layers Panel.

Step 35

Repeat this to other pages.

Step 36

Below, you can see that the pages stack now appears more realistic. We can see depth between each page.

Step 37: Add Torn Page

Duplicate topmost page and cut it by adding a path with path mode Intersect.

Step 38

Make new layer and convert it to Clipping Mask. paint subtle shadow on the page.

Step 39

Add new layer behind the page and paint some shadows.

Step 40

Use Pen tool to manually draw page curl. Use the same color as the other page.

Add Layer Style Inner Glow, Pattern Overlay, and Stroke.

Step 41

Add a new layer and paint curl shadow on its page.

Step 42: Add Paper Clip

Let’s draw a black rectangle shape. Add Gradient Overlay.

Step 43

Add small rectangle and two triangles paths under the shape. Set its mode to Subtract.

Step 44

Activate the Pen tool and click both vertical sides to add two new points.

Step 45

Alt-click to convert both points to sharp points. Select the points using Direct Selection tool and move them 3 px to the left.

Below is the result in 100%.

Step 46

Make new layer and convert it to Clipping Mask (Ctrl + Alt + G). Paint upper shape with black to add shadow. Add another layer and paint some highlights.

Step 47

Draw a black polygon shape using Pen tool. See picture below for reference. Apply Layer Style Gradient Overlay.

Step 48

Repeat the previous step to draw another polygon shape on each side of the previous shape.

Step 49

Make new layer and paint shadow behind the shapes.

Below is the result in 100% magnification.

Step 50

Activate the Pen tool and draw the paper clip handle. Use #d6cfc7 for its color. Add Layer Style Inner Glow and Bevel and Emboss.

Step 51

Ctrl-click the shape to make new selection based on its shape. Click Select > modify > Contract 1 px.

Step 52

Make new layer and fill selection with black.

Step 53

Deselect (Ctrl + D). Apply Gaussian Blur. Erase unneeded shadow.

Step 54

Again, ctrl-click the shape. Make a new layer behind the shape. Click Edit > Fill, Use: black.

Step 55

Soften the shadow by applying Gaussian Blur.

Move the selection 5 px to the left.

Step 56

Erase upper shadow using soft Eraser tool. Reduce layer’s Opacity if needed.

Step 57

Paint another shadow behind the shape.

Step 58

We’ve only finished drawing front face of the paper clip. We still need to work on the back. Draw a black shape and place it behind the papers.

Step 59

We’re done drawing the paper clip. We can just leave it that way, but it’s too perfect. Let’s make it more realistic by rotating it a bit. Select the paper clip, hit Ctrl + T, and click-drag to rotate it.

Step 60: Scribble

Add some random scribbles on the paper. You can simply write and draw something using the Brush tool.

Step 61: Add Application Title

Add the application name. In this tutorial, I use simple text and apply some Layer Styles.

Step 62

Make sure to place the text behind the paper clip.

Step 63

To make it appears more realistic, let’s rotate the name too.

Step 64

For final touch, I also add a line and a circle shape.

Final Result

Here is the final icon. I hope you learn some new techniques from this tutorial. If you have any question feel free to ask it in the comments below.

Download the PSD file for the icon.

About the Author:

Mohammad Jeprie is an author, blogger, and graphic designer from Indonesia. He knows some Photoshop techniques and loves sharing his knowledge with others. He runs PSDfreemium and DesainDigital where he regularly shares free design resources and some tutorials.

Follow Mohammad Jeprie: Website | Twitter

Theme features include:

• 2 color schemes (light and dark)
• Customizable slideshow on homepage
• Customizable photo galleries
• Upload your own logo, or display site name in text
• Widget-ready sidebar

The Simple Style theme gives you the ability to set up a customized theme without the cost. The homepage slideshow is perfect for showing off your work, and you can easily change the photos in the slideshow at any time. The transition effect can also be set right from the WordPress dashboard.

The theme comes with two color schemes, light and dark (scroll down to see more screenshots). You can create galleries for each of the different types of photos that you specialize in, and they are displayed in an attractive lightbox gallery.

With WordPress, your portfolio site can also include a blog. Each blog post can (optionally) include a featured photo that will be displayed above all of the content, another great way to showcase your work.

The theme uses WordPress’s custom navigation menu functionality, so you have full control over the links that are included in the navigation menu. The menu is designed and coded to support drop downs. In the footer you can enter custom text, ideal for copyright notices and contact information.

Additional screenshots are shown below.

Documentation for the theme is available in this PDF file.

View the theme demo | Download for free

We Recommend BlueHost

If you’re looking for a hosting company, we recommend BlueHost. They offer quality shared hosting and responsive customer service at low prices. The video below shows how to sign up with BlueHost, install WordPress, and upload one of our free themes in a matter of just a few minutes. Read a more detailed explanation of why we recommend BlueHost.

Sign up with BlueHost

More Screenshots:

Example photo gallery

Example blog post with featured image

Homepage in light color scheme