Illustrator Tutorial: Surprise Gift



There are times when you will need to do vector gift box and effects for special occasions. This Illustrator tutorial will give you an idea how this can be done using brushes and some other techniques. I will not be going into details how each step is done but I will illustrate on some of the techniques used to create this vector gift box illustration.

1. Breakdown of Layers

The illustration consists of 6 different layers. We will look at how each layer is done.

2. Background Layer

The is the background mesh of the illustration. First we create a blue square and we start adding points using the Gradient Mesh Tool and tweak it to the the shape below. You can see that I have set the bottom points to a darker blue and the middle point to white. If you have difficulty creating this gradient mesh, take a look at my Gradient Mesh tutorial.

3. Gift Box

Drawing the gift box is pretty simple. All you need is the Pen Tool. A tip for beginner is to turn on the Grid (View>Show Grid) and Enable Snapping(View>Enable Snap to Grid). With the grid on, you can precisely snap each points to the grid so that each intersecting shape will line up perfectly.

gift box

After you have drawn the gift box, fill it will different gradients to give the box volume. Finally, draw the ribbons to complete the illustration.

gift box

Here is the final gift box.

gift box

4. Line Patterns

For the line patterns on the gift box, you will find that there are actually some perspective. We can easily achieve the effect by using the Blend Tool. Below are the steps on creating it…

First we create a long rectangle and place it at the start point(left side). Next, we duplicate the rectangle and rotate it slightly and we place it at the end point(right side).


Select the Blend Tool. Click on the left rectangle stripe and hold Alt/Option and click on the right rectangle stripe. If you do it correctly, it would pop up the Blend Options. Select Specified Steps for Spacing and enter a value of 7.

This is what it will look like after we applied the blend correctly. Next, we need to expand the blend. Go Object>Expand to expand it into individual shapes.

Finally, we need to trim off the exceeding shape. Copy the rectangle face on the gift box underneath the stripes. Press Ctrl/Command+F to paste it in front. Select both the pasted shape and stripes. Open up Pathfinder and hold Alt/Option and select Intersect Shape to trim away the protruding areas. After that, we apply a gradient to the shape to achieve the effect I have done for my stripes.

5. Swirl Explosion

The gift explosion effect can be easily achieved by using the Brush Tool.

Swirl Explosion

Let’s start drawing our swirly lines using your Pencil Tool or Pen Tool. Make sure you draw from one single direction, so that when you apply the art brush it will point in the same direction.

Next we will create the brush by drawing a long triangle stripe shape. Open up your Brushes Palette and click New. Select New Art Brush when the option pops up.

Finally, we select all the swirly lines and apply the new art brush we have made. (If the lines are going in the opposite direction, you can double click your Brush in the Brushes palette and check Flip Along to swap the direction.) You notice that I have varying widths for my swirly, you can do this by selecting each individual swirly and setting the line stroke to a smaller/bigger value.

After you are satisfied with what you have done. Go Object>Expand Appearance to expand the swirly. Open up your Gradient Palette and apply different gradients to your swirly to finish up the swirls. To hide the unwanted parts we can mask it out.

6. Fairy dust

Fairy Dust

If you have no idea how to achieve this fairy dust effect in less than 3 mins. Then you better check out my Starry Night tutorial.

Hope after reading this tutorial you will have a better idea on how this illustration is done.

Be Sociable, Share!

Social Media Icons

Visit Us On TwitterVisit Us On FacebookCheck Our Feed

