Photo Manipulate a Stunning Underworld Scene

In this tutorial I will show you how to combine to different pictures into one, so they fit together. As the fine part of this tutorial, you will also learn some different techniques to create instance dramatic effects.

Final Image

As always, this is the final image that we’ll be creating:

Step 1

Open this picture, select all(ctrl+a) and copy(ctrl+c)

Create a new document with the settings you see below and paste(ctrl+v) the picture in this document, and drag it up to the top.

Step 2

Open this picture.

Select all(ctrl+a) and copy(ctrl+c) and paste(ctrl+v) it into our document.

Now go to edit>transform>flip vertical and transform it so the sizes of the two pictures match each other, and drag it a little down.

Step 3

Add a layer mask (The square icon with the circle in the layers palette). With a soft, black paintbrush brush you will begin to erase/hide the water in the scene from “layer 2”.

Step 4

Now let’s transform the city in a little more perspective way. Go to edit>transform>distort and distort it so the objects on the picture is in same directions as the island. I have distorted mine like this:

Step 5

Now we’re going to add some shadows to the city. Create a new layer and name it “city shadows”.

On this layer, with a black and soft brush on 11% opacity, paint around the houses to give it a little more debt and set the blending mode to “overlay”.

Step 6

Go to “layer 2”

Go to quick mask mode (the same icon as the layer mask, the icon is in the bottom of the tools palette).

With a soft, black paintbrush on full opacity, paint around the skies, like this.

Now set the opacity on the brush down to 55% and paint a little over top (bottom) of the buildings.

Go back to standard mode, and click ctrl+shift+I to invert what we have marked. Now, create a new layer called “seawater” and go to Gradient (G) and add these colors:

Drag it with a linear gradient from bottom to top. Afterwards set the blending mode to overlay. It’s important that you don’t deselect what we have marked.

Step 7

Create a new layer called “seawater debt” – blending mode on “overlay”.

With a large, soft brush with an opacity on 35%, paint around the city and on the top of the picture with #052b3d this color.

Create a new layer called “seawater light” – blending mode on “overlay”.

With the same brush settings and with this #ebd9ac color, paint on the buildings and the boat.

The picture should look something like this:

Step 8

Still on the “seawater light” layer, paint with the same color and brush settings, on the cliff, where the light hits it.

Go to the “seawater debt” layer and add a layer mask. With a black and soft brush on 100% opacity you paint around the cliff on the island, because the cliff shall not have any debt as the seawater. It should look like this:

Step 9

Now we’re going to add some shadows to “layer 2”. Select the burn tool. Range: Midtones – Exposure: 40%.

With a brush size on 100px paint at the top of the picture when you are on “layer 2”.

Now we’re going to add some midtones to the bottom of the cliff. Go to “Layer 1” and select the dodge tool. Paint around these places:

Step 10

I actually think that I have painted/whitened the buildings on the “seawater light” layer too much. Go to this layer. Select the eraser tool (E) with an opacity on 60% and erase a little of the light color on the buildings.

Step 11

Go to edit>transform>perspective and transform it like on picture below.

Go to edit>transform>warp and morph the corners out like on the picture below.

Step 12

Now we want to make it a little more realistic, like the town is under the water. Go to “Layer 1”. Select the pencil tool (P) and mark the the part of the mountain as you can see on the picture below.:

Right click, make selection and make a feather on 15 px. Copy(ctrl+c) and paste it(ctrl+v). Name this layer “sea stone” and drag the layer upon “layer 2”.

Go to edit>transform>flip vertical. Now transform (ctrl+t) it so it is right under the real mountain, like it is hanging together. You can see the result on the picture below.

Step 13

Add a layer mask on the “sea stone” layer. With a soft, big and black brush with an opacity on 35% paint around the edges of your photo.

Step 14

Select the burn tool (O) with an “exposure” on 40% and the range on “midtones” (still on the same layer). Paint these places:

Step 15

Pick a 100px large blur tool brush and paint around the “sea stone” layer. Now mark the “sea stone layer” and “layer 2” and click ctrl+e to merge them together.

Step 16

Now we’re going to add some more colors to the water. Hold down ctrl and click on the “seawater” layers icon to mark it. Now create a new layer called “watercolor”. Set the blending mode to “overlay”.

Pick a medium/large soft brush with an opacity on 35%. We will be using these watercolors: #24a6c6 , #127891 and #35278b.

