Too often designers boil a concept down too far, producing a final design that is nothing more than text and a grid. While these minimal designs have their aesthetic appeal, particularly when paired with excellent typography, they risk falling short of notice.

Personal opinions aside, there are certain features of a design that allow it to be proudly labeled as clean or modern and enhance its usability and likability on a universal level. Simplicity is not a design trend, but rather an attribute of good design.

Photoshop grants us a versatile set of tools for creating depth and interest, and invites us to integrate subtle detail where we would leave a blank space. You need only a handful of these tools to infuse the qualities of modern design into a layout. By mastering them, you can create clean designs that express functionality clearly and effectively.

1. Space

White space allows for the visual separation of design elements without the use of boxes, lines, or additional graphics and is possibly the most important aspect of modern design. It is essential to content presentation and readability. When used correctly, white space gives your layout its clean and elegant feel.

Guides and Grids are available in Photoshop to help you position elements precisely. The grid overlays your entire document whereas the guides can be set manually. Use guidelines early to set invisible borders, margins, and padding used to define your white space.

Create a guide by hitting Ctrl+R (Win) or Cmd+R (Mac) to enable the ruler and then click the top or left ruler to drag a guideline to your desired position. Here are some additional shortcuts to help you manage guides while you work:

• To move a guideline: Ctrl(Win) or Cmd(Mac) and click the guide
• Show/Hide guides: Hit Ctrl+; (Win) or Cmd+; (Mac)
• Show/Hide the grid: Hit Ctrl+’ (Win) or Cmd+’ (Mac)

Enable your Smart Guides under View > Show > Smart Guides. Smart Guides appear automatically when you draw a shape, align text, or create a selection or slide and will save you the work of setting up guidelines for these elements in advance.

Aligning objects using guides and grids makes your design easier to digest and will give the overall result a more polished look.

2. Depth

Depth created with light and shadow makes your elements appear crisp and real. Shadow effects can be applied to any object, selection, or text layer, but the trick is to choose a color that matches the background and forgo the default black.

Not all shadows must be dark. Combine the Inner Shadow effect with a white or light-colored Drop Shadow to create a sunken or “letterpress” feel with text or form fields.

3. Detail

Both the gradient tool and the gradient layer effects play a large role in clean and modern design. Gradients are present in every aspect of modern styling, from shadows and highlights to backgrounds and buttons.

To access the gradient tool, hit Shift+G. To create a gradient, click the canvas, drag, and release. This tool is best used for large areas such as backgrounds, lights, or radial shadows. When working with individual elements such as sections, buttons, or icons, the Gradient Overlay layer effect is a more efficient means of establishing surface styles or textures. This tool is accessed by double-clicking the element layer and selecting the “Gradient Overlay” checkbox.

Use this effect to give subtle dimension to your buttons and navigation bars, or to mimic the style and texture of paper or metals.

4. Definition

By over-defining edges and borders, you ensure your elements have proper contrast.

The Stroke layer effect will outline elements such as text or buttons where you need an equally weighted outline on all sides. Using this effect will free up the Inner and Drop shadows to extend your options.

It is tempting to head for the pen tool to draw straight lines and horizontal rules, but if you want to apply gradients or shadows to the line, it is easier to use the Single Row Marquee Tool, which is tucked discreetly behind the Rectangular Marquee Tool. Use the Single Row tool on a new layer and a white or light-colored drop shadow to create highlight lines along section borders or separators where you are not able to apply an effect to the element itself.

5. Interest

Clean and modern does not need to equal boring, white, or minimal. Clever use of texture and pattern will make your design stand out, while communicating style and brand. Use subtle techniques such as adding noise (Filter > Add Noise) or the Texture Overlay layer effect on background areas or interface elements to help set them apart. The more real and clear an element appears, the more enticing it is to the viewer.

6. Perspective

Perspective is the most underused technique in modern web design simply because ongoing trends focus consistently on symmetry and grids. By applying perspective to images and elements in your design, you can introduce depth, dimension, modernism, and interest to your design in one easy step.

Perspective can be given to any shape or image by choosing the “Free Transform Path” option in the right-click menu and clicking the “Warp” button located in the tool options bar.

The illusion of perspective can also be produced by creating asymmetrical shapes or frames and using gradients and shadows appropriately to place the objects apart.

7. Readability

Strong type is well loved in the design community, and an even stronger component of clean design. It can replace imagery and graphics that may otherwise overcomplicate a design and convey the total essence of the above techniques in a simple and straightforward way.

To add textures to text, convert your text layer to a Smart Object first by right clicking the layer and choosing “Convert to Smart Object.” You are limited to layer effects by default unless your text is rasterized, a practice you want to avoid, even when designing for the screen. Converting to Smart Objects allows you to apply filters and other techniques to the text while preserving your editing capabilities in the event you need to change what the text says later.

Remember that you have tracking and kerning options available to you when setting up text elements. Even if your text is destined to be reproduced in CSS, you should experiment with line and letter spacing early on to better visualize how your content will appear within the space you have given it. Also, remember to use “Crisp” or “Sharp” text to retain definition and clarity.

How you present your content in clean design is more important than any other style simply because there is less going on visually to distract the viewer. By using the tips above to space text and objects appropriately, add definition and interest, and set the content apart from the interface, your design will achieve optimal effectiveness.

Vail is a long-time writer, designer and copy editor with a vibrant background in corporate business writing, music journalism and internet media design. Since 1996, her articles and photography have been published in various music magazines, poetry compilations, and business publications. When she is not hard at work designing something, she loves writing for Wix.com, the free website builder.

What do you think of these tips and do you have others you use on a regular basis? Please share below…

Never Ending WordPress Business Bundle – only $14!

In such a rapidly changing landscape, what is at stake for web users might well be the quality of what is produced.

Quality assurance often comes down to standards, and for better or worse, design lacks a regulating body.

Some countries (Canada, Norway, United Kingdom, and others) do have rigorous qualifications to belong to professional design groups, but none are required to practice. So how do standards gain traction if they aren’t made mandatory?

With over 300,000 visits since launching in January 2011, The Photoshop Etiquette Manifesto for Web Designers, more or less a standards document, has had no problem gaining popularity. The individual behind the manifesto, the smart and passionate Dan Rose, answered some questions for us about the Manifesto’s beginnings, its challenges, and its future.

How did Photoshop Etiquette come about? What was your inspiration?

Dan Rose: So I was sitting at my desk, just inherited a PSD from someone, at my wit’s end from hunting down what layer something was on. As I reached over to my Twitter app to complain to the world about my plight (as all of us do), I realized there had to be a better way. I got out my notebook and I frantically started writing down the things that agitated me most about inheriting PSDs.

Hours later, I opened up my text editor, tossed my ranting into HTML, and thus, Photoshop Etiquette was born.

Initially, my goal was to make this one-page site of grumblings a declaration to co-workers and colleagues alike. My target audience was originally those 10-20 people I had to share PSDs with. Needless to say, it was an internal document at best.

As I shared the link with Twitter and Forrst folk, I noticed the site catching on and its purpose quickly changed. The site had to be educational and useful, and even though at times it maintained a witty and snarky tone, the goal had to be to promote workplace harmony. Otherwise, it was just a list of complaints that some people agreed with while others felt alienated.

