You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Oct 30

Creating a Leopard folder in Illustrator

2007 at 09.19 am posted by Veerle Pieters

As promised before, here is how I would create my version of the Leopard folder in Illustrator. This time no screenshots but a screencast with voice-over.

Creating a Leopard folder in Illustrator - Screencast

You can download it here. It's in QuickTime format. This is my very first screencast, I don't sound like a professional trainer or anything, I only did my best to explain things as good as I can. I didn't want it to be in crappy YouTube quality so it's nice and big :) Still, 23 MB for a 15 minute movie 1280 x 800 pixels isn't that bad. Maybe you'll have to crank up the volume a bit since I've recorded it a bit too quiet. I'll keep that in mind for next time. I hope you enjoy it and learn from it.

Getting the file

You can download the movie on Cloudapp.

Want to learn more?

VECTORTUTS+ Vector Tutorials and More A good and not expensive source to learn more about Illustrator, Photoshop, or web design is by joining the Tuts+ sites. You get access to the source files for just $9 a month. So your ONE membership gives you access to members-only content for ALL the Plus sites. I've written a tutorial for the Vector Tuts section.


82served

gravatar

1

permalink this comment Soroush Tue Oct 30, 2007 at 10.19 am

Thanks Veerle! I enjoyed that tutorial! I think you explained very well, and liked the little tips on shortcuts and keyboard modifiers.

Very good quality video, in 24MB, much better than YouTube, definitely!


gravatar

2

permalink this comment Harmen Janssen Tue Oct 30, 2007 at 10.23 am

Thanks a lot, Veerle, I really enjoyed that screencast and learned quite a few new things!

By the way, I think screencasts are more effective for showing tricks and techniques in graphical programs than screenshots, ‘cause you can follow the entire process. So keep ‘em coming!


gravatar

3

permalink this comment Sam Brown Tue Oct 30, 2007 at 10.34 am

Fantastic, I followed along in Illustrator and made my own!

Look forward to hopefully more screencasts from you!


gravatar

4

permalink this comment Matt J Tue Oct 30, 2007 at 10.38 am

Great tutorial. You should do more of these, they really are so much better than a text tutorial.


gravatar

5

permalink this comment Andrzej Kała Tue Oct 30, 2007 at 10.40 am

This is truly a marvelous tutorial. So sweet you didn’t upload it to YouTube. 24MB for that quality is more than acceptable.

Nice voice I must say… ;)


gravatar

6

permalink this comment Zeb Tue Oct 30, 2007 at 10.46 am

Very good video Veerle ! thanks


gravatar

7

permalink this comment Giacomo P. Tue Oct 30, 2007 at 10.52 am

Very nice, well done!!


gravatar

8

permalink this comment Daniel Tue Oct 30, 2007 at 10.54 am

Great!

I hope there will be more Screencasts in future.


gravatar

9

permalink this comment Ben Bodien Tue Oct 30, 2007 at 11.00 am

Fantastic stuff, Veerle!

Illustrator still scares me coming from Photoshop, so it’s great to see it in action for something practical.


gravatar

10

permalink this comment Aaron Witherow Tue Oct 30, 2007 at 11.25 am

Really good tutorial Veerle.  I have been a visitor to your site for years and you are a great inspiration but this has been the first time I’ve posted a comment(so much for all those de-lurking days).

You explain things really well, even all the little points, just thought I would come out of hibernation to show my appreciation and hopefully this will be the start of many screen casts to come.

by the way it’s really weird to finally hear your voice. You do not sound like I thought its funny how you build up perceptions of people.

Anyway well done.


gravatar

11

permalink this comment Jens Tue Oct 30, 2007 at 11.41 am

Hi, and thanks for a great tutorial. Hope there’s more like this to come. You DO sound like a professional trainer btw.


gravatar

12

permalink this comment Sean Johnson Tue Oct 30, 2007 at 12.03 pm

This is a great tutorial for anyone looking to learn Illustrator. Good work Veerle.


