Scale Email Signature Request with airSlate SignNow

Email signature eviction notice

all right so I'm going to show you guys how to create a HTML email signature the first thing that you're going to do is open your design and Photoshop and once you have everything set up you're going to create some guides for it so if you have your ruler set you can drag them and you just want to make the areas that you want cut out so I might drag over these I want the Facebook Twitter and the email or the website and the bottom so once you have those you're going to go to your slice tool and just click it and up in the top you can see where it says slices from guides so you're going to click that and that's going to create all of your slices and they're going to be ordered which is really important for the email so from here you're going to go to file and save for web and this will pop up just like this and the bottom down here you can see this little preview button you want to click this this is going to open it in a browser and you can see that it already created a HTML and the tables and everything for you which is basically the biggest part of the whole thing so from here what you're going to want to do is you can download sublime text if you don't already have a text editor that you're going to use each google sublime text you can see the first people that follow up and just download it it's free to use I recommend it I already have it so I'm just going to open this and from here I'm going to go to open and I have a template that's set up I want to put a link to this in the video so you can open this up and you can see that I have this code in here already set up for you guys and these two comments right here this area right here is we're going to paste your code so you want to go back to the document that Photoshop set up for you and you want to grab everything after this closing head tag so starting at the body tag so you just want to grab this and go down to the ending body tag and copy so you new edit copy and go back to your sublime text and just paste this right in the middle from here you're going to want to go to file save as and just say this is whatever you want to I'm just going to do email sig and click Save and this is going to save to your desktop so from here you can go and you'll see it right here double click and it will open in your browser and you can see everything set up in the right place for you the only issue is it can't find your images so from here we're gonna go back to photoshop and click Save and this is going to save all of your slices so you can do it on your desktop you can save it wherever you want I'll create a new folder a new email signature images create and images this is going to be saved for each of your image and it's going to say this then - and then a number afterwards so you can say this is whatever you want so I'm gonna go to save if you go back to your desktop you can see that we have all of these image images in order so this is very important from here we can go back to Google Chrome and you need to host your images somewhere so what I recommend is post image org it's a free place just host images they'll stay on there forever so you go to browse go to your folder images and just grab all of them and click open you want to make sure that this says do not resize my images you want them to be set to the exact size that they are so from here just click upload it and all of your images are now on the internet so if you look at your document you can see that we have image source and it says browser preview this is just what Photoshop created this is a file from Photoshop so these can't be found on the Internet so you need to replace all of these browser previews and these are all in order in the same order that your images are on post image so you can do is you can go to show codes I'm opening this up in a new tab by holding command and clicking it and you want to grab this direct link right here so you click copy to clipboard go back to sublime text and this is going to be your first one so you just grab all this and replace it and then you can save your file go back to your email signature test and refresh and you can see this one's already here so what we need to do is go through and do this for every browser preview so you go and close this one out now this is number two so we're going to grab this copy a clipboard paste save it's good to double check as you do each one so you don't get messed up so you can see these two go together so from here close this out show codes copy replace the third one as you can see it already has your width and height already set up so everything on that should just work go back to email SiC test okay that's going good show codes copy and paste save and check so I'm going to go through and make sure I have all of these checked and pasted we've already had that one pasted and save so now we have this whole top area set up and there will be a new table you don't have to worry about this this will still go in the same order so if you go to post image grab the next ones show codes okay so that's working show codes copy/paste now I'm going to go through render these really fast I know it's working so I don't need to go and check every single one so copy paste codes copy paste show codes copy and paste alright so from here if we go back to our tests we'll see that everything is setup the exact way that you designed it the only issue is nothing is clickable yet so I want this home movers Inc to go to the website this go to Facebook and this to go to Twitter so let's go up and set links around these so I know that the Twitter one is number nine so all I'm going to do for this sorry all I'm going to do for this is around this whole image I'm going to do left bracket a hrf so H E or href equals and then going to put this in parenthesis and close it out so right here you want to put your link so I'm just going to go to Twitter com I get to do actually this should just work so after this after your image tag is closed out so before this TD right here you're going to do bracket and then it should close by itself if not then do /a and close it out so from here we're going to save and refresh this test and you can see when you have over this now you have the the pointer for your mouse and that didn't work so let's see what the issue was you have to have it as HTTP dot slash slash I recommend just copying from your browser so if you join Twitter Twitter comm and if you were trying to show this person's Twitter let's go to their page obviously you'll go to the page of the person you were trying to show but you just copy everything in the URL and this will be what you paste in here so a href and this is going to be your link inside these so click that and click Save let's see if this worked this time so refresh get the links workings that click on it and this will take you to the page that you paste it in there so we're going to do this for the Facebook one two so we can go to facebook.com just to grab a link close these out don't need these anymore and that's going to be number eight because it was 8th when we put in so before the image tag a href equals so you need these parentheses and paste it right in the middle and then right before the closing TD tag where we want to close our a tag so just like that click Save again and it's refresh and see if that worked okay so you hover over you can see that Facebook is working if you look down here on the bottom you can see that it's going to facebook.com/ so let's just see what happens with this yep so that works obviously you're going to want to replace these with whatever the link to the user is so the last one is as hell movers so I believe that was this number six right here so we're going to the same thing a href equals eg P dot slash wwwo movers int calm this is a made-up website that I just did for this example so it might not work we'll just see what happens so before you're closing TD tag then run to another closing a tag to close this out and click Save and let's click refresh so home lubbers Inc okay so that works so everything should be set up exactly how you need it so from here that's basically everything you need to do and from here we need to do is go back to this file and just highlight everything click edit and I'm going to select all you need to make sure that you have everything in there so just make sure you just select all edit copy and from here we're going to go and we're gonna do this for Gmail so you go to these settings you can go to settings this is for the user and you have your signature right here so you just click in here click Edit and paste and everything should be pasted in there from there all you got to do is just save your changes and that should be everything that you need to do so I'll post the link to the the template file and yeah if you if you have any other questions just send me an email at Matt Lewis designs at gmail.com yeah cool