How do I add links in photoshop?

by Jekiko Banned
10 replies
  • WEB DESIGN
  • |
Hello,

I have a template that I want to use and it is in
psd format. I have downloaded photoshop to use
( free for one month).

Now I can see all the layers and text for the menu items
but I can not see how to place html links into it.

When I convert it "for web use" all I get is a huge jpg image.

This is what I have:

http://www.prime-servers.com/New_064.jpg

If I can insert html hyperlinks - I can not see any point in all these
psd templates.

Would appreciate it if anyone can simple tell me how I do this

thanks
#add #links #photoshop
  • Profile picture of the author Jekiko
    Banned
    When you look at the image in the link, you will see
    the menu items: about us, products etc. I need to make these links.

    Any ideas ?
    {{ DiscussionBoard.errors[797024].message }}
  • Profile picture of the author Kezz
    You're going to need to slice and code it up I'm afraid. When you select the knife tool, do you see a whole bunch of slices come up on the psd?

    It's much easier, I find anyway, to export your images from photoshop and then use dreamweaver to actually put in your links etc.

    If the psd does come already sliced up, then what you need to do to get started is go File > Save for Web and Devices > Save. Then, you need to choose Save As Type > HTML and Images (not images only) and Slices > All Slices.

    That will at least spit out some code that you can start working with. Photoshop code is never the greatest, but it will at least give you something more than just a single image.
    {{ DiscussionBoard.errors[797030].message }}
    • Profile picture of the author plongmire
      Originally Posted by Kezz View Post

      You're going to need to slice and code it up I'm afraid. When you select the knife tool, do you see a whole bunch of slices come up on the psd?

      It's much easier, I find anyway, to export your images from photoshop and then use dreamweaver to actually put in your links etc.

      If the psd does come already sliced up, then what you need to do to get started is go File > Save for Web and Devices > Save. Then, you need to choose Save As Type > HTML and Images (not images only) and Slices > All Slices.

      That will at least spit out some code that you can start working with. Photoshop code is never the greatest, but it will at least give you something more than just a single image.
      Ok i have sliced and saved as an html and image. When I load the HTML version it works with links. When I look at the gif image alone, the sliced portions are missing...

      My question is how do I use the image with working links...how do I upload it so i can use it on my web page...I want to use the image with working links below another image.

      what file do I use...hope this makes since...
      Signature
      Make Your First $1000 Online

      Click Here For Your Invite

      Get a Behind-The-Scenes Look at How I Made My First $1000 online
      {{ DiscussionBoard.errors[6460107].message }}
      • Profile picture of the author EthicalDesigner
        You are biting off more than you can chew.
        I suggest going to the basics first.

        This is a good resource.

        HTML Links
        {{ DiscussionBoard.errors[6460641].message }}
        • Profile picture of the author plongmire
          Originally Posted by EthicalDesigner View Post

          You are biting off more than you can chew.
          I suggest going to the basics first.

          This is a good resource.

          HTML Links
          that has nothing to do with what Iam talking about...do you understand the question?

          Im not talking about placing a link in a full image, I am talking about placing links in certain spots within the image using splices in a PSD file.
          Signature
          Make Your First $1000 Online

          Click Here For Your Invite

          Get a Behind-The-Scenes Look at How I Made My First $1000 online
          {{ DiscussionBoard.errors[6460879].message }}
          • Profile picture of the author EthicalDesigner
            Originally Posted by plongmire View Post

            that has nothing to do with what Iam talking about...do you understand the question?

            Im not talking about placing a link in a full image, I am talking about placing links in certain spots within the image using splices in a PSD file.
            You're asking how to insert HTML links and/or image maps.
            I directed you to a relevant resource. Spoon feeding much?

            Capish?
            {{ DiscussionBoard.errors[6474307].message }}
  • Profile picture of the author mhuktar
    Banned
    [DELETED]
    {{ DiscussionBoard.errors[797131].message }}
    • Profile picture of the author Minisite Nerd
      Sorry but there is no way to do what you want to do.

      Photoshop is merely a design tool.

      If you do design a site in Photoshop you are really only designing the layout. Then you must slice that PSD and take those slices and piece them back together with CSS or HTML.

      Sounds easy, but the code Photoshop shoots you when you export really isn't usable.....even though there are actually some tutorials online and on YouTube that tell you to do this. They do so in error, because it is basically worthless.

      Now if you bought a TEMPLATE that came with a PSD file, it is likely that it also came with a CSS or HTML coded version of the template.

      If this is the case and the PSD file is already sliced, you can easily make simple changes to the PSD - like colors, text, etc - just not to the layout. Then export those slices and put them where the template images are.

      Bam....you will have a custom version of the template, coded and wroking.

      Any major changes would require CSS knowledge and the ability to change the slices in Photoshop.
      {{ DiscussionBoard.errors[797227].message }}
      • Profile picture of the author Jekiko
        Banned
        Thanks for your replies.

        BTW what does the "d" stand for in the extension .psd ?

        I guess that it is photo shop d ? something

        Anyone know ?
        {{ DiscussionBoard.errors[797410].message }}
  • Profile picture of the author Zoheb M
    Hi Jekiko,

    The 'd' stands for document. Photoshop Document.

    Zoheb
    Signature
    Ecommerce in India - - - A Free Guide on How to Start an Online Store in India.
    {{ DiscussionBoard.errors[797530].message }}
  • Profile picture of the author iamhere007
    [DELETED]
    {{ DiscussionBoard.errors[4798460].message }}
  • Profile picture of the author lucila
    The easiest way is to use a technique that is called "Slicing" You can read about it at this URL http://www.mediacollege.com/adobe/photos… It is a very simple tutorial.
    {{ DiscussionBoard.errors[8216523].message }}

Trending Topics