?
Solved

Help creating links in photoshop

Posted on 2006-11-21
4
Medium Priority
?
169 Views
Last Modified: 2010-04-03
Hi,  Have seen a website I like

http://veerle.duoh.com/

and want to know how the link were created with the header image in the background.

Was this done in photoshop and image ready??   You know the links where it says home....about ...archive...contact...links...

Do you know of any tutorials that can help me achieve this.....cheers guys
0
Comment
Question by:dthomas31uk
  • 3
4 Comments
 
LVL 30

Accepted Solution

by:
Mark Steggles earned 1200 total points
ID: 17990293
Greetings dthomas31uk,

You will need to use css to do this.

First, make a div and give it an id or a class. Inside the div, have a ul list. Make the images in your favourite graphics program.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Steggs</title>
<style type="text/css">
* {padding:0;margin:0;}
#header {
height:200px;
border:1px solid #000;
position:relative;
}
ul#nav {
position:absolute;
bottom:0;
}
ul#nav li {
display:inline;
}
ul#nav li a:link,
ul#nav li a:visited
{background:#ff0000 url(images/normalmenu.gif) no-repeat top left;
}
ul#nav li a:hover
{background:#fcba0a url(images/hovermenu.gif) no-repeat top left;
}
</style>
</head>
<body>
<div id="header">
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</body>
</html>
0
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 17990313
You will need to make the images transparent gifs or pngs

Regards
0
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 17990835
you will need to add an image to the background of the #header

#header {
height:200px;
border:1px solid #000;
position:relative;
background:url(image.jpg) no-repeat top left;
}
0
 
LVL 1

Assisted Solution

by:Vanessa_Pritchard
Vanessa_Pritchard earned 800 total points
ID: 17999994
Hi,

You can also do it in Photoshop and ImageReady, if that is what you prefer:

1. Start with your button image, created in Photoshop.

2. Create a new layer of how you want the button to look when the mouse rolls over it. (You can do it easily by using layer styles)

3. Switch to ImageReady by clicking the button at the bottom of the tools palette (this way, your file automatically opens intact.

4. Open the rollover palette (or the Appearance palette in Photoshop CS and newer). Make sure the top layer is hidden and your "Normal State" (how it looks BEFORE the mouse touches it) will be set.

5. Click on the new state button and the "Over State" is created. This is will appear on the webpage when the mouse moves over the image. Change its apperance by making the top layer visable. Each state will reflect what is visable in the layers palette.

6. Now click on the slice tab and assign a URL to your rollover. Try to use http:// as well as the file extension (.htm or .html, etc).

You can test your rollover by clicking the test button on the tool palette.

If you like it, save your page as File > Save Optimized and ImageReady will do everything else, including creating the html page.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
Read about why website design really matters in today's demanding market.
In this tutorial viewers will learn how to restore old photos in Photoshop (an introduction to the Clone tool) Zoom into a damaged area: Click on the "Stamp" icon to use the Clone tool. Hold the Alt key and click to select a region. Click again, and…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

589 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question