Simplicity Is Key

Less is more in 2010 as clean illustrations, minimalism, and lots of white space set the new standard. But rather than an influx of black and white, this new minimalism provides a backdrop for bold typography, powerful splashes of color and engaging modal windows. While this style of simplicity maintains the clean look and lines you expect, today’s version features a more inviting and direct tone that gets to the point without undue distractions.

The Bigger The Better

Think big when it comes to headers, type, logos, images, calls to action, and absolutely everything. Huge headers can serve as the splash page and larger-than-life logos are that much more memorable. Full-size images make a greater impression and oversized calls to action speak for themselves. In 2010, you’re wise to go big or go home.

Typography As Design

With the focus on function, many web designers overlook the importance of form, especially new and different forms of fonts. Yet that’s exactly what will make a major impact in 2010 and beyond. Fonts are design elements that are meant to be mixed and molded to serve your particular purposes. Playing with fonts engages the reader by capturing their interest organically without an overwhelming display of photos or images. Type adds a deeper dimension to web design and gives layers of meaning to any message.

Change Your Perspective

Think outside the desktop and go for new and different designs when setting up and styling your sites. In 2010, creativity is key as designers play with perspectives and trade the standard format for everything from artistic to realistic designs. Expect to see an increase in magazine layouts, retro elements, collage styles and one-page layouts as designers seek to distinguish their work for maximum appeal and effect.

Whether you work at a full-service design agency or you’re a solo artist, put these trends to work for you to keep your design skills in tune with today and in demand for tomorrow.;)

No related posts.

Why is banner design such a closely guarded secret? I don’t know. So today I’m going to let the secret out and show you how I made the Deadly Clever Designs banner in the bottom, in hopes of getting some of you other newbies started. Let’s begin with this banner design tutorial !

Step One: Create Your Banner Layout

First things first, create a new photoshop document that is 468 by 60 px in size. Once that’s done, select a color scheme you enjoy (ideally, three colors) and fill in the document with your background color. If you need help with this, check out my post about color functions. The colors I’m using are lime green, white, and absolute black.

Step Two: Add Your Logo or Attractive Graphic

The next step in designing a banner is to add your logo. Create a new layer and paste your logo into it. Your logo should be sized to have a height of 55px to fit accordingly. If your logo doesn’t scale properly, perhaps you should consider the things you should be getting from your logo designer. The color of your logo should be the other two prominent colors in your scheme. (All three are prominent, because this is an active graphic.)

After you paste your logo into your banner file, you may notice that it’s aligned in the center. Simply use the Move Tool (v) to adjust it’s position. To be more precise, we’re going to use rulers and guides to layout the design of our banner. If you don’t have rulers enabled, use ctrl+R or View–>Rulers to enable them.

Now select your background layer (the layer we want to use for the guide reference.) Then use the Move Tool and create a new horizontal guide by clicking and dragging on the top ruler. The guide will automatically stop in the middle of the document. Next, create a new vertical guide by clicking and dragging on the left ruler and position it about 10 to 20 pixels into your design.

Now you can properly align your logo! I added a few more guides to help out with aligning text later on.

Step Three: Adding Your Website Name

If your website name isn’t in your logo, or needs to be represented more clearly, you should add it to the banner. In this tutorial, we’re going to put it next to the logo, in a font that’s about half the height of the graphic used. I position mine slightly left of the middle, using the font Nevis. My text is in my second most prominent color: white.

Step Four: Adding the Tagline

A banner with just your site name may not attract all of the clients you’re looking for. They know that my website is named “Deadly Clever Designs,” but what is it I’m designing? So let’s add a tagline! Using the rounded rectangle tool, create a rounded rectangle in your third prominent color (mine is green) that extends off the right and bottom edges, such as in the picture below:

Now let’s add some text on top. Using the text tool, add your tagline in a new layer above the rounded rectangle. I’m going to use white to contrast with the green, such as in the logo. To make it more readable, I’ve set the text style to “crisp.” (You may have to zoom to position the text correctly.)

Step Five: Exporting your Design

Once you’ve completed your tagline, it’s time to export your design to be used! In most cases, you’ll want to export your banner as a png file. To do this with photoshop, use Ctrl+Alt+Shift+S or File–>Save for Web. Adobe ImageReady should pop up to help you with formatting. Simply select PNG-24 from the dropdown menu.

And there you have it! Your attractive banner is now ready to start bringing in some clients. Obviously, this is a fairly simple tutorial and doesn’t cover animated banners or any kind of effects, but it should help the absolute beginner banner designer into the right direction. Here’s the final result:

What are your tips for banner design? What effects do you use to make your banners more attractive? Share your tips, resources, and opinions below!

No related posts.

This post was inspired by Yan of ThouShallBlog, who really wanted to know how I put the text over images such as in my trumpet playing post.

So Your Photos Need 1001 Words?

A picture is worth 1000 words, but sometimes you want to emphasize the message that the picture from flickr or from your own camera create. The easiest way to do this is to add a tagline. (not to be confused by a watermark, which is used to prevent photo theft and to claim ownership.) In this tutorial, I’ll be showing you how to add a tagline in three simple steps.

1) Get a Photograph

First, you’ll want a photograph. You should always use photos licensed under creative commons if they aren’t yours. For the purpose of this demonstration, I went to flickr (the link takes you to a CC search) and picked up an image of a very cute puppy. Then I opened it in photoshop. (Note: this tutorial works for any image editor that has an “opacity” function.)

2) Add the Bar

(optional: before doing this, you can make the photo B&W by going to image –> mode –> greyscale. Sometimes it makes the tagline look cooler.)

The next step is to create a new layer, and select a rectangle somewhere in your photograph. Preferably in the middle, without obstructing the view of the picture too much. Now fill in the layer with your desired color. If you’re not sure what color the layer should be, then just go for black.

Afterward, set the opacity to 15% (this may change based on photograph conditions) by using the slider in the “layers” toolbox.

3) Add Your Text

The final part is to add your text to the image. Simply click on the text tool in the toolbox and click over your newly created bar. And there you have it! A tagline. If you want to further, you can clip the bar off just after the text ends, to create a sort of flag. And you can even add lighting effects.

Was this tutorial helpful? What other photo effects do you want on your blog? Ask your questions below.

No related posts.