Clickable HTML Email Signature Design 2022 | Tutorial

[@waqarhussain8919]

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

[@DESIGNERWAQASGRAPHICS]

Thank you 😊

[@renslucassen5935]

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

[@DESIGNERWAQASGRAPHICS]

Thanks

[@aliendesign2023]

Great Tutorial! fixes table separation btw. 🐍 Also border-collapse: collapse;

[@DESIGNERWAQASGRAPHICS]

:-)

[@moefallah1621]

This is exactly what I was looking for. Thank you

[@DESIGNERWAQASGRAPHICS]

Thanks:)

[@sleepist2520]

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

[@DESIGNERWAQASGRAPHICS]

Thanks:)

[@Inge2r]

Thanks so much!! It actually worked! Yay. I just have one question. The quality of my email signature is really bad and pixelates a lot. Any advise?

[@DESIGNERWAQASGRAPHICS]

@Inge2r Quickest way to fix this is to use a higher resolution image in your email signature, and scale the image down using the HTML height and width attributes. For example, if the resolution of your image is 360 x 360 pixels, you should use 1/3 of that resolution in the height and width attributes. Hope this helps.

[@farhanrahid2424]

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

[@DESIGNERWAQASGRAPHICS]

You’re most welcome:)

[@SGodez]

Thank you so much for the tutorial, I don't really understand coding but this was really helpful. I managed to get everything working and looking great in the browser but when I try to copy it over to gmail or mac mail it seems to be in slices and not copying over in one piece. I have tried Firefox, chrome and safari, am I missing something?

[@DESIGNERWAQASGRAPHICS]

@SGodez I don't know about this might be glitch or something, I will try find solution and will update :) thanks

[@JahidulIslam-dt9mc]

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

[@DESIGNERWAQASGRAPHICS]

@Jahidullslam-dt9mc I’m still looking for solution and will update it once found.

[@andiesarchive]

Thank you so much for this tutorial exactly what I was looking for! Yu think this code works for animated images?

[@DESIGNERWAQASGRAPHICS]

@andiesarchive thanks and the coding should work with animated images, choose the correct file format for animated images when using host image.

[@haysuchti5603]

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

[@DESIGNERWAQASGRAPHICS]

@haysuchti5603 you can try to click and drag over the image to select the image then right click and copy paste it. Also try to use different browser if needed.

[@irinamadan6240]

Super nice video! However one question - maybe someone has a tip. When I paste it into gmail it pastes as multiple sliced images instead as the card as a whole and then there is a whole miss-arrangement going on. Any tips would be super super helpful! *I don't usually code so it's my first time doing anything like that*

[@maria.thebuckwaygroup]

Hey! I have the same problem! did you find a solution? please I really appreciate your response

[@7aithom]

The same here 😢​@@maria.thebuckwaygroup

[@DESIGNERWAQASGRAPHICS]

@irinamadan6240 use Gmail on the web browser, It will keep many of your stiles and will display properly on mobile and desktop. Try using inline styles as well, and when possible use attributes instead of style, the more HTML you use the better, the email provider can change the CSS rules, but it is less likely to do that with HTML.

[@alvinbetsayda415]

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

[@DESIGNERWAQASGRAPHICS]

@alvinbetsayda415 No background is not the reason. I’m still looking for solution and will back with update once I get it :) thanks

[@alAminhabib-m3n]

great job

[@DESIGNERWAQASGRAPHICS]

Thanks :)