gravatar

13

permalink this comment Kordump Tue Oct 30, 2007 at 01.23 pm

havent watched yet but kudos for the torrent option


gravatar

14

permalink this comment Roel Tue Oct 30, 2007 at 02.19 pm

Excellent idea, great video quality and very ‘didactic’. Your voice sound quite different (‘younger’) than I expected! Looking forward to the more ‘advanced’ video tutorials ;)


gravatar

15

permalink this comment Deron Sizemore Tue Oct 30, 2007 at 02.21 pm

Great tutorial! I hope you continue to do more video tutorials like this.

I learned a few things with illustrator here. Thanks!


gravatar

16

permalink this comment Jaakko Tue Oct 30, 2007 at 02.30 pm

A really nice screencast., it was was to follow and you explained each step well. I hope you’ll switch to screencasts permanently, because they are so much nore informative than just plain regular screenshots.


gravatar

17

permalink this comment Fred Tue Oct 30, 2007 at 04.46 pm

Thank you a lot for this nice tutorial!
As the first video tutorial I’ve seen on your web site, I hope there will be more like this… please !!


gravatar

18

permalink this comment Harry Tue Oct 30, 2007 at 04.50 pm

Excellent tutorial. I agree with those who think that the screencast is way more useful (and entertaining) than regular screenshots. I hope you will make the switch permanent.

As usual, great work and I can’t wait for the next one :)


gravatar

19

permalink this comment Leo Tue Oct 30, 2007 at 04.55 pm

You have a very relaxed and easy (dare I say “sexy”?) voice. This is something a lot of people from Belgium, and especially the female part, share :)


gravatar

20

permalink this comment thenine Tue Oct 30, 2007 at 05.17 pm

Thanks for this screencast! It was very easy to follow although english is not my primary language. Your voice sounds very nice. Please keep doing more like this.


gravatar

21

permalink this comment Seth Aldridge Tue Oct 30, 2007 at 07.03 pm

From an American perspective you have an excellent speaking voice…you kind of sound like Bjork.


gravatar

22

permalink this comment Ani Jovanova Tue Oct 30, 2007 at 07.14 pm

oh, of course we enjoyed your video tutorial! What a great way to learn! Not being a frequent Illustrator user, from this tutorial I got a bunch of tips and tricks. Thanks Veerle!


gravatar

23

permalink this comment Robert Tue Oct 30, 2007 at 07.19 pm

Very nice tutorial! i really enjoyed it and since i’m just starting with illustrator i learned some nice shortcuts and tricks.


gravatar

24

permalink this comment whiskey Tue Oct 30, 2007 at 07.39 pm

Would you be willing on making this video available to watch “a la youtube” sans youtube’s quality restrictions? (all for free of course)
This would add the “watch it online” capability to it.

Just let me know, i suscribed to this thread.


gravatar

25

permalink this comment Nils Geylen Tue Oct 30, 2007 at 07.48 pm

Well done, Veerle.

I’ve been doing screencasts for a couple months now, so I know how hard they can be.

Don’t forget: screenshots suck, screencasts rulio!


gravatar

26

permalink this comment b4it Tue Oct 30, 2007 at 07.52 pm

When you do this it is so simply… :)


gravatar

27

permalink this comment ronicadesign Tue Oct 30, 2007 at 07.55 pm

Fantastic screencast Veerle! You did a great job, you have a very calm and patient voice (great accent too).

I loved the shortcuts. I wish more screencast were done as well. I hope to see more soon!


gravatar

28

permalink this comment Steph Boudreau Tue Oct 30, 2007 at 09.30 pm

It was nice to finally (after all these years) hear your voice. Good tutorial.

Keep up the good work.


Steph


gravatar

29

permalink this comment Hunt Tue Oct 30, 2007 at 10.09 pm

Realy. Very nice video. I advise to look


gravatar

30

permalink this comment lewro Tue Oct 30, 2007 at 10.34 pm

