This is a terrific tutorial, everything spot on. I want to add that when in Photoshop, you can edit the properties of each slice and enter the link for each, and give it a name and text etc. This eliminates having to add the URLs manually - Photoshop will transfer them to the browser when previewing. The easiest way to do this is in the Save For Web window - double click each slice and enter all the info you like.
Thank you!!!! This helped me immensely :) If any of you are struggling with the quality like I was, start off with an artboard much bigger than what you need, and then scale it down to the dimensions you need it to be to in the save for web window to retrieve the 'preview' code, then scale it back up again to save the images. Works a dream!
Thank you very much Matt, 5 Years later and you still have the best tutorial on how to HTML Email Signature from Photoshop. the subject like yours "in my option" Excellent video!!!!!!
This is the best, most simple/thorough tutorial on this I have come across. Most of the others are for developers etc. You have saved my life and about 20 hours of research. THANK YOU. 5 STARS!!
to keep the layout of the design you made from breaking apart put into the section .Table_01 { table-layout: fixed; } make sure your design isn't too large to view on desktop and mobile and make sure the table name is correct
This was the best tutorial I have found on how to create an email signature. I have literally been trying to do this for months! I used Dreamweaver instead of the text editor you used, but everything worked perfectly! THANK YOU!
Thank you so so so much!!!!! I had been struggling with adding a signature for like two or three weeks, reading and watching tutorials like crazy. You explain yourself very well, thank yoU!
Loved this video. The only thing I would add or maybe I missed it is the the ideal size for the images is w650Px by h90/150px. My image was huge so I had to re do it, but it was good practise. Thanks
Man, my client says that the images are showing broken everytime she tries to copy and paste in gmail settings. What iam doing wrong?! if you could help me, i will be very thankful.
Thank you! It worked! I used Dreamweaver for the code. I just copied and pasted your code in and followed the rest. there was a little figuring out, here and there, but overall success! thank you!!!
Hi Matt.. THANK YOU man. I am a graphic designer and have been experimenting with creating an email signature like a mini web site. But, I really like your way better. Very good tutorial. I really appreciate you putting this online. Keep up the great work!. I will check your site out as well.
This is great thanks! Although for some reason when I send an email it breaks up. It looked fine in my settings area but not when I send it - thoughts/advice?
This is definitely the best video I have found explaining this, it would be good to know dimensions for the original image, however I am sure this can be found on the web tho. Thank you.
Hey Matt, can I put the code directly somewhere into the page instead of copying the image you did in last.? I mean if I want to make it for someone then how can I send this for someone?
Hi Matt, this worked great for me up until I tested out what the signature looked like in a an email. All the sliced images are stacked in one column, not at all like the preview of the html file. Do you know why this could be? Thanks so much for any help!
Thanks for the html text. It helps keeping the slices together. I've had some issues before when sending a mail to outlook and now it works. but somehow there is still a small gap between the slices. do you know how to get rid of these?
Thanks a lot for your tutorial. I did have an issue in the end as there were a few breakages through the image in the final format due to the social media links being in an awkward place, once ive rectified the slicing in photoshop i think its going to work great, so thanks for the code and the links!
Thank you... It takes only one hour and all done, everything working great 😍. If you please tell me how can i move this signature to centre or right in Gmail.
This is awesome! Everything worked, however, it took some time to figure out how to shrink the signature. Finally figured it out but it would have been easier if you mentioned it :) Thank you for the video. It was really helpful.
Thank you so much for the mind blowingly helpful video.. I've had a signature running for a while now with no issues. I was wondering if there is a way to keep full resolution as it seems that everything tends to blur a bit?
Hello, and thank you for your tutorial. I followed all the steps and everything was fine until I pasted it into Gmail. The blocks are displaying on top of one another like if a table was missing. Could you help please?
It displays perfectly fine when I open the html file but when I copy it into gmail, the formatting and image sizes are all different (I selected 'do not resize images' in post image). Is anyone else having this issue and know how to fix it? I tried ctrl + shift + v but it also didn't help.
Thank you for this tutorial! Very helpful. I have a question though. With darkmode now being an issue lines are showing up in my design where the slices were cut in photo shop. How do I stop this from happening?
Hi Mat, thank you for this tutorial. One question though, are the texts editable if for some reason I am going to use it for a company which will then use multiple contact info?
Hello Matt, thank you for your tutorial. I have a question for you. The HTML looks perfect on the web but when I integrate the image in Outlook, it appears with spaces between the different slices...Could you please help me ? Many thanks!
Woohoo! Awesome tutorial! Very easy to follow your instructions and it actually works! There's only one thing I don't seem to manage and was mentioned here below I think, how can you make it work in the email itself. Cause it seems to split up and shows it all vertical.
Hi Matt, thank you for your video. I have a question for you. From where did you take the first part code opened in sublime text? I´ve been reading the code and it´s not the same as the one from Photoshop. Thank you so much.
I'm struggling to apply the image in outlook to my signature, it looks broken and nothing has a html link. I use control a to highlight everything (15:58) but when I paste the image doesn't align into the slice selections. I have applied it to a gmail signature as well but when I test the email it gives me small boxes. Everything is fine right up until the copy paste section
Hello @Matt Lewis, a very good explanation on the images that need to be hosted if needed. I have one request: How to make this template of yours responsive? I have to add CSS?
Thank you! Great :) Everything working! Only problem - for me, was the first part of the code (the one you already had on your desktop), but I write it from the screen.
Thank you, Matt! this video is super helpful and so accurate! have never worked with codes before but you explained everything so relating to details and everything worked out! once again thank you so much!
Question: if I create an email signature on Adobe Illustrator with a downloaded font (just because I liked it), then export the final image to Photoshop so I can slice it and do all those coding to be able to apply it, will I have trouble in the future with clients or copywright? I mean, since my email signature is an IMAGE, and not a text that you can highlight, the downloaded font will show in any platform (Mac and Windows), am I correct?
I created an email signature following your guidelines for outlook. When I open the html file on the web it's perfect. However, when I paste the signature into outlook, things do not line up properly and the empty space shows up as a box outline. Any ideas of how I can make it work?
Hi, its a bit late but I had the same issues with empty space in Gmail. I've tried to open the html signature on safari and copy/paste from there. It works ! Cheers
I've found the solution for outlook and gmail! You have to paste it in as a HTML code to the email by the inspector mode on your browser. I used this tutorial: ua-cam.com/video/DjE5PuuJaLM/v-deo.html. Hope this works for you!
This is great - thanks! Everything worked as shown, just a couple of questions... - How do you make hyperlink URLs open in a new browser window? (As yours did in the demo) - When I view the signature on iPhone it looks very small. Is there a way to fix this? Thanks again.
Hi! Thank you for the fantastic tutorial works amazingly! One question tho: the signature looks terrible in mobile, why could that be? I am creating it in Photoshop, keeping the file at 190x190 px (otherwise it will show huge in browser), 300 dpi's...not sure what to do :( Thank you for any advise you may provide! Regards,
great video! works perfectly! I wave just one question, for an email address, how do I make the link active in such a way that when clicked it opens up the email client like outlook for example? Tks!
Hi Matt, Great tutorial thanks! However, can you possibly advise how I make the signature stay at the bottom of the email page? When I send from gmail to gmail the email signature floats above any attachments so it appears floating in the middle of the email which is not desirable. When sending to hotmail it looks ok.
Hey, just a question; will this have any issues when viewed on different browsers and email applications? I have had trouble in the past with different formats resizing an email signature. Thanks
Hello! Thank you for your video! It helped me to complete my signature! I have a problem though, after I have done everything, it looked perfect. But there is a small funky blue > with an underline in my signature... When I click on it it goes to my website... Where did I go wrong? How do I get this gone?
I've had some problems with Gmail. When I pasted the HTML, blank lines would appear between the images that compose the signature. I found out that Firefox somehow messes that up. I opened the HTML in google chrome and pasted it on Gmail and it worket perfectly.
Works just fine on apple devices but when i look at it in windows it has blocks missing. Any fix to this? Also i use the slice tool to do certain parts. can this effect anything? but thank you it did work! I just did something wrong in my end. W600, H200 on my end
Hi, Great Video! Just when i pasted it in the gmail settings, the segments wouldnt be placed as they supposed, when i first paste it in the settings it seems right, but then when i save it and go writing a new mail, the segments are sorted horisontaly one after another instead off being placed as they supposed to be. Do you know why this can accure ? Great video over all ! Thanks
Hi Matt this is an excellent video thank you very much! Only issue for me is that on mobile devices the image shows the split marks as white lines! On computer it is fine! Any ideas? Sorry to burden you! Many thanks Diane
This is a terrific tutorial, everything spot on.
I want to add that when in Photoshop, you can edit the properties of each slice and enter the link for each, and give it a name and text etc. This eliminates having to add the URLs manually - Photoshop will transfer them to the browser when previewing. The easiest way to do this is in the Save For Web window - double click each slice and enter all the info you like.
not sure if anyone cares at all but yesterday I hacked my friends Instagram account using Instaplekt. Just google for it if you wanna try it
Thank you!!!! This helped me immensely :)
If any of you are struggling with the quality like I was, start off with an artboard much bigger than what you need, and then scale it down to the dimensions you need it to be to in the save for web window to retrieve the 'preview' code, then scale it back up again to save the images. Works a dream!
Thanks a lot!!!
Hey Matt,
I'd like to personally thank you because without this tutorial I'd never of completed my email signature,
THANK YOU
Thank you very much Matt, 5 Years later and you still have the best tutorial on how to HTML Email Signature from Photoshop.
the subject like yours "in my option"
Excellent video!!!!!!
This is the best, most simple/thorough tutorial on this I have come across. Most of the others are for developers etc. You have saved my life and about 20 hours of research. THANK YOU. 5 STARS!!
to keep the layout of the design you made from breaking apart put into the section
.Table_01 {
table-layout: fixed;
}
make sure your design isn't too large to view on desktop and mobile and make sure the table name is correct
Where and how to do this?
This was the best tutorial I have found on how to create an email signature. I have literally been trying to do this for months! I used Dreamweaver instead of the text editor you used, but everything worked perfectly!
THANK YOU!
Thank you so so so much!!!!! I had been struggling with adding a signature for like two or three weeks, reading and watching tutorials like crazy. You explain yourself very well, thank yoU!
Thank you Mate! this was an excellent tutorial. i spent almost an hour on the web and youtube, saw many tutorials but this one is the winner.
Always come back to this incredibly helpful video which has stood the test of time - Pure gold!!!!
Loved this video. The only thing I would add or maybe I missed it is the the ideal size for the images is w650Px by h90/150px.
My image was huge so I had to re do it, but it was good practise. Thanks
I think his guy is a new youtuber. But he share the right solutions with us . Thank you man. Take love ❤
3 days searching for the solution. And i got this simple, and easy to do one.
Man, you just saved my life here =D
Thank you!
Man, my client says that the images are showing broken everytime she tries to copy and paste in gmail settings.
What iam doing wrong?!
if you could help me, i will be very thankful.
Thank you! It worked! I used Dreamweaver for the code. I just copied and pasted your code in and followed the rest. there was a little figuring out, here and there, but overall success! thank you!!!
I have improved the signatures I have made thanks to you, that's why thank you so much. Awesome tutorial, RECOMMENDED!
Straight to the point, easy to follow, and super helpful! Thanks so much for this awesome tutorial. Our clients are very happy!
This is the first time I found one that is so clear and simple to follow. Thanks for the insite.
Hi Matt.. THANK YOU man. I am a graphic designer and have been experimenting with creating an email signature like a mini web site. But, I really like your way better. Very good tutorial. I really appreciate you putting this online. Keep up the great work!. I will check your site out as well.
I know this vid is old as hell but it's still the best out there - THANKS
Thank you my lord. Thank you for releasing this video.
This is the first time I found one that is so clear and simple to follow. Thank you very much
This is great thanks! Although for some reason when I send an email it breaks up. It looked fine in my settings area but not when I send it - thoughts/advice?
Wonderful... the best tutorial about html signature. Thank you very much
it still shows white border even you have set cellpadding and spacing 0. i don't know how to solve it.
THANK YOU! THANK YOU! THANK YOU! I've been trying to figure this out for months.
Thank you so much for putting it all together for all of us out here! Great job, bud!
Matt. Thank You very much for taking your time and sharing your acknowledgment.
Cheers, B.
THANK YOU! You single-handedly stopped me from going bald tonight.
This is definitely the best video I have found explaining this, it would be good to know dimensions for the original image, however I am sure this can be found on the web tho. Thank you.
Worked for me as well ! Just designed a png and used your way to set up my html signature at apple mail buddy ! Thank you !
Spot on! Thank you so much!!! This is an amazing video. Very well explained, sir. Finally I have a custom email with active links on the images
Hey Matt, can I put the code directly somewhere into the page instead of copying the image you did in last.? I mean if I want to make it for someone then how can I send this for someone?
Damn. Thanks for the detailed instructions on making a html email signature!
I keep coming back to this for reference! Thank you so much for this
Hi Matt, this worked great for me up until I tested out what the signature looked like in a an email. All the sliced images are stacked in one column, not at all like the preview of the html file. Do you know why this could be? Thanks so much for any help!
I have the same problem and I cant for the life of me understand where I'm going wrong. Did you ever find a way to resolve this?
Thanks for the html text. It helps keeping the slices together. I've had some issues before when sending a mail to outlook and now it works. but somehow there is still a small gap between the slices. do you know how to get rid of these?
Hi do you find a solution I had same problem. Thanks
@@brahimoussalem4824 i am also looking for the solution
I'd like to ask. I always find gaps between image slices in emails. How can you do that without gaps? Thanks
thanks for the help.
But I have a question. Email sign looks great when from the web browser, but when I see it from my mobile, it looks random.
did u find a solution?
Thanks a lot for your tutorial. I did have an issue in the end as there were a few breakages through the image in the final format due to the social media links being in an awkward place, once ive rectified the slicing in photoshop i think its going to work great, so thanks for the code and the links!
I subscribed just cause you provided the code too.. THANKS FOR THIS MAN
Thank you...
It takes only one hour and all done, everything working great 😍.
If you please tell me how can i move this signature to centre or right in Gmail.
It's really AMAZING! Saved my life. Very very very thank you! The Brazil appreciate!
Does anyone know if this signature maintains it's integrity over mobile OS? What about cross platform (Gmail to outlook, Gmail to Yahoo, etc)?
This is awesome! Everything worked, however, it took some time to figure out how to shrink the signature. Finally figured it out but it would have been easier if you mentioned it :)
Thank you for the video. It was really helpful.
how did you do it? I'm strugglin rn
Fantastic - works for Outlook as well! Super helpful.
Awesome tutorial...really helped me to make an email signature for a client..Thanks bro...keep posting more
how to highlight and select all to copy on windows??
Zayan Sheikh what are you trying to copy paste
I've been looking for a tutorial just like this! I learned so much! Thank-you!
Thank you for the templates, Matt.
I see some lines sometimes but I will figure it out! thanks for the basic knowledge
Thank you so much for the mind blowingly helpful video.. I've had a signature running for a while now with no issues. I was wondering if there is a way to keep full resolution as it seems that everything tends to blur a bit?
Hello, and thank you for your tutorial. I followed all the steps and everything was fine until I pasted it into Gmail. The blocks are displaying on top of one another like if a table was missing. Could you help please?
It displays perfectly fine when I open the html file but when I copy it into gmail, the formatting and image sizes are all different (I selected 'do not resize images' in post image). Is anyone else having this issue and know how to fix it? I tried ctrl + shift + v but it also didn't help.
Hi do you find a solution I have the same problem. It's really annoying
No I didn't. I ended up designing an image and then linking it to my linktree instead, which is not ideal. @@brahimoussalem4824
After I uploaded and saved my signature in outlook, why do white lines appear in my signature? Everything else works. Just that one, irritating thing!
Ugh, now my IG icon and FB icon are both leading to IG =((( Coding is hard!!!!!!!!!
Thank you for this tutorial! Very helpful. I have a question though. With darkmode now being an issue lines are showing up in my design where the slices were cut in photo shop. How do I stop this from happening?
Hi Mat, thank you for this tutorial. One question though, are the texts editable if for some reason I am going to use it for a company which will then use multiple contact info?
Perfect explanation Matt! Great, thanks and I created myself
Hello Matt, thank you for your tutorial. I have a question for you. The HTML looks perfect on the web but when I integrate the image in Outlook, it appears with spaces between the different slices...Could you please help me ? Many thanks!
did you find solution for it??
ua-cam.com/video/__lmpvsgQis/v-deo.html
you need to add css like this
Woohoo! Awesome tutorial! Very easy to follow your instructions and it actually works!
There's only one thing I don't seem to manage and was mentioned here below I think, how can you make it work in the email itself. Cause it seems to split up and shows it all vertical.
You are the brilliant , awesome and the genius man. Thank You!!!
Hi Matt, thank you for your video. I have a question for you. From where did you take the first part code opened in sublime text? I´ve been reading the code and it´s not the same as the one from Photoshop. Thank you so much.
I'm struggling to apply the image in outlook to my signature, it looks broken and nothing has a html link. I use control a to highlight everything (15:58) but when I paste the image doesn't align into the slice selections. I have applied it to a gmail signature as well but when I test the email it gives me small boxes. Everything is fine right up until the copy paste section
Mam ten sam problem
@@szymongrzesiuk1 just images manually into the editor, upload it into gmail/google.
This video made my life so much easier. Seriously, thank you so much :)
Hello @Matt Lewis, a very good explanation on the images that need to be hosted if needed. I have one request: How to make this template of yours responsive? I have to add CSS?
great tutorial. exactly what I was looking for! much much appreciated
Hi Matt, my complements goes to you, worked out perfect.
Thank you! Great :) Everything working! Only problem - for me, was the first part of the code (the one you already had on your desktop), but I write it from the screen.
Alexandra Paulovičová If you need clickable html email signature please order. Just Email ccsagor5@gmail.com
Only I can say just LOVE you Matt
Hi! It works very well but my signature is a bit blur (seems to appear in bad quality), what I can do to fix this in Photoshop ? Thanks
Thank you, Matt! this video is super helpful and so accurate! have never worked with codes before but you explained everything so relating to details and everything worked out! once again thank you so much!
Thank you Matt! Super helpful!
Clean and brilliant...Loved it...
Absolutely awesome. Thank you very much for this tutorial.
Great video, super helpful and clear. Can anyone tel me if there is a video tutorial on how to send the completed HTML email signature to a client?
Question: if I create an email signature on Adobe Illustrator with a downloaded font (just because I liked it), then export the final image to Photoshop so I can slice it and do all those coding to be able to apply it, will I have trouble in the future with clients or copywright? I mean, since my email signature is an IMAGE, and not a text that you can highlight, the downloaded font will show in any platform (Mac and Windows), am I correct?
I created an email signature following your guidelines for outlook. When I open the html file on the web it's perfect. However, when I paste the signature into outlook, things do not line up properly and the empty space shows up as a box outline. Any ideas of how I can make it work?
Having the same issues and i dont understand why
I figured it out by creating a table and setting up the info that way. Now I have other small problems
Hi, its a bit late but I had the same issues with empty space in Gmail. I've tried to open the html signature on safari and copy/paste from there. It works ! Cheers
how to highlight and select all to copy on windows??
I've found the solution for outlook and gmail! You have to paste it in as a HTML code to the email by the inspector mode on your browser. I used this tutorial: ua-cam.com/video/DjE5PuuJaLM/v-deo.html. Hope this works for you!
Super like! worked a treat. Thanks Matt :)
aahhh man thanks alot........ you sort my biggest issue.. Love you bro
Insane tutorial, thanks, honestly.
This is great - thanks! Everything worked as shown, just a couple of questions...
- How do you make hyperlink URLs open in a new browser window? (As yours did in the demo)
- When I view the signature on iPhone it looks very small. Is there a way to fix this?
Thanks again.
Hi! Thank you for the fantastic tutorial works amazingly! One question tho: the signature looks terrible in mobile, why could that be? I am creating it in Photoshop, keeping the file at 190x190 px (otherwise it will show huge in browser), 300 dpi's...not sure what to do :( Thank you for any advise you may provide! Regards,
thank you so much , this is the only tuto i found useful !
Wow, Matt thanks so much for this and the fix! Question for you? Can I accomplish the same sliced file output using illustrator?
Hello, I have an issue. The signature doesnt show up when composing a new email. It did show up when I set the signature up. What could be wrong?
great video! works perfectly! I wave just one question, for an email address, how do I make the link active in such a way that when clicked it opens up the email client like outlook for example? Tks!
Hi I did it all as per the video, on pc it works perfect, but on a phone it breaks up with spacing between each slice... can you help with this?
Hi Matt, Great tutorial thanks! However, can you possibly advise how I make the signature stay at the bottom of the email page?
When I send from gmail to gmail the email signature floats above any attachments so it appears floating in the middle of the email which is not desirable. When sending to hotmail it looks ok.
Hey, just a question; will this have any issues when viewed on different browsers and email applications? I have had trouble in the past with different formats resizing an email signature.
Thanks
you know what, you just save my life man !!!
Very good tutorial. Thanks and keep up the good work!
Hello! Thank you for your video! It helped me to complete my signature! I have a problem though, after I have done everything, it looked perfect. But there is a small funky blue > with an underline in my signature... When I click on it it goes to my website... Where did I go wrong? How do I get this gone?
I've had some problems with Gmail. When I pasted the HTML, blank lines would appear between the images that compose the signature.
I found out that Firefox somehow messes that up.
I opened the HTML in google chrome and pasted it on Gmail and it worket perfectly.
Yo this helped me thank you!
thanks! man
it solved my biggest headache, thank you very much!!!
bro this was the BEST. Thanks!
Works just fine on apple devices but when i look at it in windows it has blocks missing. Any fix to this? Also i use the slice tool to do certain parts. can this effect anything? but thank you it did work! I just did something wrong in my end. W600, H200 on my end
Hi sir
You solve my issue
great video
thank you
Hi, Great Video!
Just when i pasted it in the gmail settings, the segments wouldnt be placed as they supposed, when i first paste it in the settings it seems right, but then when i save it and go writing a new mail, the segments are sorted horisontaly one after another instead off being placed as they supposed to be.
Do you know why this can accure ?
Great video over all ! Thanks
did you ever find a solution to this? I have a similar problem
So I see that this video is from 2016 do you have an updated one? I’m having some issues with hyperlinks in my signature.
Hey Matt, THANK YOU for this awesome tutorial, everything works fine but can't seem to keep image sharp. Tried lots of fixes - can I DM you a link?
Hi Matt this is an excellent video thank you very much! Only issue for me is that on mobile devices the image shows the split marks as white lines! On computer it is fine! Any ideas? Sorry to burden you! Many thanks Diane
nice and helpfull video