[@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?

[@DESIGNERWAQASGRAPHICS]

@CreatifPuertoRicoLLC Add this styling to every image source that is adjacent to another image your problem should be resolved. Remember to place this styling inline, as webmail clients tend to strip out any styling used between the style tags in email. If, for some reason this doesn’t resolve your problem, check the properties of the tables used in your email and make sure they have a property of cellpadding=”0” and cellspacing=”0”assigned to them. Hope this helps.

[@aliendesign2023]

@@DESIGNERWAQASGRAPHICS Try to use this CSS: /* Apply this to your `table` element. */ #page { border-collapse: collapse; } /* And this to your table's `td` elements. */ #page td { padding: 0; margin: 0; } OR table { border-spacing: 0; border-collapse: collapse; } Tables elements unlike divs add cellspacing and cellpadding attributes, set to 0, and it should fix the problem.

[@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.

[@DESIGNERWAQASGRAPHICS]

@tpjonesavfc it may be sufficient to drag it. If you click and drag a link in Safari, you can drop it in many places and get the desired functionality. For example, if you drop it in a text editor, it will drop the link URL (for plain text) or a formatted link using the title from the page. If you drop it on your desktop, you will get a webloc file. If you drop it on the Safari URL bar or tab, that tab will load the link. If you really need to copy the link, one possibility is to use spotlight as a easy-access text field. Start dragging the link, hit Command+space (or whatever you have it set to) to pop up spotlight, drop it in the search field, and copy. Hope this helps

[@varun0115]

good explanation i followed each an everything but at last when i paste in gmail the image get slpit into parts any solution to it?

[@DESIGNERWAQASGRAPHICS]

@varun0115 thanks I’m working on solution for this and will update in upcoming videos.

[@lutongjograt221]

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

[@DESIGNERWAQASGRAPHICS]

@lutongjograt221 make sure when you save the file, choose the correct format like png and then save the file. If tutorial is fast you can always slow down playback speed from video settings ⚙️.

[@ajbarrett3661]

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?

[@DESIGNERWAQASGRAPHICS]

@AJ Barrett I never face this issue with email signatures. but you can try to make sure the sliced images were sliced accurate, might be the issue, also try to copy/paste from another browser like chorme or firefox.

[@juancaca1993]

I'm facing the same exactly the same issue, @ajbarrett3661 could you solve it?

[@ajbarrett3661]

@@juancaca1993 nope. Still waiting for help

[@thomasjanssens255]

Same issue here :( the top half is blurry, and the bottom half is fine in the Gmail signature; All crisp on the HTML browser preview @@ajbarrett3661

[@SGodez]

@ajbarrett3661 Did you end up finding a solution to this issue, I am having the same problem and have tried copying from three browsers.

[@mouhmouh-d7l]

hi, hope you're doing good, thank you so muh for this tuto, i followed everything but at the final i see nothing on chrome , just white page, thank you man

[@DESIGNERWAQASGRAPHICS]

@user-rb1fp3rz3s Old cached files may sometimes cause display issues. Try clearing your browser's cache and then reload the page to see if that resolves the problem. Hope this helps

[@mouhmouh-d7l]

thank you , i fix it, but the quality is very low @@DESIGNERWAQASGRAPHICS

[@DESIGNERWAQASGRAPHICS]

@user-rb1fp3rz3s the quality is low because the file resolution is 72DPI, you can try to increase the resolution to 300DPI. Hope this helps

[@mouhmouh-d7l]

@@DESIGNERWAQASGRAPHICS thank you so much , u the best

[@DESIGNERWAQASGRAPHICS]

You’re welcome:)

[@sinkimakubu1040]

too fast and I became confused on how I will know which sliced image I will be coding because I know its not just attaching the code but attaching it to the relevant sliced image so my insta icon doesn't take me to my twitter link.

[@DESIGNERWAQASGRAPHICS]

Alright well I know the video is fast but you can slow the video from the ⚙️ settings in the video and go to playback speed and slow down as you like. And about slicing the exact image just make sure to slice the icon or image that you want code. Hope this helps

[@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

[@DESIGNERWAQASGRAPHICS]

@EdgarFayad I don’t think there will be any issue, because AVIF format offers much better compression than PNG or JPEG with support for higher color depths, animated frames, transparency, etc. Note that if need when use AVIF, you should include fallbacks to formats with better browser support (i.e. using the element).

[@oliviercourtois8794]

Thank you so much!!!!! Worked great, except for the Dark mode, on android gmail, It inverts some of the sliced images, sometimes it's the image with link, sometimes it's not, depending on the slicing you do. I freaking tried everything I could find online, nothing worked. Any help ? I would bless you with all my might!

[@DESIGNERWAQASGRAPHICS]

@oliviercourtois8794 My advice is to use Gmail on the web browser, It will keep many of your stiles and will display properly on mobile and desktop. Try using inline styles as well, and when possible use attributes instead of style, the more HTML you use the better, the email provider can change the CSS rules, but it is less likely to do that with HTML. Hope this helps

[@turikamakev]

Let me explain: I followed the tutorial to the letter. At the very end, when I view the file on the web, everything is fine. When I import it to Spark (I’m on Mac), everything is also fine. However, when I send it to my colleague who uses the native Windows mail client, she encounters problems with offset and white borders. This is strange because everything seems perfect on Spark and on the web. I used the following code first. Did I make a mistake? td{line-height:0; font-size: 0.0em; } img{display: block; float; left; padding: 0} align: absbottom; align: texttop;; Thank you for your response.

[@DESIGNERWAQASGRAPHICS]

The code you used looks fine, probably bug from the colleague side.

[@jarreauetcobanez3447]

postimage is displaying empty images. any help?

[@DESIGNERWAQASGRAPHICS]

@jarreauetcobanez3447 For some reason Postimage has had a hic cup and has changed from ‘postimage.org 10’ to ‘postimage.cc’. That means the links no longer work and photos aren’t visible. To fix the link you have to edit the post where the photos have disappeared and you will see the link that no longer works, something like this; (url=postimage.org][img]s6.postimg 13.org/g5xd1iaep/P1010721_zpsb45ab1100.jph[/imng][/url) To get the link to work again you’ll have to replace ‘org’ with ‘cc’, it appears twice in the link. When you’ve fixed all the links click on ‘Post’ at the bottom and the photos should be visible again. Hope it helps.

[@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.

[@DESIGNERWAQASGRAPHICS]

@vicebeatsuk I think the issue is that Visual Studio Code is not detecting the file type correctly. The language indicator most likely says plain text in your case. Click on it and a menu should appear at the top centre of the screen. Then try the following: Enabling Auto Detect. I think this will be the first option. Selecting Configure File Association for '.html'... 2 can also be accomplished by adding "files.associations": { "*.html": "html" } to your settings. OR just add to settings.json (File -> Preferences -> Settings): { // Configure file associations to languages (e.g. "*.extension": "html"). These have //precedence over the default associations of the languages installed. "files.associations": { "*.html": "html" }, } Hope this helps.

[@joaodecarvalho5436]

Thank you my friend!

[@DESIGNERWAQASGRAPHICS]

You’re welcome:)

[@asif8208]

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

[@DESIGNERWAQASGRAPHICS]

@asif8208 converted code is different from the code i did and also there are tweaks in coding.

[@asif8208]

thank you for your reply

[@DESIGNERWAQASGRAPHICS]

Your welcome:)

[@asif8208]

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?

[@DESIGNERWAQASGRAPHICS]

@asif8208 If everything correct you might need to readjust the signature size for both desktop and mobile devices if needed.

[@asif8208]

could you please explain how to adjust?

[@osamakandory8884]

postimage doesn't work when I try to upload any solution?

[@DESIGNERWAQASGRAPHICS]

You can try to refresh the browser page, remove browser cache or use different browsers hope that helps

[@croccraft4740]

why your result is not pixelised, and mine yes, I've exactly the same format and resolution

[@DESIGNERWAQASGRAPHICS]

@croccraft4740 Not sure why, but you can try to pause or slow the video speed to follow the tutorial exact and accurate to get the same result.

[@MuslimUddin-hr9nk]

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

[@DESIGNERWAQASGRAPHICS]

@MuslimUddin-hr9nk Make sure to confirm HTML is selected as the Email format, outlook signatures might not appear if you're using the Rich Text or Plain Text email format.

[@umairunc7053]

yes its causing probelm in outlook . did you find any solution

[@tanjirulislamsami6225]

Amazing work. Truly valuable. It's help me a lot. Thanks.

[@DESIGNERWAQASGRAPHICS]

You’re very welcome!

[@tanjirulislamsami6225]

@@DESIGNERWAQASGRAPHICS you are Great. You help me a lot complete my project.

[@DESIGNERWAQASGRAPHICS]

@@tanjirulislamsami6225 my pleasure:)

[@ggvans]

Working ! Tank you !

[@DESIGNERWAQASGRAPHICS]

Thanks

[@asif8208]

why am I getting spacer.gif file after converting psd signature into htm?

[@DESIGNERWAQASGRAPHICS]

@asif8208 I’m not sure about that, you can try to make sure you select the correct format while converting.

[@fraserlee_film]

so followed the vid and when I tried copying into gmail the splicing is all over the place . And when i try with apple mail, the splicing is correct but I cannot see the images. Any help?

[@DESIGNERWAQASGRAPHICS]

@fraserlee_film will let you know if I found the solution.

[@animics.10]

which version of ps you're using??

[@DESIGNERWAQASGRAPHICS]

For this tutorial I used cc 2022 version.

[@animics.10]

@@DESIGNERWAQASGRAPHICS This isn't responsive right? Can youbmake it responsive or How can I make this responsive?

[@animics.10]

@@DESIGNERWAQASGRAPHICS If you can then kindly make a video on how to make this responsive.

[@DESIGNERWAQASGRAPHICS]

This is just a design! It won’t work as responsive just looks only

[@DESIGNERWAQASGRAPHICS]

I will make one in upcoming videos :)

[@gracegsantana]

Not sure why but the images are just not loading when I paste them in the signature at gmail🙈 Any advice?

[@DESIGNERWAQASGRAPHICS]

@Grace Santana Make sure you click and drag to select everything or use CTRL+A for window to select everything and use CTRL+C for window to copy then right click or use CTRL+V to paste in the signature in gmail. Hope this helps

[@MaKisthenewacid]

Hello, my friend thanks for the video, i did everything and works but i am having a problem when i am trying to put the signature on mac mail. It gets stuck on the beginning and it doesn't move after the message. Any solution ?

[@DESIGNERWAQASGRAPHICS]

Hi @Makisthenewacid what message you get so I can try to find the solution. Thanks

[@MaKisthenewacid]

@@DESIGNERWAQASGRAPHICS found the solution, i changed the position from absolute to style="position:relative;

[@DESIGNERWAQASGRAPHICS]

That’s good :)

