Twistereli » Design

Too many of us forget to see we’re not the only persons that know something about our work. It’s easy to start thinking in the way of being the only person that is right, often after a few experiences that made you think something.
Just don’t get stuck in that view, the clients can come up with great ideas.

Let’s take this example of the talking dog I mentioned earlier. You might just want to *facepalm* and hang up the phone. But think about it, the way he said it isn’t really interesting for a web design, but he is a website user too. This means there is at least 1 out of the 6 billion people on earth that would like this website.
The client tries to express his own view and feeling around that subject, it is YOUR task as a designer to reduce that talking dog idea to a component that fits.

Just look at MailChimp, their site is mentioned in numerous lists of great designs. mascots are all over the place now, so was this idea of the client actually so bad? I don’t think so.

2. A client often Knows his Audience Better than You

If this client with his talking dog idea has a fashion business, you’re an outsider.
This brings us back to point 1, you’re the external that can think outside the box, but you’re not always an user of their service or product.

The client knows his own clients like clothes… and Chihuahuas.
Do you find it disturbing to find an advertisement on a Photoshop blog about PC or Mac hardware?

Got more reasons? Comment them and they’ll be added to the list!

No related posts.

Avoid using Plain Colors and use Gradients Instead

Eli — Wed, 14 Apr 2010 19:33:57 +0000

Be Subtle

Right before we even start to talk about why gradients are often a better choice it should be clear we’re talking about subtle ones. It’s extremely easy to recognize a newbie’s work by looking at their gradients. They often use extreme color combinations like red and green, they can work together maybe, but a gradient will often make it look filthy and brown at the center.

Red & Green = Poop

Also keep in mind that black and white are the highest in contrast, try to avoid gradients that go from pitch-black to pure white.
Keep that in mind, the middle is a mixture of both colors, you’re actually working with 3 colors, not 2!

A Comparison

Black to White Gradient

Look at this default gradient of Photoshop. It’s a small space with a color going to the extreme opposite. Do you ever see that in real life? Maybe on chrome objects or other weird materials, but just admit it, it doesn’t look very nice…

Soft Black to Soft Grey Gradient

Now look at this gradient, I changed the black to a more very dark grey and the white is very light grey now.
This feels so much more like a material can touch, which is good.

Real Life Gradients

In real life we almost never see plain colors. Gradients are like the light on objects in real life.
We’re used to these kind of colors instead of a plain color and if we’re used to something it brings rest.
That’s why gradients don’t work so well with vibrant colors like lime or cyan. And those plain colors aren’t meant to bring rest at all.

Please note there are always people who do like those (in my opinion) weird color combinations, but you often find these back on sites about the worst web layouts ever…

Examples of Good Gradient Usage

Quiktab Theme (WordPress)

Note the only plain colors are the parts that need attention, the content areas.

Black Aperture Theme (WordPress)

Even the “logo” isn’t plain text. Again the important things that need to pop out have plain colors.

Examples of Good Plain Color Usage

TealGray Retro Theme (WordPress)

Without the footer its gradient tabs the page would look more rigid, straight, maybe professional but also colder.

UniSphere Theme (WordPress)

Because the colors are plain the design also gets calm in some way because everything is clear. Compare it with a sunny environment compared to a shady environment. Still the big blue area at the top needed a pattern to make it softer and more comfortable to your eyes.

What do You Think?

Did you already know this? Did I bring you a good reminder? Or maybe you think this post stinks because I’m totally wrong. Just leave a comment

How To: Add Shine on Edges in Photoshop

Eli — Sat, 27 Feb 2010 21:06:42 +0000

[ad#Google Adsense-1]

1 Using the 1px Line

HOW:

Copy this image in Photoshop or use your own object and create a new layer on top.
Draw a 1px white line on top of the edge with the following settings.

Pick a big and soft eraser and erase the outer parts just a little bit to make it look less hard.
Lower the opacity to reduce the lighting on the edge.

RESULT:

PROS:

Easy
Fastest method
Good for big objects and designs

CONS:

Sometimes it doesn’t look soft enough
You’re restricted to a straight line, round edges for circle shaped objects are hard to create

PRACTICES:

http://icondock.com/

http://m1k3.net/

http://www.atebits.com/

http://timvandamme.com/

2 Using the Lens Flare effect

HOW:

Create a new layer
Fill it with Black with either the Paint Bucket or by pressing alt+shift.
Go to the Effects menu > Render > Lens Flare.

Use the default options or use my slight change on the image below.

Decrease the vertical size to about a 1pixel line.
Change the horizontal size so it fits better (optional).
Optionally erase a bit of the sides to get it softer again.
Change the Blend Mode (try them out, it depends on the object’s colors).

If you want to apply this effect on round objects, use the same method.
But make the width smaller and the height bigger.

RESULT:

PROS:

It will give a glossier effect
It’s great for glassy, transparent objects
It includes more colors than just a white line
You don’t need to make the lens flare rounded to place it on round objects
It gives the effect of sun reflecting strongly on shiny objects (natural effect)

CONS:

It’s more time consuming
The multiple colors can look weird on objects with a other colors
It makes the edge look wider.

PRACTICES:

http://Axertion.deviantart.com/art/Team-CoolerMaster-3D-Logo-126475299

http://axertion.deviantart.com/art/RTdi-3D-Logo-137231129

3 Using the Pen Tool

HOW:

Create a new layer.
Pick the Pen Tool and draw the line you want with mostly just 2 anchor points.

http://twistereli.com/wp-content/uploads/2010/02/Afbeelding-20.png
Select the Brush Tool and pick your desired size and softness or use my settings and make sure your Foreground Color is White.
Pick the Pen Tool again and right click on the Path (the white line).
Click Stroke Path
Check Simulate Pressure and pick the Brush out of the menu.

Apply and lower the opacity of use blending modes.

It might happen that the line comes too short, keep this in mind so you draw the line longer on future works if needed.

RESULT:

PROS:

You’re totally in charge of the shape
Not so time consuming when you know the technique well enough
You can easly modify errors

CONS:

The line often comes too short
You can’t see the actual result when drawing the line
It sometimes doesn’t look realistic

PRACTICES:

Spotting the difference between a 1px line and the Pen Tool usage is hard

Conclusion:

The 1 px line is the easiest, fastest method with pretty good results.

What do YOU think? Do you have OTHER techniques?