I want to create a custom menu with custom buttons.
I want to know how to add a custom made(made in photoshop) menu, to replace the default wordpress menu.
On the menu I have, Home, About, Contact as plain text in the photoshop image. How would I make these clickable?
Thank you.
Photoshop isn’t a web design tool, and websites aren’t images. They are constructed with code. 
These days, Ps is pretty much redundant, as you can style elements with CSS as needed, and you can use custom fonts via @font-face.
If you must use Ps-generated images, you’ll have to place them inside anchor elements, just as you would anyway. Ideally, provide a text fallback in case images don’t load and for screen readers etc.
Thanks for the reply.
I have this as A back ground. I’m wanting to place Home,About, Contact in the bubbles at the top. What would be the best way of doing this?
Trying to match text to a background image doesn’t work on the web. The only way you can approach it is to slice up the image and put each part of it as a background image on the text it goes with.
Time for you to show us something as this is a bit theoretical at the moment.
I do apologise. I thought I’d pasted the link here.
Here it is
So from what you have just said Ralph.m, should I remove the bubbles at the top and load them in seperatly. If that’s the case how would I go about placing the items where I need them?
Are you sure that link is correct? I’m just getting “Image not Found”. (You can also upload an image directly to SitePoint.)
You are going to go through some disappointment as you make the move from graphic design to web design, as it’s not as locked-down a field. (You have to deal with many variables, like different text sizes, different devices etc., so trying to build around a fixed image is doomed, I’m afraid.) Trying to integrate an image like that into a web layout is not very practical. If you want text in those bubbles, I’d suggest adding it to the image, then slice up the bubbles individually so that they can be placed separately on the web page. It will be hard to reliably tie in the stems, though.
It’s working OK for moi.
[ot]
Weird - it’s still not working in Firefox, but I’ve just tried Chromium and it’s fine.[/ot]
Hi,
You could use border radius for the three bubbles and then use the strings as a background to the container. Then remove the bubbles from your background image.
Here’s a very rough demo.
wow, thankyou, I don’t have time to look at it now, but will definetly delve into it later. Thank you.