silver metallic tile effect

Quote
gwh wrote:I've used a silver metallic pantone colour (877) as one of the colours in a print brochure and would like to simulate this same silver colour effect for the background to my web page. I've looked everywhere and don't know how to create the effect or tile in photoshop for use on the web.

Hi, you wouldn't normally use a huge tile for a job like that or the page would take a while to load. The hexidecimal equivalent of Pantone 877 is #999999, so just using .css code, as below, for the webpage would do the job for the main part :

Code
#middle { border: 3px solid rgb(115, 109, 109);     background-color: #999999;     background-position: center top;     }

Plain colours on websites can be a little dull (*cough* just noticed as I was typing, that this site uses them, haha) so you might like to consider a simple gradient effect for this. An image 3000px x 2px repeating would do the job. Try a grad using #999999 and #E4E4E4, but remember that most people are on 1024x768 resolution, so aim for it to look right on that by putting the #999999 in the centre and bleeding left/right to the lighter shade. Any website designer will know what all this means.

Code wise, then use something like this :

Code
#middle { border: 3px solid rgb(115, 109, 109);     background-color: transparent;     background-repeat: repeat;     background-image: url("http:(link to gradient image here)");     background-position: centre top;     }

If you are doing this website yourself, then good free and Open Source website creators are Nvu or Kompozer, which are WYSIWYG (What You See Is What You Get) editors, so you can display how your page will look to the reader as you're creating it. It is not necessary for you to know HTML, since most of the basic HTML functions are available as commands from the toolbars and menus.

Hope that lot helps, or at least points you in the right direction.

Yeah, the trick with these wide grads (you have no choice but to make them that wide nowadays) is to work on a 1500 x 100 (so you can see what you're doing!) put the #999999 on the right and go easy on the grad softness level or it will overblend.

Once done, new image 3000 x 2, copy and paste your finished grad twice, then flip and join the second pasted one at the 1500px mark, then merge all. You end up with a perfectly matched grad doing it like that.

Done right, the lighter colour will give a metallic like sheen effect to the grad.