[@MaKisthenewacid]

@@DESIGNERWAQASGRAPHICS yeah it did not solved the problem, everything looks broken when i send an email to gmail for example, maybe i will go with a simple png, it was worth to try

[@DESIGNERWAQASGRAPHICS]

:)

[@ardianmaulana2704]

Thank you! very helpfully🙂

[@DESIGNERWAQASGRAPHICS]

You’re welcome:)

[@medkarim7107]

i get this message when i put it on gmail " The signature is too long. Please try a shorter signature"

[@DESIGNERWAQASGRAPHICS]

@medkarim7107 If it’s says signature is too long mean there is extra space between codes so you might need to remove extra space from coding and then try it. Most of the time it’s the extra space.

[@KhoaNguyen-ni9eo]

Thank you for this guidance; it has been very helpful to me. However, I have a small question that I need your assistance with. I followed the instructions in the video, and everything works well on the Gmail platform (both desktop and mobile). However, when I check my emails on Outlook using the desktop application, there seems to be a slight misalignment in the formatting of the email signature, specifically between the different slices that compose it. Interestingly, the signature displays correctly on Outlook mobile. Is there any way to fix this issue?

[@DESIGNERWAQASGRAPHICS]

@KhoaNguyen-ni9eo You can try make sure the images were sliced accurate beside that I don’t know about the issue because I didn’t faced it :)