Excellent tutorial. Looking forward to the next one.


gravatar

31

permalink this comment David Madden Tue Oct 30, 2007 at 11.11 pm

Thanks, that was a great tutorial. You are single handedly teaching me how to use Illustrator.

I cant thank you enough for all your great tutorials.


gravatar

32

permalink this comment lise Wed Oct 31, 2007 at 12.03 am

Thank you very much for the tutorial.
Next time you post a video, could you please also post an image of the final “product” ?
Thanks - Lise


gravatar

33

permalink this comment Schlappes Wed Oct 31, 2007 at 12.23 am

very nice tuts ... i just come from inner.geek.nz they mentioned your blog as bookmark and i must say fantastic, great stuff veerle!


gravatar

34

permalink this comment Phillip Wed Oct 31, 2007 at 02.18 am

First time I actually had fun listening to an illustrator tutorial. Calm voice, speed I can follow, nice example. We need more of that. Hope it isn´t more work than the text-tuts.


gravatar

35

permalink this comment Joey Trimmer Wed Oct 31, 2007 at 05.26 am

That was a great screencast Veerle! I love all of the little tricks up your sleeve. The spacebar to reposition the shape as you are creating it was a great tip.


gravatar

36

permalink this comment DUZ Wed Oct 31, 2007 at 09.36 am

Thanks Veerle!! Also first time I hear your voice… nice tutorial greatly explained.


gravatar

37

permalink this comment Veerle Wed Oct 31, 2007 at 10.21 am

Wow! Thanks so much for all your positive feedback :) I knew people would prefer this over screenshots, but I wasn’t sure about the end result, your feedback and how I would sound. If I consider the time I spend in writing a tutorial, then screencasts are better. I needed a bit of practice though to be honest. Hopefully this will get better and smoother so I can do this in less time in the future (meaning, not starting over a few times which was the case now).

whiskey said:

Would you be willing on making this video available to watch “a la youtube” sans youtube’s quality restrictions?

Actually no, sorry, at least not for now. This requires re-encoding the movie and that takes a long time and extra steps, experimentation etc. Now I only need to record, choose my encoding and click OK and that’s it and I prefer quality. That’s why I choose H264 over other formats. The file would be bigger too.

lise said:

Next time you post a video, could you please also post an image of the final “product” ?

You are totally right. I was just referring to one of my previous articles where I promised I would show how to create this folder, but didn’t think about showing a screenshot for people who are just new or didn’t know about this. I forgot all about that. It’s now in place.


gravatar

38

permalink this comment tony Wed Oct 31, 2007 at 12.10 pm

Thank you Veerle. Very nice tutorial. QuickTime format is much better than youtube so don’t worry about file size ;-)

Did I mension you have a very sexy voice? :-)


gravatar

39

permalink this comment RobertdM Wed Oct 31, 2007 at 01.29 pm

Good work!. Made me realize that I still need to think more in shapes when working with Illustrator, I keep messing about with lines too much (which is much more time consuming).


gravatar

40

permalink this comment Marc van Gijn Wed Oct 31, 2007 at 05.26 pm

Perfect tutorial! You make the web a wonderful place. Again I’ve learned something today! The trick with the spacebar to move the rectangle and the in-/decreasing of the rounded corners are true little diamonds to me. Thanks!


gravatar

41

permalink this comment Jeff Wed Oct 31, 2007 at 07.24 pm

Sexy voice.  Love the accent.  You should also have a pip webcam so you can actually talk to and look at us! :)


gravatar

42

permalink this comment Christopher J San-Claire Thu Nov 1, 2007 at 12.25 am

Thank you very much, it was great… I am just starting out and follow a few blogs, but I always look forward to your articles and approvels..but today it was a great suprise to see this screencast grrreatly enjoyed it a very pleasing voice and great timing.

I hope you will continue this, and I thank you once again

Chris


gravatar

43

permalink this comment James De Angelis Thu Nov 1, 2007 at 12.43 am

