We’ll use various tools and techniques to create a vintage camera from scratch, from the basic Marquee Tools (to create simple shapes) to the Brush Tool (for highlights and shadows).

The tutorial has 23 steps, and it targets users with average Photoshop knowledge.

It was created by Callum Chapman from Circle Box Creative exclusively for Webdesigner Depot readers.

Feel free to share links to your own results in the comments section below… Enjoy!

Final image:

Step 1

First thing’s first. Open up Photoshop and create a new document. I’ll use a Web Preset document at 800×600 pixels.

We’ll be referring to a source image of this Halina camera, one that I took using my iPhone.

Feel free to use it or one of any other camera—in fact, I encourage this because you’ll be able to more productively experiment with the tools and techniques that I’ll show you. The choice is yours.

Once you’ve saved the photograph, go back into Photoshop and go to File → Place. Locate your image and put it in the center of your document.

Rename the new layer (i.e. the one with the source photo on it) to something appropriate, such as “Source.” Lower the Opacity of that layer to 50%.

Step 2

Our document and source photo are set up and ready to go. Before we get into the fine detail of the camera, let’s create the main shapes of the camera to use as a guide.

Make a new layer and call it “Main Body.” Grab the Rectangular Marquee Tool and drag a rectangle over the leather part of the camera’s body, as seen below.

Fill your selection with black using the Paint Bucket Tool, making sure the “Main Body” layer is selected.

We can no longer see the camera, which is why we’re about to uncheck the visible layer of the “Main Body” layer. Once it’s unchecked, create a new layer called “Left Main Body.”

Grab the Rectangular Marquee Tool again and make a selection over the left side of the main body, and then fill it with dark gray. If you’re not sure what I’m talking about, see the images below.

Repeat this last step, this time selecting and filling the right side of the camera. Don’t forget to create a new layer!

With the visibility of all layers enabled, we should see something like this:

As with any design, this one starts off looking… well, pretty rubbish. That will change, though; don’t worry.

While holding the Command key, click on the thumbnail image of our layer “Left Main Body.” Before doing anything else, hold the Command + Shift keys and click on the thumbnail image of the “Right Main Body” layer. The outline of both items should now be selected.

Select the “Main Body” layer and hit the Delete key. This will remove unwanted areas of the main body shape. We could have just visually checked that our main body shape was right to begin with, but this way tends to be much more accurate.

Select the Polygonal Lasso Tool and, with the visibility boxes unchecked on all of our shape layers, make a selection as seen below.

Right-click and select Inverse, or go to Select → Inverse. This inverts our selection so that we can remove anything outside of our original selection, rather than inside.

Click again all of the visibility boxes next to our shape layers and one by one click on each and press the Delete key. You should end up with this:

As you can see, we now have the basic shape of our camera. The reason we did this in separate layers is so that we can be much more creative in applying textures to certain areas. For example, we will be able to apply transformed or warped textured images to just one particular area.

Step 3

Although we haven’t yet created much of the main shape of the camera, we’ll start adding texture to the main body.

I find it much easier to work on one area first and then move to the next step, rather than tackle it all at once. Head over to Bittbox and download one of these leather textures (I used the last one). Put it in your document by going to File → Place.

Shrink the texture; the easiest way to do this is by hitting Command + T and dragging the corners down while holding the Shift key to keep everything in proportion.

Holding the Command key, click on the thumbnail image next to our “Main Body” layer. Right-click and select “Select Inverse.” Click on your leather texture layer (you can rename this to “Main Body Texture”) and hit the Delete key.

Move the “Main Body Texture” layer down so that it is directly above your “Main Body” layer. You can see now why renaming your layers is important; otherwise they would get very confusing.

Go to Layer → New Adjustment Layer → Brightness/Contrast. Bring the brightness level down to -75, and the contrast up to +10. Make sure the adjustment is above your “Main Body Texture” layer, and hit Command + E on the adjustment layer to merge it down to your texture layer.

This basically means that the brightness and contrast settings will be applied only to the textured layer. Warning: after merging an adjustment layer down, there’s no readjusting it, so be sure to get it right before merging.

Place the texture in your document (again), and go to Edit → Transform → Skew. Lower one side of the texture, making sure it lines up with the angle at the bottom of the left side of our main body, as seen below.

Position your texture so that it completely covers the left side of your main body. While holding the Command key, click on the thumbnail image next to our “Left Main Body” layer to make a selection.

Right-click and click on “Select Inverse,” select our new texture layer and hit the Delete key.

After renaming the layer to “Left Main Body Texture” and moving it directly above the “Left Main Body” layer, add another Adjustment → Brightness/contrast layer, this time adjusting the brightness to -20 and the contrast to +10.

Merge the adjustment layer down to the “Left Main Body Texture” layer by hitting Command + E.

Repeat the last step, this time for the right side of the main body.

You might be thinking that the color of each side of the main body looks a bit off. Don’t worry; it will probably look much more suitable once the source photo is gone.

If it still doesn’t look right, we can touch it up later. Put all of your main body layers into a folder labeled “Main Body.” This makes things much easier to manage later on; otherwise we could end up with hundreds of unorganized layers.

Uncheck the new folder’s visibility. Now we can move on to the next step.

Step 4

The next thing we’ll start is the lens. Select the Elliptical Marquee Tool, and make a round selection over the lens.

Create a new layer, and name it “Lens Shape.” Fill your selection with light gray using the Paint Bucket Tool.

Hide the visibility of our “Lens Shape” layer, and make several more circles. Use appropriate colors to fill in each circle, and remember to make each circle on a new layer.

Call them “Lens Shape 2,” “Lens Shape 3,” etc. In total, I have five lens shape layers. Here is what it looks like with all of the lens shape layers selected, and further below with all layers selected:

Step 5

Select “Lens Layer 3″ (this is my third circle in), and drag it down to the New Layer icon in the Layer Palette. This will duplicate the layer.

Hit the Command + T combination to open up the Free Transform tool, and in the menu at the top of your window, change Width and Height to 95%.

With the new layer still selected (it should be “Lens Layer 3 copy”) go to Layer → Layer Style → Blending Options. Apply an Inner Shadow using the following settings.

Repeat the last step until you have something that looks like this:

You’ll probably have around seven to nine new layers after what we just did, so put all those copied layers and the original into a folder labeled “Lens Shape 3.”

Step 6

Hide the visibility of all of your lens layers except “Lens Shape 1.” Go to Layer → Layer Style → Blending Options, and apply the following Gradient Overlay settings:

With the same layer still selected, duplicate it (as we did earlier), and reduce the height and width to 94%. Reopen the Blending Options, and darken each of the gradient colors.

We’ve covered a lot of the shaded and highlighted areas from these two simple gradients, but adding a little extra detail would be cool.

Zoom into the lens, and using a fine soft brush (using the Brush Tool) brush around some areas, as seen below. If you have a graphics tablet, this would be a good time to use it. Make sure this step is completed in a new layer labeled “Lens Highlights.”

Lower the opacity of your new highlight layer to 65%.

Repeat the last step, this time using a dark brush and painting in any shadowed areas. Do this in a new layer labeled “Lens Shadows.” Lower this layer’s opacity to 65%, too.

With all of our layers selected, here is what we have so far:

Step 7

Put all of your lens layers into a folder labeled “Lens.”

Create a new layer and name it “Inner Lens Shadow.” While holding the Command key, click on the thumbnail image of our “Lens Shape 2″ layer, which is my dark gray lens circle.

In the new layer, go to Edit → Stroke, and use the following settings:

I used a gray that is a little darker than the original gray circle.

Step 8

Our lens is starting to look pretty good. Make another new layer and call it “Lens Reflection” (all new lens layers should be put in the “Lens” folder).