[@juancaca1993]

It happens on Outlook, and It is not because you sliced it wrong in PS, It is because the way Outlook renders the code. I'm still trying to find a solution for that hehehe. It has to do with how tables are displayed in some emails. For example from Gmail to Outlook, everything works fine, but from Outlook to Gmail It doesn't work as expected.

[@enriqg8149]

Me pasa exactamente lo mismo .. estoy en ese tema con Outlook

[@juancaca1993]

@@enriqg8149 I already investigated and read about the topic a lot, and there is no a single solution. You can make it look without the spaces taking the code from Gmail, It will work, however, sending that from Outlook will still have some unexpected behaivour in different devices. So, If you want to keep consistency across many email providers, It would be better to create one without too many fancy things.

[@ulyanasytko241]

@@juancaca1993 did you manage to fix it?

[@bespokeinvites9887]

when I open it in photoshop its really pixellated ? followed all instructions though

[@DESIGNERWAQASGRAPHICS]

@bespokeinvites9888 Make sure the size is correct. The size makes it pixelated.

[@bespokeinvites9887]

@@DESIGNERWAQASGRAPHICS I have both illustrator and psd at 600 x 200 px ? 72 resolution?

[@DESIGNERWAQASGRAPHICS]

@bespokeinvites9887 the size is correct and the dpi is correct as well but remember the image without zoom is the exact quality, if you zoom in it will pixelated also for email signatures you have to use 600x200 size with 72dpi. Or the image will be heavy to use for email signature and you will get errors while adding email signature on emails. Hope this helps

[@RJ-nw2zo]

Great vid!! Just a question, how would you link an app to this email signature (like Viber or Whatsapp, for example)? Thanks.

[@DESIGNERWAQASGRAPHICS]

@RJ To add app link to email signature, you can add a text in your signature such as "Whatsapp" or "Click here to send me a text" Select this text and add a hyperlink to it (on Mac: cmd+k; on Windows: ctrl+k) Add the following text: api.whatsapp.com/send?phone=83365113401 (change the numbers to your own number). Hope this helps Thanks

[@RJ-nw2zo]

​@@DESIGNERWAQASGRAPHICS Thanks so much, this helped a lot! you're one of the rare creators who actually replies in comments asking for help. Keep up the good work!

[@DESIGNERWAQASGRAPHICS]

You’re most welcome

[@mercedestuck9992]

Fantastic video, thank you! My only issue is that when I put it in Gmail it looks different than it does on my browser, how do I fix this?

[@DESIGNERWAQASGRAPHICS]

Can you explain to me how different it looks, like what changes you see in Gmail than browser.

