eyelearn » Vector images: core skills

eyelearn

a look at design for the web & all it entails

· view menu ·

Vector images: core skills

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.

sprite iconTASK
replace the icon for the CTA with your own version – at double its original size.

→ view demo
↓ download demo files

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

tutorial collections – Illustrator

For inspiration and some great examples of good patterns – have a look at ‘Pattern Head‘, run by John Rawsterne.

patternhead

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 :)
note on terms of use and licensing: first of all – these examples should serve as learning samples for you, not as material to be used ‘as is’. After all, you’re designers so you can – and need to – produce your own originals. Professional pride alone will demand it. :)

If you do want to use these, for your own or any future client projects – make sure you read the terms of use and check the licensing. As with any visual material, such as photos, fonts and icons, there will be clear guide to what you can and cannot do with this material. There will be some which require a link back to the designer or site, some will ask for donations and link back. Some can be altered and used – others can’t. Make sure to respect the designer’s rights.

beautiful patterns

patterns & sprites

mini project

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:

  1. add an additional sprite rollover as relevant
  2. 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

  1. finalise your ‘hire me’ CTA link and rollover
  2. 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
  3. implement your new graphic as sprite rollover fitting your chosen design
  4. upload your final result and leave your link in the comments below
  5. 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 :)

10 Comments

  1. Izzy G-Potts
    10
    15/01/2015

    Heres my sprite! (only a few months late ^^’)

    http://igrahampotts.users40.interdns.co.uk/sprite/index.html

  2. Jenn
    9
    03/12/2014

    Here’s my sprite… finally! Sorry it’s so late.

    http://jpope.users40.interdns.co.uk/coursework/appliedart/assignment3/

  3. Matt
    8
    01/12/2014

    Here’s mine.

    http://www.ma-jones.com/sprite/site/index.html

  4. alfi
    7
    27/11/2014

    I used my profile page for my first sprite.
    Changed the e-mail text into one: http://aoverby.users40.interdns.co.uk/web-design-ma/profile/

  5. su
    6
    27/11/2014

    Profile page updated with image sprites used for social media icons:

    http://swesterman.users40.interdns.co.uk/art/profilev2/index.html

  6. Wes
    5
    27/11/2014

    Hey folks – here’s my sprite example:

    http://wesleymehaffy.co.uk/applied-art/sprites/index.html

  7. Carys
    4
    26/11/2014

    Hi Guys!

    Here’s a link to my sprite:

    http://cjenkins.users40.interdns.co.uk/masters-website/masters-website/sprite.html#

    (I had a go at using Inkscape instead of Illustrator!)

  8. Sergi
    3
    26/11/2014

    Hi all!

    The RWD sprite and the Marthe’s robot are great!
    Here’s mine, hope you like my hen ;)
    http://stantinya.users41.interdns.co.uk/coursework/artweb/css-sprites/index.html

  9. Marthe
    2
    26/11/2014

    Hi!

    Here’s my sprite:
    http://mvittor.users41.interdns.co.uk/sprite/index.html#

  10. Cathryn
    1
    25/11/2014

    Hello – here’s a link to my sprite rollover http://www.cathryndenney.com/coursework/sprites/

Leave a comment