Grab a soft brush and use a light-yellow color (I used #fffae5). Paint over some of the lens, as seen below.

Go to Filter → Blur → Gaussian Blur, and blur by about 10 pixels.

Change the Blending Mode of the layer to Overlay, and lower the opacity to 40%.

Step 9

Create yet another new layer (I know, there are

a lot) and name it “Flare.” Reselect the outer shape of “Lens Shape 2″ by holding the Command key and clicking on the thumbnail image of the layer, and fill the selection with pure black in the new layer.

Go to Filter → Render → Lens Flare, and use the following settings:

Change the Blending Mode to Overlay, and lower the opacity to 30%. Although this doesn’t make much of a difference, it adds that all-important detail.

Step 10

All we want to do now is add a little more texture to our lens. Create another new layer, and place in one of these textures. Scale the texture down, and place it over your lens.

Select the outline of the layer “Lens Shape 1″ (you know how to do that by now), and select inverse. Hit Delete on your textured layer.

Change the Blending Mode to Overlay, and lower the opacity to 50%.

If you feel the urge, you can repeat this step using a different texture. And you can rub some areas out using a soft eraser brush.

Step 11

Select the layer “Lens Shape 1,” and open up the Blending Options by going to Layer → Layer Style → Blending Options. Apply the following drop-shadow:

Download one of these textures (I used the last one), and insert it into your document.

Position the texture beneath your layer “Lens Shape 5″ (this is my actual lens, the glass bit).

Select the layer “Lens Shape 5,” select Inverse and hit Delete on your new texture layer (which I named “Bubble Texture”). Change the layer’s Blending Mode to Overlay.

After positioning the bubble texture over our “Lens Shape 5″ layer, go to Layer → New Adjustment Layer → Hue/Saturation.

Increase the Hue setting to +180, and hit Command + E to merge the hue/saturation layer with our bubble texture layer.

Lower the opacity to 65%. Our lens is complete!

Step 12

We’re getting somewhere now! Let’s move on to the lower area of our camera.

Using the same technique we used earlier to get the main body shape (using the Rectangular Marquee Tool and Polygonal Marquee Tool), select three different layers: “Left Bottom,” “Main Bottom” and “Right Bottom.”

Place these layers in a folder called “Bottom.”

Make sure your layers are arranged correctly, and place them beneath your lens folder.

Step 13

Open up the Blending Options for your “Main Bottom” layer. Apply the following Gradient Overlay settings:

Repeat this step twice, once for each bottom side. Use the colors from your original source photo for maximum detail.

Step 14

Create a new layer and place one of these textures into it. Place the texture over your bottom layers, like so:

While holding the Command key, select the outline of one of your bottom shapes, and then holding the Shift + Command key, click on the remaining two shapes.

This should select all of the shapes’ outlines, leaving you with this:

Go to Select → Inverse, and hit the Delete key while your texture layer is selected.

Change the texture’s Blending Mode to Overlay. Now we’re done with the bottom section of our camera.

Step 15

This is what we have so far:

The camera is pretty obvious by now, which is good because we’ve already built a huge number of layers, the total file size coming in at over 4.3 MB.

From what we have already done, you have most of the skills you’ll need for the rest of this tutorial, so I won’t go into too much detail from here on in.

Create a new folder and call it “Viewfinder.” In new layers, create the following shapes using the selection of Marquee Tools, which we’ve used several times earlier.

Use the Polygonal Lasso Tool and the Select Inverse feature to cut out the proper shapes from our existing rectangles.

Step 16

Using the same technique that we used for the circles in the lens, create a viewfinder.

This is easier than it sounds: just use the Rectangular Marquee Tool to create several rectangles, and fill them in with different colors on different layers.

Step 17

Apply some Gradient Overlays to your “Main Viewfinder,” “Left Viewfinder” and “Right Viewfinder” layers.

Step 18

Using the same texture that we used earlier for the bottom of the camera, add some texture to the viewfinder area. Make sure to use the exact same settings.

Use the Brush Tool on a new layer to create highlights in your texture.

Step 19

Using the techniques you learned when making the camera lens, spice up the viewfinder with gradients, shadows and the Brush Tool. I used Inner Shadows on every rectangle, as well as strokes.

I used subtle gradients, the Brush Tool (to add some reflection on both sides of the viewfinder) and a lens flare.

To make the circle a little dirtier, I added 6-pixels worth of noise by going to Filter → Noise → Add Noise.

Step 20

Using the Marquee Tools, draw the remaining shapes of our camera. Remember to do each shape on a different layer, and name them appropriately.

Step 21

With our shapes done, it’s time to add gradients and textures to the main body (we’ll do the buttons afterwards). Use the same techniques that we used earlier.

Step 22

Using the Brush Tool with a soft brush selected, add highlights and shadows to our newly textured shapes.

Set the Blending Modes of all of the shadow and highlight layers to Overlay (the shadows should be in black, the highlights in white).

The first screenshot is what you’ll see after applying shadows, the second after the shadows and highlights.

Step 23

We’re almost there! Apply some Gradient Overlays to our two buttons.

Use the same technique that we’ve used several times now to add lighting effects to your buttons (i.e. the Brush Tool technique).

Add some texture to your buttons to finish things off.

Conclusion

After all that hard work, we’ve finally finished! We have one pretty detailed camera that can be used as a stock image, as part of a photo manipulation or even as an icon.

Experiment with the Hue and Color Balances (you can see my modifications with the color settings further below).

Compiled exclusively for WDD by Callum Chapman, a freelance designer from Cambridge, UK. He is the creative mind behind Circlebox Creative and Circlebox Blog, and can often be found writing for design related blogs.

What do you think of this tutorial? Feel free to share your own results below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

But looking at a website as a static, unchanging bit of advertising will put you at a disadvantage sooner or later.

Trends in website design change over the years (and even months). What looked cutting edge in 2006 is going to look incredibly dated in 2009.

Even things that were popular in 2008 are starting to look dated (glossy, Web 2.0-ish designs being one case-in-point).

In this article we’ll review some of the most important aspects of site redesign, so you can use the information below as a guide for your next redesign.

It’s much better to look at your website as a constantly-updating and evolving part of your online presence.

Your design should be updated regularly to reflect new developments both in your business (or personal development if it’s a personal site) and should be redesigned thoroughly whenever necessary. Use the guide below to help you along the path of a redesign.

How to Know if Your Site Needs a Redesign

1. It Uses Outdated Technologies and Techniques

If your site uses technologies or design techniques that have become dated, it’s probably time for a redesign. While deprecated code is the most obvious of these, there are a lot of other things to watch out for, including:

• Frames
  While the occasional iFrame might not be anything to worry about (and are often used for widgets, affiliate programs, or advertising), if your site makes use of frames for a major portion of its design, it is definitely time for a redesign. Frames have been outdated since around 2000. Get rid of them.
• Intro Pages
  Intro pages were all the rage in the early 2000s. Most used Flash and/or audio content. While intro pages aren’t necessarily a completely outdated design technique, it’s becoming more rare to see them. If your site has a lengthy Flash intro, it’s probably time for a redesign.
• Outdated Content
  Modern websites need to be updated on a constant basis. Even if you have a “static” site, you still need to make sure the content on it stays current. Many older sites weren’t built on a content management system and can be a pain to update, especially for people who aren’t comfortable with coding. If your site isn’t built on a CMS, it’s probably time for a redesign.
• Your Site is Entirely Flash
  Most sites nowadays are not built entirely with Flash. Even those that appear to be, often have content pulled in from XML files, instead of being hard-coded into the Flash files. If your site was built with only Flash, it’s likely you’re suffering in the usability and SEO departments. Consider a redesign.
• Tables
  Tables were de rigueur a few years ago in website design, but tables were never really meant for laying out the design of a site; they were intended for formatting data. Designers just figured they were handy for creating complex website designs. If your current site is designed using tables, it’s time for a redesign.
• Trendy Design Elements
  If your site was designed with trendy elements (such as Web 2.0 glossy buttons), it’s probably a good idea to redesign it as soon as those trends start to fade. Don’t wait until you’re the last site around using one trend or another. Stay ahead of the curve and redesign while it still looks at least somewhat fresh. Also, consider steering clear of trendy elements, or at least incorporate them in ways that will be easy to change in six months.

2. Your Site is Largely Unchanged from 2 Years Ago

Websites should be updated continuously. If your website looks largely as it did a couple years ago, it’s likely time for a revamp.

While you don’t necessarily have to do a complete redesign every two years, you should go through your site to see what looks outdated and what could use some improvement. There’s almost certainly some things that could benefit from tweaking.

3. You’re Not Using a CMS

While this was touched upon in #1, it deserves it’s own section. Your website should really be built using a content management system (CMS).

There are a host of reasons why, but it really comes down to your ability to separate the content from the design and for the ease of making updates.

A good CMS makes it simple to add new pages, change text or photos, or even apply a completely new theme to your site without having to recode the whole thing.

Most modern websites are built using a CMS, with the exception of some of the most basic brochure-type sites and extremely Flash-heavy sites, although even these sites can be built on top of a CMS.

A CMS will make your life much easier in the long run by allowing you to make changes to your site whenever needed.

4. You’re Having Limited Luck with Search Engines

Search engine optimization is important to the success of any website. While many SEO changes can be made to existing sites, if you’ve done all those and are still having no luck, it might be time to start over.

This is especially common with table-based designs, where there’s so much extra code in your pages that your content ends up overwhelming the search engine spiders (who look at the entire code of each of your pages, not just the content that your visitors see).

Streamlining your design can make your site rank higher in search engines.

Another thing to consider, if doing a redesign primarily for SEO purposes, is to make it easier to maintain your SEO efforts with new content. Make sure it’s easy to add the alt tags and meta information to new images, pages and other content.

This will help ensure that your site continues to do well SEO-wise even months after your redesign.

5. Your Site (or Part of Your Site) is Underperforming

Search engine optimization isn’t the only bit of website performance that can suffer from a poorly designed site. Conversion rates can be significantly lowered if your site isn’t designed well.

The analytics program you use should allow you to track conversion paths on your site. If there are parts along that path where your visitors are bottlenecking, this might be a sign for a redesign.

You need to make it as easy as possible for your visitors to perform the tasks that you want them to perform on your site, whether it’s to purchase a product, read a particular article, or contact you.

6. Your Biggest Competitor Just Redesigned Their Site

It’s easy enough to put off a major redesign if all your competitors still have the same websites they had five years ago.

But if your major competitor just redesigned their site, it might be a good time to redo yours too.

This might sound like a very superficial reason for doing a redesign, but if a competitor has added new features that make their site more user friendly for visitors, your site could likely benefit from similar updates.

Whatever you do, don’t copy their new design. Look at what they’ve done and figure out where there’s still room for improvement.

See where there are bottlenecks in their navigation or if anything on the site seems confusing. Learn from their mistakes and make an even better site. Set your site apart from theirs by making it more user friendly and by paying attention to what your visitors are still missing.

Another advantage to redesigning your site right after your competition has done so, is that they’ll likely be hesitant to try to one-up you, since they’ve already spent so much on a recent redesign.

Planning for a Redesign

Just because you’ve decided that your site needs a redesign doesn’t mean you can just turn things over to a designer, sit back and relax.

There’s a lot of planning that goes into a successful redesign. Here’s what you need to consider:

1. What parts of your current site work well?

First you should assess what parts of your current design are working. Look over your analytics and any visitor comments you’ve had on your site.

Go through your site from the perspective of a new visitor (or have someone who’s never been to your site do this for you) and see what parts you like most.

Once you have a list of what parts of your current site seem to work well, try to pinpoint why they’re working. If you can figure this out, you can apply this to the new parts of your site to make them work better.

2. What parts of your site aren’t working well?

Once you’ve identified the parts of your site that work well, it’s time to identify the parts that work really poorly.

Again, your analytics are a good place to start when figuring this out. Where are the bottlenecks on your site? What are the most common exit pages? Identify these and see if you can figure out what the problem might be.

You can then ensure that your redesigned site doesn’t have the same issues as your old site.

3. Are there sections or pages that should be removed, combined, or added?

Make a list of every section and page on your site (if you have a sitemap, you can just print it out) and look at what pages and sections are really necessary.

It’s likely that your site has been added onto through the years and it might not always have been done in the most organized or efficient manner. In many cases, different sections and groupings of pages can be combined. Sometimes there are pages that can be dropped altogether.

On the flip side, you might decide you need some new sections on your site to offer information about additional products or services that you now provide. You might want to add a blog to your site, or an image gallery.

Major additions to sites are most common with redesigns of older sites, where the technology when the site was originally designed could not handle what’s now become an expected part of a website. After all, huge image galleries and video weren’t very popular when most Internet users were still using dial-up.

4. Figure out what attracts visitors to your site.

Look at where your traffic is coming from (both referring sites and the search terms visitors are using), and where they’re going once they’re on your site.

These are the parts of your site that you should focus on in your redesign.

If there are important parts of your site that visitors aren’t reaching, look at where they’re falling short in comparison to your more popular content.

5. Do you need new images and photos for your site?

If the images on your site are more than a few years old, they might look dated, even if your site’s design is current.

If you used stock photos in your original design, see what new images are available that portray the same feeling as the old images. If you took custom photos, it might be time to get new ones done.

While this can be expensive, there’s no sense in redesigning your site to look modern if the photos it includes are obviously from 1999.

Alternatively, you may decide that you want to use photos that give a different impression than the ones you’re currently using.

Maybe you want your site to portray your company in a different light than your current one does. The images you use make as much difference in this as the design and content do.

6. Do you want to maintain a consistent image or change it?

You have to consider what you want your image to be in the eyes of your website visitors. If your company’s image has changed since your original website was designed, you’ll likely want to change the impression your new site portrays.

7. Other Considerations

Many of the considerations that go into a site redesign are very similar to those that go into the design of a new site.

These include things like screen resolution, connection speed and the site’s target market. Redesigns have an advantage over new sites on these things, though, in that there’s already traffic data available.

Good analytics programs should be able to give you information about what types of connections your visitors are using, what their screen resolutions are, and where they’re coming from. Use this information to make improvements.

Do You Really Want to do a Complete Redesign?

Sometimes a complete redesign isn’t necessary. If your existing site was built on a content management system, you might just want to give your site a new coat of paint—a new theme design, without changing the structure or content of your site.

If your site’s content is mostly fine as it is, but you just feel like it needs some freshening, a new theme design or even just tweaking your existing theme can add new life to your website and a theme change is generally much less expensive than a complete redesign.

Of course, if your site wasn’t built on a CMS, even if the content and structure isn’t being changed much, you’ll be dealing with a complete redesign.

Make sure at this point that your site is converted to run on a CMS, to make future redesigns and changes easier.

Things to Watch Out For When Redesigning

There are a number of pitfalls when redesigning a website. They range from minor issues to major things that can hurt your site and your business, but if you know what they are ahead of time, you can avoid them or at least be prepared to deal with them.

Make sure you use 301 (permanent) redirects

If you’re changing the URL structure of your site (either because you’ve switched over to a CMS or for SEO purposes), you’ll need to use 301 redirects to tell visitors and search engines that your page has moved.

Some designers opt to simply put a link on the old page that directs to the new page. While this works fine for visitors, it doesn’t work for search engines.

Don’t risk being penalized in your search engine rankings for something that’s relatively simple to set up.

If your site is on an Apache server, you’ll just need to set up the redirects in an .htaccess file. If you’re on a Windows server it’s a bit more complicated, but it’s still possible and well worth the effort.

A Site Redesign Can Upset Returning Visitors

Visitors returning to your site may be upset by a redesign, especially if the structure of your site has changed.

If you have a subscription site or community site, it’s sometimes helpful to announce a redesign prior to actually performing it. Letting existing members test-drive the new site before it launches can also make returning users more comfortable on the site and smooth things over.

Remember, it can be frustrating to someone who’s used a site for months or years to suddenly have to learn how to use a new site.

While hopefully your new site will be more user friendly in the long run, it can still be disconcerting for someone who’s used to doing things a certain way to suddenly have to change their methods.

Work with a Designer Who Has Experience with Redesigns

While designing a new site and redesigning an existing site share a lot of things in common, there are also a lot of differences, especially when it comes to logistics.

A redesign is, in many cases, more complicated than a new design. There are existing links to deal with, existing processes for things like logins, and a multitude of other technical specs that designers need to adhere to in a redesign.

If your site is complex and especially if you want to keep some aspects of the site while making extensive changes to others, you need someone who is experienced in dealing with this kind of project. It will be a much smoother process if they are.

Written exclusively for WDD by Cameron Chapman.

What things do you consider when thinking about redesigning your website? When is not a good idea to do a redesign?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

It’s powerful enough to be a complete CMS, has every feature or function a blogger could dream of (either built in or available via plugins or custom functions), and it’s free and open source.

While WordPress is incredibly powerful and easy to use on its most basic levels, it can also get pretty complicated, pretty quickly.

Below are more than 300 resources to help you master WordPress no matter what your skill level is.

Everything from premium and free themes to plugins to WP hacks and everything in between is included. If it’s possible with WordPress, it’s likely you’ll find it below.

Theme Roundups, Theme Templates, and Theme Frameworks

WP can have an almost infinite variety of designs applied to it. Themes can be as simple or complicated as you want. Below are a wide variety of theme roundups, theme frameworks for building your own themes, and premium theme sites with customizable or out-of-the-box themes. Be sure to check out the tutorial section next for resources for building your own themes.

WordPress PSD Framework – A free PSD template that includes all the common elements in a WP design for you to build on.

WordPress Theme Generator – An online theme generator that doesn’t require any coding knowledge.

Easier Theme Development with Sample WordPress Content – A downloadable bundle of sample WP content that includes posts, tags, categories, and pages to make theme development easier.

Blank WordPress Themes Ready for 2.7 Up for Grabs – Offers up a couple of free, empty themes you can download.

Blank WordPress Themes – A collection of two- and three-column blank themes from Refueled.

Thematic – One of the most advanced theme frameworks available.

Carrington – A free WP CMS theme framework that includes two browser versions and a mobile version.

Free HTML 5 WordPress Theme – A free theme template that takes advantage of HTML 5 features and functions.

The Buffet Framework – A theme framework aimed to be easy-to-use for both developers and end users.

Thesis Theme for WordPress – Another basic theme framework.

OnePress Community – A WP and bb Press theme framework.

Whiteboard – A basic framework for WP theme development.

WP Framework – A blank theme framework with minimal formatting.

WordPress Theme Frameworks—A Comprehensive Overview – A great rundown of what theme frameworks are and why they’re useful.

WordPress Theme Development Frameworks – An in-depth review of some of the most popular WP theme frameworks.

WP Contact Manager – A theme that basically transforms your WP installation into a full-featured contact manager.

41 Great Looking Free WordPress Themes – A roundup of beautiful free themes.

16 Free Premium WordPress Themes That Don’t Suck – An awesome roundup of free premium-style themes.

11 Tips for Speeding Up WordPress Theme Development – A great list of ways to speed up your theme development process.

13 Helpful Cheat Sheets for Building WordPress Themes – A great roundup of cheat sheets helpful to WP theme designers.

140+ Brilliant Free WordPress Themes Around – A roundup of some excellent free WP themes.

10 of the Best WordPress 2.7 Compatible Themes – An overview of ten excellent WP themes compiled by Mashable.

10+ Best WordPress Themes for March 2009 – An awesome collection of newish themes from WP DesignBlog.

17 Free and Best WordPress Themes – A small roundup of excellent WP themes.

3-Column WordPress Theme Gallery – Includes a large number of excellent 3-column themes.

45+ Free Premium WordPress Themes with Magazine or Grid Layouts – An excellent roundup of free magazine-style and grid themes.

15 Fresh WordPress Themes to Get the Coolest Portfolio for You or Your Studio – A collection of portfolio-styled WP themes.

Best WordPress Themes Collection – A roundup of excellent paid WP themes.

10 Best Free WordPress Themes You Haven’t Seen – A great collection of seldom-seen WP themes.

30 Free Magazine/Grid Style WordPress Themes – A compilation of 30 excellent magazine and grid style WP themes.

100 Excellent Free WordPress Themes – An excellent roundup of high-quality themes from Smashing Magazine.

40 Stylish, Minimal and Clean Free WordPress Themes – A roundup of minimalist themes from Speckyboy Design Magazine.

WordPress.org – The official theme repository from WordPress, with nearly 1,000 free themes available.

WordPressThemesBase.com – A categorized theme directory that you can browse by category, design properties (columns, sidebars, etc.) or tag.

Top WP Themes – A directory of free themes, many with a corporate or professional look.

Themes2WP.com – A categorized directory with more than a thousand themes.

WPthemespot.com – A theme aggregator with beautiful themes featured from all over the web.

WooThemes – Offers paid themes in a club format, though you can also purchase individual themes.

Obox Theme Shop – A premium theme site with some really awesome themes available with single-site licenses or developer licenses.

StudioPress – Premium WP theme site that lets you download themes individually or as a package.

NattyWP – Another club-based premium themes site.

Blurbia – A premium themes site that also offers one free theme.

Elegant Themes – Another great premium themes site that allows unlimited access for less than $20.

WP Remix – A premium WP CMS theme with more than 50 page templates available.

10 Premium WordPress Themes Released in April 2009 – A roundup of recently released premium themes.

Gorilla Themes – A premium themes site with ten themes available.

Press75 – Another premium themes site that lets you buy themes individually or as a bundle.

Theme Layouts WordPress Themes – The WP category from ThemeLayouts has hundreds of themes available, free for members to download.

100 Amazing Free WordPress Themes for 2009 – An awesome roundup of beautiful themes compiled by Smashing Magazine.

Cream of the Crop: Six Cutting-Edge, Minimalist WordPress Themes – An article from Skelliewag of beautiful, minimal themes.

Graph Paper Press – A club-based WP themes gallery that also offers some free theme downloads.

10 Minimalist WordPress Themes You’ll Love – A collection of ten minimalist themes, some of which aren’t commonly seen.

25 Simple and Minimal WordPress Themes – A great roundup of minimalist themes from ReviewPk.

60 Great WordPress Themes – An excellent, recent roundup of gorgeous WP themes.

25 Best Free WordPress Themes – An absolutely amazing roundup compiled by EliteFreelancing.com of gorgeous WP themes.

14 Most Visually Appealing Free WordPress Themes – A small collection of beautiful and elegant themes.

15 Magazine WordPress Themes You Can Use for Free – Another roundup of excellent magazine themes.

83 Beautiful WordPress Themes You (Probably) Haven’t Seen Yet – While this post is a couple of years old and you probably have seen many of the themes on it, it’s still a great roundup of gorgeous designs.

21 Mindblowing Premium-Like Free WordPress Themes – A collection of unique themes that often defy the conventions of what we normally think of as a “blog design.”

20 More Free First-Class WordPress Themes – An excellent roundup of beautiful themes, many of which aren’t widely seen yet.

85 Best Beautiful Free WordPress Themes – An excellent roundup from [Re]Encoded.com of stunning WP themes.

23 of the Best Grunge-Style WordPress Themes – A collection of excellent grunge-style themes, many of which aren’t commonly seen.

13 Best Grunge WordPress Themes Online – A great roundup from CSSAddict of beautiful grunge themes.

20 Free 3 Column WP Themes – A great roundup of gorgeous 3-column themes.

45+ Must See WordPress Themes – A categorized roundup of themes compiled by Noupe.

15 Free Stunning and Unique WordPress Themes – A roundup of mostly clean and professional-looking themes.

WordPress Rainbow: 35 Colorful Free WordPress Themes – A great roundup of bright and colorful free themes.

22 Free and Unique WordPress Themes – A recent roundup of themes not seen very often.

Great Green WordPress Themes – A wonderful collection of WP themes with a green color scheme.

25 Free WordPress Themes (2009 Edition) – A roundup of some really beautiful and different themes.

25 Artistic Themes for WordPress – A great roundup of artsy WP themes.

21 Premium-Like Free Photoblog Themes for WordPress – Photoblogs have specific needs not often addressed in standard WP themes. Here are 21 themes specifically built for photoblogs.

15 Portfolio Themes for WordPress – A great roundup of themes perfect for portfolio sites.

65+ Free Exceptional WordPress Themes Worth Investigating – A great roundup of gorgeous themes compiled by Tripwire Magazine.

8 Fresh WordPress Themes – An older post that offers up some great theme designs.

50 Beautiful Free WordPress Themes – A roundup of stunning WP themes.

Tutorials and Tips

The tutorials featured below cover everything from basic WP installation and setup to more complicated topics like theme development, plugin development and advanced WP features and functions.

My WordPress Install Process – A guide from Blogging Pro for installing WP.

You’ve Installed WordPress, So What’s Next? – A great overview of steps you should take after you’ve installed WP.

The Ultimate Guide to Setting Up WordPress after an Install – A complete guide to what to do once you’ve installed WP, from Pro Blog Design.

Dissection of a WordPress Theme: Part 1 – A really in-depth overview of how WP themes are constructed.

How to Create a WordPress Theme: The Ultimate WordPress Theme Tutorial – An extremely in-depth tutorial for creating themes from ThemeShaper.

The WordPress Developer Toolkit – This tutorial and tool roundup from iThemes gives a great overview of what you need to have and learn to develop great WP sites.

How to Edit WordPress Themes Using Dreamweaver – A great guide to theme editing with Dreamweaver.

WordPress as a CMS – A 27-minute video tutorial for using WP as a content management system.

How to Create a WordPress Theme from Scratch – A great tutorial for building a WP theme from the ground up.

Create An Awesome WordPress Theme Options Page (Part 1) – A tutorial for creating a theme options panel in the backend of WP.

WordPress Loop: Get Posts Published Between Two Particular Dates – A great guide to retrieving and displaying posts published during a specific time frame.

Leopard: How to Install WordPress – A tutorial for creating a local installation of WP on Mac OS X Leopard.

Premium WordPress Theme Design Part 1—The Photoshop Mock Up – The first in a series of tutorials for creating a premium-style WP theme.

The Power of WordPress Custom Fields – A great overview for working with custom fields.

Customize Your WordPress Login – Learn how to customize the look of your WP login screen.

Things You Should Know When Using Post Excerpt – An overview of things to keep in mind when using the post excerpt function in WP.

WordPress Custom Fields; Laying Text Over Your Lead Graphic – A tutorial that shows you how to add a text overlay to your graphics.

5 Useful WordPress Functions You Didn’t Know Existed – A rundown of five great WP functions most people have never heard of.

Power Tips for WordPress Template Developers – An excellent resource from Smashing Magazine of advanced techniques useful to template and theme developers.

How to: Make a Control Panel for Your WordPress Theme – A tutorial for creating a customization menu in the backend. for your WP theme.

WordPress Ajax Commenting Revisited – A tutorial for creating your own ajax comment system.

WordPress Screencast Tutorial—Photo Captions – A video tutorial for adding captions to your photos.

How To: Adding an Author Page to Your WordPress Blog – A fantastic tutorial for creating an “about the author” page on your blog.

Turning a Web Template into a WordPress Theme: A Video Tutorial – A video tutorial for turning virtually any website template into a WP theme.

Styling Your WordPress Comments – Learn to style your comments to better complement your site’s design.

Displaying Author Meta Information in WordPress 2.8 – An excellent tutorial for displaying the meta information included about authors within the front-end of your WP site.

So You Want to Create WordPress Themes, Huh? – This is one of the most comprehensive and in-depth theme development tutorials out there, broken down into more than 16 parts.

The Ultimate Guide to the WordPress Loop – A must-have resource for anyone who wants to develop WP themes or just have a better understanding of how WP works.

Mastering Your WordPress Theme Hacks and Techniques – A great collection of hacks and customization from Noupe.

How to Use Thumbnails Generated by WordPress in Your Theme – A guide to working with WP-generated thumbnail images.

How to Write Your Own WordPress Theme – A complete tutorial for WP theme development.

Tutorial: Creating Custom Write Panels in WordPress – A tutorial for adding unique data to your posts using custom write fields in the backend.

Display Thumbnails for Related Posts in WordPress – A tutorial for displaying the WP-generated thumbnail images for your posts in a related posts list.

How to Set Up Pretty Permalinks in WordPress – A guide to creating pretty permalinks from ThemeLab.

Multiple WordPress Page Layouts in One Single Template – A tutorial that shows you how to create more than one page layout without having to resort to separate templates.

Build a Newspaper Theme with WP_Query and the 960 CSS Framework – A complete tutorial for building a news-style theme.

How-To: Create a WordPress Theme in 5 Minutes – A tutorial that shows how to set up a basic WP theme. It also includes all the code you’ll need.

The Ultimate WordPress 2.8 Optimization Guide – A complete guide for setting up and optimizing your WP 2.8 installation.

WordPress as a CMS: How to Think About Building a Website with WordPress – A great overview and tutorial for setting WP up as a CMS.

WordPress: How to Get Custom Fields Outside the Loop – A tutorial for creating custom fields that reside outside the WP Loop.

WordPress Tutorial: Blog Posts in Different Columns – A tutorial that shows how to make blog posts appear in more than one column on your site.

Multiple WordPress Loops Explained – A great tutorial to get you started with multiple loops.

DiggProof Your WordPress – A complete guide to making your site stand up to traffic spikes, like those caused by making the front page of Digg.

Displaying Code in WordPress Posts – A brief overview of the methods available for displaying code snippets within your posts.

WordPress Tutorial: Category Trick for WP 2.7 – A tutorial for applying different styles to specific categories.

How to Make a Random Post Button – A tutorial for creating a button to take visitors to a random post on your blog.

10 Things to Do After Installing WordPress – A list of 10 must-do steps to take after installing a fresh copy of WordPress.

10 Impressive Techniques to Spice Up Your WordPress Theme – A great roundup of style improvements you can add to your WP theme.

20+ Tutorials and Resources for Working with Custom Fields in WordPress – An excellent collection of tutorials for dealing with custom fields.

Top 50 WordPress Tutorials – A roundup of fifty great WP tutorials compiled by Nettuts+ and covering virtually every aspect of WP development.

135+ Ultimate Round-Up of WordPress Tutorials – A categorized roundup of tutorials compiled by instantShift.

30 Tutorials Combining Both WordPress and jQuery – A great roundup of jQuery/WP combo tutorials from Speckyboy Design Magazine.

40+ Awesome Tutorials and Techniques for WordPress Theme Developers – A tutorial list specifically aimed at theme development put together by tripwire magazine.

60+ Awesome WordPress Tutorials – A great collection of tutorials that will lead you right from installation through advanced WP development.

30 Excellent WordPress Video Tutorials – A collection of video tutorials for everything from theme development to creating plugins to administration tasks.

110+ Massive WordPress Video Tutorial Collection – A roundup of more than 110 video tutorials for everything from installing WP to using it to developing for it.

Top 10 Tutorials for Developing WordPress Themes – A compilation of ten of the best theme development tutorials out there.

23+ Excellent Tutorials for WordPress Theme Developers – A great roundup of theme development tutorials from Web Developer Plus.

63 Essential WordPress Hacks, Tutorials, Help Files and Cheats – A great roundup of WP resources.

Getting Past First Base…Using WordPress as a CMS – A recent guide from Foraker Design to using WP as a CMS.

How to Speed Up Your WordPress Blog – An excellent resource for making your WP site run faster.

HOW TO: Create a jQuery Carousel with WordPress Posts – An excellent tutorial for creating a carousel to display WP posts from a specific category.

Customize WordPress Theme to Match an Existing Website: A Step-by-Step Blog Integration Tutorial – Create a WP theme that matches an existing website design for seamless integration.

How to Only Show Posts With a Specific Custom Field – A quick tutorial for showing posts with content in a specific custom field.

Create a Plugin With Its Own Custom Database Table – A tutorial for coding plugins that need to have their own custom db table.

How to Add Sidebars to a Theme – A very basic tutorial for theme developers.

Post Image the Easy Peasy Way – A quick tutorial for creating a function that automatically displays images with your posts.

How to Add an Announcement Box to Your WordPress Theme – A complete tutorial for creating a news or announcement box that can be switched on and off from the dashboard.

Create Your Own Private Twitter Site Using WordPress – A quick tutorial for creating a private, Twitter-like network using WordPress.

How to Add Pagination Into a List of Records or WordPress Plugin – A very thorough tutorial for adding pagination to records generated by a WP plugin.

Creating Widgets in WordPress 2.8 with the Widget API – A great overview and tutorial for working with the new widget API included in WP 2.8.

Use WordPress as a PHP Framework for Your Static HTML Pages – A very interesting tutorial on how to use WP as a PHP framework.

Tutorial: Multiple single.php Templates in WordPress – A guide to using more than one single.php file in WP.

How to Create a Beautiful Dropdown Blogroll without JavaScript – A complete tutorial for creating dropdown menus using just plain HTML.

Custom Header Images for WordPress Pages – A tutorial for using custom header images on different pages using custom fields.

How to Display Recent Comments Without Using a Plugin or Widget – An excellent tutorial for adding recent comments to your theme using the functions.php file and some code right within your theme files.

Display a Random Post (with AJAX Refresh) – A complete tutorial for creating a random post display using jQuery.

Get More Traffic: An SEO Guide for WordPress – Thorough coverage of changes to make to improve your blog’s SEO.

How to Design and Style Your WordPress Plugin Admin Panel – A complete tutorial for styling the admin panel for your WP plugins.

Wicked WordPress Archives in One Easy Step! – A complete tutorial for creating stylish WP archives.

Make a Mobile Friendly Version of Your Blog with Google Reader – An awesome method of making a blog better-formatted for viewing on mobile devices by using Google Reader.

Designing for WordPress: Complete Series and Downloads – A complete video tutorial series from Chris Coyier for designing WP themes.

100+ WordPress Video Tutorials, from Basic to Advance – An awesome roundup of video tutorials for virtually every aspect of working with WP.

Complete WordPress Theme Guide – A three-part tutorial series from Web Designer Wall for creating WP themes.

Import and Export WordPress Data – A video tutorial that shows you how to import your data from other blogging platforms (including TypePad and Blogger) and how to export your data for installing on another version of WP.

Create a Tabbed Featured Posts Area in WordPress – A tutorial for creating a tabbed area for displaying multiple featured posts.

A Crash-Course in WordPress Plugin Development – A video tutorial for creating your first WP plugin.

List of WordPress Thesis Theme Tutorials – A collection of tutorials for working with the Thesis parent theme.

Tutorial: Add a Background to Your WordPress Theme – A very basic tutorial for adding a different background image to a standard WP theme.

26 Complete WordPress Blog Design Tutorials – A roundup of 26 tutorials for creating specific WP designs from scratch.

Installing WordPress on Tiger – A great tutorial for installing a local copy of WordPress on Mac OS X 10.4 Tiger.

Integrating BuddyPress, WordPress MU, and bbPress – A great guide if you want to build a complete social networking site.

12 Great Tutorials on Creating a New WordPress Theme – An awesome roundup of theme development tutorials compiled by [Re]Encoded.com.

5 Useful and Creative Ways to Use WordPress Widgets – A great guide to using WP widgets.

How to Easily Customize the WordPress Image Caption – A tutorial for customizing the appearance of the built-in WP image caption text.

10 Steps to a Client Friendly WordPress CMS – A guide to making WP more end-user-friendly as a CMS.

An Elegant Featured Content Slider for WordPress – A tutorial for creating a slider to display your recent posts.

WordPress Theme Guide – A complete guide to building WP themes from Urban Giraffe.

Mastering WordPress Shortcodes – A great guide for learning all about WP shortcodes.

Plugins

Plugins extend the functionality of a standard WP installation. There are thousands of plugins on the WordPress site but finding the best among them can be incredibly time-consuming. The plugins featured here have already been vetted by other bloggers, making it easier to find not only the plugins that do what you want, but those that do it well.

BuddyPress – A plugin that adds a social networking platform to WordPress MU.

bbPress – A forum system meant to integrate with WP, created by the makers of WP.

Wordpress Plugins and Tutorials – A great roundup of categorized plugins, with a few articles and tutorials included at the end.

Top 10 Characteristics of a Great WordPress Plugin – An excellent guide that should be referred to by anyone developing, or even just using, WP plugins.

12 WordPress Plugins for Theme Development – A great list of plugins essential for theme developers.

Top 35 Plugins of WordPress to Share Your Blog Post – A great roundup of plugins that make it easier for your visitors to share your blog’s content.

3 WordPress Plugins to Manage 125×125 Ads – 125-pixel-square ads are a very popular size; here are three plugins to help you manage them.

55 Best WordPress Plugins – A roundup from About.com of the plugins every WP user should consider.

Top WordPress Plugins – A compilation from TheBlogJoint.com of the best WP plugins available.

10 Best WordPress Plugins—March 2009 – A recent post covering ten of the best WP plugins, including ThickBox and Lexi.

20 Best WordPress Plugins—April 2009 – Another great roundup from AjaxLine of recent WP plugins, including AnyFont and Twitter Widget Pro.

13 of the Best WordPress Plugins – A list compiled by David Airey of the best WP plugins, including All in One SEO Pack and cforms II.

6 Best Facebook WordPress Plugins – A collection of six plugins for integrating your WordPress blog and your Facebook profile or page.

20 of the Best SEO Plugins for WordPress – A collection of great plugins to improve your SEO, compiled by Mashable.

30+ Must Have WordPress Plugins – Another roundup of essential WP plugins.

Best WordPress Plugin for Related Posts? – A review of some of the available related posts plugins and the author’s verdict on which one is best.

50 Best WordPress Plugins for Power Blogging – A compilation of some of the best plugins available for WP power users.

5 of the Best WordPress Plugins – A fairly in-depth look at five great WP plugins.

Top WordPress Plugins – A roundup of great plugins, broken down by category and including Advanced Admin Menu and In Series.

11 Top WordPress Plugins Every Blog Should Have – A list from Yoast of what they consider to be the essential WP plugins.

Top 8 WordPress Plugins Used by SEO.com – A list of 8 of SEO.com’s preferred WP plugins.

70 Best WordPress Plugins to Supercharge Your Blog – A comprehensive list of awesome plugins, including Broken Link Checker and Comment Timeout.

The Best WordPress Plugins – A short review of some of the best WP plugins out there.

9 Best WordPress Plugins – A list of great plugins, including WP Smushit and WP Syntax.

Best WordPress Plugins—18 Most Downloaded WordPress Plugins Ever – A listing of the most popular WP plugins, including NextGEN Gallery and WP Super Cache.

5 Best WordPress Plugins to Shorten URLs – A collection of WP plugins for shortening your URLs.

Best WordPress Plugins – This post compiles the best WP plugins broken down by category.

WP Tutorial: Your First WP Plugin – A tutorial for creating your own WP plugins.

10 WordPress Plugins Guaranteed to Save You Time – This is a great collection of plugins compiled by Six Revisions to make you a more efficient blogger.

How to Write a Simple WordPress Plugin – A great tutorial to acquaint you with building WP plugins.

40 Exceptional “CMS Enabling” WordPress Plugins – Includes forty plugins to turn WP into a full-featured content management system.

Contact Form Plugins for WordPress – An overview of some of the contact form plugins available for WP.

The TTFTitles WordPress Plugin – A plugin to let you swap out your post titles with dynamically-created images.

TDO Mini Forms – This is one of the coolest plugins for WP out there. It allows non-registered users and/or subscribers to your site to submit their own content (which is kept in draft form until an administrator approves it). It even works with Akismet to help prevent spam posts.

30+ Plugins for WordPress Comments – A great roundup of comments-related plugins compiled by Mashable.

21 of the Best WordPress Plugins for New Blogs – A collection of plugins focused mostly on front-end features and basic end-user management.

Top 5 WordPress Plugins that Help Increase Comments – A small roundup of plugins designed to get more visitors to comment.

Top 30 WordPress Plugins That Are Actually Useful! – An awesome roundup from Speckyboy Design Magazine of incredibly useful plugins, including FireStats and WASABI Related Post.

19 Top WordPress Plugins – A great roundup of popular and useful WP plugins, including DISQUS Comment System and Popularity Contest.

Top 10 WordPress Hidden Gems (Plugins) – An awesome roundup of often-overlooked plugins that do really amazing things, including Front-End Editor and Feed Styler.

10 of the Best WordPress Contact Form Plugins to Choose From – A roundup of some of the best contact plugins available.

Top 11 Comment Plugins to Make Your WordPress Blog More User Friendly – An awesome roundup of comments-related plugins, including the Top Commentators Widget and CommentLuv.

Top 10 WordPress Gallery Plugins – Ten great plugins for creating and managing image galleries.

10 Best Photo and Image WordPress Plugins – A roundup of excellent plugins for handling images, including Shutter Reloaded and SEO Friendly Images.

Plugins That Make WordPress Into a Company Intranet – Coverage of plugins that make it possible to use WP as a corporate intranet.

20 New, Useful and Promising WordPress Plugins – A roundup of twenty great WP plugins, including WP Greet-Box and Post Ideas.

10 Mistakes You Could Avoid in WordPress Plugin Development – A must-read article for anyone doing plugin development.

16 Excellent WordPress Security Plugins to Secure Your Blog – A great roundup of security-related plugins for WP.

31 Useful Twitter Plugins for WordPress to Choose From – An extensive list of plugins for integrating Twitter and WP.

6 WordPress Plugins That Help Your Blog’s Maintenance – A great roundup of maintenance-related plugins, including Broken Link Checker and WP Anti-Virus.

Tricks, Customizations, and Hacks

The resources featured below involve customizations and hacks you can apply to your WP installation and themes that extend the functionality of WP beyond what plugins and widgets are generally capable of.

13 Vital Tips and Hacks to Protect Your WordPress Admin Area – A compilation of security hacks for WP admin.

Hack Together a User Contributed Link Feed with WordPress Comments – Shows you how to set up a user-generated public link feed by utilizing post comments.

5 Great WordPress Hacks – A small roundup of hacks, including sending pages to Twitter and listing all of the authors on your blog.

Top 10 WordPress Hacks from June ‘09 – A roundup of recent hacks, including listing all hooked WP functions and detecting which browser a visitor is using.

9 WordPress Hacks to Encourage User Interactivity – A great collection of hacks for getting your visitors to interact more, including showing the most recent comments and reversing the order of your comments so the newest ones show up first.

9 Useful Snippets for Your WordPress Functions – A collection of handy snippets you can add to your functions.php file to add functionality to your blog.

WordPress Hack: Opening Links in New Windows – A great hack using JavaScript for forcing links to open in new windows.

10 Tips to Improve Your WordPress Theme – A great rundown of theme customizations that make your site more user-friendly.

10 Most Wanted Category Hacks and Plugins for WordPress – A great rundown of category hacks, including displaying the most recent posts within a specific category and excluding certain categories from being displayed in a loop.

10 Awesome .htaccess Hacks for WordPress – A great collection of .htaccess hacks, including removing/category/ from your WP URLs and how to redirect visitors to a maintenance page.

10 Killer WordPress Hacks – A roundup of great hacks from Smashing Magazine, including displaying AdSense ads only to search engine visitors and replacing the “next” and “previous” page links with pagination.

10 WordPress Tips and Tricks for Your Comment Page – A great roundup of comment tricks, including displaying the total number of comments on your blog and separating comments from trackbacks.

15 Killer Hacks for WordPress That Are Extremely Useful – An excellent roundup of useful hacks including displaying random header images on your blog and listing future “upcoming” posts.

9 Extremely Useful RSS Tricks and Snippets for WordPress – A great selection of tricks and customizations for RSS feeds, including creating RSS-only posts and excluding a category from your RSS feeds.

7 WordPress Customizations – A quick rundown of how to customize your WP installation in multiple ways.

Define Your Own WordPress Loop Using WP_Query – A great hack to creating your own customized WP loop.

10 Useful WordPress Loop Hacks – A roundup from Smashing Magazine of ten excellent WP loop hacks.

13 Tags to Delete From Your Theme – A list of tags that are generally unnecessary in a standard WP theme.

30+ New Useful WordPress Tricks & Hacks – This post from Hong Kiat shows more than thirty new hacks and tricks to customize your WP installation.

40+ Most Wanted WordPress Tricks and Hacks – A roundup of great hacks compiled by Hong Kiat.

WordPress Theme Hacks – A roundup of a number of simple hacks for making better WP themes.

30+ (More) Most Wanted WordPress Tips, Tricks and Hacks – Another roundup from Hong Kiat of great WP customizations.

22 Mixed Quality WordPress Hacks – Despite the title, this is actually a roundup of more than twenty high-quality hacks for customizing your WP blog and making it stand out from the crowd.

10 Easy Ways to Fix Common WordPress Headaches – A great overview of ways to improve the functionality of your WP installation.

Galleries and Inspiration

If you’re looking for inspiration for your next WP-powered site, look no further than the resources below. Included are design roundups, galleries, and instances of uncommon WP usages.

160 Unique WordPress Themes – An awesome roundup of 160 unique WP designs.

11 Non-Traditional Uses of WordPress – A great roundup of some unique WP implementations and the tools used to create them.

WPLuxe – A great WP gallery that also includes a blog with WP news and resources.

45 Beautiful and Creative (WordPress) Designs – A roundup of beautiful WP designs compiled by Six Revisions.

15 Creative WordPress Header Designs – A small roundup of beautiful WP headers.

15 Impressive and Beautiful Uses of WordPress – A collection of 15 sites using WordPress in elegant and innovative ways.

Best WordPress Sites – A gallery of excellent WP-powered sites compiled by N.Design Studio.

60+ Unusual WP Blog Designs – A great roundup post from Noupe of unique WP designs.

30 Untypical WordPress Sites – A great roundup of 30 unique WP sites.

WordPress Showcase – The official WP showcase blog/gallery.

WP Inspiration – An amazing gallery showcasing only WP-powered sites.

CSSBloom – This gallery includes a WP tag with a great collection of unique designs.

CSS Glance – Another gallery with a WP tag that includes hundreds of WP designs.

We Love WP – A great gallery dedicated to beautiful WP designs.

Sites—WP Candy – A WP gallery from the WP Candy blog.

LoopPress – A WP gallery that lets you rate and comment on designs.

WPCube – Another dedicated WP gallery.

Unmatched Style – The WP category on Unmatched Style includes a few dozen WP designs.

Best CSS Gallery – Their WordPress tag includes more than a dozen WP designs.

Gallerific – Another general-purpose gallery that has a WP tag and features some great designs.

Blogs, Articles and Other Resources

This is where you’ll find everything else WP-related that didn’t quite fit into the categories above. There are articles about WP-specific topics, blogs by and for WordPress designers and developers, and cheat sheets and other resources to make your WP development easier and more efficient.

Adii Rockstar – The blog of “WP Rockstar” and theme developer Adii, covering blogging, development, and themes, among other topics.

Brian Gardner – The personal blog of WP theme designer Brian Gardener.

WordPress Tavern – A blog that covers WP news, plugins, themes, and even BuddyPress.

instantShift – InstantShift’s WordPress category has tons of great tutorials, tips, and other information on WP.

StylizedWeb – StylizedWeb has a great WP category with tutorials, reviews, plugins, theme roundups, free themes, and more.

Weblog Tools Collection – A WP blog that covers mostly plugin news and releases.

WordPress Blog – The official WP blog.

WordPress.com Just Another WordPress Weblog – The official Wordpress.com blog.

WPCandy – A blog that covers themes, plugins, tutorials, and more.

WordPress Publisher Blog – A blog from Automattic aimed at publishers using WordPress.

Hong Kiat – Hong Kiat’s WordPress category has pages of great content, including hacks, tutorials, giveaways, and roundups (some of which are mentioned above).

155 WordPress Resources, Tutorials, Plugins, Themes, AJAX, Podcasting…WP Monster List – A huge roundup of resources from Speckyboy Design Magazine.

The Advanced WordPress Help Sheet – A PDF WP cheat sheet.

WordPress.tv – View videos about all things WP.

Nathan Rice – Nathan Rice writes about WP theme design and blogging.

WpRecipes.com – A blog covering WP tutorials and tips.

Wpazo – A blog covering the best WP news, resources, and updates every day.

WP Engineer – A blog for WP developers.

ThemeShaper – The blog from the developers of the Thematic framework.

WordPress Weekly – A weekly podcast dedicated to WP from TalkShoe.

Darren Hoyt – Darren Hoyt’s WP archive category has tons of great resources and new articles are added most months.

WordPress Theme Development Check List—PDF Version – A PDF checklist for WP theme development.

Justin Tadlock – Blogs about WP plugins, tutorials, and news.

Plugins – A podcast dedicated to WP plugins.

WordCast – A WordPress podcast with more than 60 episodes already published.

50+ Cheat Sheets for Building WordPress Themes and Plugins – A huge roundup of cheat sheets and references for theme and plugin developers.

WP Topics – An aggregation of the content of some of the most popular blogs about WP out there.

Pro Blog Design – Pro Blog Design’s WordPress tag has tons of articles and resources related to WP design and customization.

Top WordPress 2.7 Tips, Hacks, Plugins and Resources – While this roundup is specific to WP 2.7, much of the resources and information it includes also applies to 2.8.

100+ Killer WordPress Resources – A huge collection of varied WP resources compiled by Steffan Antonas.

WordPress Daddy – A great blog with regular posts on plugins, customizations and hacks.

WPDesigner.com – A great blog with a huge archive of WP-related content.

wpGuy – A blog dedicated to WP that also features themes and plugins.

Lorelle on WordPress – An exceptional WP blog that covers tons or WP news, tips and advice, as well as general blogging info.

15 Resources for Setting Up an E-Commerce Site with WordPress – A great roundup of plugins, themes, and tutorials for creating an e-commerce site with WP.

The Autopsy of WordPress as CMS with 25 Great WP Plugins and Designs – A great article on using WP as a CMS, along with plugins that make it possible.

WordPress God: 300+ Tools for Running Your WordPress Blog – A slightly older post from Mashable, but it still has some great plugins and other resources listed.

Compiled exclusively for WDD by Cameron Chapman.

Which are the resources and plugins you can’t live without? Did we miss your favorite one? Please add it below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

With vector shapes, the objects can be preserved and edited infinitely which is a great advantage over raster objects.

A few simple tweaks from the Effects menu and an understanding of basic object rendering can create a bold and stunning finish.

In this tutorial, created exclusively for WDD by Wendy Ding, she’ll be guiding you step by step through the stages required to create a realistic candy bar using Illustrator.

1. Sketch

Start by sketching the overall shape complete with linear guides, which will be used to show how to define the vector shapes that we’ll be drawing on top. Define the main shape, wrinkles, highlights and shadow areas. It helps to use an actual candy bar or an image of one for reference.

2. Import to Illustrator

Scan the sketch into Photoshop and adjust Image > Adjust > Brightness / Contrast until the lines are clearly visible. Open Illustrator and import the sketch using File > Place.

In the Layers panel, double click on the sketch layer to bring up the layer options pop-up window and check Template. For tracing purposes, the sketch can be dimmed to be less visible if preferred.

3. Stacking Order

It is crucial in vector files to have a logical stacking order of the layers. The elements all work together cumulatively, so be sure to arrange separate elements accordingly.

For example, the main wrapper, highlights, shadows and text all have their own respective layer. It also helps to name the layers appropriately.

4. Tracing Technique

An efficient way to trace and color in Illustrator is to first create the shape using the Pen tool with a default white fill and black stroke (or no fill, depending on your preference).

Then, when the shape is finalized, select a color or gradient and apply it.

5. Main Shape

Create a new layer on top of the sketch template layer, so as to use the sketch template layer a guide. Trace along the main wrapper shape with the Pen tool, taking care to add details such as the zig-zagged ends.

Omit the bottom portion and top right corner of the wrapper for now, as this will be dealt with separately. Fill the shape with a very subtle yellow gradient of #F7EC94 to #F6E22C at an angle of -104.25.

6. Bottom Portion

On a new layer above the main wrapper layer, trace along the sketch to create the bottom portion. Apply a tan-hued gradient of #C8C26A to #A9A574 at an angle of -105.59.

7. Top Corner

Create a new layer on top and trace the top right corner of the wrapper. To make the top corner look creased, draw a new black stroke with no fill across the bottom corner – this will be the dividing line.

With both the corner shape and the black line selected, click the Divide button in the Pathfinder panel to separate the shapes. Right click (ctrl-click) and select Ungroup.

Now, apply a gradient of #FAEE8A to #E5D64B at an angle of -107.48 to the bigger shape, and #5A530B to #F6E775 at an angle of 91.66 to the smaller piece.

Last, change the Opacity of the smaller piece under the Transparency panel to 35% Color Burn.

8. Candy Bar Name

On a new layer, trace the shape of the candy bar name. Try to trace the letters slightly skewed and wrinkled to make it appear more realistic. Use the Divide method from the last step to create hollow letters like “O” or “e”, except instead of a line, use a shape as the divider.

The colors can be set to various gradients, as long as they give the letters the appropriate contouring of the form beneath them. Notice how this application gives the illusion of highlights.

Next, make a new layer underneath the name layer and trace a slightly bigger outline around the letters in a white fill and no stroke.

9. Main Shadows

For best results, use an actual candy bar or image of one for reference as this makes it easier to plot out the shadow areas.

A general rule regarding shadows: for direct folds, the shadows are crisp and darker; for slight creases, the shadows are lighter and blurrier. Also, shadows can differ in size and shape: some are large and rounded, while others are small and linear.

Use the Pen tool to first create the various shadow areas.

With a combination of experimentation and using actual reference, set the color and value of each shadow to match the amount that you see in the folds in your reference candy bar. Gradients can also be applied to get the look right.

There are two ways to blur a shape: 1) select it and click Effect > Stylize > Feather. With Preview turned on, toggle the amount till satisfied. 2) Effect > Blur > Gaussian Blur.

