Member Avatar for justinmyoung

I've tried in illustrator.

I have a header that has a logo on the left and on the right has some text that I want to use as links. But I'm having difficulty linking the text.

Any suggestions?

Thanks

  • 7 Contributors
  • 9 Replies
  • 278 Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by coolhubby

Dani AI

Generated

A quick update to the thread: wanted clickable text inside a Photoshop header and several replies suggested slicing/ImageReady (, ). That was a common workflow years ago, but ImageReady was discontinued and its web features were folded into Photoshop’s export tools. ImageReady history. (en.wikipedia.org)

Recommended modern approach: avoid baking navigation text into a raster image — put links in HTML whenever possible (better for accessibility, SEO and responsive layouts). If an image must carry words, make sure the same text exists as real HTML or in the alt text so screen readers and search engines get it. See WCAG guidance on images-of-text and alternatives. WCAG techniques. (w3.org)

If you must make parts of a single image clickable, three practical options that work today:

  • Image map (simple, browser-native; not responsive by default):

    <img src="header.jpg" usemap="#nav" alt="Site header">
<map name="nav">
<area shape="rect" coords="600,10,760,40" href="/about" alt="About">
</map>

    (Works, but coordinates break on resize — test on mobile.) (devdoc.net)

  • SVG (best for vector headers: text remains selectable/scalable and you can wrap <a> around <text> elements):

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 100">
<a href="/about"><text x="650" y="35">About</text></a>
</svg>

    (Add a <title> or ARIA label for screen readers.) (mdn2.netlify.app)

  • HTML overlay (most robust): export the artwork without the link text and layer real HTML links on top with CSS positioning — responsive and accessible.

If Save For Web/slices didn’t save, modern Photoshop hides legacy slicing/export under File > Export > Save for Web (Legacy) or use Export As / Asset Generator instead; exporting SVG from Illustrator is usually the cleanest route for clickable vector text. . ()

Practical tip: prefer SVG or HTML overlays for nav text; use image maps only for simple, fixed-size graphics and always provide descriptive alt text or visible HTML labels for accessibility.

Recommended Answers

All 9 Replies

Member Avatar for reen.blom

Why cant you link the text? What goes wrong?

Member Avatar for justinmyoung

The text is an image within a photoshop document. I'm just trying to link a url to the text within the photoshop document.

Member Avatar for Member #334542

In photoshop itself you had a slice tool in the tools box. Perfectly slice the part of the text you want and save it as web, then you will make a link to the part of it. Try it and Reply if need more help

Member Avatar for justinmyoung

When I go to save the document for the web, once I've made my slice, it doesn't save. Is their a specific way to save slices that I'm unaware of?

Thanks

Member Avatar for HI2Japan

Slicing happens in ImageReady. After slicing, try to export. That might work for you.

Member Avatar for sreein1986

we create slice in Photoshop Also ...
links will give in Imageready ...

Member Avatar for justinmyoung

If you design a navigation menu in illustrator, how do you link the buttons?

Thanks

Member Avatar for anurag_r31

I've tried in illustrator.

I have a header that has a logo on the left and on the right has some text that I want to use as links. But I'm having difficulty linking the text.

Any suggestions?

Thanks

Please make it more clear so that it may be resolved, Thats not a big issue whatever you wrote,

Thanks

Member Avatar for coolhubby

I have an answer but very late, Guys after slice please save for we option is available in the file menu please use that...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.