(Image: AGoK)

What do you think is the most important tip in Photoshop Etiquette?

Rose: Anything dealing with external file organization (naming files, using folders, storing assets) comes to mind. The underlying theme of Photoshop Etiquette is that collaboration is crucial, so the manner in which we collaborate should be top-notch. The backbone of the site is about individually raising standards so it benefits the group collectively.

We web people are getting better at creating beautiful, usable websites. However, it’s going to take collaborative efforts to make sites even better, sites built on solid concepts rather than fancy trends and techniques. That’s what adopting Photoshop Etiquette is all about: perfecting your craft down to “insert rule here” so the next person who gets your PSD isn’t wasting time figuring out what you’re trying to do, and people will want to collaborate more.

Take pride in what you do. Don’t take shortcuts. Your awesome design should have an awesome PSD behind it. Okay, I’m stepping off my soapbox.

While a manifesto, your site is also a teaching tool. What is it about teaching “old dogs new tricks” that you find challenging?

Rose: It’s hard to get old dogs to pay attention. It’s the same with those who feel etiquette wastes time. I imagine seasoned pros visited the site, saw the first few rules, and said “Eh, I already do that, this is for beginners.” Therein lies the problem. It’s that attitude that prevents us from collaborating effectively.

Humility plays such an important role in our industry. What other profession so openly shares its knowledge base with tutorials, articles and feedback? It’s inspiring to see fellow web designers sharing their secrets to success and proficiency. Sharing the fundamentals of design and Photoshop seems the least I can do.

(Image: Viola Renate)

Some of your tips are appropriate for both designers and developers. Do you think we web folk increasingly moving toward one shared skill set?

Rose: Just one man’s opinion: I think there is space for varying degrees of web proficiency. Making something amazing depends on passion.

Responsibility is also important. As a designer, I owe it to my developer to be familiar with as much code (HTML/CSS) as it pertains to design and layout. I can get by without such knowledge, but then the probability of my developer finding grief with my designs is higher. So yeah, I guess I’m saying in a best-case-scenario a web designer is also a front-end developer.

With all the amazing resources out there to learn front-end development, it’s worthwhile for those shy designers to dive in. http://membership.thinkvitamin.com/ and dontfeattheinternet.com echo that sentiment.

What is the future of Photoshop Etiquette? How can we help it stick around?

Rose: I’m committed to making Photoshop Etiquette a resource that spans changing software updates and beyond. Adding and modifying some of the rules is definitely in the scope of updating the website over time.

I’d love for Photoshop Etiquette to become more of a community and not just a static resource. People are encouraged to suggest new rules, and a bunch of what’s up there now has come from the suggestions of many. I love the photos of people wearing their Layer Mayor tees, showing support for the cause. Continue contributing via email psetiquette@layermayor.com and following @psetiquette on Twitter.

Most importantly, go get a Photoshop Etiquette poster, hang that thing in your studio, and convince your designers and developers to adopt it. Or come up with your own list of do’s and do not’s. It’ll do wonders for morale.

The future of design standards

It is clear the Photoshop Etiquette Manifesto is a successful case study for how design standards could be regulated, as few other initiatives have garnered as much interest. Such an endeavor does not come without its challenges, as Rose has shared with us here, but immediacy is not one of them; while the case for the licensed designer has been gathering momentum for awhile, design professionals can adopt the Manifesto this instant, even while certifying organizations are still getting their acts together.

Given the challenges Rose faces in standards adoption, one larger question remains: Will placing the onus on individuals be enough to make a difference?

Written by Cassie McDaniel, a freelance web designer, writer, artist and illustrator. Cassie has written for A List Apart, Smashing Magazine, Freelance Switch, Six Revisions in addition to Webdesigner Depot. Follow her work at www.cassiemcdaniel.com or say hi to @cassiemc on Twitter.

Are individuals as standards evangelists enough to regulate our industry? Or do we still need regulatory bodies to govern design standards?

Never Ending WordPress Business Bundle – only $14!

The Hand Drawn Floral Set 9 normally sells for $14.69, but today and for a limited time only, you can download the entire package for the best price of all: FREE!

These 10 sophisticated designs are delivered in several formats to make them easier to use: png, ai, eps, jpg and abr brush.

See the full preview and download instructions after the jump…

This file is exclusively available as a free download from today via our site MightyDeals.com until August 19th.

After that date, you can still get the file but for $14,69 at the StocksGraphicDesign.com website where you can find tons of other great resources and graphics like these. Enjoy!

Never Ending WordPress Business Bundle – only $14!

If someone has already created something that fits what you need and/or want, and especially if that element is available for free, then why waste your time designing something that turns out virtually identical?

Your time and effort is better spent on creating new and unique parts of your design, while using what’s already available for other parts.

Below are more than 50 free UI element packs from a variety of designers. Buttons, form elements, media players, and similar stock elements are the most popular, though there are other elements included also.

And as a bonus, there are over half a dozen premium element packs at the end. Enjoy!

Free Elements

Soft UI Kit: Free PSD for Mocking Up Web Designs

A set of common web elements for mockups, designed by Adrian Pelletier and provided by Six Revisions.

Transparent Glass UI: Free PSD for User Interface Design

This set of dark UI elements was created by PixelsDaily, and is also provided by Six Revisions.

Freebie: Modern UI Pack Photoshop PSD

A modern, minimalist UI kit with some simple, basic elements.

Freebie: Massive Web UI & Button Set

This web UI kit from MediaLoot includes brightly-colored buttons, info boxes, breadcrumbs, search forms, and many other elements.

Web UI Treasure Chest v1.0

This kit includes over 100 elements for your designs, including banners, buttons, tooltips, badges, and more.

Web Form Elements

A set of gray and gold web form elements, including text areas, buttons, and dropdowns.

Web Form Elements Vol.2

A set of gray web form elements, including sliders, dropdowns, tabs, and more.

Got Wood? UI Design Elements

A kit consisting of more than 100 modern UI elements with a wood-grain look.

Snow UI Kit

This UI kit from MediaLoot has a muted gray color scheme with dark bluish-gray accents.

Dark Mysterious Web Elements

This set of design elements was designed specifically for use with dark and highly-styled sites. It includes search bars, separators, buttons, audio player elements, and more.

Black UI Kit

The Black UI Kit includes glossy, black and blue elements, including plenty of media controls.

Moonify UI

Moonify is a set of UI elements that includes a search bar, rating stars, and some basic form elements.

Blue and White GUI Kit

A set of soft blue and white UI elements, including form inputs and buttons.

Black UI Elements

A set of glossy black and bright blue UI elements, including sliders, buttons, dropdowns, and text inputs.

“Grayness” UI Kit

Grayness is a set of form UI elements in light gray.

Solid UI Kit

The Solid UI Kit has a retro sci-fi look to it, with a yellow-gold color scheme.

Dark UI Element Set

A set of dark, slightly glossy buttons and UI elements with a purple loading bar.

E-Commerce Steps UI

The elements here are designed specifically as the second step of an e-commerce checkout process.