Another tip is to play with the Opacity to tone some shadows down. This may take some patience to get the results right.

10. Gradient Mesh

For tricky shadows, use the Gradient Mesh tool from the Tools panel. With this, the way the gradients bend and move can be custom-controlled, curved and angled.

Make the grid fuller by adding points with the Pen tool and take them away by selecting and deleting each point. Drag and position the anchor points with the Direct Select Cursor (A). Experiment with it to produce a look that feels right.

11. Highlights

Generally, candy bar wrappers are shiny and give off a sheen. On a new layer with the Pen tool, create a large shape that encompasses the main highlighted area. Create a few more smaller areas for secondary highlights.

Change the fill for the highlights to white with no stroke. Now, similar to the shadows, experiment with Blur and Opacity to determine the right look.

It is important to tone down the highlights so that it looks like a slight wash over the other objects instead of a patch of white. This is what makes highlights natural and realistic.

12. Shadows 2

Now the topmost portion needs a bit more shadow. On a new layer, create shapes with the Pen tool similar to the first set of shadows, but smaller in size and less in quantity.

These shadows are different because they are not the main ones. They are also subtler.

Instead of darker colors, apply gradients in a tan or light brown to pale yellow, which gently add hints of folding and creases.

13. Cast Shadow

The cast shadow falls on the opposite side of the light source, which in this case is along the bottom and right side of the wrapper.

On a new layer, underneath all the other layers, first trace along the bottom of the wrapper to make the bottom shadow. Then, trace along the right side of the wrapper for the right shadow.

Do not trace it in the same exact shape as the wrapper since this is a shadow, which should look different.

Select both shapes and move them so that they sit slightly below and to the right of the wrapper. Now, set the fill to a gradient of 70% grey to 37% grey with no stroke.

Last, add Gaussian blur (Effect > Blur > Gaussian Blur) to both shapes: the bottom shape at 2.8 pixels, and the right shape at 1.6 pixels. This is the final step in making the candy bar realistic because it grounds the object.

Written exclusively for WDD by Wendy Ding.

If you followed this tutorial,  please share your results with us by posting the links to your results below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

You need to have medium to advanced knowledge of Photoshop in order to complete this tutorial.

To get started, go ahead and download all the images used from the Sxh.hu website. All images are free to download and here are the links: 1, 2, 3, 4

Let’s get started and create a truly awesome 3D effect in just a few short steps. Try it out and feel free to post links to your own variations, we’d love to see what you come up with.

Here’s a quick preview of the image that we will be creating:

Step 1

On a blank document type the text in Illustrator. I’m using the Impact typeface and this foreground color: #CCCCCC. Then go to Effect > 3D > Extrude & Bevel, and set the values as shown below. Then copy (Ctrl or Command + C) the 3D text.