Comments are closed.

  1. you S-U-C-K!
    when u can’t go into the detail, then why the f-u-c-k you’ve brought your stinky a$$ into the tutorial writing

  2. Hi Owais,

    I’m sorry if you didn’t find this tutorial useful. When I’m writing this tutorial, I just want to illustrate some of the techniques on how the effect is done. I didn’t want to go into details as how to draw the gift. Now, I understand what the readers needs, hence I have improved on my recent new tutorials. Thanks for your comments, I will improve on my new tutorials.

  3. Nice tips and tricks.. Owais Khan and Paul don’t appreciate this Bcoz they don’t have initiative. they must respect the writer… πŸ™‚ by the way… it’s a nice tutorial…

  4. Thanks for the tutorial. It’s a great concept. It is actually meant for intermediate who understand the basics of illustrator not for beginners.

  5. The tutorial is nice, man i got to get my illustrator up and running anyway, i understand Paul and Owais khan. They just really wanna learn the basics as well, you should maybe create categories like Basic intermediate experts and just fill the Basic with Basic setups of tutorials such as how to make this line how to make this effect. That way they can take all the effects and create some splendid masterpiece.

    The Tutorial was awesome and i learned a lot πŸ˜€

    With warmest, steini

  6. Can you pls. send me the AI file for this E-mail “jmshr89@hotmail.com.

    I waiting for your replay.

    Thanking you

  7. Hi Jam, as this file is a stock vector sold at istockphoto, I cannot send it to you. If your are interested to use it for your project, you can buy it at stockphoto. The link is at the end post.

  8. this is so stupid. the only hard thing about this is make the box and you wont even show us how to do it. you should just take it off the web site.

  9. This tutorial is excellent and you sami are so lame if you do not know how to draw a box. Better give up on using illustrator.

  10. i thnk its quiet a decent tutorial but the thing is..even if makin da box is easy..da process should hav been explained coz many people lukin for tutorials are freshers. neways..nice job.

  11. Very nice and easy to understand tutorial. Thanks!
    @Roli: Even though I can understand your post, you should take the time to spell correctly. Thx

  12. Great tutorial!
    not only have you given steps for various effects, but given an insight to the thought process involved in developing such a piece.

    Keep up the good work…….and remember: More people appreciate the effort that you are taking to create this tutorial than the few who have nothing better to do than criticize.

  13. just atach a file with the shapes, or the final thing.
    You can upload it on many file shareing servers.

  14. Thanks for puting those tutorials up and please dont consider those lame comments as serious as the writers probably never tried to do a tutorial and dont know how hard it is.

  15. Tutorials are not for beginners who bought AI and just want to start making arts right away. You should first learn the basics and experiment making art by yourself. When you feel you are missing something or that you want to make things easier then you depend on others’ experiences.

    Thanks Tony for your tutorials.

  16. indrajit…. there is no need to use such bad language… Shows what sort of a person you are. If you don’t like the ‘kiddie suff'(gift boxes) you do not need to show it with such disrespect. If you can’t appreciate other people’s talent.. then i am sure you have none yourself

  17. this is more an inspiration post then a tutorial. you set the picture, but not how-to, that’s what a tutorial should do, right?

  18. Hi, I like this tutorial, especially the stars and fairy dust effects. If you can also give tutorial on making a box and the design, I think that would be better. Christmas is coming, so not only the image is necessary, but also the real box. You can use the design on six sides of a box. But I believe you would have to write quite a lot for the whole box design tutorial, though.
    And one more thing, I would like to ask:
    I found this image, “gift_surprise.jpg” from Creative Commons Search. Does it mean that this vector graphic can be used free of charge? I’m sorry that I don’t know much about photo copyrights.

  19. I KINDA AGREE WITH EVERYONE. I TRIED MAKING THE SAME THING N I COULDNT BECAUSE YOU DIDNT REALLY GO INTO DETAIL AND IT REALLY WASNT A STEP BY STEP BUT I DID LEARN A FEW THINGS SO ALL IN ALL IT WAS OKAY.

  20. this tutorial is useless. it shows the laziness of the author. hey, lazy writer, stop writing. keep your knowledge to yourself because no one can follow your so-called tutorial. it is not tutorial at all, it is only a show-off.

  21. Maybe Yuri needs some basic tutorials. It seems you are in the wrong site. And there is not need to be so disrespectful. I bet you can not make a better tutorial by yourself.

  22. could you post the link to this particular image on istock again please? Spenty some time looking but can’t lovcate it.
    Tx

  23. Wonderful blog! I truly love how it’s uncomplicated on my eyes and the details is well written. I am wondering how I can be notified whenever a new post has been made. I have subscribed to your rss feed which should do the trick! Have a nice day!Also welcome to my website
    Gift Box Wrap Tutorial

  24. For those people who don’t understand these tips. You must learn how to do it in Illustrator. I thank the author for I it helped me some tips like the grid that I didn’t use before. Please refrain from making bad comments! If you don’t like it then why read this tutorial anyway? You can actually ask some more specific questions not some f*** comments. If you guys don’t know how its being done then go ahead and download the link.
    To Tony, thank you for this… Keep up your tutorial and tips… more power! Don’t listen to faggots… πŸ™‚

  25. Okay tutorial, but you did definitely leave out a lot of steps. Most notably the entire confetti layer seems to be conspicuously absent… But it sounds like your future tutorials are more in-depth. And I did learn some things, so thank you.

  26. My coder is trying to convince me to move to .net from PHP. I have always disliked the idea because of the costs. But he’s tryiong none the less. I’ve been using Movable-type on various websites for about a year and am nervous about switching to another platform. I have heard excellent things about blogengine.net. Is there a way I can import all my wordpress posts into it? Any kind of help would be really appreciated!

  27. This is just a short steps to create that illustration.
    Its ok, sometimes I cant go in details…
    Please try explaining the lessons in details, or provide references to another sites tuts.

  28. Hi to every one, for the reason that I am in fact
    keen of reading this webpage’s post to be updated regularly. It includes fastidious data.

  • Belen continuouslightingkit.com/

    Hi to every one, for the reason that I am in fact keen of reading this webpage's post to be updated regularly. It includes fastidious data.
    UpVote Reply 0 Upvotes
  • sona healthcaretube.blogspot.com/

    great .
    UpVote Reply 0 Upvotes
  • go here bit.ly/Qef9L2

    I love the fish and the present, really cool!
    UpVote Reply 0 Upvotes
  • go here onlinecasinohouse.blog.com

    Wow this is a GREAT GUIDE!!!
    UpVote Reply 0 Upvotes
  • Wedding Photography in Delhi www.surrealmedialabs.com/wedding_photography.html

    Nice Idea.. I am very impress.
    UpVote Reply 0 Upvotes
  • Iran Lama

    Hi thanks for tuterials. it;s a great idea .thanks
    UpVote Reply 0 Upvotes
  • Jayesh avoidedthoughts.blogspot.com/

    This is just a short steps to create that illustration. Its ok, sometimes I cant go in details... Please try explaining the lessons in details, or provide references to another sites tuts.
    UpVote Reply 0 Upvotes
  • seo seo

    My coder is trying to convince me to move to .net from PHP. I have always disliked the idea because of the costs. But he's tryiong none the less. I've been using Movable-type on various websites for about a year and am nervous about switching to another platform. I have heard excellent things about blogengine.net. Is there a way I can import all my wordpress posts into it? Any kind of help would be really appreciated!
    UpVote Reply 0 Upvotes
  • Brian Johnson brianjohnsondesign.com

    Okay tutorial, but you did definitely leave out a lot of steps. Most notably the entire confetti layer seems to be conspicuously absent... But it sounds like your future tutorials are more in-depth. And I did learn some things, so thank you.
    UpVote Reply 0 Upvotes
  • Erna Steynberg

    Thank you, for all the nice ideas, tips and tricks.
    UpVote Reply 0 Upvotes
  • Nyox

    For those people who don't understand these tips. You must learn how to do it in Illustrator. I thank the author for I it helped me some tips like the grid that I didn't use before. Please refrain from making bad comments! If you don't like it then why read this tutorial anyway? You can actually ask some more specific questions not some f*** comments. If you guys don't know how its being done then go ahead and download the link. To Tony, thank you for this... Keep up your tutorial and tips... more power! Don't listen to faggots... :)
    UpVote Reply 0 Upvotes
  • valery

    this so stupid!!!!
    UpVote Reply 0 Upvotes
  • Anonymous

    Can you please share the PSD file of it?
    UpVote Reply 0 Upvotes
  • ari www.gift-boxes1.com

    Wonderful blog! I truly love how it’s uncomplicated on my eyes and the details is well written. I am wondering how I can be notified whenever a new post has been made. I have subscribed to your rss feed which should do the trick! Have a nice day!Also welcome to my website <a href="http://www.gift-boxes1.com" rel="nofollow">Gift Box Wrap Tutorial</a>
    UpVote Reply 0 Upvotes
  • Sven Spinkternards

    Good tip! At these prices who can complain.
    UpVote Reply 0 Upvotes
  • ADEEL

    nice tutorial thanks....
    UpVote Reply 0 Upvotes
  • Kim bla

    btw STB, i love you :D lol as a frieeend
    UpVote Reply 0 Upvotes
  • Kim bla

    thank you STB :D
    UpVote Reply 0 Upvotes
  • sven

    could you post the link to this particular image on istock again please? Spenty some time looking but can't lovcate it. Tx
    UpVote Reply 0 Upvotes
  • Babu

    Thanks For Ur Support
    UpVote Reply 0 Upvotes
  • SouthAm

    Maybe Yuri needs some basic tutorials. It seems you are in the wrong site. And there is not need to be so disrespectful. I bet you can not make a better tutorial by yourself.
    UpVote Reply 0 Upvotes
  • yuri

    this tutorial is useless. it shows the laziness of the author. hey, lazy writer, stop writing. keep your knowledge to yourself because no one can follow your so-called tutorial. it is not tutorial at all, it is only a show-off.
    UpVote Reply 0 Upvotes
  • amy

    excuse me ,can i know how to make this beautiful confetti?
    UpVote Reply 0 Upvotes
  • amy chuang

    excuse me,can i know how to make confetti?
    UpVote Reply 0 Upvotes
  • victor0304 victor0304

    muito irado...
    UpVote Reply 0 Upvotes
  • madhan

    its nice i learned well thank u send me some more picture to get idea
    UpVote Reply 0 Upvotes
  • :]Heyyy

    hey this is cool. ur tutorials are great. we use ur site in tech class yaaaaa
    UpVote Reply 0 Upvotes
  • TAQUITA SKILLSAMILLION.YOLASITE.COM

    I KINDA AGREE WITH EVERYONE. I TRIED MAKING THE SAME THING N I COULDNT BECAUSE YOU DIDNT REALLY GO INTO DETAIL AND IT REALLY WASNT A STEP BY STEP BUT I DID LEARN A FEW THINGS SO ALL IN ALL IT WAS OKAY.
    UpVote Reply 0 Upvotes
  • Natalie www.photoshopplanet.net

    Excellent. There are many useful tips in this tutorial. Thank you for sharing.
    UpVote Reply 0 Upvotes
  • Flameseeker www.logobee.com

    Thanks for the tutorial it's pretty good.
    UpVote Reply 0 Upvotes
  • chufaxy

    i love it thanks 4 empowering more
    UpVote Reply 0 Upvotes
  • bobito ds-dom.ru

    The tutorial is goog. Thanks
    UpVote Reply 0 Upvotes
  • ekwe

    nice tut. wud help though if you had a "basic" category
    UpVote Reply 0 Upvotes
  • Jess

    It's a very nice tutorial for me, thanks for your job.
    UpVote Reply 0 Upvotes
  • Vectordiary www.vectordiary.com

    Hi Yanto, I have added a quick screenshot of the box drawing process. However, the image is copyright protected. If you would like to have a Christmas gift box illustration. I have another similar surprise gift box made for Christmas. You can find it here: http://www.istockphoto.com/file_closeup.php?id=7429387&refnum=illusime
    UpVote Reply 0 Upvotes
  • Yanto acespower.blogspot.com

    Hi, I like this tutorial, especially the stars and fairy dust effects. If you can also give tutorial on making a box and the design, I think that would be better. Christmas is coming, so not only the image is necessary, but also the real box. You can use the design on six sides of a box. But I believe you would have to write quite a lot for the whole box design tutorial, though. And one more thing, I would like to ask: I found this image, "gift_surprise.jpg" from Creative Commons Search. Does it mean that this vector graphic can be used free of charge? I'm sorry that I don't know much about photo copyrights.
    UpVote Reply 0 Upvotes
  • Vectordiary www.vectordiary.com

    Hi Kaber, my image is royalty-free. Click the buy source file from istockphoto. Once you have purchase the image, you are free to use it on your site.
    UpVote Reply 0 Upvotes
  • kaber kaber-vasuki.blogspot.com

    love this image.. can i use it on my blog?
    UpVote Reply 0 Upvotes
  • jeroen

    this is more an inspiration post then a tutorial. you set the picture, but not how-to, that's what a tutorial should do, right?
    UpVote Reply 0 Upvotes
  • Robolasse

    This is a very useful tutorial. Nice job, and keep it up. :-)
    UpVote Reply 0 Upvotes
  • alexandra www.ant-design.gr

    perfect! so manny tips in an article ;)
    UpVote Reply 0 Upvotes
  • ans

    indrajit.... there is no need to use such bad language... Shows what sort of a person you are. If you don't like the 'kiddie suff'(gift boxes) you do not need to show it with such disrespect. If you can't appreciate other people's talent.. then i am sure you have none yourself
    UpVote Reply 0 Upvotes
  • Khawla alkyoot.com

    Tutorials are not for beginners who bought AI and just want to start making arts right away. You should first learn the basics and experiment making art by yourself. When you feel you are missing something or that you want to make things easier then you depend on others' experiences. Thanks Tony for your tutorials.
    UpVote Reply 0 Upvotes
  • Jura

    Thanks for puting those tutorials up and please dont consider those lame comments as serious as the writers probably never tried to do a tutorial and dont know how hard it is.
    UpVote Reply 0 Upvotes
  • iStockdiary www.istockdiary.com

    Hi Joro, if you like the illustration you can buy the source file from istockphoto. The link is located at the end of the post.
    UpVote Reply 0 Upvotes
  • Joro

    just atach a file with the shapes, or the final thing. You can upload it on many file shareing servers.
    UpVote Reply 0 Upvotes
  • Kevin

    Great tutorial! not only have you given steps for various effects, but given an insight to the thought process involved in developing such a piece. Keep up the good work.......and remember: More people appreciate the effort that you are taking to create this tutorial than the few who have nothing better to do than criticize.
    UpVote Reply 0 Upvotes
  • iStockdiary www.istockdiary.com

    Thanks, I will be careful next time.
    UpVote Reply 0 Upvotes
  • Brandon

    Very nice and easy to understand tutorial. Thanks! @Roli: Even though I can understand your post, you should take the time to spell correctly. Thx
    UpVote Reply 0 Upvotes
  • Roli

    i thnk its quiet a decent tutorial but the thing is..even if makin da box is easy..da process should hav been explained coz many people lukin for tutorials are freshers. neways..nice job.
    UpVote Reply 0 Upvotes
  • Vladimir

    This tutorial is excellent and you sami are so lame if you do not know how to draw a box. Better give up on using illustrator.
    UpVote Reply 0 Upvotes
  • Sami Sweeney

    this is so stupid. the only hard thing about this is make the box and you wont even show us how to do it. you should just take it off the web site.
    UpVote Reply 0 Upvotes
  • jmr

    have a nice day ! thank you for your replay by
    UpVote Reply 0 Upvotes
  • iStockdiary www.istockdiary.com

    Hi Jam, as this file is a stock vector sold at istockphoto, I cannot send it to you. If your are interested to use it for your project, you can buy it at stockphoto. The link is at the end post.
    UpVote Reply 0 Upvotes
  • jam

    Can you pls. send me the AI file for this E-mail "jmshr89@hotmail.com. I waiting for your replay. Thanking you
    UpVote Reply 0 Upvotes
  • Steini

    The tutorial is nice, man i got to get my illustrator up and running anyway, i understand Paul and Owais khan. They just really wanna learn the basics as well, you should maybe create categories like Basic intermediate experts and just fill the Basic with Basic setups of tutorials such as how to make this line how to make this effect. That way they can take all the effects and create some splendid masterpiece. The Tutorial was awesome and i learned a lot :D With warmest, steini
    UpVote Reply 0 Upvotes
  • hfng www.reddotstudio.ch

    Thanks for the tutorial. It's a great concept. It is actually meant for intermediate who understand the basics of illustrator not for beginners.
    UpVote Reply 0 Upvotes
  • corpsweb

    Nice tips and tricks.. Owais Khan and Paul don't appreciate this Bcoz they don't have initiative. they must respect the writer... :) by the way... it's a nice tutorial...
    UpVote Reply 0 Upvotes
  • iStockdiary www.istockdiary.com

    Hi Owais, I'm sorry if you didn't find this tutorial useful. When I'm writing this tutorial, I just want to illustrate some of the techniques on how the effect is done. I didn't want to go into details as how to draw the gift. Now, I understand what the readers needs, hence I have improved on my recent new tutorials. Thanks for your comments, I will improve on my new tutorials.
    UpVote Reply 0 Upvotes
  • Owais Khan

    you S-U-C-K! when u can't go into the detail, then why the f-u-c-k you've brought your stinky a$$ into the tutorial writing
    UpVote Reply 0 Upvotes
  • Olawale

    It is splendid
    UpVote Reply 0 Upvotes
  • Paul good-tutorials.com

    But that's okay, go ahead and delete my comment. I'm still sick of half-a$$ed Tuts...
    UpVote Reply 0 Upvotes
58 More Comments