Thanks a bunch, Veerle.

As others have mentioned the quality of using video lets you really see the process from start to finish. Even the best of teachers some times forget to include steps that may seem obvious to you but not to the reader :)

I also picked up a few steps about general illustrator use, great tutorial all round!


gravatar

44

permalink this comment Kris Thu Nov 1, 2007 at 12.55 am

Great video. I used to work a lot with Illustrator, but I am not into visual design anymore. At least, not professionally. Also, great to hear your voice.

What recording software are you using?


gravatar

45

permalink this comment Matt Thu Nov 1, 2007 at 03.15 am

Nice! your voice is so sweet!


gravatar

46

permalink this comment emil Thu Nov 1, 2007 at 11.31 am

Coool, to bad I don’t like the look of the new icons, however… I’ll try to make some new folder icons in 512x512, so I may use this as a reference :)


gravatar

47

permalink this comment blackshtef Thu Nov 1, 2007 at 04.34 pm

I would like to thank you for this excellent video tutorial! Your voice is so lovely and I think you should do this more often ;)
Great job!


gravatar

48

permalink this comment Harold Thu Nov 1, 2007 at 07.02 pm

Amazing job Veerle.  Let me just reiterate with everyone that it would be fantastic to see more screencasts from you.  You are someone I have always admired for great illustration skills and it would be great to see you impart more of that knowledge.

Thanks again for sharing!


gravatar

49

permalink this comment lise Thu Nov 1, 2007 at 08.38 pm

Thanks for adding the 3 screenshots!
It’s perfect!
Lise


gravatar

50

permalink this comment Delioncourt Fri Nov 2, 2007 at 03.43 am

Simply amazing how easy you make it all seem. I’ve recently discovered your blog and I have to say that from a designer’s point of view, it’s fascinating. The rich content powered by a magnificent design makes your website stand out. Kudos Veerle! You just convinced me to become a regular reader of a blog. This is a first :-)


gravatar

51

permalink this comment Ara P. Fri Nov 2, 2007 at 01.30 pm

woow..really cool tutorial, simple but really amazing result..thanks a lot


gravatar

52

permalink this comment Balancedi Fri Nov 2, 2007 at 01.54 pm

Veerle I will happily watch your future screencasts. I learned many helpful tips in just a few minutes from this one. You explained things very clearly and your speaking voice is wonderful. 

I would not enjoy the tutorial as much if it were too polished and “professional”. That would make it would seem unnatural and packaged.

Please make another one soon. Thank you.


gravatar

53

permalink this comment mmhan Fri Nov 2, 2007 at 03.44 pm

It’s really a nice tutorial.

Thanks for the effort.

Although, one thing to point out, you could see some pattern on the icon if you zoom it up and I guess you might have missed out.


gravatar

54

permalink this comment Robin Fri Nov 2, 2007 at 11.24 pm

Great - picked up a few tip I didn’t know before.

What software did you use to record the screencast?


gravatar

55

permalink this comment Kordump Sat Nov 3, 2007 at 02.11 am

someone said that would start to think more in combining shapes from now on. i second that. the way you made the tiny little corner of the folder tab was almost to damn simple. would have never thought of it myself.

noticed an audioscrobbler icon on your dock… would love to know what do you listen to…


gravatar

56

permalink this comment Bake Sat Nov 3, 2007 at 04.42 am

We thank you


gravatar

57

permalink this comment Thomas Sat Nov 3, 2007 at 06.19 am

Nice tutorial, very clean workflow.

Oh, and your voice and accent sounds just like Björk’s. Real charming. ;)


gravatar

58

permalink this comment Fat Fingers Sat Nov 3, 2007 at 09.14 am

Video tutorials are definitely the way forward for things like this.  Not being the most graphically skilled person i really struggle when it comes to following paper based tutorials.

In my opinion hosting the video yourself (as you have done) is much better too.  The video quality of the some of the tutorials that can be found on YouTube is awful because of the way that they re-encode everything that’s uploaded even if the source file is flash anyway.