Step 2

Let’s open Photoshop, create a new document (1280 x 1024 px) and put this image as a background. Then paste the 3D text (created on Step 1) as a Smart Object.

Step 3

Next, go to Filter > Render > Lighting Effects and set the values as shown below. This way the text will match the scene lightening.

Step 4

Select the Smart object layer, right click on the layer and select Duplicate Layer > Destination: New, and Name: Map. Then go to Layer > Rasterize > Smart object.  Save the document as Map.psd somewhere in your Desktop.

Step 5

Now, let’s save the previous document as “Displace texture”, delete the raster 3D text and paste this image on a new layer. This will be our first texture.

Go To Filter > Distort > Displace, search for “map.psd” and set both the Horizontal and Vertical values to 50. Then, Select all (Ctrl + A or Command + A) and copy the selection.

Step 6

Paste the “Rock Texture” into a new layer above the 3D smart object. Change the Blending mode to Overlay.

Ctrl (Command) + Click on Smart Object miniature to select the text shape, then Ctrl (Command) + Shift + I to invert the selection, then hit DEL to delete the extra texture (on the “Rock Texture” layer).

Then use the Magic Wand tool to select the front face of the 3D text on the Smart Object layer and delete the selection on the “Rock Texture” layer.

Step 7

Using the Burn Tool, burn some shadows on the “Rock Texture” layer.

