September 2, 2009
Logo ideas
A button-like design
Text with reflection and a shadow on a solid background.
August 31, 2009
Photo portrait correction in Photoshop
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.
August 29, 2009
Abstract 3D shape (Photoshop)
Here’s a fairly simple abstract 3D shape created with Photoshop.
August 28, 2009
Software box design for BriefClips
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
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.
<img src=”img/button_up.png” alt=”my button” onmousedown=”this.src=’img/button_down.png’;” onmouseup=”this.src=’img/button_up.png’;” onmouseout=”this.src=’img/button_up.png’;”/>
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.