“Calligraphy” GUI Elements

A set of UI elements inspired by Chinese calligraphy techniques.

“Sepia” UI Elements

A set of brownish-gray form elements with an antique but clean feel to them.

Bloom UI Kit

The Bloom UI Kit includes buttons, form inputs, sliders, and more.

Apple Styled UI Elements

A set of Apple-inspired elements, including buttons and form inputs.

Textured Alerts

A set of transparent alert styles, with changeable colors and a removable texture overlay.

Header & Navigation Pack

A set of three navigation/header styles.

Simple UI Elements

A set of versatile minimalist, rounded UI elements.

Pretty Little Search Fields

These Pretty Little Search Fields come in two styles (rounded and square), with three different color schemes.

Add to Cart Buttons

A set of add-to-cart buttons in three muted colors.

Simple Tabbed Navigation

A PSD for simple tabbed navigation with dropdown menus.

Dark Button Navigation 2

A set of dark navigation buttons for horizontal or vertical menus.

Transparent Tooltips

A set of transparency tooltips in four colors, from Premium Pixels.

Neat Sliders – Free PSD

A set of retro sliders with chrome buttons and yellow accents.

Minimalist Horizontal Navigation

Simple navigation elements with subtle coloring and awesome state designs.

Sleek Dropdown Menu

A dark dropdown menu button.

Fancy Slider & Toggles

A gorgeous multi-colored slider with chrome ends.

A Minimalist Calendar Widget

A simple blue and gray calendar widget PSD.

Form Goodness Kit

The Form Goodness Kit is a set of minimalist but bold form elements, including input fields and buttons.

Green Contact Form

A simple, modern green contact form with icons and a submit button.

Modal Box Contact Form

A minimalist modal box contact form.

Login Form PSD

A highly-styled PSD login form.

Quick Sign In Form

A short, minimalist sign-in form in blue and gray.

Vintage Newsletter Form

A vintage-styled newsletter signup form.

A Clean Login Box

A minimalist login box in white and muted red.

All In One Web Elements Kit

A huge collection of elements in dark gray, red, blue, and green, this kit includes buttons, sliders, and multiple content styles.

Victor Elements

A set of retro-styled UI elements, including sliders and buttons.

Mini Gallery

A set of PSD image gallery elements.

Wraps and Ribbons Pack

A set of ribbon and wrap effect PSD files.

Design Elements

This pack includes search inputs, buttons, sliders, dropdowns, and more.

Big Block UI

The Big Block UI includes a number of bold elements, including a search box, sliders, rating stars, and a dropdown button.

Freebie: Modern Web UI Set

This set of black and gray, slightly glossy UI elements includes navigation, buttons, scrollbars, panels, and breadcrumbs.

Light UI Elements

A set of light gray elements, including buttons, media player controls, and breadcrumbs, with various colorful accents.

Spring GUI

A set of green elements, including buttons and dropdowns, among others.

Web Elements

A set of dark, multi-colored elements, that includes scrollbars, search fields, download buttons, and more.

Video Player

A slick video player chrome.

Premium Elements

Glorious Colors UI Kit ($6)

A set of brightly colored UI elements, including sliders, switchers, buttons, and more.

Glowing UI Kit ($5)

A set of glowing UI elements, including form elements, separators, buttons, and more.

Minimalist Slider Creator ($4)

Contains more than 70 elements for creating sliders, including shadows, frames, vignettes, and more.

Stitched Web Elements ($5)

Set includes a login box, subscription box, download button, and more, and comes in four different colors.

Subtle Web Elements II ($5)

A set of retro-styled elements with subtle color schemes that include bright blue and orange highlights.

Minimalist White Web Elements v3 ($3)

A set of white and light gray elements that are clean and fresh.

Web Elements Pack ($5)

A set of elements that includes banners, media elements, navigation, buttons, and badges, in five color schemes.

Written exclusively for WDD by Cameron Chapman.

What’s your favorite site for finding PSD files for your designs? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

Today, we’ll learn how to create a simple but effective anaglyph illustration.

Before we begin, I suggest you buy a pair of 3-D glasses or read this guide on how to create your own.

We’ve included the Photoshop and Illustrator files at the bottom of this post; download them to explore more.

If you follow this tutorial to create your own anaglyph, please share your results and experience with us in the comments.

Step 1

First, open Adobe Illustrator and create an A4 canvas (21 × 29.7 cm or 8.27 × 11.69 inches).

Step 2

Create two circles using the Ellipse tool (the shortcut is L). Draw an elliptical shape on the bottom and a perfect circle above it (holding Shift + L will make it proportional).

Step 3

Use the Pen tool (P) to create the fuse. To get square shapes using the Pen tool, hold Option/Alt and click on the point on the curve that you want to turn into a vertex.

Step 4

To create the flame, just repeat the same procedure. Practice drawing round and square shapes with the Pen tool; with time, it will get easier.

Step 5

Now let’s add some color to our little bomb. Select the circle and bottom of the fuse using the Selection tool (V), and go to the Gradient panel. Let’s create a radial gradient that fades from white to black, using a perfect white (C:0, M:0, Y:0, K:0) and perfect black (C:0, M:0, Y:0, K:100).

Using the Gradient tool (G), position the gradients as shown below. And add a 10-point black stroke to both, which should give you something like this:

Step 6

Let’s add some plain color to the fuse. Select it and choose a dark yellow (C:36, M:46, Y:100, K:10), with no strokes.

Step 7

Select the flame shape using the Selection tool (V). And in the Gradient panel, set a classic flame gradient, using some yellow (C:5, M:0, Y:90, K:0), orange (C:0, M:90, Y:85, K:0) and brown (C:15, M:100, Y:90, K:79).

Don’t forget: unless it’s a radial gradient, it will not look as soft as we want. Using the Gradient tool (G), place it as in the screenshot below:

Step 8

Remember the first ellipse we did in the beginning? Select it, and choose a total black fill.

Now got to Effect → Blur → Gaussian Blur, and set a radius of 40 pixels.

You should get this shadowing:

Step 9

Now let’s create some reflections. Using the Pen tool (P), draw this shape with a white fill:

Open the Gradient panel, and create a white gradient with a transparency. Just set the opacity of one of the colors to 0% to get this effect:

Open the Transparency panel, and set the opacity of the two shapes to 50%.

Our bomb is done. Now let’s create the anaglyph effect.

Step 10

Open Adobe Photoshop and create a 550 × 550-pixel canvas, with a 72 DPI.

Step 11

Copy the bomb from Illustrator (Command/Control + C), and paste it in Photoshop (Command/Control + V). Pasting it as a Smart Object is better because you will be able to scale it without it looking pixelated.

Step 12

Create a simple gray-to-black gradient background using the Gradient tool (G).

Step 13

By clicking on the bomb layer using the Selection tool (V), you can select only the shape of the bomb, which is quite useful when you need to work with only this space.

Step 14

Let’s create a new layer (Command/Control + Shift + N). With the bomb selected, go to the Color panel and choose a blood red (R:255, G:0, B:0). Using the Paintbucket tool (G: it’s in the same place as the Gradient tool — just hold your mouse over it), fill the entire selected area.