Thanks and keep them coming.


gravatar

59

permalink this comment Matthias Sat Nov 3, 2007 at 10.49 am

Charming voice.


gravatar

60

permalink this comment LorenzoMarchi Sat Nov 3, 2007 at 02.32 pm

Thank you so much for sharing this vid. I learned some nice illustrator tips I didn’t know :D


gravatar

61

permalink this comment chris Sat Nov 3, 2007 at 06.47 pm

people easily forget the earlier illustrator sketch from start to finish tutorial that I still give my students! and I’d also like to know the screencast process, I’m about to do them for class in the spring.


gravatar

62

permalink this comment Jon Sun Nov 4, 2007 at 11.39 am

Thanks - this will definitely come in handy, I can’t see this working on youtube’s tiny window!


gravatar

63

permalink this comment SasH Sun Nov 4, 2007 at 05.23 pm

Wonderful!!! Thank you so much for this ! I really appreciate your effort.

Is there any tutorial on how to create that inset effect, those symbols inside the Leopard folders ? I tried something but it never looked as good as original ones… :(

Thanks in advance!


gravatar

64

permalink this comment Ali Sun Nov 4, 2007 at 08.11 pm

I really liked it. Very informative, and inspiring. I really think you should do more of these.

Thank you very much Veerle


gravatar

65

permalink this comment Jono Mon Nov 5, 2007 at 10.47 am

Like a lot of others here I much prefer the video tutorials to the static screenshots versions. Although I use Illustrator all the time I’ve picked up a few little tips here & there, thanks a lot!

And sorry to sound shallow but love the sound of your voice & accent. I think if you read out headlines from a newspaper all day I could listen to it :p


gravatar

66

permalink this comment zoë jessica Mon Nov 5, 2007 at 12.08 pm

I loved the screencast too – it’s such a great way of getting a message across, especially to non-technical clients! Does anybody know (or Veerle, could you tell me) what software was used to display the keystrokes on the movie? I’ve used Mouseposé from Boinx (on the mac), which displays in a “lower third” format, but I much prefer the central fading display on Veerle’s movie. Any help gratefully appreciated!


gravatar

67

permalink this comment Veerle Mon Nov 5, 2007 at 12.43 pm

chris said:

I’d also like to know the screencast process, I’m about to do them for class in the spring.

It’s pretty simple: set up the screen-size click record and encode.


SasH said:

Is there any tutorial on how to create that inset effect, those symbols inside the Leopard folders?

If you look under the article there is a section called “related”. The link is there.

zoë jessica said:

Does anybody know (or Veerle, could you tell me) what software was used to display the keystrokes on the movie?

It’s built into the application that I used to record this tutorial. It’s called Screencast.


gravatar

68

permalink this comment SasH Mon Nov 5, 2007 at 01.46 pm

Veerle said:

...If you look under the article there is a section called “related”. The link is there…

Yes, yes I’ve noticed that one, but is there anything on how to create those icons inside the Leopard folders like original ones… for example, we have all those icons we get with Leopard, but in case I want to create some new icon type using completely new icon inside the Folder (the image in the center of the folder), I don’t know how to proceed with it…

Thanks again!


gravatar

69

permalink this comment Veerle Mon Nov 5, 2007 at 02.46 pm

SasH said:

Yes, yes I’ve noticed that one, but is there anything on how to create those icons inside the Leopard folders like original ones…

I haven’t tried this yet on a folder icon, but I assume if you add the same (white drop shadow) effect to your icon on the folder, you get the same inset effect. That’s why I linked to that article. After all it’s the same effect you want to achieve. Hope this helps.


gravatar

70

permalink this comment hans Tue Nov 6, 2007 at 12.34 am

Thanks, Veerle for the screencast. Having made quite a few of them, I could only imagine how tedious it is to make one. Screenshots may just take less time and efforts. However, the fruit of your pain and efforts is only going to grow larger and juicier. Please keep up the good work!

And I hope you don’t take the Youtube route. :) The compressed video format does not lend itself well to this kind of information delivery.

