Vector graphics are wonderful ~ they allow for prefect precision and scale without loss of quality. With the long awaited arrival of SVG for the web – you should definitely spend time to create vector graphics for your sites and understand their use on the web.
These slides are primarily for reference and useful for those of you new to vector graphics. They include text and demos, covering some of the core tools.
If you are new to Illustrator – here are a few references to help you get started :)
If you are struggling with the pen tool – have a go at completing these tracing templates and you’ll soon come to grips with it :)
↓ download tracing templates
To combine your vector graphics with a bit of coding, let’s take a look at creating and implementing sprite rollovers.
replace the icon for the CTA with your own version – at double its original size.
We already talked about how useful patterns and tiled backgrounds are – so here are some specific tutorials for creating patterns as well as links to more tutorials. If you find any others you find useful, or also some for other apps, or different methods, please do share these via the comments.
tutorials: creating patterns in illustrator
- Creating seamless patterns in Illustrator, Veerle Pieters
- How to create a baroque pattern in Illustrator, Sebastiano for wegraphics.net
- How To Create a Repeating Camo Pattern in Illustrator, Chris Spooner on spoongraphics.co.uk
- Illustrator Quick Tip: Using the Blend Tool to Create Repeating Patterns, Nathan Brown for wegraphics.net
- Create a Trendy Seamless Type Pattern, vectips.com
- How to Create Seamless Subtle Patterns in Adobe Illustrator
- Learn How to Create a Pattern in Illustrator CS5, illustratoratoms.com
- Create a repeating pattern in Illustrator, Andy Buckle for .net magazine
tutorial collections – Illustrator
- Veerle Pieters – Illustrator tutorials
Veerle is an undisputed master of vector graphics and shares her techniques and working methods on her blog. I cannot recommend her blog enough, not only for her wonderful tutorials but also for all the inspiration :)
- Fabio Sasso – abduzeedo – Illustrator tutorials
abduzeedo is one of the most inspiring design blogs, sharing inspiration as well as tutorials for various graphic techniques, well worth exploring! :)
- Illustrator CS5 Tutorials: 70 Wicked Tips – a huge collection of various tutorials on designrfix
You will find a vast collection of patterns in different styles and designs – well worth studying. Hopefully, you’ll soon feel inspired to create your own :)
There’s also a good post showing “25 Inspiring Sites that Use Repeat Patterns and Seamless Textures Effectively“
And lastly – a list of links to pattern related sites :)
- Patterns by Squidfingers
- Citrus Moon Patterns
- Patterns of Change by Liza Phoenix
- patterns by DesignShard
- Backgrounds etc
- Fractured Sanity
- :: Screentones ::
patterns & sprites
Time to get some vector graphics designed and created :)
Expand on the CTA sprite rollover concept by either experimenting with the demo to add more sprite rollovers, or incorporate a sprite into your profile page. Experiment with patterns and textures to enhance page elements.
Your brief consists of 2 parts:
- add an additional sprite rollover as relevant
- apply a pattern / texture to the background
You can choose whether to work with the demo, for fun and play – or whether this will fit your profile page. You can make this task entirely your own, if you prefer. The aim is to give you a small project to work with, to practice the creation of sprites and tiled backgrounds.
↓ download demo files
✔ to do list
- finalise your ‘hire me’ CTA link and rollover
- create a new sprite rollover with 3 states:
for the demo: at double the size of the original graphic,
for your own purpose: as fitting its context and placement
- implement your new graphic as sprite rollover fitting your chosen design
- upload your final result and leave your link in the comments below
- submit your final project folder (including your vector file) as ZIP via email to: prisca [AT] eyedea.eu
subject title: “CTA sprite – [your name]“
As always, feel free to comment below if you have any questions :)