Kit Design Tutorial - Adobe Illustrator

Steevo’s Illustrator Tutorial

Fantasy football kit designs are not in short supply both here on FootballShirtCulture.com and on Designfootball.com. Some great techniques are shown and some excellent tips on how to create designs from templates on PhotoShop.

But I’ve decided to show you an alternative. My tutorial relates to Adobe Illustrator (download Trail @ Adobe Trial Link ) and shows how you can create your own templates for reusing, quick and easy ways to stylishly present your designs and also how the work of a designer is sometimes as much about the client’s requests as it is about our creativity.

I won’t really demonstrate the techniques as others have because I’d recommend videos on YouTube for that kind of guidance. I’ll just show you that you can create effective designs by having the freedom to start from scratch and perfecting your own style.

tut-steeve-1.jpg

Firstly, you need to create your basic kit shapes. A handy way to approach this is to use the pen tool and trace the outline on a photograph (there’s lots of videos on YouTube showing this technique) but I generally create my kits by drawing until I’m happy with the proportions. It’s good to have an eye for these things. Play around and you’ll soon get the hang of it.

tut-steeve-2.jpg

Once you’ve created your shapes you can copy them and/or mirror for different viewpoints. A nice touch is to put some shading around the edge of the kit using the drop shadow tools. I don’t tend to make the kits look contoured; I simply create representations of the designs. This allows a bit of artistic licence in the presentation.

tut-steeve-3.jpg

If you see the way I’ve created it, I’ve used shading techniques and lighter pen lines to show seams and folds. I’ve also put a light outline around the collar for guidance.

The blending of light to darker grey that can be seen on the inside of the shirt is produced by drawing a shape and filling it with a gradient and then using the ‘multiply’ transparency.

So once you have your basic template set up you can start working on the design. For this example I’ll recreate Jay from dF’s kit for Marceltipool, his London-based football team for fans of Olympique de Marseille, Celtic and Liverpool. The original can be found on both dF and Fantasy Kit Designs on FSC and although it wasn’t very popular, he liked it and wanted me to create it in a more structured and flattering light.Out of love for the “pool” part of “Marceltipool” (and for my sins) I agreed.

So the first thing we need to do is enter the coloured features that the rest of the design fits around, the three-striped hoops on the sleeves and the standard but multi-coloured Golpe curves. You can trace but I will again use the pen tool which I find is the easiest way to create these and choosing the relevant colour for the fill.

To keep all the elements within the kit frame, a clipping path has to be made. To do this you need the shape/path you want as the boundary as the top object (in this case: the shirt outline) select this and the objects/details you want ‘clipping’ and then select ‘create clipping path’.

tut-steeve-4.jpg

Gradually this basic colouring starts to give the whole impression of the kit. Solid blocks of colour, whilst possibly not true-to-life, give a very clear indication of what the design is made up of.

tut-steeve-5.jpg

Once the basic design is clear, it’s time to add the details. Badges, sponsors etc should be in vector form for the best possible look. Many logos can be picked up on sites such as brandsoftheworld.com or even in Google Images but for the likes of Jay’s Marceltipool crest – with each constituent part lifted from a different website with a different mpeg resolution – it was necessary to recreate.

Using these websites and others to find vectored versions of each badge I took them apart and then reassembled them to create the Marceltipool Crest. The process for created vectored logos is too involved to go into here but, as always, YouTube has plenty of videos that can be followed.

When it comes to fonts, it’s a touch of trial and error. For your reference I used Minion Pro and then made slight adjustments.

tut-steeve-6.jpg

With the design nearly there, the onus moves towards presentation. A simple but effective approach is something like adding a contrasting gradient, on this occasion I used red through to black. I also added a lens flare using the lens flare tool.

tut-steeve-7.jpg

The impact is strong and the stark, bright colours are in keeping with the style of the kit. Subtle it is not.

Jay instructed me to cut the length of the Golpe features on the shorts and the distinctive adidas sleeve edges are added and combined with the hoop design. A couple more sponsor logos (the Marseille way), but crucially no number on the back (the traditional Celtic way) and the design is complete.

tut-steeve-8.jpg

I hope those of you who wish to approach kit design in a slightly different way to the norm found this useful. And, of course, if you have an interest in joining Marceltipool please contact Jay at This email address is being protected from spambots. You need JavaScript enabled to view it. .

Steevo.


Comments   

 
Guest
-4 # Guest 2009-08-16 14:31
Thats pretty cool.

FIRST COMMENT!
Reply | Reply with quote | Quote | Report to administrator
 
 
Guest
+1 # Guest 2009-08-20 10:14
Quote:
heres youre prize :woohoo:
Reply | Reply with quote | Quote | Report to administrator
 
 
Guest
0 # Guest 2009-08-16 23:09
heres youre prize :woohoo:
Reply | Reply with quote | Quote | Report to administrator
 
 
Caulls
+2 # Caulls 2009-08-17 03:14
Nice tutorial Steevo

It\'s good to see other programs apart from photoshop used for this sort of thing :cheer:
Reply | Reply with quote | Quote | Report to administrator
 
 
Guest
+2 # Guest 2009-10-03 16:31
do u think u could make me a crest with inter miland and real madrid put together thanks
Reply | Reply with quote | Quote | Report to administrator
 
 
Guest
-2 # Guest 2009-10-03 16:34
or do u think u could just make a crest for me saying IBFC
IN BLUE AND BLACK AND GOLD STARS THANKS
Reply | Reply with quote | Quote | Report to administrator
 
 
Elbert
0 # Elbert 2014-08-02 00:06
s current kit white shirts, black shorts and white socks
with red trim. For more information and how to get started please
view my other article. NCAA Football 2010 is an up and coming game in the college football video game
genre.

Feel free to surf to my web blog :: soccer drills: http://support.aycontrol.com/entries/30128961-Convenient-Secrets-In-FOOTBALL-Across-The-USA
Reply | Reply with quote | Quote | Report to administrator
 

Add comment

Feel free to leave a comment. To be able to edit comments or delete comments you have to Sign in

Security code
Refresh

click here