Hey, I wanted to first say your video helped me a lot. I have one issue though, when I preview / export my design to web it looks blurry, even when I followed your settings. All about coding and the rest is fine but when putting the signature on my email it looks bad. Hope you or anyone reading can help me with this, thanks.
@JuanDiegoZarate-e6n The 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.
The best way to export the logo to keep the image quality high use the option called “ Export” and then save as png in (300 ppi) or if image then save as jpeg in (300 ppi) so that will be high resolution in high quality will be good.
No it’s not recommended size I only used this size for front end. You can use width 600 px by height 200 px and also make sure to set the raster effects ( 72 ppi ) for this design. I also showed in new video about the recommended size for this signature. Here is new video link ua-cam.com/video/9VagizlpHNc/v-deo.html
@@DESIGNERWAQASGRAPHICS unfortunately it doesn't help. I'm on this problem for 2 days now. So most people tend to try keeping the file as small as possible around 30-50kb big max 200kb (taking server space = electricity = price). And I made a clean design in illustrator but it's a bit blurry when used as a mail signature. I have it at 72dpi at 600*200px, even doubling the dpi to 150 will double the height and width to 1200*400 aprox. I really can't find a good workaround....
@Rossi I’m sorry if that didn’t helped. I want to know did you also tried another option “ Save for Web” in export menu, you can try that maybe helps. Save for web option gives you exact height and width with less kb’s. The purpose of the Save for Web feature in Adobe Illustrator is to optimize graphics for use on a Web site or other screen display, such as a phone of tablet. The word "optimize" refers to the optimum balance between file size and quality.
@@DESIGNERWAQASGRAPHICS yes unfortunately. I tried many things... But I saw a lot of people using html or css to code the mail signature, maybe it's my last straw.
You can also use the image only for email signature without coding if you don’t want it clickable but if you want clickable links in email signature then the coding is must.
@Mercedes Tuck This is just email signature design and one image I showed how to make email signature in this tutorial. I also have tutorial in my channel where I showed how to make this email signature HTML clickable.
First you need to create new folder in the desktop or in any drive, where you can save the email signature and sliced images from email signature. Then go to visual studio code and click to File menu, inside file menu click to open folder, and open the folder you created for email signature which contains sliced images folder. After you open the folder then you will be able to start coding like I did . You don’t have to start new project. Hope this helps
@alexmcfadden3986 The first file I created in 300ppi was just design file, not for clickable html use. The 72ppi was for html clickable email signature.
Export is easy, after design complete go to File menu and there you will find export option. click export then save as pdf or any file format you need then click on save to desired location. I also have this tutorial where I showed how to code this email signature to make it clickable using Adobe photoshop and Visual studio code. Link is here ua-cam.com/video/9VagizlpHNc/v-deo.html&feature=shares
Hey, I wanted to first say your video helped me a lot. I have one issue though, when I preview / export my design to web it looks blurry, even when I followed your settings. All about coding and the rest is fine but when putting the signature on my email it looks bad. Hope you or anyone reading can help me with this, thanks.
@JuanDiegoZarate-e6n The 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.
Hi, thank you ! I've one question ! What is the best way to export the logo and preserve the quality of the image once exported to outlook?
The best way to export the logo to keep the image quality high use the option called “ Export” and then save as png in (300 ppi) or if image then save as jpeg in (300 ppi) so that will be high resolution in high quality will be good.
Hi, Is 1350 by 45o recommended for this design?
No it’s not recommended size I only used this size for front end. You can use width 600 px by height 200 px and also make sure to set the raster effects ( 72 ppi ) for this design. I also showed in new video about the recommended size for this signature. Here is new video link ua-cam.com/video/9VagizlpHNc/v-deo.html
Awesome, informative and easy to understand. Thank you!
Thanks 😊
Great Informative Video!!!
Keep it up 👍🏻
Thanks;)
would've like to seen it in use, I have a huge problem by it being pixelated when I use it as an mail signature
Hi Rossi, if your design pixelated you have to make sure the resolution is high (300 ppi) when you export as jpeg or png. Hope this helps
@@DESIGNERWAQASGRAPHICS unfortunately it doesn't help. I'm on this problem for 2 days now. So most people tend to try keeping the file as small as possible around 30-50kb big max 200kb (taking server space = electricity = price). And I made a clean design in illustrator but it's a bit blurry when used as a mail signature. I have it at 72dpi at 600*200px, even doubling the dpi to 150 will double the height and width to 1200*400 aprox. I really can't find a good workaround....
@Rossi I’m sorry if that didn’t helped. I want to know did you also tried another option “ Save for Web” in export menu, you can try that maybe helps. Save for web option gives you exact height and width with less kb’s.
The purpose of the Save for Web feature in Adobe Illustrator is to optimize graphics for use on a Web site or other screen display, such as a phone of tablet. The word "optimize" refers to the optimum balance between file size and quality.
@@DESIGNERWAQASGRAPHICS yes unfortunately. I tried many things... But I saw a lot of people using html or css to code the mail signature, maybe it's my last straw.
Yes for the best quality you have to use html or css to code the mail signature.
After designing the AI, what do I do next to use it?
After designing the AI, You have to code it in order to use it as email signature. You can follow the tutorial for that. Hope that helps
@@DESIGNERWAQASGRAPHICS Do you have a video tutorial for coding?
@@yoko2231 yes I do
@@yoko2231 here is link for my tutorial to code email signatures. ua-cam.com/video/9VagizlpHNc/v-deo.html
You can also use the image only for email signature without coding if you don’t want it clickable but if you want clickable links in email signature then the coding is must.
Won't this make the links fail though? As it will be one image, you won't be able to set separate links for social icons or your website
@Mercedes Tuck This is just email signature design and one image I showed how to make email signature in this tutorial. I also have tutorial in my channel where I showed how to make this email signature HTML clickable.
@@DESIGNERWAQASGRAPHICS Oh my goodness, thank you! Can you please provide a link to that video?
You’re welcome. Link is below 👇
ua-cam.com/video/9VagizlpHNc/v-deo.html&feature=shares
First you need to create new folder in the desktop or in any drive, where you can save the email signature and sliced images from email signature. Then go to visual studio code and click to File menu, inside file menu click to open folder, and open the folder you created for email signature which contains sliced images folder. After you open the folder then you will be able to start coding like I did . You don’t have to start new project. Hope this helps
Can you make a video showing how you put this design in use please
Will do in upcoming video :) thanks
@@DESIGNERWAQASGRAPHICS please, can you explain how??
I will do in next videos :)
@@DESIGNERWAQASGRAPHICS I appreciate
Here is video tutorial link. I showed How to create Clickable HTML Email Signature. ua-cam.com/video/9VagizlpHNc/v-deo.html
scrolling text on bottom too fast for learning
Understood but you can slow down the video by going into video speed settings ⚙️ and slow the video speed as much you like. Hope this helps
👍👍👍👍👍👍👍😊
Thank you 😊
You created the file at 300ppi but declare create it at 72ppi, btw.
@alexmcfadden3986 The first file I created in 300ppi was just design file, not for clickable html use. The 72ppi was for html clickable email signature.
ah, your closed captions say 72, for me mate! no worries @@DESIGNERWAQASGRAPHICS
no export informationm
Export is easy, after design complete go to File menu and there you will find export option. click export then save as pdf or any file format you need then click on save to desired location.
I also have this tutorial where I showed how to code this email signature to make it clickable using Adobe photoshop and Visual studio code. Link is here ua-cam.com/video/9VagizlpHNc/v-deo.html&feature=shares