?
Solved

Help creating links in photoshop

Posted on 2006-11-21
4
Medium Priority
?
160 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 30

Accepted Solution

by:
Steggs 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:Steggs
ID: 17990313
You will need to make the images transparent gifs or pngs

Regards
0
 
LVL 30

Expert Comment

by:Steggs
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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 correct colors in Photoshop using the Color Balance adjustment Open a photo for editing in Photoshop: Open a photo for editing in Photoshop: Select "OK" on the dialogue: The Color Balance adjustment works b…
In this tutorial viewers will learn how to correct colors in Photoshop using the Curves adjustment Open a photo for editing in Photoshop: Begin by creating a new adjustment layer by going to Layer > New Adjustment Layer > Curves: Select "OK" on the …
Suggested Courses
Course of the Month10 days, 10 hours left to enroll

765 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