We see the world differently, we are Designers

Weekly Design Exercise abbrev. DEX

/‘wiːkli/ /‘dɪˈzʌɪn/ /‘ɛksəsʌɪz/ | noun

noun: weekly design exercise; plural noun: weekly design exercises

1.Activity requiring physical effort occurring once a week, carried out to sustain or improve health and fitness of your freakin’ mind.

E.”Weekly Design Exercise improves your Adobe skills and design power"

Feel free to jump into our weekly design brief and produce a mini design project. They are completely free. No catch! These exercises are The Graphic Design School’s contribution to the continuum of the design education of our design graduates, students and the design world at large. Gosh darn that’s nice of us!

Who is this for?

Whether you are a Beginner, Intermediate or Advanced level designer. There is a brief to suit you. Follow the instructions in the brief to the letter.

How do I submit my work?

Once your done upload your image to share. We may upload your image to our new Instagram page, be sure to include your Insta handle (@username) so we can credit you. If you don’t have an Instagram account, you can just type in your name. Leave your details blank if you like.

What is a good size for the images?

Please make sure your image is of good resolution, it shouldn’t exceed more than 5mb or thereabouts. png, jpeg, svg all acceptable formats. By uploading your image you are giving us permission to publish it.

Can I subscribe to this awesome concept?

If you would like to receive an email from us each week with the brief and video. Be sure to subscribe at the top right of this page. We won’t share your information or be spammy.

What if I want to go further?

If you love what we do, and think you would like to try your hand at becoming a designer. Check out our courses here.

Can I contribute?

If you would like to become a regular video contributor, let us know. Even though we offer them for free, we pay contributors. Or if there is a technique that you would really like to learn, email us a visual, and any ideas you may have.

Can I contact The Graphic Design School?

Anything else you need or want to ask contact us at: info@thegraphicdesignschool.com

Can I be a voice of TGDS?

If you want to spread the good word to your design friends feel free to share this page on social media ;)

Close this…

Use Adobe Illustrator to create the frames and follow our recipe to build an original email signature
28mins Icon for illustrator Adobe Software
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.
RESOURCES:

"Lush Script" From Adobe Fonts (Ex. Typekit)
"Hansief Free Vintage" From pixelsurplus.com
"Haettenschweiler" From wfonts.com
"The Circus Display" From pixelbudha.net
"Free Xmas vectors" From graphicpear.com
"Free online GIF Maker" gifmaker.me
"Email Signature Template" From us :)
beginner:
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.
intermediate:
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.
advanced:
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 PatternIllustrator TypographyIllustrator Brush ToolHTML 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.

Step 1 in screenshot guide in Gmail

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.

Step 2 in screenshot guide in Gmail

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

Step 3 in screenshot guide 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!!

Subscribe to future DEX…