- Design Brief:
- Create 3-7 quick beautiful typographic systems (we chose a Xmas theme because it's that time of year) you can chose any theme. We show you how to host the gif online and how to html embed in your email signature for the world to see. You can also use this gif for any manner of designs or email content. Below this brief we give you a simple step by step guide on how to install your gif in Gmail.
Preview the resulting GIF here.
"Lush Script"From Adobe Fonts (Ex. Typekit)
"Hansief Free Vintage"From pixelsurplus.com
"The Circus Display"From pixelbudha.net
"Free Xmas vectors"From graphicpear.com
"Free online GIF Maker"gifmaker.me
"Email Signature Template"From us :)
- Create 3 simple typographic systems using any 2 colours. Use the typefaces you have on your system already. It is not necessary to use vector images if you find this too advanced.
- Create 5-7 simple typographic systems using colours of your choice, 3 is probably the maximum to use for the best effect. Add this to your email signature via html if you like.
- Create 5-7 simple to complex typographic systems using colours of your choice, 3 is probably the maximum to use for the best effect. You may like to undertake hand lettering if you have the skills to do so. Add this to your email signature via html if you like.
- Design Constraints:
- Use Adobe Illustrator, limit the palette to 3 colours.
- Design Goals:
- Create an animated gif to showcase online.
- Tools & Techniques:
- Adobe IllustratorIllustrator LayersIllustrator PathfinderIllustrator PatternsIllustrator TypographyIllustrator BrushHTML Email Signature
- Total Time Allowed:
Beginner: 2 Hours -- Create an animated gif using 3 typographic systems. Save as an animated gif through http://gifmaker.me.
Intermediate: 2 Hours -- Create an animated gif using 5-7 simple typographic systems. Save as an animated gif through http://gifmaker.me. Upload to Google Images or via your IT Dept. Test how you go at changing your email signature html with the html code <img src="IMAGE URL"/>.
Advanced: 4 Hours -- Create an animated gif using 5-7 simple to hand lettered typographic systems. Save as an animated gif through http://gifmaker.me. Upload to Google Images or via your IT Dept . Test how you go at changing your email signature html with the html code <img src="IMAGE URL"/>. Then take the challenge of adjusting your email signature in your email client preferences. You may need some help from Google for this one.
Saving Your custom Signature to Gmail
As Gmail is the most common email today, we thought we would write you a quick guide to help you install your gif in your Gmail web browser client. There are a few steps, if you are new to html, just breath, we will walk you through it.
First of all
We need to customise the HTML file to fit your specific image link/URL as it was done in the DEX video (when we hosted it in Google Photos and we copied its URL).
We have made you a small html file that you can customise and then insert neatly into your Gmail signature. You can download it here.
Open this file ‘email-sig-generic.html’ in a text editor; any text editor will do. If you’re on a Mac TextEdit will work perfectly, otherwise Notepad on PC is good.
Note: TextEdit on Mac needs to be configured to read html files as plain text -- the window on the left shows you how to set the preferences.
Inside the img element, we have the source, or src, as "https://www.thegraphicdesignschool.com/extern/email/TGDS-Xmas-Large.gif", this is our xmas gif link/URL that we have hosted on our own server. All we are going to do is pop your own Google Photos URL in it's place. Cool!
So let's start by copying that Google Photos link you made of your own gif.
Save that file.
Next up, we need to render it in a browser.
What's that mean? Rendering an .html file in a browser means opening the.html file in a browser. You can see our rendered file below.
Now select the file you've just downloaded, right-click on it and select 'Open with > Chrome (or your favourite browser)' - You should see a new tab with your email signature.
Select all the content of that page (Cmd+A on Mac, Ctrl+A on Windows).
Save the new signature in Gmail
Go to the Gmail web page in your computer and open up Settings by clicking the Gear button (looks like a tractor wheel) in the top left-hand corner of the window and click Settings in the the dropdown menu. In the Settings page Click on General. Then scroll down the page to find 'Signature'. Paste the copied content then scroll down to the bottom and click “Save Changes” and you’re done.
How awesome are you? You just coded!!