Thanks again!


gravatar

71

permalink this comment Jopicar Tue Nov 6, 2007 at 09.43 pm

Amazing !! :)

Rhnaks Veerle ;)


gravatar

72

permalink this comment Thmas Fri Nov 9, 2007 at 09.56 am

Can you give us the final folder in .AI?


gravatar

73

permalink this comment Julian Sat Nov 10, 2007 at 12.02 pm

Really great. I also tried this before watching your video and as I’m a illustrator beginner I wasn’t that successful. Now that I’ve watched your video I see how easy it is and how silly I was :-).


gravatar

74

permalink this comment Jon Mon Nov 12, 2007 at 07.46 pm

Agreed this is much easier than following text based tutorials.


gravatar

75

permalink this comment sikken Fri Nov 16, 2007 at 10.30 pm

Knap… Very nice tut, hoping there will be more. You are the Andrew Kramer of AI :-) Keep it up


gravatar

76

permalink this comment Timo K. Sun Nov 18, 2007 at 12.12 am

Awesome tutorial, thanks for sharing this with us, Veerle!!


gravatar

77

permalink this comment Jwolfe Mon Nov 19, 2007 at 10.37 am

Great tutorial! You sounded exactly how I imagined you would sound.

You brought an honest element to this tutorial that a professional voice over never would have achieved.

I’ve been reading you for years, and the one truely amazing thing that stands out about your entire community approach is your honesty.

You make everyone feel welcomed!

Thank you!


gravatar

78

permalink this comment Medina Thu Nov 22, 2007 at 02.37 pm

Veerle, you ROCK!!  Thank you SO MUCH for this screencast!  It’s so much easier than following a written tutorial.  You get to watch the designer in action and really get a sense of how they manipulate the points and tools provided by AI.  I really enjoyed this tutorial and can’t wait for the next one (you’re now my homepage)...

And btw, in English, the letter “J” is pronounced like the French letter “G”.  Not a big issue because each time you said the command aloud, you also displayed a screenshot of each command.  At first, I thought you meant the actual letter “G”, until I saw the screenshot. 

I live in France right now, but I’m from the US, so I understood afterward why your “J” sounded like or “G”.  :0)  Keep up the great work!  And we LOVE accents!


gravatar

79

permalink this comment Veerle Thu Nov 22, 2007 at 05.10 pm

Medina said:

And btw, in English, the letter “J” is pronounced like the French letter “G”.

Thanks for that tip. I wasn’t aware I pronounced it wrong. I’ve probably pronounced it like you should pronounce the letter ‘G’ in English, but instead I should have said ‘Jay’, right? I’m not from France myself btw (though, totally love that country). My main language is Dutch. I live in the Flemish part of Belgium, but I see what you mean with the French “g” isn’t not exactly the same but close. Happy to hear you like the screencast and my accent ;) It’s hard to hide but I do my best :)


gravatar

80

permalink this comment Medina Fri Nov 23, 2007 at 09.17 am

Is it possible to indicate maybe briefly here, (or with another nice screencast, hint hint!) how to create the paper texture of the leopard folders?  I’ve been up all night trying to figure it out with effects in Illustrator and I have yet to be able to mimic it.  :ol Any suggestions? 

You mentioned in an earlier Leopard post that you weren’t fond of the remaining aqua scrollbars in Leopard.  I happened upon this post regarding solutions for making all of your Mac Leopard scrollbars appear the way the scroll bar does in iTunes.  Maybe it helps?...


gravatar

81

permalink this comment bek Sat Nov 24, 2007 at 05.04 pm

what a sweet voice.


gravatar

82

permalink this comment Joshua Hughes (Fresh Branding) Mon Nov 26, 2007 at 12.25 pm

This is SO cool… Thank you. The little tips ‘n’ tricks were invaluable.



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist