Email Signature Charter Made Easy

Email signature myself

hi there's a lot of people who are trying to make email signatures and then convert them into HTML so you can pull it into your Gmail your Outlook or any of the email provider now a lot of time if you're using a desktop application to access your email such as Outlook 2010 2016 etc then a lot of the time the email signatures become a little odd-looking and it might not even render properly and the reason for that and it sounds at mad but is because desktop applications email providers are very dated with their technology so you will always get a always able to get a better looking email signature if you apply the signature directly to the browser signature box rather than the desktop application so in this tutorial I want to show you how we're going to split up this email signature and then turn it into HTML and don't worry you don't actually need to know how to code because Photoshop which is what we're going to be editing it in does it all for you you just need to be able to download a text editor and do things like that so let's get started so the first thing you want to do you want to open up your email signature in Photoshop once you've done that you want to head over to the slice tool click slice and now you want to let's zoom in you want to section every bit every set every bit of the email that you want to have cut cell one way to do let's do this so I want this bit pick up just like so I want this bit just like so I want this bit I also want I I want this this bit now you may ask yourself why am i doing these little sections and I've done this right here because we're going to be adding links behind this email and behind this URL and behind this number and I'm going to show you exactly how you can do that but for now let's just add this and then we're going to be going here as well and now for each of these little boxes we're going to be doing one for her one for here for here yeah and what I'm going to do just so you don't get bored I'm going to quickly skip to the end of this bit so you can get the final result okay so you can now see that every section that I want chopping up for what's not is now been highlighted so the next step is to click on it file export save for web F using older versions of Photoshop then I believe the save for web that we'll just be showing in the options without needing to go into export so save for web and now you can see you've got a little pop-up box right here what I'm going to do I'm going to change I'm going to change this to PNG and you don't need to it's just it will just come out clearer for me and because this is a small file anyway it doesn't really matter so now head over to the preview and click preview you'll see that this has opened up all the codes now this is all the code that you're going to need now you will need something to be able to edit this code in if you're fluent coder then you can have a lock in notepad if not then I would recommend using brackets and I will provide a link in the description but if you just want to see just type in bracket and you'll see its brackets but I oh and then just click the download follow the instructions and you should have it I'll leave a link in the description for you ok so that what you want to do you want to go into my youtube description of this video and get this code which you will be able to find in the link copy all of it and paste it into your brackets editor once you've got that we want to head over to that a photoshop pop box that happened before and where it says a body you want to scroll all the way down to the closing body that you want to copy up and then you want to paste it in between these two sections and now you can see that it's that you've got all that code there if we open it up actually open it up you'll see that there's nothing now it's all broken links and the reason for that is because first of all that we've not actually saved the images and we've not connected the images so that is what we're going to do it now so let's move this over let's head back over to photoshop and now we're going to save and we're going to find the place where we want to save it at so let's head over to video signature and I'm just going to name it one and then I'm going to press safe now if you've done it correctly this should have created a images folder and in that images folder it should have every single section as an image so let's look you can see the images folder open up and you can see all the sections here now the next thing you want to do we've got all this unnecessary code right here and what we want to get rid of it now luckily in brackets there's quick ways of doing this okay so we want to get rid of at from this question mark to the last digit right here but we want to do on all of them now there is a quicker way to do this and the best way to do it is by clicking there where you can see I've done pressing ctrl and then clicking on the every bit just before the question mark but make sure you keep hold of control and what this is doing is placing a marker from the bit where we want to edit on every single one so now what i'm gonna do i'm going to press delete on my keyboard or perhaps I'll just highlight all and press shift and the right arrow on my keyboard and can you see how all those numbers have now been highlighted and now I'm going to press backspace and you can see that I've now been deleted just like so okay so what you want to do you want to highlight this hair just this one not the others and that you want to type images slash and then you just want to select your first picture like so and now if we save that head over to our and refresher you can see that now the first bit has been replaced with the relevant image that's great so now we want to do the same with everything else however we were going to use a shortcut to do it now so highlights all the way up to one and we're going to press cut and we're going to copy it up and now we're going to highlight all the way here up until the underscore and we're going to press ctrl H and now you can see it's been highlighted there all the others have been highlighted here and you're going to click replace with and you're going to paste in images slash one and now you're going to click replace all and you can see that all these images have been replaced so if we had anywhere to reveal your signature again and refresh you can see that Wow it's all there nice and easy now the next thing we're going to do add links to the number two the email and to the URL really really simple okay each one requires a slightly little different thing but with mobiles on the rise and more people starting to use Mobile's for everything and you want potential people to see or contact you as easily as possible just by clicking the number or the email or the website so I'm going to show you how to add a link behind these let's head over back to your farm so now we want to find which image we actually want to highlight and this one we want to start off with the phone number so to add a link or call straight away to a phone number what you want to do you want to do an open arrow and then you want to type in a space each rath equals and then quotation marks and then a closing and browsing and you can see that there's a closing a tag here so you want to delete that just for now and then in these quotation marks you want to type in tell just show up your telephone as you probably know : and then you want to type in a number but you want your number so and don't put any spaces in it so that's just type in oh one six one seven or two one three two I don't know just a random number hopefully this isn't anyone's and then when you get to the end and just after the old type they're closing narrow you want to open another arrow and then flush and then a and man there you go so now let's head over to our signature again and you'll notice if I hover over the number nothing happens and keep an eye on the mouse but if i refresh the page you can see now if song clicks on that because I'm on a computer it's saying pick an application boy feels on the phone and it will go straight to the phone number log and then you press cancel and now that's really how to add a phone number now let's look for the email link so here is the email now the email is the same code just slightly tweets so again just before other very beginning of the image source tag what you want to do open bracket a space H ref equals open quotations and then close out with a closing bracket delete hate the closing any type and head over to the quotations again and in the quotations what you want to do we want to do mail till and then you want to put in failed at O at your email calm and then head over to the end and again open arrow and slash and it will automatically complete with the a tag and now let's head over to this signature again if you hover over the email bit nothing but we refresh you can see that now you've got that so now the final thing before I leave you is the URL okay so let's find that one and here it is so once again now this is the exact same code just a tiny bit trickling so you want to do open RL a space href equals quotations closed-off and delete the closing a tag then you want to type in http/1 where the websites are HTTP some are HTTPS so but either one will do colon slash slash www dot your domain.com and then you want to head to the end and close it off with the a tag and then let's head over to the signature here that's a refresh and now you can see and if we click it you can see it just come to a random one but and there you go and that's really all there is to creating email signature and once you're done you would simply control a copy and then go to email signature and paste it in and that's it thanks for watching if I've helped please subscribe leave a comment like all the usual stuff that tells me that you like my content and you like me to keep producing this sort of thing you've got any questions leave it in the comments below and thanks for watching