eyelearn » Illustrator core skills

eyelearn

a look at design for the web & all it entails

· view menu ·

Illustrator 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.

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

Choose carefully whether to work with the demo, for fun and play - or whether this will fit your profile page.
↓ download demo files

to do list

  1. finalise your 'hire me' CTA link and rollover
  2. create a new sprite rollover in Illustrator with 3 states:
    for the demo: at double the size of the original graphic,
    for your profile: 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 :)

23 Comments

  1. prisca
    23
    01/12/2013

    Pete,
    bad news – I don’t think we will be able to work this one out :(
    Your visited state worked for me by going back and refreshing the page last time ~ now this really baffled me… so I did some checking – seems like the visited state can no longer be relied upon as new versions of browsers now behave very differently in terms of cache use.

    Have a look at this post by Chris Coyier, quite old and worked a charm – note to the notice at the top, again a few years old:
    http://css-tricks.com/put-checkmarks-next-to-visted-links-with-pure-css/

  2. Pete
    22
    01/12/2013

    Hi Prisca

    My sprite page (http://www.woodview.me/cw/sprite) leads to my profile page (http://woodview.me/cw/profile/) and then back to my sprite page.

    Still having various issues with different browsers and how they view the svg file – as well as how they view my profile page. And I still couldn’t get my “visited” sprite to view when returning from another site.

    Perhaps we could have a look at this when I next see you.

    P.

  3. Natalie Bent
    21
    27/11/2013

    Hi Prisca,

    Here below are the links to my sprites:

    http://grebena.users39.interdns.co.uk/sprite/
    http://grebena.users39.interdns.co.uk/sprite-two/

    Natalie

  4. Milad
    18
    26/11/2013

    Hi Prisca,

    Here are my sprite pages;

    1: Cubic Hire
    http://gregoab.users39.interdns.co.uk/applied-art/cube-sprite/index.html

    2: Twitter History
    http://gregoab.users39.interdns.co.uk/applied-art/twitter-sprite/index.html

    I am going to send you the files for both pages. Sorry for the late submission, I didn’t have access to internet.

  5. James
    17
    26/11/2013

    You can view my sprites page at this link:

    http://greloja.users39.interdns.co.uk/applied-art-for-the-web/css-sprites/

    Creative block: Only could think of an orange at the time. >.>

  6. Kate
    16
    26/11/2013

    Hi Prisca,

    Please find my two sprite experiments at the top and bottom of my profile here – http://grelawtk.users37.interdns.co.uk/profile-sprite/

    My background tile can be seen here – http://grelawtk.users37.interdns.co.uk/tile-practice/

    I’ll email the zip file too.

  7. Justeen
    15
    26/11/2013

    Hi Prisca.

    Here’s my experimenting with the spire and background

    http://greclju.users39.interdns.co.uk/cta/index.html

    will email you working files

  8. Barbara
    14
    26/11/2013

    Hi Prisca,
    Here are my sprites, both are on the same demo page. http://design.barbasboth.com/applied-art/sprites/

  9. Sonata
    13
    26/11/2013

    Hi Prisca,

    Here are the links to my sprite pages:

    http://www.sonataweb.co.uk/sprite_bag/

    http://www.sonataweb.co.uk/sprite_eye/

    I didn’t really find what to change on my profile page, so just used your demo files :)

  10. prisca
    12
    25/11/2013

    how lovely ~ really like both if your characters, Phil and Catia :)

  11. Catia Gomes
    11
    25/11/2013

    Hi Prisca,

    Here is my demo:
    http://grelaca.users39.interdns.co.uk/coursework-projects/applied-art/patterns-sprites/index.html

    And on the social media on my profile page I changed my links to sprite rollovers:
    http://grelaca.users39.interdns.co.uk/coursework-projects/applied-art/profile-page/index.html

    I will send you the email with the code and the working files.
    Have a good evening ;)

  12. Phil
    10
    25/11/2013

    oops second link is: http://grebaph.users39.interdns.co.uk/sprite

  13. Phil
    9
    25/11/2013

    Hi Prisca,

    Here is the original cube sprite I was working on: http://grebaph.users39.interdns.co.uk/sprite-demo/

    and here is my second one: http://grebaph.users39.interdns.co.uk/sprite-demo/

  14. prisca
    8
    25/11/2013

    Thanks for your comments :)

    the shortcut sheet is very useful, Pete, thanks for sharing ;)

    Duncan,
    your profile rollover is especially lovely :) Like your final pose, made me smile ;)

    Zoe,
    thanks for your links – lovely rollovers and patterns ;)

  15. Zoe Offen
    7
    24/11/2013

    Hi Prisca,

    Link to my sprite page: http://zoeoffen.com/sprite.html

    I also added a sprite to the header of my page:
    http://zoeoffen.com/

    Zoe

  16. Duncan Struthers
    6
    22/11/2013

    Hi Prisca,

    Here is a link to my two sprite images on my profile page: http://www.duncanstruthers.com/profile/

    And here is the link to my version of your demo’s background image: http://grestrudun.users36.interdns.co.uk/background-image/

    I’ll send you the files by email now,
    Thanks,
    Duncan

  17. Pete
    5
    22/11/2013

    Follow this link to find a PDF of Illustrator keyboard short cuts – very handy:

    Adobe Illustrator keyboard shortcuts

  18. prisca
    4
    17/11/2013

    Barbara ~ good question, sorry, that wasn’t very clear in my brief; just updated it.

    Yes, please – I’d like to have your working file as well as the fully coded page submitted.

  19. Barbara
    3
    17/11/2013

    Hi Prisca,

    Do we need to submit the original vector file or only what goes on the webpage, i.e. the GIF or PNG plus the page code?

  20. Prisca
    2
    14/11/2013

    Sonata ;)
    no problem – glad you’re asking :)

    To sum up – you need to cover the 2 points:
    – a total of 2 sprites (one could use my code, and replace my graphic if you like)
    – a pattern background

    You have the choice of working with my demo – and edit what’s there, adding the additional link for the second sprite rollover. Or you can add it to your profile page – or any other page you like ;)

    Hope this answers your question?

  21. Sonata
    1
    14/11/2013

    Hi Prisca,
    Please just don’t think that I didn’t listen in the class, but I want to clarify our homework :)
    So we have to do 2 sprite rollovers- to change yours and to create one of our own? Or can both of them be our own? Do we have to create a page for them if they don’t fit into our profile page or do they have to be namely for our profile page?
    I think that’s all…for now :D