Step 8

Select the “Sand dunes” layer, select the Clone Stamp tool and holding the Option (Alt) key, click somewhere on the sand. Then create a new layer above “Rock texture”, name it “More Sand” and clone the sand on that layer.

Step 9

To improve the texture effect, delete some areas of  the “Rock Texture” layer.

Step 10

Now we’re going to add some ‘dirt’. Open the “Displace texture” file one more time. Paste this image into a new layer. Go To Filter > Distort > Displace, search for “map.psd” and set both the horizontal and vertical values to 50. Then, select all (Ctrl + A or Command + A) and copy the selection.

Step 11

Paste the “Dirt texture” into a new layer. Ctrl (Command) + Click on the “3D text” layer miniature to select the text shape, then Ctrl (Command) + Shift + I to invert the selection, then hit DEL to delete the extra texture (on the “Dirt texture” layer).

Using a soft eraser, delete the bottom of the “Dirt texture” layer, then improve the result by using an irregular eraser.

Step 12

Change the “Dirt texture” blending mode to Multiply and add a small Drop Shadow.

Step 13

To add the grass, go to the “Displace texture” file and  paste this image. Apply a Displacement map, just like the other textures and finally copy the grass.

Step 14

Paste the grass on the main document, delete  the bottom part and using an irregular Eraser delete some areas on the borders.

Step 15

Burn some shadows on the “Grass texture” layer.

Step 16

Add a small drop shadow to  the “Grass texture” layer. Using the Sponge tool, desaturate some of the areas of the grass.

Step 17

Paste the grass texture into a new layer on a plane on Vanishing Point filter window (go to Filter > Vanishing Point) to match the perspective of the landscape.

Step 18

Erase some random areas of the “Grass” layer, and using an irregular brush delete some random areas here and there.

Step 19

Select a part of the grass, feather the selection and adjust the hue value to -30.

Step 20

Finally add a soft drop shadow to the “Grass” layer.

Step 21

Let’s add more details. Paste this image into a new layer and adjust the Hue/Saturation values to match the existing colors. You can call the new layer “Hanging plant” or something like that.

Step 22

Using an irregular eraser, delete everything with the exception of the hanging plant, and place them next to 3D text’s corners.

Step 23

Duplicate the “Hanging plant” layer and go to Edit > Transform > Flip Horizontal. Then distort the copy a little bit. Follow this with the use of the burn tool to make the copy darker according to the the scene lighting.

Step 24

Add as many details as you want. I added a few more hanging plants and a bush.

Step 25

Just to create a more dramatic effect apply these two adjustment layers to the entire design: a Photo Filter and a Gradient Map (Opacity 35%).

Final result

Now you’ve got a nice 3D text inside a photograph. Click on the image for a larger preview.  Try it on your own and come up with your own variations.

Written exclusively for WDD by Alvaro Guzman.

Have you tried the tutorial?  Feel free to post links to examples created using this tutorial…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

Traditionally portraits were sculptures or paintings however, in modern times, a photograph is the most recognized way of taking a portrait.

In most cases, the subject looks straight at the camera in order to engage the viewer.

In this article, we’ll be giving you simple techniques to help you take portraits and also self portraits, to make the very best of your photos.

At the end of the article, you’ll find a showcase of great portraits and self portraits that you can use for inspiration.

How to Take a Portrait

Capturing quality portraits is an art that’s mastered with time. Many of the most creative professionals started out by following a simple set of guidelines.

1) Choosing the Right Background

The background will set the mood for your photo, so be extra careful when choosing yours. The ideal background will guide the viewers’ focus to a specific area that you wish to draw attention to, for example, the face.

A neutral, soft colored background will work best and is far more effective than one that is filled with too many details and colors.

You may wish to also blur the background, in order to further emphasize the foreground elements.

2) Focus on the Eyes

As the saying goes, “the eyes are the window to the soul”.

Different feelings can be conveyed, depending on the direction in which the subject’s eyes are pointing. Play with this by having your subject look in various directions, until you are happy with the feeling that is portrayed.

Adding extras such as a smile, frown, or grin is a bonus that amplifies the main focal point of the photo.

3) Lighting, Lighting and more Lighting

The possibilities for lighting are truly infinite. Lighting is the most important element in any photo composition and sets the mood, feeling and character of your photo.

Sunlight can be a bit tricky. If you take a portrait in the daytime, make sure that your photo is not overpowered by the sun.

4) Positioning and Angles