Step 15

Go to the Layers panel, and duplicate the original bomb layer by pressing Command/Control + J. Then, group this new layer with the red shape layer, and call the group “Red.”

Step 16

Select the red shape layer. In the Blending Modes panel, choose the one called “Screen.” You should get this result:

Step 17

Let’s repeat the same procedure of creating a new layer, filling it with color, duplicating the bomb layer, creating a group (“Blue”) and blending the color layer with the bomb layer. This time, though, use a light blue (R:0, G:240, B:255).

Step 18

Pay attention to these next steps, or else you might not achieve the 3-D effect. First, select the group “Red,” and open the Blending Modes panel. Select the one called “Multiply.” Repeat this procedure with the “Blue” group. Your image should have gotten a bit darker.

Step 19

Using the Selection tool (V) move the “Red” group gently to the left and the “Blue” group to the right; not too much, just a bit so that they are out of the center. This will create a depth effect, so put on your 3-D glasses to see if it works.

Step 20

Let’s try some depth effects. Group all of the layers (Command/Control + G), and name it bomb_1. Duplicate the group, and call the second one bomb_2.

Using the Free Transform tool (Command/Control + T), resize bomb_2 and flip it horizontally (right-click while using the Free Transform tool). Place this group behind the first one. You should get this, the final result:

The result

I hope you had a great time following this tutorial and that you learned a bit about how to create anaglyph images. There are a lot of other ways to achieve this effect; this is just a introduction. Keeping working hard, and please share your results with us.

Written by Marcos Torres. He is a Brazilian illustrator and art director who works for a marketing agency and for Abduzeedo as a tutorial designer. You can see more of his work by accessing his website or by following him on Twitter.

So, what were your results from following this tutorial?

Never Ending WordPress Business Bundle – only $14!

It is often used as an online diary because of to its ease of use compared to other blogging platforms such as WordPress.

A lot of Tumblr themes are out there, both free and premium, but have you ever wondered how you’d go about designing your own?

In this tutorial, you’ll learn how to create a forest-inspired Tumblr theme, making use of wood textures, subtle patterns and modern techniques—a nice blend of natural and modern elements.

What we’re going to design

The theme we’ll be designing in Photoshop consists of four areas: wooden sidebar, main content area, right sidebar and header.

Step 1

The first step, as should be with all things you design, is the sketching stage. Using my Wacom Bamboo graphics tablet and a blank canvas in Photoshop, I sketched the following design, with some larger elements, just to get my ideas down on (digital) paper.

Step 2

With the idea roughed out, create a new document in Photoshop. (Keep in mind, this isn’t set in stone. It’s just something you can refer back to if you get stuck in the design. Personally, I tend to experiment and change a lot of what I initially planned.) I used the following settings in Photoshop:

Step 3

The next stage is to put some guides down on the canvas. This will help you keep the structure of the theme neat as you design it. I want the left sidebar to be 200 pixels, the main content area to be 600 pixels and the right sidebar to be 160 pixels, giving us a width of 960 pixels.

If you’ve used the same settings, you can place your guides at 200, 800 and 960 pixels horizontally. This design will be aligned left, so that the wooden sidebar always sits against the left side of the user’s viewport.

I also placed guides 200 pixels below the top of the canvas and 200 pixels above the bottom of the canvas. This is how my document currently looks:

Step 4

Let’s now add some pattern to our background. Go to File → New, and create a new document that’s 8 × 8 pixels. Draw some vertical lines with a width of 2 pixels. Your canvas should now be 2 pixels black, 2 pixels white, 2 pixels black, 2 pixels white. Go to Edit → Define Pattern. Save your pattern as “Vertical Lines 2px.”

In your original document, go to Layer → New Fill Layer → Pattern. Select the pattern you just created, and click OK. Drop the opacity of the layer until it looks something like this:

Merge the pattern with your background layer, automatically rasterizing it in the process. Go to Filter → Noise → Add Noise. Change the value to 5% and click OK. This will add some subtle texture to the background:

Create a new layer, and fill it with white. Position it beneath the original background layer. Lower the opacity of your textured layer pattern to around 40%, and then merge it with the background layer by going to Layer → Merge Layers.

Step 5

Select the Rectangle tool, and draw a shape that’s 200 pixels wide.

We’re going to slice off the bottom of our shape using the Polygonal Lasso tool, making it look like a ribbon. Create a selection over your shape, rasterize the shape layer, and then hit the Delete key to remove the selected area.

Place the shape in the left sidebar area that we marked using our guides.

Create a selection of the top portion of the shape, and go to Edit → Free Transform. Stretch the shape so that it overlaps with the top line of the canvas.

Step 6

Select the Ellipse Shape tool and, while holding the Shift key to keep it round, draw a circle, filled with white. Position it at the top of the sidebar, and rename the layer to “Portrait.”

Right-click on the new shape layer, and select the “Rasterize layer” option to turn it from a smart object into pixels. Hold down the Command key, and click on the layer’s preview image in the Layers panel. This will make a selection of your circle.

Locate a picture of yourself (or whatever your website is about) and copy it. Head back into Photoshop and, with the circle selection still active, go to Edit → Paste Into. This will paste the object in your circle selection.

Having done this, you have automatically created a layer mask on the image (i.e. on a new layer, not the existing circle layer). Go to Edit → Free Transform to resize and/or rotate the image. It will remain a circle; just be sure not to make it too small. Once that’s done, delete the layer named “Portrait,” and rename your new layer.

Step 7

Select the Type tool, and create a text box in the header area. I’ve given my theme a completely random name: “Kabooom.” I used a font called Reklame Script. You can download a demo of the font or purchase it for $30 from MyFonts.

Right-click on your type layer, and select “Blending Options.” Apply a color overlay to the text. I used a light gray that’s a little darker than the background, with the hex code #D6D6D6.

Apply an inner shadow to the type, using an opacity of 10%, a distance of 2 pixels and a size of 1 pixel. Leave everything else at 0. This will make the type look like it was engraved in the background.

To complete the engraved effect, we’ll add a drop shadow to the type, using the color white with a normal blending mode. Give the shadow a distance of 2 pixels and a size of 1 pixel. These settings will make the shadow appear as a highlight at the bottom of the type, adding more depth to the type and reinforcing the inner shadow.

Step 8

Reselect the Type tool, and create a text box that fills the width of the right sidebar, which we have marked with guides. Put a variety of categories under the category heading, as seen below:

Select the category heading, and change the typeface to one of your choice. I used Minion Pro. Experiment with sub-fonts (bold, italic, etc.) and point sizes.

Change the font for the categories (“News,” “Days out,” “Photography,” etc.) I used Myriad Pro. Lower the point size of the type, and adjust the leading (i.e. the space between the lines of text), so that the top line sits lower than where it is by default.

Copy the first heading and the links and paste them below in the same text box. Change the heading and categories. I used the headings “My Projects” and “My Friends.” Use whatever is relevant to your website, of course.

Step 9

We’re now going to make the text in the right sidebar a little more appealing. Select the text for sub-categories (i.e. not the headings), and change the color from black to a dark gray. I used #333333. Click OK.

