?
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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

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

Introduction When sharing photos, especially via e-mail, the large resolution images that most cameras take today make for extremely large file sizes. The time required to upload these files to forums, send in e-mails, post to blogs or even placi…
This article outlines the struggles that Macs encounter in Windows-dominated workplace environments – and what Mac users can do to improve their network connectivity and remain productive.
In this tutorial viewers will learn how to select a color range in Photoshop and how to easily apply them to multiple projects. Open an image for editing in Photoshop: Open the select Color Range Selection tool by going to Select > Color Range: Sele…
Make a selection using the pen tool to trace the selection. Then alter the color of the selection by using the color balance option in Adobe Photoshop.
Suggested Courses

593 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