Don’t limit yourself to horizontal and vertical portraits; after all, those aren’t the only two angles that exist.

Positioning your camera at creative diagonal angles can add a fantastic artistic flare to your image.

An easy mistake to make is to only slightly position your camera at an angle, which can leave your viewers wondering if this was intentional or a mistake. If you’re going for an interesting angle, make it obvious and clear that that’s what you intended to do, as shown in the example below.

How to Take a Self Portrait

Like most photography techniques, there will be a lot of trial and error involved to get the best results for a self portrait. You’ll usually have to shoot photos over and over again, trying to achieve a perfect combination of pose, coverage and focus.

This is because a self portrait is one of the best ways to express oneself and to portray your personality, which is not easy for most people to do.

For each method below you’ll first set the camera to auto-focus and then change the setting to manual focus. This prevents the camera from refocusing while you move around to the front and get ready to take your photo.

1) The Camera

You can start by setting the camera on self-timer mode to shoot your photo however, a remote will certainly come in handy and will probably be almost essential for self portraits. You can likely get one for around $20 and having one will significantly simplify the process of taking a photo of yourself.

2) Coming to Terms with the Shots

There are times when it’s probably going to be difficult to relax in front of the camera. This can cause your portraits to end up looking stiff and lifeless.

In this situation, simply do whatever you’d normally do to relax either before or during the shoot. For example, you may wish to listen to music, sing a favorite song, or think of something that would relax you and make you feel at ease.

3) Editing your Photo

Once you have a few shots that you think portray what you believe should be your self portrait, it’s usually a good idea to edit the photos further.

It’s rare that a photo will come out perfectly just like as it is. Most times they require cropping, resizing, etc…

Experiment with framing, cropping, lighting and saturation until you’re satisfied that the photo truly represents you in the best possible way. You can use any photo editing software to do this, such as Photoshop.

How to Take a Black and White Photo

Black and white portraits can communicate on a level that color photos simply cannot. They direct the attention to the composition, lighting and shadows.

1) How You’ll Take the Shot

If your intention is to create a black and white photo, start by taking the photo with this in mind as opposed to shooting in color and then switching to greyscale.

Simply put, an original  black and white photo will most likely display better in quality than converting a color photo.

2) Perspective

When you add your own perspective to your photos, you allow your viewers to take a look inside the meaning behind the subject being photographed.

Depending on what you’re photographing, you should be mindful as to how your photos are going to be interpreted. See the image below for a photo that could be interpreted in multiple ways.

3) Eliminate Cluttered Backgrounds

Black and white photos communicate best when they have uncluttered and simple backgrounds.

You can address this issue by repositioning the object or person, or by blurring the background. This way, the background does not interfere with the focus of your photo.

Leave out random and insignificant elements, as these will create confusion and compete with the viewer’s attention.

4) Backlighting and Useful Shadows

Lighting is certainly essential in any photo, especially in black and white photography. As colors are absent, the focus changes to light, shadow and the interaction between these.

Thrive for a balance that allows just enough light in, so that the image is visible and all elements can be clearly made out. There should be just enough dark elements so that that these can block out any distractions that may be caused by too much lighting.

Tips and Tricks

• Experiment with photo editing and make the most of your photos using Photoshop
• Match the textures in the person’s face with the background
• Frame the subject, for example through a window, a box, etc…
• Break all rules of composition
• Overexpose/underexpose the subject
• Take portraits candidly without the awareness of the person being photographed
• Posing: experiment with having the subject pose in engaging positions
• Capture what’s different about the subject, don’t go for the obvious
• Use shadows and reflections as your subjects or to complement them
• Experiment with macro photography
• Crop your photos to isolate unique aspects of your photos
• Blurred images can make great portraits as they symbolize movement
• Place subjects in unfamilar situations or places and get them out of their comfort zone
• Use props to create interactivity
• Obscure or highlight a part of their body
• Control the light
• Have the subject look off the camera or look inside the actual photo
• Experiment with different lenses and filters
• You’ve heard it before, but it never hurts…. ‘Think outside the box’

Amazing Portraits for Your Inspiration

Further Resources

Black and White Photo Gallery
Ten Truly Inspiring Photographers
Masters of Photography (Flickr)
4 Quick Tips for Portraits
How to Ask for Permission to Photograph People
Essential Posing Tips
The Art of Black and White Photography (Hard Cover)
Key Ingredients to Black and White Photography
11 Tips for Better Candid Photography
Free Digital Photography Tutorials

What other tips can you suggest to take portraits and self portraits? Which technique is your favorite?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

To elevate yours beyond this it takes a few simple tricks using Photoshop’s awesome array of tools.

Do it right and the style has got dozens of applications from static navigation or graphics, through to animated banners and interactive collages.

I’ve picked a musical theme, as the style works really well for band graphics or music based sites.

This tutorial explains how to create a great Photoshop montage in 19 steps, so let’s get started and have fun with it.

Step 1

Although the goal is to apply the graphics to a website, I find it’s best to work in 300dpi as it allows for a more detailed approach to work.

For the purpose of this tutorial I’ll set up the canvas as A5 landscape (210mm x 148.5mm) at 300 dpi working in RGB mode.

Step 2

Get this image of a band from sxc.hu (a great resource for free stock photography, always check usage rights) or another image of your choice.

We need to cut out the Sax player in the yellow. We don’t need to be ultra precise here so don’t worry about the hair too much. Use the Pen Tool, set it to Paths, zoom into 300% and start drawing around the Sax man.

Step 3

Since we’ll eventually be scaling down these graphics to screen resolution, you can afford to miss out some of the smaller details and be a little loose.

Finish up and close the Path by linking the two open end points.

Step 4

Don’t forget to use Subtract from the path area when subtracting from an area of a closed Path.

Step 5

Create a selection from your finished path (Window > Paths – then Ctrl+Click on the Path thumbnail) and copy and paste it into your empty canvas.

As we’re making a montage it’s good practice to label all layers (I’ve gone for ‘SAXMAN’, I love block capitals for some reason, seems more organized) and turn them into Smart Objects (Layer > Smart Objects > Group into New Smart Object).

Smart Objects allow us to resize and resize without affecting the quality, although you still can’t blow it above its physical size too much without losing quality.

Step 6

Now get this band image and cut the other band members out in the same way and paste them into your document. Relabel all the layers (SAXMAN2, GUITARMAN, DRUMMER and BASSMAN) and turn them into Smart Objects.

Step 7

Resize and rotate all the elements until you have a strong focal point for the composition.

You can move layers up and down the layers palette to foreground and background as well. Select a layer you want to transform and press CTRL+T to bring up the Free Transform bounding box.

Hold Shift (to maintain aspect ratio) and drag the corner points to resize.

Step 8

We need a background, so I got this one from sxc.hu, but you can use any other background you like.

The background I chose wasn’t big enough to fill the image so I selected the Clone Tool and a massive (353 pixel diameter), soft-edged brush to clone it.

Keep redefining your source point by holding ALT and clicking somewhere on the texture. If you mix up your source point you’re less likely to clone repetitive patterns within the texture.

When you’re done, press CTRL+U to bring up the Hue/Saturation window and set-up as in the screenshot below.

Step 9

Grab yourself a skyline photo like the one I used from sxc.hu. The shadows are a little harsh so go to Image > Adjust > Shadow/Highlight and set it up as in the screenshot below.

Cut it out as before and paste it into your working document, renaming the layer BUILDINGS.

Don’t cut around every little mast or antenna, get the basic building shapes and square it off at the bottom.

Step 10

Now that the buildings are cut-out, we can see that there is some visual distortion on the right.

Press CTRL+R to bring up the rulers if they’re not already visible and drag a vertical guide from the left side ruler.

Then, with the BUILDINGS layer selected, press CTRL+T to bring up the Transform bounding box.

Hold CTRL+SHIFT and grab the top right corner point to drag it independently (but affixed to a horizontal plane) until the building matches the vertical guide.

Step 11

Arrange the buildings behind the band layers. Try flipping them horizontally and re-sizing to mix it up. Select all the layers on the layers palette and go to Layer > Rasterize > Rasterize all layers.

Step 12

Get this Tree sxc.hu and draw a cartoon tree-shaped path around a section of it. Then use the Clone Tool to clone out the areas of sky that can be seen through the leaves.

Copy and paste the tree into your document and position it amongst the buildings.

Step 13

Time to add a little colour. Select the Pen Tool and set it to Shape Layers rather than Paths.

Pick a complimentary foreground colour, this can be changed later on if you’re not happy with your first choice.

Now start drawing, think of ways to make the Shape Layer interact with your photos. If you want to keep it simple, click the Add to shape area (+) icon when drawing shapes that go together. This will keep them on the same layer.

Step 14

We’re going to add some shadows to the foreground elements (Band layers, Shape layers). We’ll tackle just one layer and then you can repeat the process for the other layers.

Let’s take the DRUMMER layer. CTRL+Click the DRUMMER layer thumbnail to create a selection. Do the same for the DRUMMER Shape layer.

Create a layer underneath the DRUMMER layer and fill it with colour number #56493f (type this into the Color Picker window under the R, G, B values).

Press CTRL+T to bring up the Freeform Transform box, hold the CTRL key and drag the top middle point down and to the left like a 5 O’clock shadow.

The hi-hat stand legs don’t match up, so erase what looks out of place using the Eraser Tool and redraw with the Polygonal Lasso Tool, then fill with the same colour.

Apply a 5 Pixel Gaussian Blur to the Shadow layer, then set the Layer Blending Mode to Multiply. Reduce the layer opacity to 65%.

Finally take a soft-edged eraser, set the brush opacity down to 25% and feather the far end of the shadow.

Step 15

Duplicate the Background layer (select it, then go to Layer > Duplicate layer) and drag it to the top of the Layers palette.

Then CTRL+SHIFT+Click on all the layer thumbnails except the Shadows, Background and the Background duplicate you just made.

This should create a selection from your layers, from this selection apply a Layer Mask to the Background duplicate layer.

STEP 16

Change the Background, duplicate layer Blending mode to Soft Light, then duplicate the layer and change its mode to Color. Reduce this second duplicates (Color) opacity to 20%. This will fuse the elements a little better.

Finally, reduce all the coloured Shape layers’ opacities down to 90%.

Step 17

Create a new layer at the top of the Layers Palette and call it GLOW. Select the Paintbrush tool and use a large soft-edged brush loaded with white to draw in some hazy glow.

Rather than dragging the brush around the canvas, stamp it down, changing the opacity as you draw out from where you started.

Step 18

Create another new layer above that called YELLOW GLOW, take the same brush loaded with Yellow (ffcc00) and draw where you drew before. Change the Layer Blending mode to Overlay.

If you’ve overdone these layers, just pull the Layer Opacity back a touch.

Step 19

Finally, add a few Adjustment layers at the top of Layers Palette.  The first is a Curves layer (Layer > New Adjustment Layer > Curves).

Then a Hue/Saturation layer.

Finally a Selective Color layer.

Final image

Written exclusively for WDD by JamesZilla. He’s an illustrator and graphic designer from the UK.

Have you followed this tutorial? We’d love to see your results, please post them in the comments’ section.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

The idea here is to create the illusion that all of the photo elements are parts of the same photo.

In this article, we’ll look at 20 beautiful Photoshop montage tutorials that teach you step by step how to create these amazing photo composites.

Follow these tutorials and mix them up. The possibilities are endless and the results can really stretch anyone’s imagination.

1. Surreal Photo Manipulation

2. Drama in Venice

3. The Water Man

4. Urban City Montage

5. Scared Photo Manipulation

6. Mysterious Hollow

7. Sichuan Earthquake

8. Gift for Tomorrow

9. Snail Race Photo Montage

10. The Making of Mystic

11. Epic Fantasy

12. Fiery Demon Montage

