HTML Email Signature Tutorial (2023 Novice Tutorial)
ฝัง
- เผยแพร่เมื่อ 13 ก.ค. 2024
- Looking to create a HTML Email Signature without coding? In this step by step email signature tutorial Im going to show you how you can quickly turn your email signature design into a HTML email signature you can apply to your email with clickable links.
Download the code seen in my video
► martyenglander.com/photoshop-...
Having issues with blank images?
► • Upload Your Email Sign...
Join My Facebook Group For Email Signature Help ➡➡ groups/theemailsignaturecrew/
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
⭐My Freebies⭐
7 Step Ranking Guide [Free] ► martyenglander.com/
Join my FB Group ► martyenglander.com/private-group
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
⭐ Tools I Use Everyday⭐
A.I Copywriter ► trialjarvis.com
Dominate TH-cam & Google Rankings ► martyenglander.com/yive-review/
Top Keyword Tool ► grabvidely.com/
Text to Speech ► martyenglander.com/speechelo-...
Excellent Keyword Spinner ► martyenglander.com/text-spinner
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
⭐My Recommended Videos [MUST WATCH]⭐
How to Instantly Rank ► • Video Marketing Blaste...
Get More TH-cam Views ► • Easy Way To Optimise Y...
Generate Unlimited Voice Overs► • Speechelo Review & Wal...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🏆 My Goal 🏆
My goal is to share practical, time saving, and insightful strategies to help automate your business online and earn a passive income using cost effective softwares to free up your work life.
Going through the trenches of online marketing can be a truly dark place to be. Hopefully, my videos will shine bright through the darkness and guide you to where you want to be.
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
📱 CONNECT WITH ME 📱
Facebook ► / martyenglanderreviews
TikTok ► / mronlinereviewer
Website ► martyenglander.com/contact/
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
👨 About Me 👨
My name is Marty Englander and on Marty Englander channel I show you how to use softwares to automate your business, free up your work life, make money online, and give you a practical expectation of what it takes to grow a business online..
🔔Subscribe! 🔔
Subscribe for software reviews, clever automation hacks, and how I earn money online.
Subscribe ► martyenglander.com/SubscribeYT
Contact ► hello@martyenglander.com
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Affiliate Disclaimer: While we receive affiliate compensation for reviews / promotions on this page, we always offer honest opinion, relevant experiences and genuine views related to the product or service itself. Our goal is to help you make the best purchasing decisions, however, the views and opinions expressed are ours only. As always you should do your own due diligence to verify any claims, results and statistics before making any kind of purchase. Clicking links or purchasing products recommended on this page may generate income for this website from affiliate commissions and you should assume we are compensated for any purchases you make.
![แขกคนแรกร้านแจ๊ส [ซี - เอมมี่] | iJazzKhunJang](http://i.ytimg.com/vi/XP6C9kulFfc/mqdefault.jpg)
Much better than most I've seen on here. Good job explaining it in a simple manner!
No problem Allen. Glad you enjoyed.
Marty, I followed your instructions exactly but everyone I email keeps telling me that my email signature has A British accent now?🤣
Great tutorial, cheers! 👍
LOL!
No problem 🤜🤛
Great Tutorial Sir! Much appreciated - Guys like you make the world a great place by sharing knowledge like this!!
Glad you found it useful Gavin!
Thanks Marty, you made this super simple! I subbed
Thanks for the support!
THANKYOU SO SO SO SO MUCH!!!!
You're welcome so so so so much =)
such a great tutorial, easy to follow, you described it very well and thoroughly thank you so much!
Glad it helped 😊
you are the best! following this to a T has helped so much, you're a life saver :D
You're welcome!
Hey, I subscribed !!! Thanks man from another part of the world>>>
Thanks for subscribing! Nice to connect :)
This is awesome - thank you so much!
You're very welcome!
This was super helpful. Thank you so much.
Glad you found it helpful, no problem at all. If you've not subbed yet please do for more helpful videos :)
Hi Marty, great video thank you. Cheers
Hey Conrad, glad you found the video useful.
Sorry for the slow reply, did you sort your issue out?
Thanks a lot, that was very helpful!
Np🤜🤛
Great tutorial man 👏👏👏 exactly what I was looking for. 🤘😊🤘 Hope to see a video about *How to make a email template?* 😊
Thanks Rik! Glad you have found this helpful. Building an HTML template is something on my to do list. Make sure you subscribe so you will be notified when I do this :) Subscriber here: goo.gl/MJXPNp
That was very helpful for someone like me who has no clue what she's doing! Definitely read the instructions on the site while you do this, I was lost a bit. Thank you so much for this!
No problem! Glad it helped 🤜🤛
@@MartyEnglander I thought this was so great!! took me forever LOL but thank you! I have a question if you don't mind. I for some reason cannot get my Gmail to use this, it loads blank. SO FRUSTRATING! It works for my work Outlook Email just fine. Have you ever ran into why Gmail wouldn't work?
@@montsergirl do you have HTML box ticked in Gmail?
you have done a great job, i have never seen such a easy and complete video. 5 stars for you. thanks
thanks glad you think so.
People like you save the world!! Thank you so much for this.
Youre welcome
Super simple and helpful dude! Thanks
No problem
An Awesome teacher! Love the way you explained everything. May god bless you.
Thanks Bilal, all the best 🙂
@@MartyEnglander i have created my email signature as same as guided by you but when i opened my email signature in Outlook all the clickable options are gone away means not work ? Please tell me what should i do..
@@billaaall did you upload the signature to your hosting?
@@MartyEnglander which hosting?
@@billaaall the email signature needs to be uploaded onto your hosting and then applied to your email .
This is a very clear video. I did it very well. Thanks for your support.
No problem! Glad I could help
Super helpful, thanks!
No problem! Glad you found it helpful :)
@@MartyEnglander I've actually just realised the last step doesn't work for me. How can I get the signature into my email? The copy and paste all, doesn't seem to work. Could it be because the images are hosted locally?
@@CairoHamilton94 Spot on. You need upload the images to hosting. If you've not got yet here is some cheap hosting partners.hostgator.com/7BkZ5
Thank you so much!!
You're welcome!
Hey just followed your advice and it looks to be working, gotta get the ok from the boss that’s it’s working but thank you, these videos helped so much and I really appreciate it
No problem
Great vid! Helped a lot!
Glad to hear it!
great job, thank you
Thank you too!
This is sooo helpful
Glad!
how awesome, thank you so much!
No problem
This is a brilliant video mate, thanks a lot! And nice Sir Name by the way, Mr. Englander! :D
Thanks for the feedback. Haha thanks.
Great. Thank you very much! I appreciate it the time you took, to share it via TH-cam.
You're welcome
Good man!
Thanks!
Oh wauw!! Thank you very much! You make my day 😎
Have one question.. I can see the images in the live preview in brackets, but not in my e-mail, for example. Do you know how I solve that?
have you uploaded your files to your hosting?
amazing work
Thank you! Cheers!
you are a great man sir your teaching method is very simple with clear concept. Thank you very much
You are most welcome
thanks a lot,you saved me...
Glad I helped :) Dont forget to subscribe to my channel for more helpful videos like this goo.gl/MJXPNp
@@MartyEnglander you should make and the other part of the tutorial.gmail and hotmail is a nightmare my signature cannot be reproduced in the way i want them ,some parts are above the other,they should be below lol. it is in the way i want them in browser but in gmail hotmail signature area is disaster.perhaps i created a complicated signature
Very nice. It is helpful. Thanks
You are most welcome
Thanks a lot for this video! Abs from Brazil!
Thank you for watching
THANK YOU SO MUCH!! 😭
You're welcome
Best mail signature tutorial👍 Thanks
Glad you enjoyed
Great tutorial sir.Thank you so much
Np
What a champ!
You're the champ!
Thank you so much for this
You're so welcome!
Marty,
One awesome tutorial!
I just have a couple of questions if you don't mind:
1. Could I use the same method for gifs? I animate logos for clients instead of having their profile picture.
2. What would be the best way to send the signature to the client? Should I need to send them the entire folder or would the link suffice?
Cheers once again.
Glad you enjoyed
Not sure - would not recommend it. Email providers are getting seriously strict with email sending a so your emails may end up in spam folder.
Up to you regarding how you send it them. I used to upload the email signature onto hosting and send them he URL
Thank you very much
Any time
Thank you for this video. I just have one question. My images are hosted and everything looks right, but when I copy and paste it into my email clients everything breaks up and goes under each other sort of like a list. Can you maybe help?
You may have some unwanted code from browser extensions being carried over when you copy and paste the signature.
Try disabling all your browser extensions and copy and paste into your email
Thank you for making this tutorial. I do have a question though, with this slicing method it seems like the hyperlinks you create are essentially just boxes around areas of the signature. This means before someone even "touches" an icon or something with their mouse, they may already click and be redirected. Is there a more elegant solution that only creates hyperlinks around the text or icons themselves, rather than invisible boxes? Many thanks
Hello, the best way is to ensure people dont click "by accident" so to speak is to make the slices as close to the "clickable" areas as possible to remove any dead space.
Without further custom coding, this is the best option I've found.
Hi Marty,
I would just like to say thank for the help with this. This tutorial is really great for us beginners or start out companies.
There is just one this that I would just to ask, All works great when using outlook although when I send a mail to a gmail or a yahoo account there are gaps presented in the signature.
Please Please can you help me sort out this problem?
Kind Regards
Usually happens when signature has not been sliced properly OR you have copied unwanted code when copying and pasting.
Best to try from a browser with zero extensions before copying and pasting.
However, this is a growing issue im seeing amongst people. If all else fails it's likely an outlook issue formatting the signature when you add it.
It might be best to redesign the signature using a white background to manipulate the lines. I've yet to find a solution for this new issue inside outlook.
Thank you for this! What size do you recommend for the email signature?
Np it depends on your style signature. I tend to do 500px*300px but as long as it's not too large you'd be good with any size really.
Thank you :)
No problem 😊
Thanks
No problem
Need Help!!!
I created A Email signature for me with link by following this video but how can i attach this email signature with link in my gmail email signature?
Copy and paste the signature from your hosting into the html email signature settings of your Gmail.
Hi! Thank you for the fantastic tutorial works amazingly (after cracking the host the images thing ^^) One last question: 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, trust me tried it already!), 300 dpi's...not sure what to do :( Thank you for any advise you may provide! Regards,
Have you tried changing the DPI to 72?
Is there a way to output text instead of images? That way, the client doesn't need to open up photoshop each time there's a text change...it could also be useful for reusing the same template across the company, and just replacing names, numbers, etc. Is it as simple as replacing the tag with text, or would that mess up the layout?
Not that I know of.
It will mess the layout up.
Hey Marty, great tutorial. I did the layout as you explained and sent myself a test to my gmail. In desktop it looks fine but for mobile there are vertical spaces between each image. This is more readily apparent in dark mode. I read some of the previous comments and saw they were having some of the same issues but couldn't find the fix.
It's often to do with copying and pasting unwanted code. Try disabling all your browser extensions when copying and pasting. Hope that helps.
@@MartyEnglander can you make a video on how to make this responsive? Please please please🥺
@@animics.10 hi. Did you find a solution
Nope
Hey Marty! Thank you for the easy to follow tutorial! I have just one problem... The signature i create causes my emails to go into others spam folders. Any idea why and how to fix that problem?
Hey Jake, glad you enjoyed!
That's a tricky one as it could be anything to do with:
- Size of your signature
- links within your signature
- reputation of your email/email provider
I would recommend giving a youtube search for "get emails into inbox folder"
I do know 2020 is going to be an even tricker year for email deliverability.
Good Luck!
Cool Video! Helped alot. Could you please make a tutorial on how to upload this HTML Signature to a Server from your Provider and use it as Signature on other Devices like Iphone or Ipad. Thanks.
Hey Alex I cover this in my course found in the description
Hey just uploaded a new video walking you through the process
► th-cam.com/video/8qyY5yugysk/w-d-xo.html
Thanks for the great tutorial Marty. I successfully followed your instructions in the creation of the email signature, but I'm having trouble uploading it to the email. I see you are recommending Netlify to host the email signature but I am having trouble working out the steps to properly host the signature. I think a video explaining those steps would be really helpful. Thanks!
Also one more question regarding hosting, if I have access to the mail client can I bypass using the hosting all together and copy paste the email signature straight into say Gmail. If so I also have a problem there where when I copy paste it into Gmail the squares appears depicting the sections of the email but the images themselves don't appear. I have tried copy pasting into Word and have no issues, it is just pasting it into signature section of Gmail.
Hi Joe! Thanks for the feedback =) Alot of people have asked for tutorial showing how to upload into hosting etc... It's on my "to do" list!
@@joeyoung7446 Not that I know of. The email signature needs to be hosted somewhere and then copied and pasted.
To upload files onto netlify or hosting of your choice.
Go to the URL netlify provide you with and then highlight everything on the screen and copy.
Head over to your email signature and make sure (If your using gmail) that you have html enabled. And then paste the signature into the box.
@@MartyEnglander Thanks for getting back to me Marty. I ended up using postimages.org/ which worked a treat, and you don't even need to make an account.
@@MartyEnglander That would be great as I'm struggling how to paste the image into my signature settings in Thunderbird...
Thanks Marty! Great tutorial. Worked almost perfectly, except that my signature is not showing on mobile.. I hosted it in netlify as you instructed, and pasted the html in gmail. On desktop view works like a charm, but the images don't show in mobile (links do show up). What can I do?
Hi David, Glad the tutorial has helped you :)
I've never come across this particular problem.
Things I would double check.
1) Send an email with the email signature attached to another computer or friends email. This will see if the image urls are pointing to the right places.
2) What is the size of the images? If they are really large than it may take awhile for the email browsers to download the information so perhaps compress the images.
Let me know how it goes :)
Marty, great explanation
Can we add the social media links the same way you add to phone# or email?
yes just make sureto include https
when i typed images/" into the code, it doesn't pull up the files i saved. just some random svg links. what am i doing wrong? i saved the images and html file in the same folder.
@Marty, When I type "images" no dropdown of images appear. I've tried manually entering the names, and even the full filepaths to no avail. please advise.
Is the name of your folder containing your images called "images"?
@@MartyEnglander yes
i have the same issue
@@MartyEnglander Hi Marty, I am first of all experiencing that even if I save it at .jpg the pictures in images save as .png still. I believe that might be the issue why I don't see a full dropdown of all images, but rather merely the first word of the name of all pictures in images i.e. the first pictures is called -> SIGNATURE---NEW_0.2_01 but the dropdown after typing /images only shows SIGNATURE....Can you pls help me. Thanks :)
Great video man. Will the email signature change is size to the prospective screen size??
Thanks! It should do.
Marty, brilliant tutorial! Quick question; can you host the image on a business server, and have a desktop email client (Outlook 365) source the image from the server? Or does the image have to be hosted online? Thanks! ✌️
without hosting online user cant see your images, so ya it is needed
What Mahbub says.
@@MartyEnglander what do I do if I am designing this for a Client. Do I need to send them the images? Not sure how that works...
You or your client would need to upload the images to a hosting plan. I've created a video tutorial found in the pinned comment/description above ✌️
This video is amazing. Everytime I have to update my signature I come back to it. One question though - is there a way to make it responsive? Like when the phone is flipped on its side, it wont resize. Or when the settings are on dark vs light (ie white bg vs black). Thank you so much.
Thanks Marty, that was amazing. Just wondering, how do I get this signature to work on mobile?
Glad you enjoyed.
You should be able to access email signature settings in your phone app.
Hope this helps.
Could you clarify country code number part?
Should I write + and country code before the phone number, or 00?
Hi Marthy, thank you so much for the great tutorial! I've got through it and created email signature but I have one question. If I want the address on signature to pop up in google map when clicked, what do I write between ?
It would be greatly appreciated to know what code would lead the address to map.
Hi yelim,
If you go to Google maps and enter the address and search. Take the URL from Google maps and paste it into the code.
Hope that helps
@@MartyEnglanderOh I will try! Thank you for helping me out :)
@@byrimy NP
Nice tutorials informative and I’ve one questions. How can we make these email signatures responsive without coding is there any tool available ?
Hey Asad, thanks for the message. The images should auto shrink
Great video thanks!.... I've followed all the steps, you mentioned just copying it from the browser and pasting it into your signature settings. This is for a client, so do I just send them the code I've copied from the browser? or does it need to be hosted somewhere? thanks
this should be hosting. I tend to use netlify.com as its free. If you upload the signature on the link above and then send them the url. They will be able to highlight the signature and paste it into their email signature box.
Glad you found this helpful and dont forget to subscribe ;) goo.gl/MJXPNp
@@MartyEnglander Thanks once again, netlify and your advice on using it saved me! greatly appreciated
@@pjdexter168 No problem! Glad I could help :)
Thanks for this Marty. I'm getting stuck with this and I was hoping you could help. I am on Mac. I have downloaded brackets and followed everything, but the thing I'm finding is that when you go to the code and refresh it to see the changes nothing is working. Also, there is not a HTML file stored anywhere through this process, so I'm just wondering at what point you created the HTML file?
Hello, the HTML file should be created before hand call it index.html
Also, make sure you save the file with every change you make to it to see the new versions of it
At around 7:20, I can't understand once you highlight the ? and numbers what you press after that? so that you can insert the images. Can anyone help? thank you!
Hi Kimberley,
You should press backspace to delete the characters.
Hey Marty, Great video! I will 100% Follow you. Are there any ways to increase the resolution of the signature. Mine is quite low. Thanks
It could be a few things - most common is one of the two:
1) Your browser is zoomed in past 100%
2) Photoshop settings are not correct
@@MartyEnglander Thanks. I have build another for a client who is using Outlook, Any tricks at all? or should I just shy away from Outlook? Thanks
Hey! Great tutorial! I followed the steps and was able to create an HTML file with all photos and links. The only issue I am having is with sizing. when i put the html file into outlook the size of my signature is so large it looks unprofessional. Any idea on how to scale the signature? Appreciate it help!
Hi, Perhaps recreate the email signature into a smaller canvas?
Hello Marty, thanks much for this awesome work you are doing. I need help with step 13, where do I
get the code again?
In the description
Hi Marty. I'm really struggling with getting my images to show up. I'm working on a Mac and except for using "command" instead of "control" everything else seems to be ok. I notice on my Brackets screen it's white instead of black and I can't open a line of code the way you can in the video. It doesn't seem to grab the whole line. Additionally, when I tried typing "Images/" I did not get a pulldown menu of optional images. I got around that by inserting the full path for each image, and now they do show up in Brackets when I hover over each line of code, but when I do the live preview they are not there. Here is a line of code replaced with one of my images:
I have the images saved on a desktop folder. When I saved them with the "save for web legacy" option in Photoshop I selected PNG but they saved as GIF files. I tried exporting one of them to a PNG from the folder where they are and then replacing the line of code with that link but it still doesn't work. I thought maybe html might not like GIF. I've tried all I know to do. Do they need to be on Dropbox or some other web source? I'm in the U.S. on Eastern Time, FYI, in case I don't respond right away.
Thanks for any help you may provide.
Hey LeAnne,
First - dont let things like colour of brackets and pulldown menu stop you from moving forward. These things are not important.
Second - As long as you highlight the exact areas I have in the video - all you need to do is replace the highlighted area with the name of the image which should be "images/1" - If you've not followed the video in terms of image names + image folder location, it's not going to connect properly without changing the code.
Third - Can't help you with the .gif problem, im sure you'll find plenty of tutorials regarding that issue.
Forth - you'll need to upload the signature to your hosting (dropbox will not work, they block access) - Here is a link to some discounted hosting bit.ly/31rHQeQ
Side notes: I can see by the names of your image from the HTML posted above that you'venot followed the tutorial exactly with the naming of the images. I'd recommend for your first signature to follow everything to the "T". Once you're comfortable with creating them, that's when you should start changing names etc. Also, make sure the location of your image folder is the same as my video otherwise the code im showing in the video wont properly connect.
M
@@MartyEnglander I actually did follow your instructions to a "t" originally. The file paths you see there were my way of trying to troubleshoot around the fact that it wasn't pulling anything from "Images 1." I'm not able to access anything from the original code, which appears exactly as yours does before I tried finding a way around it when it wasn't working. Thanks for the reply.
Hey, Marty! First of all, Many thanks!!!! It works like a charm.... on the computer! On mobile, it shows too small and with a huge space between the lines. Any way to fix this? Thanks a lot again! You rule!!! (by the way, the signature is 406 pixels wide)
same problem? did you find a way to fix it?
@@farazazhdari8317 same problem. On gmail app the images go all over the place. On desktop it looks ok.
Hey Pedro, Im not sure why it's appearing like that on your mobile. The signature should be responsive. Perhaps you have copied some unwanted hidden code from a browser extension which is making it look discombobulated?
@@MartyEnglander I also have this issue. On mobile it looks like the signature is trying to resize itself to fit the screen? Work on computer, works on ipad but on my phone slices get realigned in a way i don't want it to. Is there a code for grouping all slices or not allowing the slices to be realigned?
i followed your instructions but i get a spacing between my images that i cant get rid off. Any tips on what it might be?
Hey Marty, your video encouraged me to do it myself. I created the signature via Affinity meanwhile. But in the actual Affinity Version, I cannot find the option to save it for weg. I made the slices via the persona tool. But how can I safe m file for web now, to get the preview with the codes? I would be so glad for help :(
Sorry Chante, I've never use that software. I cant advise. Perhaps a TH-cam search might provide a possible answer.
Hey there! very nice tutorial, I have litle experience with coding and I've come across a little issue. First of, I dont need to slice my signature bc my clients doesn't want any links in the image and so I tried to skip that part. I pasted the next code into brackets just like you said:
Then I saved the image as "1" (I saved it some place else, not in the "signature folder")
But this:
18) From the “?” in the code, delete all the way until the last digit.
19) Replace the img src=”” code with your images
doesnt make much sense since I don't have that in my code... so what should I put instead of "FIRMA-TAMANO-CORRECTO.gif"? I tried "images/2.gif" didn't work, then I tried "nameofFolderwhereIsavedit/1,gif" didn't work either, when I refresh my page it shows blank.
One last thing: supposedly I don't have ALL the license to use the typography used in the signature and Illustrator warns me when I save it. ALSO yes, I'm using illustrator but the SAVE FOR WEB option is exactly the same as for Photoshop.
ANY IDEAS on what im doing wrong? THANKSSSS
Hi Rebeca,
The only reason why we would slice the images is If you want to make certain parts clickable.
If you don't need the email signature to be sliced you can place the whole image directly into your email signature box within your email provider.
If you decide you do want to make the email signature clickable on certain parts I would recommend watching the full duration of the vide and replicating exactly as I do
Thank you @@MartyEnglander ! The reason I want to have my signature in html is because if I add it directly as a png or jpeg to my email it will appear blurry or " low quality" no matter how I save it, I see there are some "signature providers" online that convert your final signature to html so that you can paste it into your email, the thing with them is you can only use their templates and those designs just don't work for my client :(
@@becanava1054 this may seem like an odd question but when you apply the email signature in your email provider is your browser zoomed in?
Marty Englander not at all actually my client can also see that the quality is odd In her computer. I read somewhere that the solution is converting it to html and when I saw that email signature providers apply that process I understood why :(
Hello, this looks perfect on Apple Mail but when I send it to myself through Apple Mail and then open it on Gmail, all the sliced images shift apart a little bit making them not align to each other anymore. Anyway to fix this? Thanks!
Hi Joon, when this happens it usually means either of these two things:
1) When you have highlighted the email signature you've copied some unwanted "hidden" code. Try deactivating any extensions in your browser. Then copy and paste the signature.
2) You've left gaps when slicing the signature.
Thank you for the great tutorial. I managed to make a nice signature. But how do I get this into my mail program? What do I do with the image folder and the index.html file? I am using Thunderbird and Outlouk
Hi Maya, glad you found the video helpful. You will need to upload the email signature to your hosting. If you do not have hosting here is Cheap Hosting ➡➡ bit.ly/2Mfcx41
Once uploaded you will then need to copy and paste it into your email signature setting box.
BTW my new course will be launched soon th-cam.com/video/oacQPulUuJY/w-d-xo.html
Brilliant video! I've managed to get it to work, but for some reason the whole signature is slightly blurry when it's open in the html and when I paste it into my signature - any suggestions? I designed it in photoshop with a vector logo and text boxes in photoshop so not sure why this is happening - I've tried it at various sizes and the problem is the same in all sizes!
Hey Maddie,
Glad this video is of help. This was an issue I had a for awhile on one of my monitors. Turned out the issue was due to my browser being zoomed in 😅 perhaps this is the same for you?
Hi, in Brackets when looking up the images and replacing the code (7.29 in the video) mine doesnt seem to "find" the images as your does which gives you the drop drop down? it may be that i have saved the files in different locations or i have missed a step but i also dont know how you got your browser version up that you refresh once you have changed the code to point to the images. hope this makes sense - i am totally new to this!
Hi, don't worry about the drop down. It's not needed. You can click the little lighting icon in the right side bar or you can open the index.html file by double clicking it.
Thanks for your tutorial.
Where is that code which we have to paste in the bracket?
Woops! Just tided my description and forgot to put the link back inside.
Here you go: martyenglander.com/photoshop-design-html-email-signature-2019-novice-tutorial/
Hi Marty!
I started creating my signature in photoshop but the lettering and images are blurry. I have the doc set at 500px x 300 px at 600 dpi. My lettering can't be bigger than 3 pt or else it won't fit on the page. Any suggestions?
This might sound odd but is your browser zoomed in?
Marty, I copy and pasted it like you said at the end but all of the images appeared to be unlinked. I saved the code in bracket and it was appearing when I previewed it in the index, so I'm not sure what's up.
Hi Dylan,
Have you uploaded your signature to your hosting before applying it to your email?
th-cam.com/video/8qyY5yugysk/w-d-xo.html
Hi, when I click export as legacy and click preview... it says safari can't open that page... I have good internet connection. Would very much appreciate help. thanks
Im not sure :/
I found your video really helpful, but when I copied the image into my email it was in all the sections that I cut it into in Photoshop.
Same error with me when I share it. It doesn't show images
Did you upload to your hosting first?
@@MartyEnglander no but all the photos are there, do I need to upload to hosting to see if it works?
@@ailsaedwards458 it needs to be uploaded to hosting for it to work. No way around it.
Hi Marty, thank you so much for this video. How would I link my Facebook and Twitter page using brackets
Hello, no problem. The same way as you do for your website :)
Hi, thanks for the tutorial. Everything is fine but when openning a test email on iphone outlook app (dark theme), it is being sepparated, like there are black borders. Do you think i did something wrong or it is just from the outlook app on dark theme ?
dark theme
Great video! Thanks so much, how would you give the end results to a client? Could you just copy and paste it in a mail and they repaste it in their signature ? Or how would that work?
Hello, you'll need to upload to your hosting and send the URL for them to copy/paste.
Hello Marty.
I've attempted your method on several different PCs.
My index.html page just wont refresh to show me the elements of the image.
On brackets when I hover over the line of code pertaining to the slice I do see a preview.
Would you kindly help me please? Thanks
Might be a silly question but did you save the document before refreshing the index file?
Hi Marty,
I have done everything right in this video (minus the hyperlinks as they're not needed). The only problem I have is when I open index.html on chrome and select all and copy it and then go to my email signature on Mac's mail app to paste it, it comes up blank. I have seen other videos where people copy it from Chrome and paste it with the images all popping up. I'm not sure how to combat this issue. (All images appear on Chrome but won't paste into signature on mac mail app or Gmail settings etc.)
Thanks.
Hi, it sounds like you've not uploaded your files onto your hosting. If you upload them and then try copying and pasting that should sort your issue.
I cover this very early on in my step by step email signature course showing every step from design to uploading onto hosting + common issues and solutions etc... and how to create a business/find customers for email signatures.
I'm currently running a 40% discount for the next 48 hours on the course in case you're interested.
www.udemy.com/course/photoshop-design-into-an-html-email-signature-2019-novice/?couponCode=FLASHSALE40OFF
If im making the sig for someone to use, do i have to share with them both the html file and images file?
The signature needs to be hosted somewhere in order for it to work. You can share the URL of where it's hosted so they can copy and paste the visual side of it, however, if they no how to inspect the source code they will be able to see all the code and if they can use the dev console, will be able to see all the images.
Hi Marty,
Thanks a lot for this awesome tutorial. Loved it. I have an issue. I have created one for mine, it's all okay but it's got broken. I mean my signature is not together. it's all in a portion mode!
You might have copied some unwanted code - try disabiling all your browser extensions/try in another browser as well.
Marty would you have any advice on the dimensions for an email signature? I've tried twice now and my signature is either too large or too small. Hopefully third time lucky! I have read on Google that somewhere in the region of 90-150 height and no more than 650 px width...is that right? Thanks M
I've found the best dimensions to use is 450px * 250px with a resolution of 72.
I cover this very early on in my step by step email signature course showing every step from design to uploading onto hosting + common issues and solutions etc... and how to create a business/find customers for email signatures.
I'm currently running a 40% discount for the next 48 hours on the course in case you're interested.
www.udemy.com/course/photoshop-design-into-an-html-email-signature-2019-novice/?couponCode=FLASHSALE40OFF
Dear Marty, I've been trying to create a signature for my email for some time now, i've tried directly by photoshop, hyperlinking the images on the program, which, when i save to html and open on safari or chrome, works fine. But, when i copy the opened file to my mac outlook, or the outlook web browser, or even gmail web browser, they simply don't show up, or, they show up, but not in the place that they should be. I've followed your great tutorial and did all the coding on the Brackets app, once again hyperlinking the icons, but, once again, it opens fine on safari or chrome, but, when copied to the emails signature, simply doesn't work. Is that a common problem? Can you help me? Thanks and once again, great tutorial!
i am having the same problem with the one i created
I am having the same issue . But there is solution and also a problem. We have to host our that signature but when we are doing the hosting the links for signature is not working.
@@bahadurkhan8967 Yea. I'm running into issues on how to host the links. I have come across a few google drive options, but I haven't figured it out yet.
1) Have you uploaded your signature to your hosting before applying it to your email?
2) Usually happens when signature has not been sliced properly OR you have copied unwanted code when copying and pasting.
Best to try from a browser with zero extensions before copying and pasting.
However, this is a growing issue im seeing amongst people. If all else fails it's likely an outlook issue formatting the signature when you add it.
It might be best to redesign the signature using a white background to manipulate the lines. I've yet to find a solution for this new issue inside outlook.
Brilliant video, thank you. I've got this all working on outlook first time, but the second i copy it in to mail for iPhone I get a table that only displays the text of where the images are hosted. any ideas? or is it just Apple nonsense.
Likely apple nonsense
Hi mate. Thanks for the lecture. It was really great! I am just facing one problem. I did everything right and the code is working perfect. But when I paste it into Outlook, it just doesn't work. Either the images doesn't load or when it loads, the images are totally lost on the receiver email. Could you give me any advice about this? Cheers mate.
Hey Le, have a watch of this video:
th-cam.com/video/8qyY5yugysk/w-d-xo.html
M
Btw Marty , i have another question: when i press ctrl+a to select all, it doesn t allow me , its blocked. Do you know what might be the problem? thanks
Use photoshop.
Hey Marty, is there any way that to do the export text so it is not an image but text?
Hi Neil, not that I know of. If you're looking at creating bulk email signatures I think the best way to do it is create one generic email signature with all the code etc and then creat the variations of the particular text i.e name. Then export the names as individual images and then you should be able to duplicate your code folder and place each new name image into the new folder.
Hi Marty, I was trying to fix the code and adding the name of my images given by photoshop´s folder in it but they wont appear on the html when I refresh it. I am using a mac I dont know if that might be affecting
Hi Katherine,
I would recommend using the exact code I use without doing anything to it.
If you're not familiar with HTML using the same naming of files as I do will prevent things from breaking.
If the images do not appear you have wrong named files in the html code or broken urls. It's probably best to export html code from photoshop again and only do what I've done in the video with the same naming etc...
Sorry I cannot be more help, it's difficult to say what the exact cause is without seeing your files.
I do have a full blown course which you can find in my description of this URL.
@@MartyEnglander Thank you! I fixed the problem! However, my email signature is now awkwardly placed( the square are positioned differently, I read that using chrome or Firefox might help but it did not) when I put in into my email signature on outlook
@@katherinedenissevasquez741 This could be a result due any of the following:
- Slicing has not been done properly
- Unwanted code from your browser has been pasted in
- Email settings have not been configured properly
I have a 94% discount currently running for my course where I go into detail about this issues.
www.udemy.com/course/photoshop-design-into-an-html-email-signature-2019-novice/