[@mercedestuck9992]

@@DESIGNERWAQASGRAPHICS Thank you for replying, yes. Essentially I have a line that separates my logo (on the left) from the contact info on the right, this line should be a solid line, but it has a break in it in the middle, and I have no idea why.

[@DESIGNERWAQASGRAPHICS]

Hmmm, I never face this issue with email signatures. but you can try to make sure the sliced images were sliced accurate, might be the reason for the break line issue.

[@mstfmrt]

try to copy from another browser. when i tried to copy form firefox it was same with you but when i copied from chorme problem fixed

[@DESIGNERWAQASGRAPHICS]

I used chrome browser in this tutorial.

[@muhammadumer7365]

Very well explained! Thank you 👍🏻

[@DESIGNERWAQASGRAPHICS]

Thanks 😊

[@umairunc7053]

dear in outlook its not working well looks like peices

[@DESIGNERWAQASGRAPHICS]

@umairunc7053 Check if any formatting or HTML code in your signature is causing the issue. Simplify the formatting or remove any problematic code. Try using a different web browser or clearing your browser cache. Hope this helps

[@shazstudio-hn6cl]

Hi! when i paste the siganture in gmail it creates spaces between the sliced images.

[@DESIGNERWAQASGRAPHICS]

@shaz studio Follow the tutorial exactly how i did and make sure there are no extra spaces in the coding and also slice the signature image correctly. You can also try adjusting heights and font sizes, matching the background color and segmentation to avoid gaps between images in signatures.

[@mstfmrt]

try to copy from another browser. when i tried to copy form firefox it was same with you but when i copied from chorme problem fixed

[@moritzpfeiffer4780]

Why do you need PSP? The slice tool is also available in Ai.

[@DESIGNERWAQASGRAPHICS]

Yes you right but I used PSP if some one want to design in psp.

[@moritzpfeiffer4780]

@@DESIGNERWAQASGRAPHICS So I do not actually need PSP?

[@moritzpfeiffer4780]

Two more questions: Do I have to slice in any case even if I don't want to be the signature clickable? And what to do if the signature (image) is pixelated?

[@DESIGNERWAQASGRAPHICS]

You don’t need to slice image if you don’t need clickable signature. Also if the signature image is pixelated make sure to use the correct size.

[@APKEdits]

Can we link the image of our Whatsapp Qr code in it?

[@DESIGNERWAQASGRAPHICS]

Yes :)

[@APKEdits]

Waqas bhai, aik or masla aa raha hai... mainy bana to li hai email signature, but usy jab mail karo to har slice py likha aata hai "Image not found or deleted"

[@APKEdits]

@@DESIGNERWAQASGRAPHICS Can i have your whatsapp or insta? want to discuss a problem :(

[@furkanoz2191]

There is a white line on signature in outlook. There isnt any line on html but when ı copied to outlook it happens white line

[@DESIGNERWAQASGRAPHICS]

@Furkan Öz The 1px line bug is a design bug that happens only on the Outlook email platform. This bug causes a white line appear in signatures. Unfortunately, there isn’t a hard-and-fast rule for fixing this bug. However, you can try adjusting heights and font sizes, matching the background color and segmentation. Also make sure you sliced the signature image correctly to avoid lines in signatures.

[@furkanoz2191]

@@DESIGNERWAQASGRAPHICS I fix it. Thank You. Love from Turkey

[@DESIGNERWAQASGRAPHICS]

You’re most welcome

[@Brizenh]

@@furkanoz2191 Hello, how did you fix it, i've been going crazy with the white lines and spaces in outlook.

[@furkanoz2191]

@@Brizenh kzbin.info/www/bejne/rningI1jqc13arM I don't bother with codes at all. I crop the whole picture first with the crop tool. Then I crop the icons. Then we add links to the icons. And we change it from the html viewer.

[@BenimeStudios]

give me image source, please

[@DESIGNERWAQASGRAPHICS]

@benimestudios1480 Sorry but I don’t have the source available, you can follow the tutorial if need :) thanks

[@bertusdeleeuw]

Not working and way to fast

[@DESIGNERWAQASGRAPHICS]

@bertusdeleeuw you can slow down the video from video playback setting ⚙️.

[@excesshottest]

great help! ty

[@DESIGNERWAQASGRAPHICS]

Thanks

[@excesshottest]

i just saw that in outlook, the signature show the slice tool border from when i cut. In Aqua, Thunderbird, browser and mobile apps i have no problem. Any idea why that is?

[@DESIGNERWAQASGRAPHICS]

You can make sure the images are sliced accurate to avoid borders.