13. Dark Surreal Montage

14. Fantasy Photo Manipulation

15. Dramatic Winged Dragon

16. Alien Invasion

17. Dragons Attack

18. Children Accident Montage

19. Under Human Skin

20. 3D Image Montage

What do you think of these composites? Is this a technique you use for your design work?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

One of the greatest tools in Photoshop which is often overlooked is layer masks and when used correctly, they can blend images together seamlessly, giving that professional touch.

We are going to combine the masks with brushes to compliment the original source image with subtle elements.

Once you have completed this tutorial you can experiment with your own findings and combine the techniques used to create a unique and inspiring work.

Step 1

We begin the tutorial by extracting the model from the background. I’ve purchased a photo of a model from iStockphoto called “Painted Dreams” (This image is used only for tutorial purposes and the copyright remains with the photographer). There are a number of ways to cut out a selection, but we are going to use the pen tool to trace around the model.

Step 2

The best way to do this accurately is to zoom in at about 200 %. Once you have carefully completed the selection, right click on the layer and choose rasterize it, then select it using the magic wand. With the selection active, click on the original layer, then cut and paste it into a new document measuring 1024 pixels width by 768 pixels length at 72 dpi.

This is going to be our new canvas. Reposition the model to the left of the document so that we have a nice composition as shown below.

Step 3

Create a new layer, fill the foreground colour with a light blue colour (#8aa8c2) and then choose a dark blue for the background colour ( #090f1d ). Click on the swatches at the bottom of the Tools palette to input the colour references.

Now we are going to add render clouds to the layer Filter>Render>Clouds. You may need to repeat the render clouds, or even add difference clouds to the layer, until you get a similar effect to the one shown in the screenshot below. Move this behind the model so that we now have a background layer as the basis for our illustration.

Step 4

Create a new layer and with the foreground colour set to a light greenish colour (#82947f), use a large soft brush set to 300px diameter and 100% opacity and spray three dots to the top left corner, setting the layer to screen mode.

Once again create another layer, but this time use a white soft brush set to 140px and spray three dots near the green ones, with the layer set in overlay mode. Last, repeat this process with a 220 pixel dark blue soft brush (#090f1d) and gently spray from behind the model towards the right of the canvas. Set the layer to overlay mode.

Step 5

Now it’s time to add some more brush effects. Let’s begin with a large soft white brush (the diameter is approximately 60 pixels) with a 100% opacity. Go ahead and make some random marks behind the right side of the model.

Then add a Gaussian blur with the settings Filter>Blur>Gaussian Blur>radius 8.9 pixels. Duplicate this layer and set to overlay mode.

Step 6

Go back to the dark blue soft brush layer in Step 4 and add a layer mask to it. Now it starts to get interesting!! Click on the brush tool and open the brush parameters. Scroll down through the default brushes until you find “scattered maple leaf” (if you can’t find it, use a similar leaf).

Set the diameter between 30 pixels and 80 pixels and make some random strokes. With different size brushes, use a smaller brush so that you have smaller leaves closer to the model and have them gradually getting larger as they move further away to the right.

Remember to set the colour of the mask brush to black, so that the strokes will be clearly visible in the layer mask.

Step 7

Here is a screenshot of the parameters I used with shape dynamics selected. At this time, you can add some jitter to the size and angle jittering (about 10%). Experiment with the values until you get the effect you’re looking for, adding scattering can also break up the regularity.

Step 8

Add a gaussian blur of a 9.1 pixel radius to the layer mask. It is very important that you do not interfere with the actual layer and do this only on the mask. Set the layer mode to overlay.

Step 9

To add more depth to the composition, we are going to give the impression that parts of the model’s body are breaking apart. Repeat the same technique described in step 6 by adding a layer mask to the red model layer and paint in the mask area using the same maple leaf brush. (Vary the brush sizes between 20 and 30 pixels).

Again, make random single strokes cutting away parts of the body and hair to the right of the model. It should look like the screenshot below.

Step 10

To make the composition a little more interesting, select a small area of skin from the body of the model. I’ve chosen the thigh area and cloned this using the rectangular marquee tool, then copy and paste it into a new layer.

Step 11

Using the transform tool Edit>Transform>Scale, distort the new layer by stretching it until it looks similar to the screenshot below. This will require you to pull the vertices horizontally and vertically. Remember to cover the models body slightly as this will be important in the next step.

Step 12

We add another layer mask to the layer Layer>Layer Mask>Hide All but this time we hide all. With the mask selected, use the same maple leaf brush as before and paint strokes varying the size as discussed in step 9 – remember to use a white brush colour.

Once completed, change the layer mode opacity to around 30%. Repeat this process again with a new layer, but leave the layer mode to 100%. See the screenshot showing the two different layers:

Step 13

Using the same principle in the previous step, we sample a portion of the hair of the model and copy and paste it into a new layer. Again we distort it using the scale transform tool stretching into a rectangular shape to cover a larger area.

Step 14

Add a Hide all layer mask and using a very small maple leaf brush make some random strokes so that it looks like small bits of hair are breaking apart from the model. Don’t forget to use a white brush in order to see anything in the mask area.

You may need to experiment a little with the brush size to get the exact effect. Another cool tip is to use a mid grey brush so that the furthest pieces seem more transparent.

Step 15

Using the custom shape tool we go to the default shapes as shown in the screenshot below and we select “Leaf 7”. I have highlighted the shape in red, but if you can’t find it or don’t have it, select another leaf shape.

Step 16

Create the “leaf 7″ shape and resize it as shown in the screenshot below. Then, using the magic wand tool, go ahead and select the shape. With the selection now active, reposition it near the shoulder/neck area and hide the original shape layer.

Scroll down the layers until you find the original “red model” layer and copy and paste the selection into a new layer. Using the move tool, nudge it slightly to the left using the arrows on your keyboard.

Step 17

In order to give it a 3D effect, we’re going to add a layer style located at the top menu of the screen. Layer>Layer Style>Drop Shadow.

With the blending options opened, check the drop shadow option and use the settings shown in the screenshot below. Blend mode>Multiply>Opacity 75%, Angle>175 degrees with global light selected, Distance>5px, Spread>0 px, Size>5 px. Quality>Noise>0% with the “Layer knocks out drop shadow” option selected.

You can slightly tweak the settings until you’re satisfied with the results.

Step 18

Duplicate the layer nine times and distort each layer with the transform tool so that each one is different and reposition them as shown in the screenshot. I’ve resized them down between 70–90 % so that each one looks different. (If the image doesn’t quite look the same as the tutorial image, you may need to improvise a little).

Adding more layers will give the illustration extra depth and texture, so feel free to experiment with this effect.

Step 19

Create another custom shape as described in steps 15 and 16 using a different leaf shape. This time we’re going to use a large “Leaf 5” shape with a reddish brown colour (#a01205). Take a look at the screenshot to give you an idea of the size of the leaf – once selected, rasterize the layer.

Step 20

Move the new leaf layer behind the ”red model” layer and use the transform tools to distort the shape of the leaf. We want to give the impression that the leaf is a shadow sitting on the floor so we use the Transform>Distort tool at this time.

Step 21

We’re almost done! Now if you wish, you can add a texture to the leaf using a Layer mask>Reveal all, painting random marks with the same leaf brush used throughout this tutorial. For finishing touches use a gaussian blur set to 10 pixels radius with a multiply blend mode set to 100% opacity.

Step 22

To give it that fantasy feel, select all the layers and group them. Rename the group “final”, and duplicate it. With the duplicated group, select Layer>Merge Group. Use a gaussian blur with a radius of 15 pixels, change the blend mode to screen and the opacity to 85%.

Written exclusively for WDD by Vince Fraser

Have you tried this tutorial on your images? Please share with everyone…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

The studio that did that animation was MK12 and I love the way they mixed sand and some sort of vector elements, it reminded me a bit of Apple’s Viva la Vida ad.

In this tutorial, I will show you how I created the image inspired by the James Bond movie, in Photoshop.

Here’s a preview of the final image:

Step 1

Create a new document in Photoshop, I used 1920×1200 pixels. Then place a photo of dunes. You can download the one I used here. With the Polygonal Lasso Tool (L), delete the horizon and leave just the dunes in the front.

Step 2

Go to Image>Adjustment>Brightness/Contrast. Reduce the Brightness to -150 and increase the contrast to 85. The idea is to make the darks really dark while preserving the highlights.

Step 3

Next go to Image>Adjustments>Hue/Saturation. Reduce the saturation to -80 and the lightness to -20 in order to make the image less colorful.

Step 4

Go to Image>Adjustments>Levels. Reduce the Output Levels. I used 0 and 150.

Step 5

Create a new layer for the background. Then fill it with a gradient. Use a light beige such as #FCF7EA and blue #2A3E64 for the colors. Use the image below for reference, and make the horizon line much lighter.

Step 6

Now add another gradient, this time from black to transparent. The dark area will be at the top. Use the image below for reference.

Step 7

Create a new folder in the layer palette, rename it Sun. After that, create a new layer inside the folder and select the brush tool (B). Use a very soft brush (a rounded one with 0% hardness). Use white for the color and a large brush to create the sun.

Step 8

Change the blend mode of the Sun folder to color dodge and this should give you a nice light effect.

Step 9

Create another layer in the Sun folder, use the same brush but this time change the white color to an orange. Paint a bit on top of the other layer (1), in order to create an orange highlight. Also, add a new layer and once again let’s use the brush tool, but with white. Reduce the size of the brush and paint a bit of the ground area (2).

Step 10

Select the first layer created in the Sun folder, the one we created in step 6. Go to Layer>Layer Style>Gradient Overlay. Use white and orange #F7AA33 for the colors and 90º for the Angle. This layer style will add a bit of color to the sun.

Step 11

Now lets add a photo of a woman to the design. I used one from iStockphoto. Cut out the woman from the background use the Eraser Tool(E) with a very soft brush and 0% hardness to delete the feet and a bit of the legs of the woman, just enough to make it blend with the dune photo.

Step 12

With the woman layer selected go to Image>Adjustments>Hue Saturation. Reduce the Saturation to -40 and the Lightness to -80.

Step 13

Now go to Layer>Layer Style>Inner Shadow. Use color dodge for the Blend Mode, 100% Opacity, 162º for the Angle, 38 pixels for the Distance, 0 for Choke, 68 pixels for Size. With this layer style, the idea is to illuminate the edges of the woman.

Step 14

Create a new layer on top of the Dunes photo layer and fill it with black. Select the brush tool (B), use white for the color and a 0% hardness brush. Change the blend mode of the layer to color dodge and start painting some areas to make them really bright. Try different opacities for the brush using the number keys (1 is 10%, 2 is 20%…). If you change the blend mode of the layer to normal, you would have something like the first image in this step.

Step 15

Create a new layer and go to Filter>Render>Clouds. Make sure you have black and white for the background and foreground colors. Then change the blend mode of the layer to color dodge.

Step 16

Go to Filter>Distort>Wave. Use the image below for reference.

Step 17

To create more sand like a sand storm, without being too strong I used the noise filter. Go to Filter>Noise>Add Noise. Use 12% for the amount and uniform for distribution. After that, with the eraser tool (E) and a very soft brush, delete some areas to make the sand effect less strong. Use the image below for reference. Also repeat the steps 14 and 15 in another layer and use screen for the Blend Mode. That will make the sand look more real.

Conclusion

You can add some stars and create some lines using the brush tool like the image below however, the whole idea was to show how we can create sand using the clouds and noise filters. This showed me how important is for a designer to get out of the office and get some inspiration offline.

Written exclusively for WDD by Fabio Sasso. He is a Brazilian designer living in Porto Alegre. He produces an excellent design blog called Abduzeedo.

Have you followed the tutorial? Please feel free to show us your version below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e