Now paint around the underworld, set the layers opacity down to 65% and it will look like this:

Step 17

Now here’s a little trick to make the picture a little more stunning. Create a new layer on the top. name it “blue” and set the blending mode to overlay and the opacity to 45%

Type in #475368 and hold down shift+f5 again.

Go to the “sea water” layer and set the opacity down to 75%. The picture should look something like this now.

Step 18

Now we want to make a little but cool effect to some of the buildings. Turn off the “blue” and the “sea water” layers so you can see the colors on the “sea stone” layer a little better.

On the “sea stone” layer, go to quick mask mode, and with a little black brush your going to paint these places:

Go back to standard mode, invert it (ctrl+shift+i), copy (ctrl+c) and go to the blue layer and paste it(ctrl+v). Call the new layer “city colors” and set the blending mode to “soft light” and the opacity to 70%.

Right click and duplicate this layer, and set the new “city colors copy” layer’s opacity to 40% Remember to turn on the “blue” and “seawater” layers again. Then it will look like this:

Step 19

It will be a little more cool if we had fog down at the water. Go down to the “sea stone” layer. Create a new layer and name it “fog”.

Select the Pencil Tool (P) and draw around the cliff of the mountain. When that is done, right click>make selection… and feather it to 15px.

With black and white colors on the palette go to Filter>Render>Clouds, and finally, set the opacity to 60 % and the blending mode to multiply.

Go to edit>transform>perspective, and transform it into the same perspective as the picture below. As you can see it is getting a little more dramatic after this.

Step 20

Right click on the fog layer and click on “duplicate layer…”.

Go to edit>transform>flip vertical and drag right under the first fog.

Step 21

Go to the “blue” layer, add a layer mask and select the Gradient tool (G).

With the black color and the linear gradient selected, draw from the top to the half of the picture, so it erases some of the blue color. It should look like this:

Step 22

Now we want to add the right balance to the color of the mountain picture (“layer 1”).

Go to image>adjustments>color balance and add the settings as you see below:

Step 23

Now we’re going to do the same to the “sea stone” layer. Go to image>adjustments>color balance and add the settings as you see below:

And We’re Done!

I really hope that you enjoyed this tutorial and would love to hear your feedback!

(Click the image below to view the full-sized outcome)

30 Minute Redesigns

Hope many of you saw the first week of our weekly 30 minute redesigns last Saturday. If you please check out the redesign I did of The Capital Singers of Trenton

30 Minute Redesign: The Capital Singers of Trenton

The idea is that I redesign a website in just 30 minutes, trying to improve upon it’s design aspects. I then publish a case-study of my improvements for learning purposes and email the webmaster the final .psd design. I will be doing one redesign each week, and to be eligible for the following week’s redesign you must leave a comment to the previous week’s redesign with your web address and why you would like a redesign.

Voting Begins

After receiving lots of great comments to last week’s redesign post, I’m happy to present the candidates for this Saturday’s redesign.

Despite the last redesign project going down very well, we only received 2 submissions for this weeks redesign. Remember guys, just leave a comment with your website address to the last redesign post and you’ll get free promotion plus a shot at a free redesign!

Please look over the websites below, and then use the poll at the bottom of this post to choose which site you’d like to see redesigned:

1: PVM Photography

2: Vestiaire

Vote Now!

Please cast your vote using the poll below:

Be sure to check back on Saturday for the winning case-study!

Pedra Textures

You can view the textures below, and can download the full sized textures at the bottom of this page.

Download Them Free

You can download the full-sized textures totally free using the link below:

Download Textures Free

License: Creative Commons Attribution

30 Vibrant Examples of Spring Photography

With spring on the way, we figured it was about time for some inspiring spring photography! Each of these photos capture the themes of growth and vitality associated with the season. Many of the photos include macro shots of flowers, and the shift from winter to the approaching life of summer.

Premium Card Textures

You can view the textures below, and can download the full sized textures at the bottom of this page.

License: Creative Commons Attribution

This Weeks Poll

Many of you voted in the poll deciding which site would get redesigned today. As you may have picked up on from the comments to the poll post, there was some doubt over the true winner. Whilst DoKall showed the most votes, I have a few reasons for choosing The Capital Singers of Trenton for this weeks redesign:

