ten little things
that make my layouts better
like i always say, if it ain't broke, don't fix it. there's some elements you'll find in my layouts that i do all the time, and i live by them. they're just little things that spruce up my layouts, but they've worked time and time again.
#1: the paper doll
one of my favorite things to do in a layout is called the "paper doll" effect, which is my cop-out for having to extract an image carefully. all you do is use your polygon tool and trace around the image a little haphazardly, no need to be careful, and place it on your graphic:
example 1:
example 2:
example 3:
all these layouts use the paper doll effect. it's a good idea if you're too lazy to go around and extract an image or find plain backgrounds =].
#2: big man, little man
in conjunction with the paper doll effect, i usually repeat the images to have a large and small version right next to each other. it usually looks really good:
example 1:
lower right hand corner:
example 2:
far left
in the second example, you can see that i created a contrast by making the smaller version black and white- just for a change of scenery.
#3: big black box
even though it may look like an eyesore at first, don't be afraid of slapping on a giant black box onto your layout. i do all the time and fill it with teensy tiny repeated images surrounded by text:
example 1:
middle
example 2:
upper right
#4: The big and sign
i have a thing for the & sign. a giant & sign actually looks good sometimes. i use it more often on icons than i do layouts, but it makes a good interrupter between two images or a nice cover up for a section you just plain don't like:
example 1:
middle right side
example 2:
middle left side, lower right side
putting text with the sign makes it look even better =]
#5: lyrics box
another great addition to a layout is tiny tiny lyrics in a box, usually accompanied by some fake track number to go with it. it makes the image look collagey, as if you cut out the song from the CD case and stuck it onto your layout.
example 1:
example 2:
#6: multicolor text
i love text. i love having text in my layouts, and i want my bodies to have the same kind of effects as the graphic. because, let's face it, how
good is a layout if the CSS that goes with it is terrible? i like to use photoshop and clever CSS to change the way my text looks for some spice.
example 1:
example 1 is CSS based. the coding has to do with differentiating and defining a regular class and a different style for bolds, italics, underlines, etc
(also known as text decorations).
for example, I will show you a sample styling of the h1 class:
We're not done just yet. Now we're going to decorate a text decoration for the h1 class. I usually use b or bold:
This CSS coding defines that the h1 class is black, but if h1 is bold, it appears white. to reflect this in HTML, you do the following:
|
<![CDATA[<h1>your <b>header</b> here</h1>]]>
|
This header will appear with the words "your" and "here" in black, and the bolded word "header" will appear white.
example 2:
example 2 is photoshop based. the steps are pretty simple- in this example I started off with a black text layer, and
then copied the same layer in pink. i then rasterized the layer (you can do this by hitting your text layer with the eraser and
clicking okay when they ask you to rasterize), and cut off the upper half to show the black text underneath.
#7: Free floating divs
It's a misconception that all divs need a separate background color from the body like this:
There is nothing wrong with free floating divs. Nowadays, I see more free floating divs than bordered divs and it's easier on the eyes and on the
designer that has to usually create them:
It saves you the trouble of having to find an extra color and creating gradients in your image that usually "box" your designs in. Free floating divs
allow for the eye to travel more instead of being so restricted in a confined space.
#8: Repeated images
Ahhh...the very thing that I am most famous for. Some people will say it's annoying, but there are ways to overdo it. If you use your repeated images
sparingly, the layout will have an amazing effect.
example 1:
In this example, the three images seen on the layout are the exact same ones. However, there is a subtle hue change from image to image. The first
image is very very blue, the next has added greens, and the last is split with more green hues than blues.
example 2:
in this design, you are viewing two or three of the same image, just cropped in strategic places and resized several times, providing interesting angles and views of the same picture for
interest.
#9: low contrast
there's nothing wrong with low contrasted graphics. in fact, having hyper contrasted images can be tacky and hard on the eyes. try lowering the contrast on images and text- with text, you'll want to keep it bright enough to read but not so bright that it doesn't fit with your layout any more:
example 1:
example 2:
#10 burned/lit colors
i really love working with black and white, but sometimes it's not enough. black and white accented with a color sometimes makes the best graphics you'll see. having just black and white on a graphic takes away from your freedom to create colorful links and text.
a little trick i like to do with black and white graphics is to hit it with a layer of gradient and choose hard light and/or lighten or darken to accent a graphic with the gradiented color:
example 1
In this design, I added a red gradient layer to the otherwise black and white graphic, for a "burned" effect.
example 2
With this one, I added a layer of purple and changed my blend mode to hard light to accent the darker sections of the graphic.
And remember to play around with opacities, settings, and blend modes to create your own flavor!
|