Right-click on the type layer, and select “Blending options.” Apply a white drop shadow with a normal blending mode. Change the angle to 120° and the distance and size to 1 pixel. Leave everything else set to 0 pixels. This will add a highlight to the bottom of the text, just like we did with the heading.

Step 10

Select the Line tool and, while holding the Shift key to keep it straight, draw a line beneath the “Categories” heading.

Right-click on the line layer, and select “Blending options.” Apply a white drop shadow with a normal blending mode. Set the angle to 90° and the distance to 1 pixel. Set everything else to 0 pixels.

Duplicate the line layer, and position it below each of the headings.

Step 11

If you have the same number of headings as me, then you should have three line layers. Select them all, and duplicate them. With the three line layers still selected, nudge them down 10 pixels by holding the Shift key and pressing the Down key once. Lower the opacity of your newer line layers to 25% to end up with something like this:

Step 12

Grab the Rectangle Shape tool, and draw a rectangle similar to what’s below. Make the rectangle exactly 570 pixels wide. This will allow for a 10-pixel gap between the left sidebar and the edge of the new rectangle and a 20-pixel gap between the right sidebar and the edge of the new rectangle, as seen in the annotated screenshot below:

Step 13

Reselect the Rectangle Shape tool and create a much smaller gray rectangle, like the one below. Position it in the top-right of the large rectangle, offset from the large rectangle by 10 pixels. Position the shape 30 pixels away from the top of the rectangle.

Step 14

Duplicate the type layer in the right sidebar and, using the Shift key and Cursor key combination, nudge the duplicated type layer over the main content area. Do the same with the two line layers for your “Categories” heading.

Select the Type tool, and click on your duplicated type layer. Remove all of the text in the box, and change the heading to something more suitable. I just used some dummy text here: “This right here is called a title.”

Step 15

Go to File → Place, and locate a photograph to place in the document as a placeholder. Using real images here is always best because they make the mock-up seem more real and attractive. I used a photo of my sister.

Go to Edit → Free Transform to reduce the size of the photo and position it in the right spot. Make it a total of 20 pixels shorter in both width and height so that it fits nicely in the black rectangle, like so:

Step 16

Open up the Blending options for the large black rectangle. Apply a white color overlay and a drop shadow with an opacity of 10% and a size of 3 pixels.

Step 17

Select the Rectangle Shape tool once again, and draw a long shape below the white photo background shape. Make sure it is the same width. Fill it with a light gray.

Open the Blending options for the new gray rectangle, and apply a drop shadow. Set the color to white, with a normal blending mode, the opacity to 100% and the distance to 1 pixel. Leave everything else set to 0 pixels.

Also, apply an inner shadow, using the color black, with an opacity of 10%. Change the size to 13 pixels, and leave everything else set to 0 pixels. These two layer styles will make the new shape look like it was etched in the background, like our heading typography:

Step 18

Moving on to the sidebar, download some repeating wood textures. I’m using a set from GraphicRiver that includes three different wood textures: light, medium and dark.

Once you’ve installed the patterns in Photoshop (by opening each image and defining it as a pattern), select the sidebar in your Photoshop document. Go to Layer → New Fill Layer → Pattern. Select one of your wood textures (I selected the medium version), and click OK. By selecting the sidebar first, the pattern should fill only that area.

Right-click on the pattern layer, and select “Blending options.” Apply a gradient overlay, going from black to transparent to black:

Change the opacity of the gradient overlay to 10%, and give it an angle of 0°. This will add a subtle shadow to the sidebar, making it appear a little more realistic and less flat.

Also, apply a drop shadow to the sidebar. Lower the opacity to 30%, and change the angle to 180°. Change the distance to 1 pixels and the size to 5 pixels, leaving everything else set to 0 pixels. This will add a small and subtle shadow to the sidebar.

Step 19

Open up the “Blending options” for the circle portrait that we created near the beginning of this tutorial. Apply a white drop shadow using the settings below:

Also, apply an inner shadow using the settings below. This will make the circle portrait look as if it was placed in the tree, rather than just sitting on it.

Step 20

Duplicate the title layer in the main contents. Reposition it to the sidebar, and change the text to “About me.” Also, reposition and resize the two lines below the heading.

Open the “Blending options” for your new type layer, and change the drop-shadow settings to these:

Add some text to the “About me” section, using the same font and size that we used in the right sidebar text. Open the “Blending options” for this new text, and click on the “Outer glow” tab to apply an outer glow; change the opacity to 30%, the color to white and the size to 18 pixels.

This will make our text more readable against the wooden background.

Play around with the font size to make the text easier to scan.

Step 21

After some experimentation, I decided that the whole sidebar looked much better in the darker of the three textures mentioned above. I changed the sidebar pattern and the colors of the text. Use the techniques you have already learned to do this.

Here is what my design looks like so far:

Step 22

However much you have planned, you’re bound to make changes during the design process. Upon looking at the design as a whole (rather than piecemeal), I concluded that 10 pixels between the sidebars and main content area was nowhere near enough.

Using the Shift key and Cursor key combination, nudge your content across, making the two gaps 40 pixels instead of 10. This will make the design more usable and attractive.

Step 23

I also decided to change the style of the theme’s header.

Change the color (using a color overlay in the “Blending options” window) to one selected from the circle portrait. I picked a dark green-blue.

I also removed the inner shadow and changed the drop-shadow settings, making it look like the header is sitting above the background rather than set into it.

Step 24

Moving on to the main content banner (i.e. the rectangle we created earlier that sits in the top-right corner of our main content’s image area), select the rectangle by clicking on the layer’s thumbnail preview while holding the Command key.

Go to Layer → New Fill Layer → Pattern, and select the same texture you used for the sidebar.

Right-click on the pattern fill layer, and select the “Rasterize layer” option. Using the Dodge and Burn tools, add highlights to the left and top of the shape and shadows to the right and bottom of the shape.

This will add depth and give a slight three-dimensional feel to the shape. The Burn tool will darken the image, whereas the Dodge tool will lighten it.

Select the Polygonal Lasso tool. Select a shape similar to the one below, and fill it with a dark brown, selected from your texture.

Using the Rectangular Marquee tool, select the areas in the new shape that you don’t need, and hit the Delete key to remove them. You should end up with something similar to this:

Step 25

Grab our very own exclusive icon set called “Reflection.” We will use several of these icons in our design.

Insert the icons that you need in the document by going to File → Place. I chose the camera, heart, reload, edit and clock icons, which will serve as my photo, like, reblog, notes and time icons in the theme.

Step 26

Select the camera icon and resize it. Position it on the post type bar that we just created. Apply an inner and drop shadow to it, using settings similar to those we have been using throughout this tutorial.

Add some typography to the post type bar. I used the same Reklame Script that we used in the heading and the same blending options that we used for the left sidebar headings.

Step 27

Select the other four icon layers. Right-click, and select “Rasterize layers” to turn them from smart objects to pixel objects.

Use the Rectangular Marquee tool to select all of the icon’s reflections.

Hit the Delete key on each of the icon layers to remove its reflection.

Step 28