• The Capital Singers of Trenton were leading the poll considerably, which was also evident from the genuine comments left by people who didn’t like their original design.
• DoKall was not receiving many votes at all, but then in the space of a couple of hours received around 100 votes, pushing them into the lead. Since that point they have continued to hardly receive any new votes.
• I received several spammy comments to the post promoting DoKall and it’s ‘wonderful’ services.

So at the end of the day yes, it is my decision which site gets redesigned. Although I’m sure you’ll agree that in this case the right site is getting the redesign, as none of us like spammers.

Week 2: The Capital Singers of Trenton

The Capital Singers of Trenton are a semi-professional singing chorus, aiming to enrich New Jersey. You can view their current website below:

The Capital Singers of Trenton.

In the space of 5 minutes I can identify some of the key strengths and weaknesses of this design, and sketch out a mockup.

STRENGTHS:

• I never like to be too harsh about a design. But the strengths of this website are limited. The inclusion of upcoming events on the homepage is a positive.
• Additionally the logo is OK, although a little small.

WEAKNESSES:

• The top of the content area is being wasted. The huge amount of padding and useless text like ‘welcome’ pushes the important content way down the page.
• Similarly the lack of columns for content means that all text, images and other content are all on separate lines, spacing it out way too much.
• There is a lack of any real design. The whole layout is very blocky, table based and generally 90s feeling.
• The huge headline text overshadows the logo and menu, making the website harder to navigate and the ‘brand’ of the group fall to the wayside.
• There is no real color scheme going on. There needs to be colors used for backgrounds, buttons and menus that tie in with the site’s logo and general image.
• The photo of the group, which should be acting as the ‘face’ of the website is pushed right down the page. This needs to be brought up, so that the website is no longer faceless, and shows just who the ‘The Capital Singers of Trenton’ are!

My Redesign

As always, I was limited by the 30 minute time-frame, perhaps more than last week as I had to try and ‘undo’ a lot of the negative points of the original design. However, I managed to come up with the following design:

WHAT I TRIED TO DO:

• Give the website a more personal feel – using a larger logo, and prominent image of the group to promote who they are.
• Created a much clearer navigation, cutting out redundant links from the original menu, focusing on what users will actually be looking at.
• An explanation of who the group are, and what they do took visual precedence over the upcoming events section.
• To assist the ‘personal’ feel of the redesign I added in a section showing the director, and encouraging visitors to learn more.
• A lot of content as either pointless or repeated on the original design (such as contact details). I stripped away all unnecessary content and made a single set of contact details for the header, encouraging visitors to get in touch.
• I used the colors of the groups logo to base the main websites color-scheme around. This helped provide more of a ‘brand’ for the group, as well as an attractive, unified color-scheme for visitors.

Comparing the 2 Designs:

Here is a quick comparison between the original design and my 30 minute redesign. Sure, my design could be more polished, but I believe that a lot of the basic elements have been improved upon, creating a more pleasant browsing experience.

How and Why To Enter Redesign Saturdays

You can have the chance to have your website redesigned in next weeks post. All you need to do is leave a comment to this post with your website address and why you think it needs a redesign.

The Benefits of Getting Your Site Redesigned Include:

• Most obviously – a FREE redesign job!
• Your website gets exposure to PSDFAN’s thousands of readers
• You understand how to improve your website. This isn’t just a redesign, it’s a lesson in design.
• You will get emailed the .psd of your redesign and can do whatever you want with it!

So please, leave a comment today for a chance to have your website redesigned next week!

How to Create an Outstanding ‘Out of Frame’ Horse Scene

In this tutorial I will show you how to make a horse reach out of a frame with some simple, but cool techniques. Besides of the techniques you will learn how to combine colors to make the scene even more dramatic.

Final Image

As always, this is the final image that we’ll be creating:

Step 1

Open up this picture in photoshop Frame Photo

Select the “Pen Tool (P)” and mark around it like on the picture below. It will help you if you’re holding down the left mouse-click when you’re on the wheels. This makes it more rounded.

When you have marked it all, right click on it and click on “make selection…” and press ok with the settings you see below:

When selected, press “ctrl+c” to copy and “ctrl+v” to paste it. Name the new layer “Frame” and delete the “Background layer” After this we still have some red spots inside the cogwheels. You can erase them by also using the “Pen Tool (P)”, select it with the same settings and delete.

Step 2

Now you’re going to do almost the same here. As you can see on the picture below, we’re going to erase the scene inside the frame, so we can design it just as we like. With the Pen Tool (P) you’re going to select the area inside. But mark around the cogwheels, because we want to keep them. When selected as on the picture below, click delete.

