• New Patreon Tier and Early Access Content available. If you would like to support AVForums, we now have a new Patreon Tier which gives you access to selected news, reviews and articles before they are available to the public. Read more.

Photoshop question...

steviedog

Banned
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
 
D

Deleted member 30535

Guest
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

Distinguished Member
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

Banned
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
 

rickinyorkshire

Distinguished Member
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. :thumbsdow
 
D

Deleted member 30535

Guest
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. :thumbsdow

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.
 
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? :D
 
D

Deleted member 30535

Guest
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.
 
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 :thumbsup:
 

steviedog

Banned
D

Deleted member 30535

Guest
This is how Dreamweaver inserts a Rollover Object in HTML.

Code:
<!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>
 
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 :smashin:
 

steviedog

Banned
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 :smashin:

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

Thanks
 

The latest video from AVForums

Is 8K TV dead? Philips OLED+907, Pioneer LX505 AVR plus B&W 700 S3 Reviews & Visit + AV/HiFi News
Subscribe to our YouTube channel

Full fat HDMI teeshirts

Support AVForums with Patreon

Top Bottom