August 7th, 2007
In this tutorial you are going to learn how to take a photo like this . . .
. . . look worn and aged like this . . .
1. Import this image into the Photoshop canvas.
2. Choose Image > Adjustments > Desaturate
3. Choose Image > Adjustments > Levels and drag the sliders to these positions:
4. This creates a greater contrast in the image by adding more pure black and white to it. It should look like this:
5. Choose Select > Color Range and click on any pure white area on the canvas and set the fuzziness to 50. Click Ok. This selects all the white on the canvas.
6. Double click the Background layer and click Ok. This unlocks the layer.
7. Press Delete. This removes all the white from the image leaving transparent areas:
8. Load this image into Photoshop and drag it onto the original canvas and place it in the bottom-right corner. Place it as the bottom layer:
9. Select the top layer and choose Edit > Transform > Scale; drag the top-left control point so that the top layer is roughly the same size as the bottom layer (it can overlap a little but it must not be smaller that the bottom image).
10. Hold down Control and click the bottom layer to select its transparency then choose Image > Crop.
11. The colour image needs to be made to look old too; select the bottom layer and choose Image > Adjustments > Desaturate:
12. Choose Image > Adjustments > Brightness/Contrast and set Contrast to +15:
13. Choose Filter > Noise > Add Noise and set Amount to 5%, Distribution to Guassian and check Monochromatic:
14. Set the Opacity of the top layer to 75% and set the Blending Mode to Hard Light:
Posted in Photoshop, Web Design | No Comments »
July 11th, 2007
This bit of code will let you change the opacity of an image using JavaScript; unlike most scripts it works on Safari and Opera as well as IE and Firefox. Simple send the id of the image and a value between 0 and 100 to change the opacity (0 being invisible and 100 fully visible).
function changeopacity( imageobject, opacity ) {
var object = imageobject.style;
object.opacity = ( opacity / 100 );
object.MozOpacity = ( opacity / 100 );
object.KhtmlOpacity = ( opacity / 100 );
object.filter = “alpha(opacity=” + opacity + “)”;
}
Posted in JavaScript, Web Development | 1 Comment »
June 13th, 2007
Note: This tutorial is written for Photoshop CS on a Windows XP platform and assumes you have a basic knowledge of Photoshop. However, this technique will work on most versions of Photoshop or similar graphics package.
You are going create a hyperspace effect like this:
1. Begin by copying the image below, obtained from a stock photography site, into Photoshop:
2. Choose Filter > Blur > Radial Blur – set the Amount to 33, the Blur Method to Zoom and the Quality to Best:
3. Choose Filter > Sharpen > Sharpen. Hold down Ctrl and press F twice (this reapplies the Sharpen filter twice). your image will look like this:
4. Choose Image > Image Size; ensure Constrain Proportions is checked and set the width of the image to 600px. The height will adjust automatically.
5. Now we will change the colour of the stars. Choose Image > Adjustments > Hue/Saturation and set the Hue to -100. The shifts the colours of the image so it will look like this:
6. Right-click the Background layer and choose Duplicate Layer and click Ok.
7. On the new layer choose Filter > Blur > Guassian Blur and set the radius to 3.0 pixels:
8. Set the blending mode of the new layer to Screen. You’re finished:
Posted in Photoshop, Web Design | No Comments »
May 30th, 2007
On my various websites I get hundreds of Spam messages every day; it gets very annoying! I’ve tried several methods and in this post I will outline three. Soemtimes they works, sometimes they don’t. Some are more effective than others.
1. Captchas
Captchas are a random strings of text and numbers that a user must enter to be classed as non-spam. The letters and numbers are displayed as an image and usually over a pattern and are distorted to prevent bots from easily reading them.
Pros: Skewed text against noisy background can be hard for Spam bots to read
Cons: Can be difficult for humans to read, spam bots are getting better at recognising them
2. Hidden text fields
Create a text field in your form and hide it via your CSS (using display: none). When processing the form if the field has been filled out it is Spam.
Pros: Filters out around 75% of spam bots
Cons: Some bots check your CSS, those with CSS disabled still see the text field
3. Ask a question
Ask a question that doesn’t have the answer in the question. A popular one could be a maths question (e.g. what is 1 + 5). Even more effective would be What colour is the sky?
Pros: Filters out 99% of spam
Cons: Some foriegn users or those who struggle with spelling may get the answer wrong
Posted in Web Development | No Comments »
May 29th, 2007
There are lots of fixes and hacks out there to stop the famous IE three pixel padding bug; what happens is when you have a floated div IE adds extra padding to the div next to it. It’s very annoying when you’re trying to get a layout spot on.
I’ve tried many fixes ranging from setting the float div to display: inline; (which didn’t work) and trying to browser sniff to serving a different style sheet to IE browser (which I resent doing).
I found this trick that worked perfectly however. If you use a child selector you can serve a style that IE will use and another all the others will use. Let say you have divs, left and right, and the right div should have a 500px left margin; your CSS might look like this:
div#right {
margin-left: 497px;
width: 475px;
}
div#container > div#right {
margin-left: 500px;
}
Here the width is set at 3 pixels less then overriden to the correct value via the child selector. It all renders correctly though as IE ignores the child selector.
Posted in CSS, Web Design | No Comments »