Once again we have some spots inside the cogwheels we need to erase. Do it in the same way as on step 1. As you can see on the picture there is two places I have erased the inner cogwheel because we don’t have all of it and therefore it’s better without.

Step 3

I think that the frame has a lot of grain, which will be prettier if we reduce them a little bit. So go to Filter>Noise>Reduce Noise… and use these settings.

Look if you can see the difference:

Step 4

Create a new document with these settings:

Now we need a black background for this document, so set the foreground color to #000000. Pick up the “Paint Bucket Tool” (G) and click on the document.

Step 5

Now go back to our old document and drag the “frame” to our new document by holding down the mouse button. As you can see on the picture below, the frame is too big. So hold down “ctrl+t” to transform the frame.

Before we get started with the fun part, we need to flip the frame horizontal, so go to edit>transform>flip horizontal… Now we have the highlight to the right, where the horse also will be jumping out from.

Step 6

Open up this picture in Photoshop http://www.flickr.com/photos/vegaseddie/3309223161/sizes/l/in/photostream/ and drag it into our document. Name this layer “horse”

Set the layer’s opacity down to 50 % so we can see where to transform it to. Hold down “ctrl+t” to transform it into around the same settings as I used:

When you’re finished transforming it you can set the layer’s opacity up to 100% again.

Step 7

Now we’re going to cut the horse out, so we can erase other parts of the horse. So you need to use the “Pencil Tool (P)” again, and mark the house. Take your time. It’s better that you cut it out in the exact same shape than thinking of being finish as quick as possible. When you’re finish marking the horse, right click on it and click on “make selection” and use the settings as you see below on picture 2. After that, hold down “ctrl+c” to copy and “ctrl+v” to paste it. Name the new layer “horse outside”.

Step 8

Go down to the “horse” layer, and create a layer mask.

Hold down the ctrl key while clicking on the thumbnail of the “frame” layer, so we have that selected. (Remember, you still need to be on the layer mask on the “horse” layer)

Now with your foreground color set to black hold down “shift+f5” to fill the layer mask with black, click “ok”, and hold down “ctrl+d” to deselect. Now it should look like picture 2 below.

Still on the layer mask, select a black brush and paint the outgoing scene of the “horse” layer. It will afterwards look like this:

Step 9

I think that I have made my document too small, but don’t worry, it’s easy to fix. Go to image>canvas size (“Alt+Ctrl+C”) and use the settings you see below:

Now it should be a little bigger:

Step 10

Select the “frame” layer, the “horse” layer and the “horse outside” layer at the same time, hold down “ctrl+t” to transform it a little bigger. In order to maintain image quality you should always work with Smart Objects when possible. The settings of the transformation shall be like on the picture below:

Step 11

Now we’re going to give the horse some highlights. Start by creating a new layer upon the “horse outside” layer. Name the new layer “horse highlights” Set the blending mode to overlay and the opacity down to 85 % like on the picture below.

Hold down the “ctrl” key and click on the thumbnail on the “horse outside” layer, but still be on the “horse highlights” layer. With the color set to #fffcd9, you’re going to paint around the places as you see below.

Step 12

Now we’re going to add some drop shadows to the “horse outside” layer. Go to Layer>Layer Style>Drop shadows and enter in these settings:

Step 13

I’m not satisfied about the look of the frame yet. Go down to the frame, right click and click on “duplicate layer”, so we got another frame layer. On the new layer (“frame copy”) set the “blending mode” to “multiply” and the “opacity” down to 70%. It should look like this:

Now do the exact same thing to the horse layer with the exact same settings, so it’s going to look like this

Step 14

Now we’re going to add a little dept to the “frame copy” layer. Go to Layer>Layer Style>Bevel and Emboss and enter the settings you see below:

Step 15

Now we’re also going to add a little dept to the “horse” layer. Select the burn tool with “Midtones” in the “Range” and an “Exposure” on 50 %. Burn these places.

Step 16

Now we’re going to add some extra soil beneath the horse. So create a new layer upon “horse highlights”. Name it “soil”

Download this brush Debris Brush Set

Install the brush in Photoshop by select a random brush and load the brush this place:

Pick this color #22110a, and paint with the first brush, but adjust the size to around 5-600 px. After you have painted it, set the blending mode to “Multiply”

Step 17

