Semitransparent shapes can be very useful when creating repeated geometric “textures” of color and form.

They’re easy to create, fun to play with and best of all, they can be uniquely yours.

In searching for interesting patterns, designers sometimes pass over basic shapes in favor of more complex geometrics. But simpler is often better.

The trick is to pay attention more to how shapes interact than to how a shape looks on its own.

The concepts are simple:

1. As translucent shapes overlap, they create new shapes.
2. Complex patterns emerge from apparently simple origins; and just like in a poem (a haiku, for example), there’s room for variation within the prescribed form.

Unfortunately, it’s easier to make a mess than a purposeful design. The trick is to identify which subtle changes might have consequences later.

One Origin, Many Destinations

When creating patterns that use opacity or blend modes, starting simple is best.

The pattern above was created with one circle in one layer. Here’s the process:

1. Set a circle (colored #4184de in this diagram) to 50% opacity.
2. Hold down the Option (Mac) or Alt (Windows) key while using Photoshop’s Move tool. The layer will be copied as the cursor drags. Their combined opacity will darken in the places where they overlap.
3. Option + drag (Mac) or Alt + drag (Windows) both circles down and to the left—far enough to leave a white gap between each of the copies.

When repeated, a pattern appears.

Patterns emerge from the way shapes overlap as well as from the shapes themselves. Clarity comes from simplicity: a pattern that begins simply looks better in the end. The circle in our last example can be used to create many patterns, including these:

Each of these patterns was created with the same size of blue circles. Incredible variations in texture are possible with the simplest of changes; position, opacity and blend mode were the only changes made in the examples above. But “simple” doesn’t always mean “easy.”

Blend Modes

For pattern-making, 5 of Photoshop’s 25 blend modes stand out: normal, soft light, hard light, overlay and difference.

When people think of complicated layer blends, “normal” rarely springs to mind, but its straightforward nature makes it the easiest to work with. “Normal” mode is the default setting, and it mainly has to do with the opacity settings of the layers. The colors of shapes and backgrounds blend according to their strengths. Normal could also be called the “blending” blend for its tendency to find average colors between the subject (a circle in the example above) and the items below it.

Hard light multiplies shadows and screens highlights. Layers set to “Hard Light,” as in the diagram above, tend to tint everything underneath, which amplifies their original hue and saturation. If the layer contains dark colors, the layers below tend to get darker, and vice versa.

Soft light screens highlights and multiplies shadows without changing the blend color’s luminosity. It works best when the underlying colors are neutral or have low saturation. Layers set to “Soft Light” have little impact against black and white, as shown above, but work well over pale blue and gray.

Overlay strengthens colors below a layer and changes hues to match its own. Layers set to “Overlay” (example above) are brighter than when in “Soft Light” mode but still don’t affect rich black and pure white.

Difference is the least predictable blend mode. Layers in this mode generally invert tones in the layers below: lights become darks and darks become lights. Hues, however, become their opposite on the 360° color wheel: reds become cyans, greens become magentas and blues become yellows. The effect will vary depending on the colors and shades below whichever layer is set to “Difference” mode.

Above, a layer set to “Difference” mode over a white background completely inverts its colors. The same layer over a 50% gray background changes its hues 90° and muddies its tones. Over black, the “Difference” layer appears to have stayed the same.

Here’s how they work.

Pattern-Making, Step By Step

As a simple example, we’ll create a pattern based on circles. Regardless of shape, there are four steps: create a shape on a layer, give it a certain opacity and blend mode, experiment with a few copies, and mass-produce the pattern.

Step 1
Create a vector object with the Ellipse tool. Set the layer’s blend mode to “Hard Light.” Although any size and color will do, this example uses a 134×134-pixel circle, colored #575fdf. An image size of 600×600 pixels is a good place to start.

Step 2
Duplicate the layer with Command + J (Mac) or Control + J (Windows) or Layer → Duplicate Layer. Drag the copied layer to the right, to half of the circle’s width. Alternatively, hold down the Option key (Mac) or Alt key (Windows) while using the Move tool. This will duplicate the layer as you drag.

Make at least two copies. In this example, each new layer touches the center of the previous layer. As a result, the other layers will barely touch one another.

Step 3
Select the first two layers and drag down the width of one-half circle. This is the same principle as step two, but down instead of to the right. When all layers share the same color, opacity and blend mode, you can create a repeating pattern simply by duplicating the layers in any order—or any direction.

Step 4
Repeat as desired.

Initial Decisions Affect the Outcome

The beginning is critical when creating patterns, because duplicating layers amplifies mistakes. The more copied layers there are, the more tedious fixing problems will be.

For example, let’s say you decide to change every layer’s opacity from 50% to 30%. That’s one change per layer—and you can expect dozens, if not hundreds, of layers in a reasonably sized pattern. And what a change a few percent can make!

Each pattern above uses the same blend mode (”Difference”), same shape, same color and same placement, but different opacity. If you don’t want to create an action, then you’ll have to change the blend modes and opacities one layer at a time. Photoshop has a few shortcuts to expedite the changes:

• When the Move tool or any selection tool is active, the numbers 0 to 9 changes a layer’s opacity. Type 1 for 10% opacity, 4 for 40% opacity, etc. Typing 0 sets the layer’s opacity to 100%. This shortcut for both Mac and Windows works on just one layer at a time.
• When the Move tool or any selection tool is active, you can quickly change a layer’s blend mode with these key combinations:
  

  Mac	Windows	Blend mode
  Option + Shift + N	Alt + Shift + N	Normal
  Option + Shift + H	Alt + Shift + H	Hard Light
  Option + Shift + S	Alt + Shift + S	Soft Light
  Option + Shift + O	Alt + Shift + O	Overlay
  Option + Shift + E	Alt + Shift + E	Difference

• Duplicate any single layer with Command + J (Mac) or Control + J (Windows).

Possibilities

“Keep it simple” isn’t just a refrain: it’s a requirement. These examples were all created with the same shape, one or two colors and blend mode changes. Yet the variations seem unlimited:

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

All of these examples use circles. Just imagine what you could do with triangles or trapezoids. Why not give it a go and link to your creations in the comments section 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: H0Oa9C

You need only go to the home page of any new Internet-based startup, and you’ll see an embedded video with a very large call to action beckoning you to play its two- or three-minute video introduction.

Videos that demonstrate web applications or web-based services are often called screencasts because they usually capture events on the company’s website. These screencasts can sum up in just two minutes what might otherwise take up many pages to explain, so they make for powerful additions to websites.

Is it easy to make a screencast? How much does it cost, and what tools are required? Let’s answer these questions.

Making Your Own Screencast

Let’s assume that you have a web application or web-based service to promote. You want to create a screencast to demonstrate what it does. Below are some tips to get you started.

Planning

As with anything, planning is essential. So, before you do anything else, plan your screencast very carefully. Consider the following questions:

• What overall message do you want the video to convey?
• How long should the video be?
• Should the video be a quick, “punchy” overview of your product or a longer, detailed, informal screencast?
• Do you want the video to be personal, with a friendly voiceover, or would you rather stick to music and titles?

Tutorials often take the form of an informal screencast. The screencasts are usually unscripted but follow a basic storyboard. The advantages of this are that your product will be presented in a friendly manner and these screencasts can be quick to produce. They are also more informative and instructional in showing how a product works.

The disadvantages are that they can appear unprofessional and can be quite lengthy and less engaging for visitors. So again, planning the location of your video (e.g. the help section or the front page) and the message you want to convey will help you decide the approach to take.

Let’s assume you want to make a short, scripted, well-edited screencast.

The Storyboard

After you’ve put some thought into the overall feel of the video, get out your trusty notepad and pen and sketch a storyboard. A storyboard is a rough representation of the screencast and can be used as a general timeline of scenes. Each scene would address a different aspect of your product. For example:

• Introduction and summary of your service;
• Key features or unique selling points;
• Testimonials from customers;
• Comparison of pricing plans or even a comparison against competing products;
• Final summary, with logo and slogan.

If you have a lot to cover in your screencast, breaking each scene into sub-scenes might be worthwhile, to allow for more detail. The more detail in your storyboards, the easier the editing stage will be.

Plan each scene and sub-scene of the video, and below that write out bullet points of what you will cover. The bullet points could include examples of parts of the web application that you want users to click on, particular phrases that you might use in the voiceover and any video effects or transitions that you require.

Your storyboard will help you stay organized throughout the whole process, and if you ever get lost while producing the video, the storyboard will get you back on track.

The Voiceover Script

If you do not plan to have a voiceover (though one would certainly help), you can skip this step.

Once you have sketched your storyboard, you can start writing your voiceover script. On another piece of paper, write out headings for each scene, and then script each scene based on the bullet points you wrote earlier.

Make sure to leave space for changes, because you will probably want to adjust the script when you get to recording the voiceover.

The Right Software

The next step is to actually record and produce the video. You will need the following tools.

Screen-Capture Software

Many screen-capture applications exist, some of which are free and open source, others you have to pay for.

Screenium, available from Synium, is a Mac OS X-based application that is easy to use and contains many features. The software costs $29.00 and can be downloaded online.

Jing is a free web-based tool that allows you to capture screen events and share them on the web. A fully featured PC or Mac version is available for $14.95 per year.

Other applications include open-source CamStudio, iShowU for Mac and Adobe’s Captivate.

Movie-Editing Software

You don’t need a huge number of features to edit screencasts. The simple editing packages that come bundled in your OS usually suffice.

If you have a Mac, then look no further than iMovie. Otherwise, you could use any digital video-editing application such as Premier Pro, Final Cut or even Windows Movie Maker.

Some useful editing features are:

• Transitions (or “wipes”) between scenes;
• Exporting to web formats;
• Changing the speed of clips;
• Recording voiceovers in the application.

Recent versions of iMovie (version 8+) have the above features.

Background Music

Your screencast needs a high level of user engagement. Music can help deliver that, particularly if it is relevant to the screencast. You will know the style of music to use based on your audience.

Make sure you have the legal right to use the music you choose. Some useful online resources offer rights-free background music (usually classical), and some sell CDs of background music that might be appropriate; check out Unique Tracks and Royalty Free Music.

Music is, of course, entirely optional, because you can engage users in other ways.

Armed with your overall plan, storyboard, voiceover script and software, you can now begin to record the video.

Recording the Video

For the purpose of this article, we’ll assume you’re using a desktop capture application such as Screenium, and iMovie for editing.

Start by capturing the scenes in the order of your storyboard. Because you will be editing the video later, you can continue recording until you get the perfect take.

• Capture part of your screen, not the whole screen. This will keep the video from being cluttered (by the Dock or taskbar, for example), and you won’t have to crop the video later on.
• You want smooth, clear, precise actions when recording. Keep mouse movement to a minimum, and make sure your mouse clicks are obvious. Your recording application might have a feature where your mouse clicks trigger a visual aid, which can be useful.
• Keep the voiceover script in front of you, and imagine the script being spoken as you record the mouse actions. This will help with timing when you get to editing later.
• Match the file name for each clip to the name of the corresponding scene, so that you know where the clip goes when you’re editing (for example 1. Intro).
• Allow a gap at the beginning and end of your recorded actions. This will help when you trim the clips and with the transitions (e.g. fading one clip into the next).

Editing the Video

Once you have all the clips recorded for each scene, you can move on to the fun bit, which is the editing.

Using your movie editing application, import all of the clips into your library and put them in the right order (if you saved the clips with sequential file names, then they should be in the right order already).

The next step is to trim your videos so that the timing is right for the voiceover, and then drop them into the timeline.

The best way to get the timing right is to begin playback and read out the script for that scene; then you will know whether to add one or two seconds to the beginning or end of the clip. Don’t leave too much empty space because the video will run long and lose user engagement.

Keep the video flowing, and make sure there is always something to look at or listen to. For more complicated scenes, you may want to leave a slightly longer gap at the end before moving on, to allow users to absorb what they’ve just seen.

Another trick is to add transitions between scenes, which accomplish two things. First, they just plain look cool. Secondly, they blend together scenes that you hadn’t planned on joining. For example, you may have two adjoining scenes that show the same page of your website, but the location of the mouse jumps abruptly from one clip to the other.

A transition would blur the movement and make the cut look seamless.

Finally, show your company branding at the beginning and end of the screencast. Simply import a high-resolution JPG of your logo into the movie. Some movie editors (such as iMovie) have an automatic image effect called “Ken Burns,” which subtly zooms in or out on an image. It makes your movie look more professional than it would with a static logo just sitting there in the middle of the frame. “Subtle” is the keyword, though: make sure all of your effects are subtle; overdo it and you risk looking unprofessional.

The Voiceover

A voiceover is not essential. Some videos get away with using only title overlays to highlight key features. But a human voice better engages users and makes them feel that they are dealing with a real product made by a real company. Also, a voiceover allows you to communicate a lot more information about your product or service, because users will be using both their ears and eyes.

To do a voiceover, simply plug in a good-quality microphone, and record someone who has a good voice reading your script over each scene. Recording each scene individually is better because then you can move the audio clip to the right place after each take and get the timing perfect. Make sure your voiceover is read clearly, slowly and with a smile so that it sounds friendly.

Exporting and Uploading the Video

Once you have finished, export the video and grab a cup of coffee. A lot of video editing applications, including iMovie, have an “Export to Web” function; so you can simply choose the format to export to (e.g. iPhone or YouTube). Choose medium to high quality, with a width no smaller than 600 pixels.

When you upload your video to the web host, it will undergo further compression: and what you put in is what you get out. If you put in a large-size, high-quality file, then the resulting video on the website will look a lot better than if you had uploaded a highly compressed video at a lower size.

After you have uploaded the video, the hosting company should email you a notification when it has finished encoding. At this point, you’re pretty much ready to put the embedding code on your website. You may want to customize the player first; for example, by matching the color of the “Play” button to your brand and adjusting the size of the player.

Save the updated HTML of the embed code and you’re good to go!

Tracking Goal Conversions

Make sure an analytics package (such as Google Analytics) is set up on your website so that you can see where visitors are coming from and track goal conversions.

If your website already runs analytics software and you have existing goal conversions, then this is an ideal chance to see how your new video affects those conversions. If your website is brand new, then seeing what difference the video makes will be difficult, but you can still track goal conversions and use the data later.

Set up a goal that follows the user from the home page through to the video page (if it is on a separate page), all the way to the sign-up page. After a few weeks, review the statistics and analyze your goal conversion or sign-up rate.

And if you ever make changes to the video or the page—for example, moving the video elsewhere in the information architecture—then you can see if your goal conversion is affected by these changes.

Examples of Good Uses of Screencasts

Thounds

Thounds calls you to click on its “promo video” link, which takes you to a pop-up containing the video.

The video clearly describes Thounds’ service in a scripted, edited and well-produced two-minute video.

Bidsketch

Bidsketch embeds its YouTube video halfway down the page after a brief explanation of its product.

Wistia

Wistia has a large and obvious call to watch its 30-second video. The video is above the fold and prominent.

Concept Feedback

Concept Feedback has a video on the right side that clearly demonstrates its product. The call to action, though, isn’t terribly clear.

FileShareHQ

FileShareHQ clearly demonstrates its product in four minutes. The video resides on its “Tour” page.

MakeSomeTime

MakeSomeTime has a video that demonstrates its product in three minutes. The call to action is below the fold.

Project Bubble

Under its product features, Project Bubble has a call to action that opens as a pop-up video. Its three-minute video is hosted on Vzaar, so the player is unbranded.

CushyCMS

CushyCMS is a great example because its video is above the fold, has a clear call to action and opens in a large pop-up that demonstrates the product in three minutes.

Notable

Notable provides a clear call to action on the right of the app description. The video is hosted by Vimeo.

Tips on Using Video on Your Website

• The videos above keep visitors engaged by rarely exceeding four minutes. A good length for a demonstration video is two to three minutes, and ideally not longer than five. Some websites keep their videos as short as 30 seconds, as you saw with Wistia.
• Be careful where you host your video. Some providers explicitly state that any videos uploaded to their service must be for non-commercial use; so, if your video demonstrates a business product, then you would be violating their terms of service. Also, some hosting providers take a long time to encode clips, and some display videos at very low quality. So, if you want fast, high-quality service, you might want to consider paying for a premium host.
• Make sure the video opens in a decent size, especially if you have a detailed demonstration of a product. A good solution is a Lightbox application such as Facebox: the user clicks a button that triggers a pop-up in which the large video is presented. A good size for the video is 600 pixels or wider.
• A clear call to action above the fold increases the chances of visitors clicking on it. Some designers prefer to explain the product first and then show the video below. A good information architecture is critical, especially on the home page, so think through your placement carefully.
• Make sure a “Play” button is shown clearly on the embedded video in its non-play state, so that visitors recognize it as a video. If the video is in a pop-up, play it automatically once the pop-up is activated.

Video Hosting Providers

Below are just a few of the many video hosting providers:

• YouTube – The obvious choice. The pros are that it is free and well known. The cons are that the quality is not exceptional, and videos sometimes take a while to encode. Another con is its ubiquity: if you are trying to project a slick, professional image, showcasing a YouTube video might reflect poorly on that aesthetic.
• Vimeo – Vimeo became very popular last year. The pros are that it has a great community and a very nice player. The cons are that its terms of service are quite strict, so read them before uploading any videos.
• Vzaar – A new company that provides premium video hosting. The pros are that videos encode quickly, the player is good and you are allowed to upload commercial videos. Another pro is that Vzaar doesn’t put its branding on videos. The cons are that it is a paid service; and because the company is quite new, its uploading process is slightly buggy.
• Wistia – As featured above. The pros are a non-branded player, fast encoding and marketing tools such as statistics and heat maps. The con is the steep premium to use the service.

You could always host the video on your own server and use a player such as the JW Player from Long Tail Video. If you do this, you may need to encode the video in FLV format.

Written exclusively for WDD by Stu Green. He is a web designer from the UK and manages Haloweb, a web application design company.

Do you have a screencast on your website that has increased goal conversions? If so, let us know, and explain the process behind building it. Also, if you have any tips on producing or embedding videos, please share with the community.

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

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: H0Oa9C

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: H0Oa9C

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: H0Oa9C

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: H0Oa9C

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: H0Oa9C

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: H0Oa9C

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: H0Oa9C

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: H0Oa9C