Photoshop question...

[steviedog]

Hey, I'm following this tutorial to create a kool menu bar for a website I'm putting together but I can't seem to do the very last bit.

How To Create a Stunning Vista Inspired Menu | Psdtuts+

It's the final step where you have to put that bit of blue in so that when you hover over the link, it changes colour.

Can someone explain a little better how I'm supposed to do this? I've tried Google but just came up with templates and adverts etc.

Thanks

 

[Deleted member 30535]

I'd have expected to change the blend method for the layer on which the blurred elpise was drawn. Instead of "normal", make it "mulitply".

 

[Iccz]

What are you struggling with, getting the image right?

All it does it uses gaussian blur to make the blue fade out in a soft circular style...

You just make your ellipse on a layer, apply a gaussian blur then chop off the overlap on the sides (other buttons) to make sure that it's only that one that has the blue...

Or is it the hover that you're struggling with? - rollover image?

 

[steviedog]

What are you struggling with, getting the image right?

All it does it uses gaussian blur to make the blue fade out in a soft circular style...

You just make your ellipse on a layer, apply a gaussian blur then chop off the overlap on the sides (other buttons) to make sure that it's only that one that has the blue...

Or is it the hover that you're struggling with? - rollover image?

Yeh I can make the blue image shape as shown, but I'm not sure I understand the whole hover aspect of it. I mean what file type would I even save it as and how do I tell Photoshop it's a hover image?

Thanks

 

[Deleted member 30535]

HAve you had a read through the online help?

Adobe Photoshop CS4 * Creating rollover images

 

[rickinyorkshire]

I must admit Step 9 is a bit of a cop out, it doesn't tell you at all how to accomplish what is being shown.

 

[Deleted member 30535]

I must admit Step 9 is a bit of a cop out, it doesn't tell you at all how to accomplish what is being shown.

Agreed. Without a different blend on the elipse layer the letters "About" would have the same blue cast. Either that or the elipse must sit between text layer and and black background. But as the example shows the blue elipse in front of the text, without further instruction the final result cannot be achieved; irrespective of subsequent saving of layers etc for rollover images.

 

[steviedog]

HAve you had a read through the online help?

Adobe Photoshop CS4 * Creating rollover images

Yeh I'm having trouble finding a tutorial which tells me how to turn the blue shape layer in to a hover image?

 

[TheTrancelator]

Agreed. Without a different blend on the elipse layer the letters "About" would have the same blue cast. Either that or the elipse must sit between text layer and and black background. But as the example shows the blue elipse in front of the text, without further instruction the final result cannot be achieved; irrespective of subsequent saving of layers etc for rollover images.

It would go under the text layer, as it has been blurred it will blend in with the bar itself without any need to change the layer style. It is strange he shows it above the text layer when it clearly isnt meant to.

The tutorial is not about rollovers though, that part is afterall just optional and something the author probaly added to "sweeten" the tutorial as you get paid $200 for writing for the tuts network so every little helps eh?

 

[TheTrancelator]

Yeh I'm having trouble finding a tutorial which tells me how to turn the blue shape layer in to a hover image?

Do you mean coding it or saving it?

 

[steviedog]

Do you mean coding it or saving it?

Both really.

I've created the layer with the blue shape and put it in the correct spot. I've no idea where to go from here...

 

[Deleted member 30535]

Photoshop may be used to create and optimize images for rollover use, but its using something like Dreamweaver, or FrontPage or any number of web page design packages, that control how images are displayed when a mouse is hovered over an area of the web page.

Without knowing how your nav bars are made up in HTML terms, it's difficult to advise on the best way to achieve a rollover. In any event it will be done outside of Photoshop.

 

[TheTrancelator]

Photoshop may be used to create and optimize images for rollover use, but its using something like Dreamweaver, or FrontPage or any number of web page design packages, that control how images are displayed when a mouse is hovered over an area of the web page.

Without knowing how your nav bars are made up in HTML terms, it's difficult to advise on the best way to achieve a rollover. In any event it will be done outside of Photoshop.

It can be done within photoshop using SiteGrinder - Take Ownership of Your Website

It can do rollovers as shown here how do i make a graphical button with a rollover version? with no problems

Codes very clean and up to web standards, would be perfect for OP if he cannot code and would remove the worry of coding it

 

[steviedog]

It can be done within photoshop using SiteGrinder - Take Ownership of Your Website

It can do rollovers as shown here how do i make a graphical button with a rollover version? with no problems

Codes very clean and up to web standards, would be perfect for OP if he cannot code and would remove the worry of coding it

Thanks very much for taking the time to find that information, but I can't afford to splash out on more software just yet.

 

[Deleted member 30535]

This is how Dreamweaver inserts a Rollover Object in HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('/Images/image2.jpg')">

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','/Images/image1.jpg',1)"><img src="/Images/image2.jpg" name="Image1" border="0" id="Image1" /></a>
</body>
</html>

 

[TheTrancelator]

Thanks very much for taking the time to find that information, but I can't afford to splash out on more software just yet.

You can download it for free ( or you could when i got it ) from Download SiteGrinder the only limitations is that it wont do photo gallerys and the more advanced code IIRC

Manually, you basically need each button saved seperately so you slice them (photoshops hotkey for this is K and you then draw around each web element you want to save and then to go Save for Web & Devices and select PNG-24 and transparency)

Easy method would be for you to slice each button (you can draw a rectangle over all of them and it will save them in one go) so after slicing them you could merge the layers (Ctrl+shift+e) then save & then unmerge only this time have the hover state showing on each one and save again.

As for coding its pretty simple to implement into your layout, there are loads of different methods you can do it, javascript, html, css etc here is a basic HTML one HTML Rollover Images: Several On One Page - HTML Code Tutorial

Sorry if this sounds complicated or aload of nonsense! i've gotta pop out now so dont have the time to write a more indepth explanation at the moment

 

[steviedog]

You can download it for free ( or you could when i got it ) from Download SiteGrinder the only limitations is that it wont do photo gallerys and the more advanced code IIRC

Manually, you basically need each button saved seperately so you slice them (photoshops hotkey for this is K and you then draw around each web element you want to save and then to go Save for Web & Devices and select PNG-24 and transparency)

Easy method would be for you to slice each button (you can draw a rectangle over all of them and it will save them in one go) so after slicing them you could merge the layers (Ctrl+shift+e) then save & then unmerge only this time have the hover state showing on each one and save again.

As for coding its pretty simple to implement into your layout, there are loads of different methods you can do it, javascript, html, css etc here is a basic HTML one HTML Rollover Images: Several On One Page - HTML Code Tutorial

Sorry if this sounds complicated or aload of nonsense! i've gotta pop out now so dont have the time to write a more indepth explanation at the moment

Yeh it outputs any graphics with a Site Grinder water mark. Worked though.

Thanks