Clickable HTML Email Signature Design 2022 | Tutorial

In this video tutorial,
----------
I will show you how to make this email signature clickable html using adobe illustrator, adobe photoshop and visual studio code. in this tutorial, I'll be using illustrator to photoshop and getting code from photoshop save for web as PNG-24 bottom left cornor preview option then save. doing coding in visual studio code for email signature then adding code from photoshop preview option that you can find in video.
-----------
Thanks for watching.
Keep learning.
#ClickableEmailSignature #HtmlEmailSignature #AdobeIllustrator

[waqarhussain]

Thanks a lot for sharing this well explained tutorial for creating HTML email signature with social icons. Very informative video as well:)

[renslucassen]

Finally I've found what I was looking for. I have no HTML experience whatsoever, but this didn't scare me off. THANKS!

[asif]

3:12 why did you code yourself when you have code attached after converting psd file?

[moefallah]

This is exactly what I was looking for. Thank you

[aliendesign]

Great Tutorial! <table id="page" width="100%" border="0" cellspacing="0" cellpadding="0"> fixes table separation btw. 🐍 Also border-collapse: collapse;

[ajbarrett]

So I followed along, and in the browser the image looks great, sharp and everything, But when I do the last step to copy/paste to Gmail, half of the image is blurry, and the other half is fine. And when I click on it, it seems to be in sections. I can click on the image in the Signature Editor and it seems like all the splices from Photoshop are different images that I can resize/remove in the Gmail signature editor. Any suggestions?

[farhanrahid]

Really amazing !!! It worked for me. Thanks for this wonderful video. Really appreciate

[JahidulIslam-dtmc]

It is working fine on gmail but on outlook the images got splited?
Do you have any solution for this?

[alvinbetsayda]

if i use whit background it show black cut of knife in Photoshop, is there any reason thats why you use black background?

[sleepist]

You are a legend. Every Youtuber has made the unfortunate mistake of mistaking PDF Hyperlinks for Image HTML Links. You rock man!

[EnvironmentalProductsandAcc]

This was very helpful, but I am running into the issue that after a little bit, my signature pops up an error message saying image not found or may have been removed? Any advice?

[EdgarFayad]

Is there an issue if the file format that I get back from Post image on my Pngs is . AVIF? does that change anything ?Thank you

[haysuchti]

I did all of the above: My image is seen on the webpage but not as a signature on gmail. What do i do wrong?
I used CTRL+A, CRTL+C, CTRL+V from the webpage to paste on gmail, but then on gmail the picture is not seen at all

[tpjonesavfc]

Followed every step (I think...) but when I right click the tab I dont have "Open in default browser" I have "Move into new window" which doesnt do the same thing. Is there another way to open the file in a browser? Im using a Mac.

[lutongjograt]

Hi! Why is it when I save the photo from photoshop it goes as Gif instead of png?

[EYPxD]

Thank you. This is the simples way for no code.

[CreatifPuertoRicoLLC]

Thanks for the tutorial. However, I did the exact same process and everything looks great, but when I paste the email signature to my Spark (Mac os) and start to compose an email, the signature shows gaps in between each sliced images. How can I fix this?

[asif]

sir when I am testing signature by sending through gmail. i feel sig is not sharp in mobile gmail. It is little bit blurry in seeing in mobile but it is looking as it is in desktop. why?

[MuslimUddin-hrnk]

What causes the design to break when I design in Outlook?

[vicebeatsuk]

Hi, thanks for doing this. I have followed all of the steps, but in Visual Coder it doesn't give me the option of accessing the HTML so I can't see the graphic. I can't see whats gone wrong.