Actually I think that we can make the horse look a little more outstanding. Right click on the “horse outside” layer and click on “Duplicate Layer…” And stay on the new “horse outside copy” layer

Go to Layer>Layer Style>Drop shadows to check the layer style off.

Now go to the old “horse outside” layer and blur this layer by going to Filter>Blur>Motion Blur and enter these settings:

Step 18

We can actually duplicate the “frame copy” layer one more time. Do that. On the new “frame copy 2”, set the blending mode to “overlay” and the opacity to 45 %.

Step 19

Now we’re going to make the scene a little more dramatic. Create a new layer right upon the “horse copy” layer (beneath the “horse outside” layer). Name it “clouds”.

On our new layer, select the “Rectangular Marquee Tool (M)” and select this place you see below:

Go to Select>Modify>Feather (“shift+f6”) and feather it with 30 pixels.

Now when have a black and white color in your color palette, go to Filter>Render>Clouds… Hold down ctrl+d to deselect.

Set the blending mode to “multiply” and the opacity to 70 %.

Create a layer mask, and pick up the “Gradient Tool (G)” With these settings:

Hold down shift drag the “Gradient tool” from left middle of the frame to about half way in the scene.

Now click on the “clouds” layer’s thumbnail, and go to edit>transform>distort and distort it like this:

Last, go to edit>transform>flip horizontal… The result will look like this.

Step 20

Now we’re going to make the reflection. This is a very easy technique. Make the “Background” layer invisible by clicking on the eye icon.
Now click “ctrl+a” to select all.

Go to edit>copy merged (“shift+ctrl+c”) and hold down “ctrl+v” to paste. Name the new copied layer “Reflection”.

Now go to edit>transform>flip vertical and drag it right under our original frame like this:

Now let’s make that “Background” layer visible again. But still be on our “Reflection” layer. Set the layer’s opacity to 30 %

Create a new layer upon the “reflection” layer, name it “reflection shadow”. Pick up the “Gradient tool (G)” with the same settings and before, and drag it from down to up like on the picture below:

Step 21

Create a layer upon all other layers. Name it “Blue”. Pick up this color #3f3e65. Pick up the “Paint Bucket tool” and fill the layer with this color. Set the blending mode to “overlay” and the opacity to 65 %

Create another layer upon the “Blue” layer. Name it “Brown”. Pick up this color #624b2b and fill the layer with this color. Set the blending mode to “color” and the opacity to 60 %

30 Minute Redesigns

Hope many of you saw the first week of our weekly 30 minute redesigns last Saturday. If you please check out the redesign I did of RichGates.com:

30 Minute Redesign: Rich Gates

The idea is that I redesign a website in just 30 minutes, trying to improve upon it’s design aspects. I then publish a case-study of my improvements for learning purposes and email the webmaster the final .psd design. I will be doing one redesign each week, and to be eligible for the following week’s redesign you must leave a comment to the previous week’s redesign with your web address and why you would like a redesign.

Voting Begins

After receiving lots of great comments to last week’s redesign post, I’m happy to present the candidates for this Saturday’s redesign. Please look over the websites below, and then use the poll at the bottom of this post to choose which site you’d like to see redesigned:

1: Web Area

2: Save Delete

3: Hot Yoga

4: DoKall

5: Citium Sistemas

6: The Capital Singers of Trenton

7: D&D Photography and Design

Vote Now!

Please cast your vote using the poll below:

Be sure to check back on Saturday for the winning case-study!

Gate Textures

You can view the textures below, and can download the full sized textures at the bottom of this page.

Download Them Free

You can download the full-sized textures totally free using the link below:

Download Textures Free

License: Creative Commons Attribution

Today we present Part 1 of a two part post, identifying common mistakes in design, and showing you the right way to do things.

For each example we will present case-studies, in order for you to understand the principles of design first hand.

Saturation and Color Choices

Whilst color is a great attribute to web design, it must be used correctly. Colors should go together well, and be easy on the eyes. Color should be used to draw attention, not just for the sake of it:

WRONG:

Yaxay.com – The colors of this design are a little overwhelming. The viewers eye doesn’t really know where to go. The large block of bright orange in the background actually pulls the viewers eye away from the page content.

ShopSafe.com – The bright colors of the menu and background seem to clash. They’re far too saturated, giving a cheap feel to the website. The overwhelming colors pull the viewers eye away from the content. The eye should be on the website’s offers and products, not on the useless background!

RIGHT:

ColorSchemer.com – This website shows that bright colors can be done tastefully. The background, whilst bright is subdued enough to enhance the content, rather than distract from it. The brightest colors are in the top-center of the design, drawing in the users eye. The bright colors are relevant to the site’s purpose, and give life to the website’s design.

37Signals.com – Whilst not an overly colorful website, blocks of color are used to promote the most vital content of the website. Key text and product areas are highlighted with color, and different (but complimentary) colors are used to differentiate between the various products.

Typography

A good website design should have clear, legible typography. Fonts should be kept to a minimum (2-3 tops) so as not to overwhelm your visitors.

WRONG:

KanyeUniversecity.com/blog – Kanye West’s blog uses menu font that is very hard to read (not helped by it’s tiny size). His menu is rendered very unusable, and the website suffers.

Neil Gaiman – Neil Gaiman’s blog uses a similarly hard to read menu font. The image menu tabs, close kerning, close proximity between menu links, and integrate into the header actually make the menu look like part of the header design, rather than a menu at all. The result – a hard to navigate website!

RIGHT:

AListApart.com – AListApart uses a very clear menu typography, as well as elegant headings. Fonts are used sparingly, but to great effect!

ElliotJayStocks.com – ElliotJayStocks uses dynamic text replacement to improve his pages typography. The menu and headline use the same type, but both are clear and legible.

Branding

With so many websites out there, branding is becoming increasingly important. Designs should not only look professional, but encompass your websites philosophies and message. Furthermore, your brand should help set you apart from your competitors, sticking out in visitors minds.

WRONG:

TechDesigns.co.uk – TechDesigns design isn’t terrible, but it had literally nothing to set it apart from the crowd. The design seems like any generic hosting template, yet it’s for a web design agency!

BusinessProDesigns.com – BusinessProDesigns is another very generic lookins website. There is no branding, no uniqueness to the design.

RIGHT:

Tutorial9.net – Tutorial9 has a clear brand, playing off of the ‘Cloud 9′ ideal. The logo, subtle background patterns and color-scheme all serve to promote the image of providing ‘heavenly tutorials’ to their visitors.

OutLawDesignBlog.com – With a name like ‘Danny Outlaw’ Danny couldn’t really help but brand himself brilliantly. That being said, his website pulls off the branding effort with perfection. The western feel and attention to brand detail is outstanding!

K.I.S.S

The old motto Keep It Simple Stupid is never truer than in the world of web design. Simplicity is key to great design. The best designs only have the content that is vital, no useless content at all. Additionally white space is required for great design, leaving a good amount of space between the visual elements of the page in order to give it a padded feeling.

WRONG:

WebCreationUK.com – WebCreationUK is a web design company, yet they seem to find the need to cram every piece of information they can onto their homepage. There is no feeling of being drawn into their site, as instead you feel bombarded by the amount of data that they’re throwing at you!

Web-App.net – Web-App.net takes a similarly shocking approach, bombarding you with endless columns of text. There is very sporadic white space on this website, and because of this content areas are not clearly defined.

RIGHT:

KyanMedia.com – KyanMedia contains a very selective amount of information, and for this reason it’s visual elements feel nicely spaced out and focused. There is no confusion when viewing this design, your eye knows just where to go.

MT-Ventures.com – MediaTemple Ventures is a very minimal design, yet it doesn’t feel underdone. Rather, the design is elegant, and the content feels professionally integrated. The design utilizes plenty of white space.

A Unique Layout

A unique design is essential. I’m personally not a fan of the thousands of sites using pre-made themes and templates. Nothing about these designs stands out, and particularly those sites in the design niche should consider using a custom-made design:

WRONG:

Websites Using Pre-Made Themes – Sure, themes/templates are convenient and handy, but in using a template many sites sacrifice their ability to make a real name for themselves. One solution for designers is to purchase a theme so that the code is already in place, but then use the design to make modifications – this way you can put a unique twist on a pre-made design. I’d like to make it clear that I have nothing against theme/template providers, many of them offer great designs. However, professional websites should consider using a unique design.

RIGHT:

WebDesignerWall – WebDesignerWall has one of my favorite all time favorite designs. It’s originality and creativity had the entire community talking when the design first went live.

WebDesignerDepot – WebDesignerDepot is a more recent example of a design that captured the interest of the design community. The hugely creative and unique header helped to carve out a niche for the blog, providing quality content and great design insight.