Solved

Help creating links in photoshop

Posted on 2006-11-21
4
158 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 300 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 200 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

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

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 create a postcard text effect in Photoshop and get an introduction to Layer masks Use magic wand to select the "inner" part of the letters: Create a new layer and fill the selected area with black: Go back …
In this tutorial viewers will learn how to create a vector texture to apply a non-rasterized texture to vector images, using Photoshop and Illustrator Open a textured image such as a scanned-in piece of cardboard in Photoshop: Convert the texture to…

688 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