Verecom Web Design Blog

This version of dealing with rounded corner box is consist of 4 absolute positioned div, each div has its own image to be used in CSS Sprite control. We will do it as following:

What makes this techique so cool?

There is no constraint on the width and height when applying rounded-bordered elements. This technique as we have mentioned earlier, cooperates with CSS Sprites. If you have no idea of what CSS Sprites is and how it works, please firstly read this article.

First step: Create our Sprite
1. select a editor for editing rounded-corner image (in this case I chose Firework).

2. cut out the rounded corner to a temporary location, which we will use it later.

3. create a new file, put all the rounded corners to this new file, copy it three times, and turn the other three copies into other three corners.

4. put them together and form one picture, and use 1px red line to divide them.

5. export the edited picture, sprite is now completed.

Edited By Dan Li

Guide Lines

Before

How can we draw readers’ eyes to her pink lips only? If we just use cropping to accomplish the focus, it will be a waste for such an attractive picture.

After

Simply use two curves to speak to the readers, ‘look here’. The two subtle thin lines did not destroy the original beauty of the picture, instead it enhances the desire for such effect. Please note that to create contrast on text, applying bold is enough.

Edited By Dan Li

Outline

Before

This is a realistic presentation of a jeep with loading equipment on the top. As you can see, the jeep attracts all our attention, so if you want to emphasize only the feature on the top, this is not an ideal way.

After

The above picture reduces the detail of the jeep to only outline, which still can be recognized, but all our attentions now is drawn to the loading equipment on the top. The other two are simpler versions.

Edited By Dan Li

Colour Echo

Before

Five kids dress in five different colour T-shirt. By filling the bottom half with Magenta, our eyes will naturally be guided to Kimberly Chan, the little girl whose T-shirt echoes the same colour. If you want a greater contrast, you can try to grayscale the rest of the kids.

After

Five different colour set forms a beautiful series. Please take note that the curve at the bottom echoes the curve that the kids form.

Edited By Dan Li

Standing Out

Before

6 people stand together like a team.

Someone stands out and become the focus all of a sudden, but this technique needs to match the reality, which means her feet need to place lower than the others and her head need to be above the others.

In Photoshop:

1) enlarge the size of the canvas
2) select the figure you want to emphasize
3) enlarge the selected figure

Edited By Dan Li

Spotlight effect

Now comes to part 2 of this focus design series, in this article I will share a simple method, but very effective in make someone stands out from a large crowd of people.

Edited By Dan Li

How to have an ordinary photo become more powerful? How to consciously guide the reader toward an intended region? How to be more effective in communicating with your audience? In the coming series, I will be illustrating 8 simple design techniques to complete a task easily. By creating a focus, your picture will become alive.

1. Blurring the background

Before

The lady at the front seems very tidy and attractive, but her colleagues at the back aren’t that impressive, and also make the photo become ordinary.

After

After blurring the background figures, the lady stands out from her colleagues much more than before, which strengths the depth of the photo and closer to what our eyes actually experience.