Jump to content

Creating small button images


murfitUK

Recommended Posts

I've got a couple of websites that use background images when hovering over navigation links. I've only got three of them ("acquired" from other people's sites!) so the sites all look the same.Here's what I mean:nav_base2.jpgnav_base.jpgGot to admit I'm not experienced with images and graphics so am asking how I might be able to produce these sorts of graphics. Note the colour gradient changes from left to right.Is there some sort of website that might allow me to customise my own images to download (for free of course). I've looked at a couple which allow creation of buttons but not graphics like this.I've got MS Paint but can't see anyway to do it and don't really want to install any fancy graphics software for such a small task.Any suggestions?Thanks.

Link to comment
Share on other sites

Here's a way to do it in PHP, which I got from the reference for imagefilledrectangle:

<?php// The image must be in truecolor mode!!   function gradient_region($img, $x, $y, $width, $height,$src_color, $dest_color=0){	   $src_alpha = ($src_color) >> 24;	   $src_red = ($src_color & 0xFF0000) >> 16;	   $src_green = ($src_color & 0x00FF00) >> 8;	   $src_blue = ($src_color & 0x0000FF);	   	   $dest_alpha = ($dest_color) >> 24;	   $dest_red = ($dest_color & 0xFF0000) >> 16;	   $dest_green = ($dest_color & 0x00FF00) >> 8;	   $dest_blue = ($dest_color & 0x0000FF);		   		   	   $inc_alpha = ($dest_alpha - $src_alpha) / $width;	   $inc_red = ($dest_red - $src_red)/$width;	   $inc_green = ($dest_green - $src_green)/$width;	   $inc_blue = ($dest_blue - $src_blue)/$width;	   	   // If you need more performance, the step can be increased	   for ($i=0;$i<$width;$i++){		   $src_alpha += $inc_alpha;		   $src_blue += $inc_blue;		   $src_green += $inc_green;		   $src_red += $inc_red;		   imagefilledrectangle($img,			   $x+$i,$y,					   $x+$i,$y+$height,			   imagecolorallocatealpha($img,			   $src_red,$src_green,$src_blue,$src_alpha));	   }   }?>

You could also download The Gimp, it's a free image editor.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...