Reselect all four icon layers. Go to Edit → Free Transform and, while holding the Shift key to keep the icons in proportion, reduce their size, and position them on the bar below the main content area that we created earlier.

Space out the icons evenly using the cursor keys.

Step 29

Right-click on the heart icon layer, and select “Blending options” from the menu. Change the color to light gray using a color overlay, and apply an inner shadow using the following settings:

Now apply a drop shadow, using these settings:

Once the settings have been applied to the heart icon layer, right-click and select “Copy layer styles.” Reselect all four icons, right-click and select “Paste layer styles.” All of the icons in this bar should now have the same effect.

Step 30

Select the Type tool, and make a small text box next to the heart icon. Type “Like this post.” Apply an inner shadow and drop shadow using settings similar to those we have been using throughout this tutorial.

Repeat the previous step for the remaining icons, using the following phrases: “Reblog this post,” “1052 notes” and “Posted on 19/03/2011.” Be sure to copy and paste the same layer style onto each type layer.

You may also want to reposition some of the icons with the new text, making sure that the gap between the text and icons is consistent; because of the different text lengths, this may have changed.

Step 31

Duplicate all of the layers in the main content area, and position them below the original. Change the title, image and post type rectangle. As mentioned, the more realistic the mock-up, the better.

Step 32

Duplicate the heading and text in the sidebar, and insert some icons. I used the excellent social media icons known as Buddycons, another set exclusive to Webdesigner Depot.

The final product

After some more touch-ups (I removed the jagged ribbon-like cut at the bottom of the sidebar), I’m all done! Here is our final design, ready to be coded or sent off to a developer to do it.

This tutorial was put together exclusively for Webdesigner Depot by Callum Chapman, a freelance user interface designer trading under the name Circlebox Creative. Callum is also working on an inspiration gallery project called Vinspires.

Would you like to see another tutorial on how to slice and code this design into a fully working Tumblr theme?

Never Ending WordPress Business Bundle – only $14!

Then, we’re going to use Adobe Photoshop to create a 1980′s style movie poster for our fictitious film titled “The Designer’s Mansion.”

This tutorial is aimed for designers with a fair understanding of Photoshop.

If you follow this tutorial, please feel free to post a link to your final product in the comments area below. We’d love to see it!

Let’s get started!

Here are 10 inspirational posters from 1980-89.

1980: The Blues Brothers

A really lovely and inspirational ’80s poster that uses a limited color scheme and simple shapes to create a poster with a twist.

1981: Chariots Of Fire

This poster is brought to life by the purposefully worn and noisy photograph, and it’s finished off with classic typography. Who said posters had to be complex?

1982: A Little Sex

Modern typography was clearly an inspiration in the ’80s! A really simple poster that works tremendously well.

1983: Scarface

This minimal hand-painted piece makes use of color but leaves plenty of white space. Other than the title, the typefaces are simple.

1984: The Terminator

This two-toned vector-style poster catches your attention. The half-tone patterns in the background draw the eye.

1985: Day of the Dead

This clever poster advertises three “Dead” films: Night of the Living Dead, Dawn of the Dead and Day of the Dead. A great poster overall, with superb colors.

1986: Under the Cherry Moon

The effect of this nearly grayscale poster is achieved with simple shapes, patterns and typography.

1987: Empire of the Sun

This poster overlays the vivd color of the sun on a black and white photograph, creating an arresting effect.

1988: The Last Temptation of Christ

A lovely illustrative poster with a modern feel. It could easily be mistaken for a new movie rather than one from 1988!

1989: The Abyss

Minimalism was just as big back in the ’80s! In this poster, two silhouettes are visible against a black background. The movie title is in blue, reinforcing the limited color scheme.

The Tutorial

Now that we’ve been inspired by the ’80s, let’s make our own design!

I will be using several resources in this tutorial, including stock vectors and textures. These files are either my own or were taken from the Internet.

Step 1

Grab a piece of paper and a pencil or pen. As with any design, sketching a concept first will be useful, to get a rough idea of the basic layout and shapes we want to use. Nothing is worse than opening a blank Photoshop document and having absolutely no idea where to start!

For the layout and shapes of my sketch I was inspired by the posters for The Blues Brothers, Under The Cherry Moon and The Last Temptation Of Christ. My typography was inspired by the one for A Little Sex.

Step 2

Open Photoshop and create a new document. Because I’m only designing for screen, I’ll use an A4 document, set to RGB at 72 DPI. If your work will be printed, you’ll need a much higher resolution-at least 300 DPI. You’ll also need to set up bleeds and margins. Set your background color to a light beige or creme, something like #EFEBE0.

Select the Rectangular Marquee tool, then hold “Shift” and make a small square selection.

Show the document rulers by going to View → Rulers. Drag out a guide from one of the rulers, and snap it to the edge of your newly selected marquee. Repeat this process on each side of the canvas.

This is where our border will be. Drag out several more guides and place them where needed. Use your eye to measure approximately where they should go according to your original sketch.

By referring to the above guides carefully, you should be able to spot our poster’s basic layout and structure.

Step 3

We’re now going to fill in the areas that we created with guides so that we can remove the distracting lines altogether. With the Rectangular Marquee tool, select an area of the design, as seen in the screenshot below.

Hold the “Shift” key and select another area, ensuring that it joins the area you have already created. This will merge your two selections into one.

Go to Layer → New Layer to create another layer. Fill in your selection with a dark blue; I used #00445D. Name your layers appropriately, otherwise they’ll be a nightmare to find later.

