Dmitri's blog

Billiard balls

DdotM — Wed, 02 Sep 2009 15:19:31 +0000

Logo ideas

DdotM — Wed, 02 Sep 2009 15:03:46 +0000

A button-like design

Text with reflection and a shadow on a solid background.

Photo portrait correction in Photoshop

DdotM — Mon, 31 Aug 2009 19:02:04 +0000

Before Photoshop correction – a fairly noisy picture with bad lighting, an ugly shadow, two bottles and a picture on the wall that are intrusive. Also, the background color is too close to the subject’s skin tone which prevents her from standing out.

After Photoshop work. Unwanted objects and the shadow removed, the background color changed, RGB channels corrected to remove much of the noise, poor lighting effects cleaned up. Added a frame to bring the subject into better focus.

A lamp (Photoshop)

DdotM — Sun, 30 Aug 2009 01:32:30 +0000

A modern lamp design, created with Photoshop CS4.

Abstract 3D shape (Photoshop)

DdotM — Sat, 29 Aug 2009 16:35:56 +0000

Here’s a fairly simple abstract 3D shape created with Photoshop.

Software box design for BriefClips

DdotM — Fri, 28 Aug 2009 23:14:28 +0000

A software box with reflection on a reflective surface. Work is done in Photoshop CS4.

How to create a button up and down effect in Photoshop

DdotM — Fri, 28 Aug 2009 16:53:13 +0000

Create a button image using any technique you like. To be able to indicate visually that the button is pressed down, it has to be “raised” first.

Here are the Bevel and Emboss layer style settings I used in Photoshop to create the raised button effect for my download button.

UP button layer style

Most settings here are a matter of taste, but the important one for this effect is Direction: Up. Once you are visually pleased with the raised version of the button you’ve created, save the image in the Web format of you choosing (I personally favor png). This will be you Up button.

Now go back into the layer styles and change the Direction setting to Down.

DOWN Button layer style

As you can see, the resulting button looks as though it has been pressed down. Same as with the first image, save it in your favorite Web format. You now have both the Up and Down button images.

Now we will use simple JavaScript to handle the toggling as the button is clicked and released.

The image source (src) is initially set to the Up version of the button. onmousedown event handler switched the src to the Down version, that’s simple enough. To get your button looking Up again takes two event handlers – onmouseup and onmouseout. The reason two are required is because a person can click the button (causing it to switch to Down) and then drag the cursor off the button instead of releasing the mouse while over the button (let’s say he changed his mind about clicking the button). Unless onmouseout sets the button to Up, the button will remain looking down, which is wrong.