How to add hyperlink to illustrator ai File [***English SUB available]

How to add hyperlink to illustrator ai File [***English SUB available]


OK later i will show you how to use illustrator to change your “title” The title on top of your web browser tab “You Website is under contraction” make these 3 button to slice image, and then add hyperlink and export it to HTML file Because I don’t have illustrator, so i just install a trail version for demo First, you need to change ‘title’, copy the statement and than Go to File>File info, paste the title in to document title field Next, make slice image for the button, make all the social site icon as slice image.

Object>Slice>Make Then the next step is to add “Hyperlink”, Select File>save for web At here you can see there are multiple slice images, use the slice select tool double-click past the Text you want to show when mouse on(hover) and then put the web address in URL field, You can choose the navigation target,
choose “_blank” the link will navigate to a new page *not the current page choose “_self” the link will navigate to the current page okay You can choose the image format here This is for web page size (resolution). this image file ratio is more suitable for 1024×745 pixer What you need to do is export the image first Click Save Image only Save Then, Save for web Preview And then you will see, the html code been generated here copy the code Just now i choose _blank for Facebook button target, so it will navigate to a new page(tab) For Twitter, i choose _self So it will replace the website (navigate to the twitter account If you didn’t set the target, it will navigate to the page directly (by default _self) So you want to open a new tab like Facebook button, then choose “_blank” Next step this is the image folder we export just now open it and you can see the image being crop to separate file then, you create a new text file inside the folder paste the html code in to the text file Save,change the ‘Save as type” to all file, filename index.html save make sure the file directory is in your image folder, then you don’t have to move you index file in to the folder manually now you have your index.html in the image folder double-click
your website is here that’s all

Comments

  1. Post
    Author
    Sheena Sahni Vora

    your tutorial is useful but little confusing. also difficult to understand your accent (though its a real nice one!).
    may have to view this tutorial a couple of times to get the hang of the process.

  2. Post
    Author
    eledicion Bastidas

    No tenia ni idea del uso de Illustrator para web, pero este tutorial me ha sido muy útil y voy a empezar a practicar. Gracias, saludos desde Colombia

  3. Post
    Author
    Elham Mahootchi

    it was actually the most helpful among others, but I had hard time understanding what you said Joi. May be you were not even speaking English and only using English words in between. I dont know. Anyway, I found my solution by following you visually! Please try to be more clear the next time you help your friends so that other can use it too! 😀

  4. Post
    Author
    Mick Azausky Official

    Thank you, I do not speak English, but his explanation was so good that I understood everything ! Thank you for your help

  5. Post
    Author
  6. Post
    Author
  7. Post
    Author
  8. Post
    Author
    anniedear

    Whenever I preview it just goes to a really long url that starts with the location of the image on my computer and then the actual URL. Help! Why does it do that?

  9. Post
    Author
  10. Post
    Author
  11. Post
    Author
  12. Post
    Author
    Don Hemmerling

    If you want ppl to like your video you should care what we have to say. So take the rag out of your mouth so you can speak clearly.

  13. Post
    Author
  14. Post
    Author
    design chemistry

    Ive created a email signature in illustrator and managed to hyperlink to the urls (website, facebook, Insta) also got the html code in the preview window. How do i bring all of this together and insert the email signature in gmail so that all the links work? (currently it shows as images when inserted that are fragmented pieces all over)

  15. Post
    Author
  16. Post
    Author
    ramzeen.m

    Thank you so much sir. After spending hours on YouTube on how to do this, your tutorial made it possible. Although you barely spoke English, you're demonstration and the use of few English words made it possible for me to get the job done. I truly appreciate you for uploading this video. Best. – Ramzeen

Leave a Reply

Your email address will not be published. Required fields are marked *