Fill in the other shape on your canvas using the same technique. This time I used a much lighter blue (#66D6FF). Go to View → Clear Guides to remove the guides, which we no longer need.

Step 4

Now we’re going to cut an area out of our lighter-blue shape and move it. Minor manipulations such as this will make the poster more visually interesting. Select the Elliptical Marquee tool, hold “Shift” to keep the circle in proportion, and drag out a selection. Reposition it over the top left of your shape.

Select the light-blue background, then cut and paste your shape. Use your cursor keys to nudge the shape a few pixels down and to the right of its normal position. You should end up with something like this:

Change the color of the new shape. When you pasted the shape, a new layer was automatically created. Position this new layer beneath the light-blue background layer.

Try this in one or two other areas as well.

Step 5

Now we’re going to add other shapes to jazz up our design. Select the Polygon Shape tool, and in the toolbar set it to have three sides. Drag out a selection and hit “Shift” to position it correctly.

Change the color of the triangle to white, set the blending mode to “Overlay,” and lower the opacity to around 20%. You should end up with something like this:

Repeat these steps, but this time make a circle. Experiment with different blending modes and opacity levels.

Step 6

Let’s add some thin lines to our geometric shapes. Select the Line tool, and choose white as your foreground color. Hold “Shift” to keep your line straight, dragging out a line as seen below:

Repeat this process, drawing a horizontal line rather than a vertical one.

Select your two lines in the Layers palette, then right-click and select “Rasterize Layers.” Merge the two lines by going to Layers → Merge Layers. Use the Rectangular Marquee tool to chop off any lines extending over the main shape. Change the layer’s blending mode to “Overlay,” and lower the opacity to 40%.

Repeat this process, but put a line on the light-blue background rather than the dark-blue background.

Step 7

Let’s add some texture and noise to our work. First, we’ll add noise to our design using a built-in Photoshop filter. Select your background layer, and go to Filter → Noise → Add Noise. Add one pixel of noise and click “OK.”

Repeat this step with all of the other shapes in your document apart from the one pixel lines.

Go to File → Place, and insert one of your light grunge textures. I used the sixth one. Resize and position your texture so that it fits over the two blue shapes.

While your texture layer is selected, go to Layer → Rasterize, and then Image → Adjustments → Desaturate. This turns your texture to black and white. Change your texture’s blending mode to Soft Light, and lower the opacity to 70%.

Select both of your main blue shapes and the manipulated corners by clicking on their thumbnails while holding Shift + Command. Right-click and choose “Select Inverse.” Select the texture layer, and then hit “Delete.” This removes any unwanted overlapping texture on the background or border.

To place one of your paper textures in the document’s canvas, go to File → Place. Resize your texture to cover the whole canvas. I used the “Folded Basic” texture. Place the textures layer above the main background of your image and beneath everything else. Change the blending mode to “Overlay.”

Step 8

It’s time to add typography to our poster. I’m going to use Helvetica Neue as my main typeface. We’ll start with the type at the bottom of our poster, including the names of the producers and actors. You can use fake names from this very handy list: 10,000 Random Names Database. I used Helvetica Neue Light for my typeface, set to 14 pixels. Smaller words like “and,” “Starring” and “Written by” are all set to 8 pixels.

Now add a film tagline or slogan. I’m going to use this great quote by Brian Reed: “Everything is designed, few things are designed well.” I used Helvetica Neue Regular for this line, filled with a dark blue at 18 pixels.

The last bit of typography to add is the movie title The Designer’s Mansion, positioned in our dark-blue box. I used Helvetica Neue Regular, set to 55 pixels.

Now we’re going to add drop-shadows to all of our text: a white shadow to the names at the bottom of the poster and the film slogan at the top, and a black drop-shadow to the title.

Select your slogan type layer, right-click and select “Blending Options.” Click the “Drop Shadow” tab, and use the settings in the screenshot below to create a one-pixel drop-shadow. Repeat this step using the same settings for the names.

Finally, apply a drop-shadow to the title of your film, this time with a black stroke. The text is larger, so feel free to increase some of the levels, such as the distance. See my settings below:

Step 9

Now for a bit of pen work. We’re going to create a minimalist keyboard and mouse, based on the old Macintosh keyboard and mouse, with wires running off to the right side of our poster.

First, we need to create our main keyboard shape. Select the Rounded Rectangle Shape tool, with a corner radius of 5 pixels. You can change this setting in the toolbar. Drag out your shape, and fill it with a dark blue. I used #002E39.

Using the Pencil Tool, draw a shape like the one below. Make sure to draw it on a new layer!

Duplicate the layer several times, and using the cursor keys spread them apart at an equal distance. Select all of the layers, and go to Layer → Merge Layers to put them into one layer.

Duplicate your newly merged layer several times, and using the cursor keys nudge them down the page, spreading them evenly.

Merge your new layers once again, and then select the Rectangular Marquee tool. Make a selection over the four keys selected below.

Hit “Delete,” and then use the Pencil tool to extend the top line of the last key on the left.

Merge the two layers that make up our keyboard illustration by selecting them and choosing Layer → Merge Layers. Go to Filter → Noise → Add Noise to add 3% of noise.

Grab the Rounded Rectangle Shape tool, and draw a shape like the one below:

Hold “Command” and click on the layers thumbnail in the layers panel to make a selection. On a new layer, choose Edit → Stroke. Apply a 3-pixel stroke using a color from the background of your design. Delete the original shape layer.

Using the Rectangular Marquee tool, select the overlapping stroked line.

Hit “Delete” to remove unnecessary areas of stroke. Add a 1-pixel drop-shadow to your keyboard and wire, like we did with the type earlier.

Step 10

Repeat the previous steps, but illustrate a mouse.

Step 11

Add your finishing touches, whether they’re more textures or some patterns. I used grunge brushes to erase several corners of the solid shapes.

Here is my result…

The Outcome:

Written exclusively for WDD by Callum Chapman, a designer and illustration trading as Circlebox Creative. He also runs The Inspiration Blog and Picmix Store

If you followed this tutorial, please feel free to link to your final product in the comments area below. We’d love to see it!

Never Ending WordPress Business Bundle – only $14!

This one is called “Funkies Patterns” and includes 10 amazing psychedelic/retro pattern designs that you can use in Photoshop.

The patterns were designed exclusively for WDD by Kendra Gainez (also known as Kgainez).

She’s a talented 22 year old designer from Virginia who’s committed to helping individuals foster modern design techniques and infinite amounts of creativity.

Visit her blog for more Photoshop resources and tutorials or you can follow her on Twitter

The files are free to use for both personal and commercial use. More about the licensing is included in the download file. Enjoy!

This freebie is now available through our sister site, MightyDeals.com. Click on the download button below to be redirected to download the files.

Never Ending WordPress Business Bundle – only $14!

Playing with complementary, analogous, monochromatic and other combinations opens us to exciting possibilities, and there’s no shortage of freebies.

But there’s a difference between a winning color scheme and a winning design that uses it.

Choosing colors is the first step. Adapting them to fit your design requirements is just as important.

What looks good in a swatch may not work well on a web page—but that doesn’t mean you have to return to square one. We’ll explore here new ways to look at color schemes.

Color plays an important role in how people absorb content. Whether a design is reserved or loud, friendly or sinister, warm or cool, visitors to a website are immediately influenced by the tone set by the layout, typography, imagery and, of course, the hues and values that comprise its color scheme.

Choosing colors can be the most subjective job in web design. Some colors work well together; others, not so much. Some combinations appeal to certain people. More than one set of colors can suit the same design.

Fortunately, many resources exist to help. Color palette generators such as Color Scheme Designer, Adobe Kuler, Aviary Toucan and Daily Color Scheme are among the great places to find combinations of color that effectively set a mood. But finding a palette is only the first step. Any color scheme’s potential effectiveness can be compromised by the way it is applied.

The Number of Colors in a Scheme Makes a Difference

A color scheme is a set of colors that have been chosen to work together. Schemes usually have at least four colors and can often be downloaded as simple images and sometimes as ASE files. Let’s work with the following scheme:

The color scheme above is typical of how most schemes are presented: as uniform samples of flat colors. This set could be tagged as such:

• Cheerful
• Friendly
• Contemporary
• Casual
• Primaries

But make one or two colors stand out and different adjectives might come to mind.

The image above has the same scheme that was presented in the swatch, but it’s less casual and more desert-like. This image emphasizes the warm colors. Isolated patches of blue and green draw attention by being sparser. The resulting mood could be described as:

• Sandy
• Bright
• Warm
• Khaki
• Rough

The choice of the dominant color affects how the scheme appears.

Again, here we’re using the same colors, but to a very different end. This image looks something like an abstract world map, with islands of red, green and brown. The image isn’t just cooler—it’s slightly darker, even though it comes from the same palette.

Being able to recognize good color combinations isn’t enough, because colors are rarely applied evenly to a website design. Using the colors wisely and in the right proportion is as important as choosing the right colors.

The Background Sets the Tone

The most obvious place to make an impact with color is in the background. This wide expanse can attract as much attention as the content placed over top of it.

In spite of having identical content, the design on the right is much warmer than the one on the left. But more is happening here than a simple color swap.

The content bars in the green design (i.e. the white text on red) hold their own against the wide green background. But the red background on the right washes out the puny green bars. This is because, in addition to being warmer, this particular shade of red is more saturated. In fact, the only elements with enough visual weight to counter the red background are the large headings. The small body text and faded green bars pale in comparison. That’s not necessarily bad; a powerful background gives the page substantial presence. The green design is cooler and gives the content a more casual surrounding.

Which use of color is better? It depends on your intent. Should visitors regard the content as being relaxed or bold? Do you want to play down the colored bars? Are you concerned that the background will overpower the information? Is one color more important than another in your branding? The answers to these questions will determine which color is “right.” This single color palette presents two different solutions.

Color Behind Text

The interaction of text and background is affected by the size and quantity of each. The effect of text on the page depends as much on the color of the text itself as on the background’s color—despite the general tendency to worry more about the background.

Above, light text against a dark background works better when the type is big. Borrowed from the color scheme we began with, this gold is less appropriate for body text (i.e. about 13 pixels or smaller). The solution is simple:

Above, the small text in the last two rows are in a paler shade of gold. It’s not quite white, but much more legible than the two lines in the first image. Added contrast keeps the small text from being overpowered by the background. The key is to use your color scheme as a starting point, not a fixed rule. If a background color threatens to overwhelm smaller elements, then increase the contrast, which will maintain the integrity of the scheme and keep the content legible.

Text on White

Many web pages have either white backgrounds or white content areas. But “white” doesn’t mean “blank.” Large swaths of white affect how color is perceived. For example:

The colors we began with look lighter when used for text.

• The relatively dark blue creates enough contrast to make the text legible against white.
• This particular shade of green blends into the background. If the intent is harmony, then the green works.
• Red + white = pink or peach.
• The gold looks almost like a sepia tone.

White tends to brighten everything it touches. If you want to set a light mood, then any of the combinations above might work. For more impact, you could darken the color scheme.

Playing With Color Schemes in Photoshop

If your design doesn’t call for all of the colors in your scheme to be used evenly, then you should test one or two colors for dominance. The trick is to find a scheme with colors that work both with each other and with the dominant color.

Fortunately, we have an easy process to test colors. To see how different measures of color can affect a design, follow these steps in Photoshop.

1. Find or create a color scheme. Our example has five colors, but any number above one will work.

2. Create a new image in Photoshop, 500 x 500 pixels, with a white background.

3. Create four new layers (your background layer will be the fifth). If your scheme has more or fewer than five colors, add or remove layers accordingly.

4. Fill each layer with a different color from your scheme.

5. Add a layer mask to every layer above the background layer. Your layers palette should look like this:

Above, the Photoshop layers palette, with one layer per color and with layer masks applied.

6. Run the “Thresholdizer” action on every layer mask—but not on the layers themselves.

Above, when using the “Thresholdizer” action, be sure to select the layer mask, not the actual layer. If you run the action on the layer by mistake, then be glad for the “Undo” function.

This action mostly creates a random pattern in a layer mask. From here, the designer takes charge: with the “Threshold” control. Slide the Threshold control left to reveal more of a given layer, and right to reveal less. Applying this action to each layer mask will make one color dominate the others in a random pattern.

In this case, the Threshold control determines how much of a given layer is visible. A mostly black layer mask hides the layer; mostly white reveals the layer. Running the Thresholdizer action on each layer mask will create a medley of colors like this:

This Photoshop document shows what a design might look like if the yellow was dominant. Adjusting the colors now is a snap: to give a color more (or less) contrast, just use a Photoshop command (such as Image > Adjustments > Hue Saturation).

For example, the shade of green that worked well with blue earlier doesn’t look very good now that blue is not dominant. A few experiments reveal the following:

Here we have two variations of our original color scheme. Variation #1 darkens the green slightly. It almost works. Variation #2 changes everything except the yellow to add contrast and align the hues.

What if our design had mostly blue instead of yellow? This shade of blue is dark enough to contrast with the other colors, but none of them coordinate—they’re all primaries. By choosing a new dominant, we’ve created a new problem.

Variation #1 above replaces the soft red with a darker blue and turns the shade of green into a pale mint. Variation #2 goes the other way, using more red (or burgundy) instead of less.

The merit of any of these variations is subjective. Ideally, you would apply them to the actual design before making a final decision. The key is in the process: get a palette, choose a dominant color and make the others work with it.

About the “Thresholdizer” Action

There’s no mystery to this action. You can get the same effect by applying Filter > Render > Clouds or Filter > Render > Difference Clouds to a layer mask. This action merely refines the process, organizing the Threshold command into deciles.

Please feel free to download the “Thresholdizer” action. Better yet, create your own and share it with everyone by providing a link in the comments below.

Evaluating Color Without the Action

Of course, there are ways to judge color without playing with Threshold. Start by choosing one main color, and then make the others work with it.

Here is our original color scheme, with brown as the primary color.

We’ve toned down the green and saturated the red. Harsher colors stand on their own, as the blue does (which hasn’t been adjusted).

Here, we’ve faded the green, yellow and red. These low-key “accents” blend with the brown background. Darken the blue to create contrast.

The three darker primary colors go well against the medium brown, while the pale yellow serves as an accent color.

Again, the final decision comes when the designer applies these schemes to the actual design. Until then, these are just starting points: useful tools to avoid clashes, handy references to keep designs on theme and a great way to explore combinations.

Color is merely a design element. Color use is a skill one must practice to control mood, to cultivate one’s taste and to become able to see possibilities in a few swatches.

Only one thing is certain: that green has got to go.

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

How do you test colors? What are your favorite ways to create color schemes? Share your views in the comments below.

Never Ending WordPress Business Bundle – only $14!

Over the past few weeks we’ve been adding loads of exciting new brushes, just in time for the holidays.

As usual, most of the brushes are completely free, and to make the premium sets even more worthwhile, we’ve introduced very attractive lower priced premium packs.

Today, we’re showcasing a few of our most popular Photoshop holiday brushes.

Click on any of the images below to go to the respective pages on BrushLovers.com to download the brushes.

Wishing you all Happy Holidays!

Things on Strings Lite

Things on Strings

Dotted Patterns

Candles

Holiday Tags Lite

Holiday Tags 1

Snow Fall

Holiday Tags 2

Festive Flourishes

Christmas Decoration

Christmas Trees

Festive Flakes

Linear Blossoms

Xmas Tree Lights

Glam Stars

Flurry of Snowflakes

Fairy Star Lights

To keep in touch with our latest updates, follow us @BrushLovers or join us on Facebook. We also have a newsletter which will help you keep up with all our latest releases.

Which ones were your favorites? What kind of brushes would you like to see more of?

Never Ending WordPress Business Bundle – only $14!