Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo
In this tutorial, we will learn step by step to create a romantic scene that you won't soon forget. Think of the worst date you could possibly have, even though everything was planned perfectly and add a proposal as the cherry to top it all off. We'll explore each of these unforeseen events thoroughly, and utilize premade patterns that can be found here on Vectortuts+.
We'll be starting with a sketch that I've prepared specifically for this project. The typical 0.7 leaded pencil works well for small detailing and once finished, it can be scanned into the computer using a dpi of 300.
Once the sketch has been saved as either a JPEG or PNG it is brought into Adobe Illustrator. This particular file was prepared at 8.5 x 11 to start off. In some cases, you'll need to check your preferences by heading to the top of the bar and clicking on Document Setup > Edit Artboards or using the hotkeys Alt + Ctrl + P, where you can either manually pull the dashed lines around your artboard to the size you require, or input the size at the top of the bar.
In this step, I've started working on the base skin tones using only my Pen Tool (P) and curves are accomplished by holding down the Alt key as points are created to form each path. For our girlfriend's skin tone, I'm using two colors. This is a linear gradient with a solid Opacity throughout. As I go, I make sure to label my layers to make things easier on myself in the long run. If this was a more complex project, it would become even more necessary to label my layers, not only for myself, but also in the event that I may have to share it down the road with printers or the like. If you can, try and make this second nature. This two toned linear gradient is made from a light beige: R=244, G=225, B=186 and a peach color: R=226, G=116, B=112.
At this point we're merely adding clothing to her. Since this is going to be a pretty extensive piece, it can be helpful to at least define your main colors throughout your composition beforehand. I've chosen to go with a deep purple gradient with just a small pop of hot pink to her heels. This two toned linear gradient for the dress and heels is made from a pure black: R=0, G=0, B=0 and a dark violet: R=45, G=29, B=45. I'm not only thinking about the look of the piece, I'm also thinking about how to have all the pieces I make relate well to each other. I could go more elaborate with her dress, but simplicity can also go along way. Since they're in Paris you'd expect him to take her to a fancy restaurant, especially on such an important night.
In this step, we're working in a separate layer labeled "Boyfriend" to work out our color choices for the male. I've worked out my color choice for his skin tone. This two toned linear gradient is made from a mocha brown: R=173, G=129, B=85 and a chocolate brown: R=71, G=36, B=12.
Next, we'll be adding his suit. The suit is a close to a charcoal grey, with a faint violet hue to it. This compliments the girlfriend's dress, and eventually will help us make decisions as far as the wall colors and general palette. This two toned linear gradient is made from a grey periwinkle: R=102, G=94, B=107 and a pure black.
From this point, we can now add his sock color and later add his shoes. This two toned radial gradient is made from a fire engine red: R=212, G=37, B=76 and a pure black. The color is effective in that it adds flare to his overall look. He's a relatively young guy, so trends dictate that he can have his own accessories that compliment his sense of style.
In this step, I am adding our main background elements. I've started with a red background made with my Rectangle Tool (M), but I will be using this color only as a place holder. As you work, you always have the option of recoloring items to compliment your overall project in a more pleasing manner. Personally I do this all the time. That's the biggest benefit you can ask for when you're still experimenting with color, just another awesome benefit of using vector based programs.
The night sky is a two toned radial gradient is made from a midnight blue: R=45, G=44, B=68 and an off black: R=0, G=0, B=10.
The next step is to make a new layer in your project and entitle it "Fireworks". We will be adding elements to our night sky so we'll start with something fun and easy, the fireworks.
Using our Pen Tool (P) and pressing our Alt key to create our curves we will make tear drop shaped curves that shoot outward. I did these in two different gradients. The first is a two toned radial gradient is made from a light petal pink: R=255, G=139, B=174 and a medium petal pink: R=255, G=139, B=160 with the Opacity turned down to 44% on the light petal side, and the second is two toned radial gradient is made from a hot blush pink: R=255, G=92, B=122 and a dark blush pink: R=162, G=0, B=34 with the Opacity turned down to 44% on the dark blush side.
In this step, we'll Group our pieces together by hitting Ctrl + G. Our lovely colors are now in one grouping to make it easier to select them and add effects.
Next, we will duplicate the layer and go to Effects > Blur > Gaussian Blur. We'll change our Radius to 2.6 pixels and press OK.
We will now use a simple concept to add a little sparkle to our night sky. Using our Ellipse Tool (L), add a number of circles in a sporadic array. We'll group these as well in the same way we did our fireworks. Make a duplicate layer of your stars and use our Gradient Blur effect with a Radius of 3.2 pixels.
In this step, I've added just a little more brightness to the fireworks by changing the color of the blurred group to a solid pink: R=249, G=88, B=123. You'll definitely see a difference when you're done.
In this step, we will add clouds. We're using a two toned linear gradient is made from a slate grey: R=92, G=90, B=114 and a pure black: R=0, G=0, B=0 with the Opacity set to 44% on the black side.
Even though we have the color, we don't exactly have the fluffiness that clouds are perceived to have. To accomplish this, we'll go to Effect > Stylize > Feather and change our Feather Radius to 12 pts and press OK. We'll also be using our Gaussian Blur effect on a few of our main clouds by going to Effect > Blur > Gaussian Blur and using a Radius between 1.2 and 4.2 pixels depending on the size of your clouds.
We can now add our lighting to the mix. We'll use our Gaussian Blur effect with a Radius of 1.2 pixels for the pure white lighting highlights.
We'll use our Pen Tool (P) to make our pure white lightning. It's a dramatic looking element, and very easy to make.
In this step, we are adding a little rain to our disastrous date. I'm using a Stroke of pure white with a Stroke Weight of 0.15 pts and an Opacity of 21%. I recommend Grouping these elements: Ctrl + G in order keep yourself sane.
I've made one grouping and I've duplicated the layer several times to have multiple pockets of rain. It's very simple, yet more effective then making tiny raindrops that would come off as cartoonish.
At this point I will make my plane. Though I feel rather sorry for putting this pilot in such a perilous adventure, the show must go on. I am using a two toned radial gradient made from: R=0, G=0, B=0 and R=0, G=0, B=0 for the main body.
The wings are done in a two toned radial gradient is made from a pure black: R=0, G=0, B=0 and a pure white: R=255, G=255, B=255.
I'll add my damaged banner and text at this point, and I'll use a very simple Font such as Helvetica or Arial in Bold for my letters. Once I have my text ready, I'll go ahead and click Type > Create Outlines in order to make it easier to color my text. My banner is a two toned radial gradient is made from a soft pink: R=255, G=185, B=185 and a mauve pink: R=69, G=2, B=0.
To make the airplane blend with its surroundings, I used the same color scheme from my clouds and used it to highlight both the plane and the banner.
Once I have all of my sky elements, I can highlight them all and Group them by pressing Ctrl + G. All of my layers are unlocked so I can do this, and eventually drag my grouping to my "Background" layer.
Duplicate your window shape, and put this over your sky elements grouping that you've just made. Highlight both and click Object > Clipping Mask > Make or Ctrl + 7
Using our same sky color, which we can collect from the Eyedropper Tool (I) we can start making our final outside elements. We'll start by making the Eiffel Tower. Use the lighter side of the gradient and work in the darker side for your negative spaces.
Once you have these pieces made, you'll highlight them and your tower shape lastly and click you Pathfinder panel to access the next step. If you don't see the Pathfinder panel, go up to Window > Pathfinder or click Shift + Ctrl + F9 to bring it up. Use the Exclude option to subtract the areas away from your tower.
To make our city of Paris, we'll use simple silhouettes. I've chosen to take our original gradient that as first used with our Eiffel Tower and by changing the blue side to a golden brown: R=30, G= 22, B=5. This gives the city life and a bustling glow of activity.
At this point I can use my Ellipse Tool (L) and make more small circles to imitate lighting. I love the romantic glow of stringed lights and this is a very simple application that can give you such a look.
Once I have my lights scattered across the city, I can group these components to make them easier to access.
After doing so, we'll add a little more glow to our city of love. Use your Ellipse Tool (L) to make an oval shape and use a two toned radial gradient is made from a lemon yellow: R=255, G=220, B=92 and a pure black: R=0, G=0, B=0 with the Opacity set to 0% on the black side. Put this element behind the city.
Now we can revisit our city lights. Make a duplicate of this group and while highlighted, click Effect > Blur > Gaussian Blur and change the Radial to 3.0 pixels.
In this step we'll make our railing by using a two toned radial gradient is made from a baby pink: R=255, G=208, B=208 and a burnt violet: R=46, G=4, B=0. It's all done with this color, and really not an element that we'll see too much of, but I find it important to the piece's integrity.
Once the railing is completed, we can add this to the masked layer. It comes off cleaner when you put your elements into the same mask.
In this step we're making our window frame. The frame is made of a Stroke line with a Stroke Weight of at least 8 pts. Once I'm happy with the look, I can go up to Object > Expand and check only the Stroke. Click OK or hit Enter to finalize.
Next, we'll lay out our floor planks in a two toned radial gradient is made from a mahogany brown: R=114, G=77, B=57 and a wood brown: R=35, G=17, B=6. The wood grain is made from a Stroke with a Weight of 0.5 pts and in a camel brown: R=114, G=77, B=57.
The next elements to make are our candlesticks. Start off with your candle holders which are made with a two toned radial gradient made from a pure black: R=0, G=0, B=0 and a medium grey: R=196, G=196, B=196.
The candles are made from another two toned radial Gradient made from a medium beige: R=204, G=178, B=121 and a pure white: R=255, G=255, B=255. Group each of these and make them in varying sizes to give off an interesting cascading effect.
The candles can now be grouped and you can duplicate this newly made layer to create a shadow. The shadow is a two toned linear gradient is made from a pure black: R=0, G=0, B=0 and a robust red: R=115, G=10, B=0 with the Opacity set to 0% on the robust red side.
Once I have these made, I can move onto the grating. This is the same color gradient as the candle holders.
Next, we'll make the light accent. I'm using a three toned radial gradient is made from a rouge red: R=115, G=24, B=0, butter yellow: R=255, G=240, B=115 and a yellow cream: R=255, G=238, B=162. I've accented it with a few red lines to give it a fancy, but clean look. The chains are made from pure black Strokes which were later expanded to keep the sizing permanent whether I shrunk or enlarged them.
After I have them finished I'll group them and place them behind the lamp. I will now make a new Ellipse (L) with the two toned Radial Gradient is made from a light yellow: R=255, G=238, B=162 and a venice yellow: R=243, G=220, B=149 with the Opacity set to 0% on the venice yellow aside. This will make a warm glow above our young couple.
At this point we have a good look at our background elements. As it is now, we could almost keep it as it's own finished project, especially with all the work we've put into everything, but we have plenty more to do.
At this point, we can make our chairs. We are using another two toned linear gradient is made from a royal red: R=139, G=33, B=0 and a pure black: R=0, G=0, B=0.
To give them a satin finish, we will go to Effect > Stylize > Feather and change the Feather Radius to 9 pts. Continue putting more of these highlights into the fabric to simulate a covered chair.
In this step will take the same color as our candle holders and make a table, a two toned radial gradient made from a pure black: R=0, G=0, B=0 and a medium grey: R=196, G=196, B=196.We won't really see this table too much, so it's okay to make it simple.
Once you have your table, you'll add the table cloth. This two toned radial gradient is made from a deep blue: R=0, G=8, B=69 and a teal blue: R=95, G=152, B=153 with the Opacity set to 55% on the teal blue side. Turn your overall Opacity down to 55% for a softer feel. From here, we'll use the same gradient for the shadows, and a solid bright blue: R=194, G=237, B=249 for the highlights. These elements have a Feather effect applied to them with a 9 pt Feather Radius.
Next, we will make sparkles using our Pen Tool (P). Make enough of them to cover various spots of the tablecloth that you'd like to see accented and group these elements together.
Duplicate your new grouping and use your Gaussian Blur effect at a rate of 3.6 pixels and an Opacity of 61%.
Our next step is to make the champagne flutes and bottle on the table. The glass is made from a two toned radial gradient made from a red mauve: R=115, G=10, B=0 and a pure white with the Opacity set to 0% on the mauve side. The liquid is made from a two toned radial gradient made from a bright yellow: R=255, G=177, B=0 and a pure white with the Opacity set to 0% on the yellow side. Add a drip stain to our tablecloth using a solid dark teal: R=6, G=29, B=30 at an Opacity of 61%.
Next, we'll make our chocolate box. The main color is made from a four toned linear gradient made from a reddish pink: R=76, G=6, B=18, a light baby pink: R=255, G=208, B=208, a brick red: R=92, G=19, B=0, and a medium brick red: R=69, G=0, B=25.
The bow however is made from a four toned linear gradient made from a pink mauve: R=144, G=82, B=90, a light baby pink: R=255, G=208, B=208, a pure white, and a medium mauve: R=144, G=82, B=90. Add the torn wrapper elements, and finish with a shadow made from the same shadow coloring as the candlesticks, but at a 49% Opacity.
In this step, we can make our fire elements. We're using an Ellipse with a four color gradient made from a pure white, lemon yellow: R=255, G=207, B=92, tangerine orange: R=255, G=168, B=79, and a sunny yellow: R=255, G=237, B=139 with the Opacity set to 0% on the sunny yellow side.
Copy and Paste or Ctrl + C and Ctrl + V to add flames to a few of the candles in the background.
From here, we can start to make the doves. They are made with a two toned linear gradient made from a cloud blue: R=202, G=211, B=216 and a pure white.
Once we have our little bird, we can group the elements together and make a duplicate of it. We can highlight this new layer and within our Pathfinder panel, select the Unite icon. This combines all the elements into the shape of the bird. From here we can change the color. The dove is a little brightly colored for the piece, so we're laying over a three toned linear gradient made from a pure white, butter light cream: R=243, G=220, B=149 and a door brown: R=84, G=51, B=27 with the Opacity turned down to 0% on the pure white side.
Make a duplicate layer of the solid shapes of the birds and use the shadow color we've been using throughout the piece. The Opacity level is at 51% for these elements since they overlay over many of our background pieces.
Next, we'll make the roses in her bouquet. I've made three color variations. The pink version is made of a three toned linear gradient made from a pure white, hot pink: R=162, G=0, B=34 and a door red: R=92, G=0, B=14. The lighter red is a two toned radial gradient made from a pure white, hot roof red: R=162, G=0, B=0 and a dark horse red: R=69, G=6, B=0, and the dark red rose is a two toned radial gradient made from a rose red: R=185, G=43, B=42 and a pure black.
In Step D, I've given you a break down of how the roses were made. It looks more complicated than it really is and I believe breaking it down into smaller groupings makes it easier to see.
From here I've chosen to incorporate patterns that have specifically been made for use in Adobe Illustrator. I found two extremely cool pattern by Redmillion called Pattern One . This is an EPS file that you can download from Vectortuts+ and use on your wallpaper.
After bringing it into our project, we can change the coloring to a solid clay orange: R=216, G=119, B=80. It's a seamless pattern so you can copy and paste in order to make a larger pattern.
Once you have your pattern to the size you'd like, group all of these elements together. Put this grouping behind your window treatment, directly above the red background. Turn the Opacity down to 20% to finish off the look.
I've found another great pattern by IdealHut called Different Vector Pattern.
This is another EPS file that you can download from Vectortuts+ , but this one we'll use on our tablecloth. I have recolored it pure white and minimized it to fit the table better.
I've duplicated the tablecloth layer that I had made in Step 27 and I can put this layer over the pattern I have prepared. Highlight both of these elements and click Object > Clipping Mask > Make or Ctrl + 7. Lower the Opacity to 55% to give our newly textured cloth a little realism.
Next we can add the leaves. This is a three toned linear gradient made from a spring green: R=208, G=157, B=0, leaf green: R=46, G=40, B=0, and a dark red: R=46, G=17, B=17. Fill out the rest of the bouquet to really set off the look.
The next thing to work on would be our happy couple. We're applying the shading and highlights to the skin tones. the skin is made from next we can add the leaves. This is a two toned linear gradient made from a peach color: R=205, G=130, B=80 and a light cream: R=244, G=225, B=186 with the Opacity set to 0% on the light cream side.
The eyelashes are made from the same color, but the honey is exchanged for a pure black.
Her lips are made from a two toned linear gradient made from a sweet pea mauve: R=178, G=82, B=70 and a dark mauve: R=139, G=37, B=0 with the Opacity set to 0% on the dark mauve side with an overall Opacity of 70% for the upper lip and 75% for the lower. The shine is made from the Ellipse Tool (L) with a two toned radial gradient made from pure white on either side, but with the Opacity set to 0% on the side towards the middle. The Opacity is at 45% for these accent highlights.
Blush is added by using the same color as the lips, but the sweet pea mauve has been brought down to 41% with an overall Opacity of 41%. Blush should be subtle and effortless looking.
Next, we will apply her hair. I'm using a three toned linear gradient made from pure white, blonde: R=255, G=247, B=208 and a light peach: R=220, G=162, B=104 to make her soft curls. It's almost like a platinum blonde, but with her honey highlights, it's warmer and compliments her skin tone well.
After applying all of her hair, I decided to change the color of her eyebrow as well. I think it completes the look.
I don't want her makeup to be the focal point, so I'm applying very little. I'm using a two toned radial gradient made from a bright purple: R=73, G=115, B=0 and a darker bright purple: R=83, G=0, B=162 with the Opacity set to 0% on the darker bright purple side to create her eyeshadow, and another radial similar to the shine on her lips to give her eye dimension.
I've gone back to the roses to add the stems. I've made quite a few and have grouped them and set them back, behind her fingers and bouquet. She's a pretty lucky girl at this point. I know I'd personally love a handful of roses myself. Good thing she's got such a loving boyfriend.
The next thing to apply is the shading on her dress. Make the shape with your Pen Tool (P) to prepare the area. We're using a three toned radial gradient made from a light royal purple: R=219, G=185, B=255 bright purple: R=73, G=115, B=0 and a darker bright purple: R=83, G=0, B=162 with the Opacity set to 0% on the darker bright purple side.
Next we will make our bumble bees. main body color is a two toned radial gradient made from a creamer white: R=244, G=225, B=186 and a pure black, and the yellow stripe is a two toned radial gradient made from a banana yellow: R=255, G=184, B=23 and a light banana yellow R=250, G=203, B=99 with the Opacity set to 53% on the banana yellow side.
When we're finished with him, we can make multiples to apply to various areas.
Within this step, we are revising our flamed candle. Copy this element and paste a flame above your rose layer.
From here, we'll make smaller flames to simulate the fire engulfing the rose hovering over it. We'll make a few little flames to lick at the petals and then apply a little smoke above it. This is the same coloring as our rain clouds. A Gaussian Blur at 2.3 pixels and an Opacity of 59% has been applied. Add another layer over the rose itself of a radial gradient of pure black on both sides with the outer color phased to 0% Opacity.
We can now start working on her boyfriend. His hair color is a two toned radial gradient made from a dark mahogany red: R=69, G=12, B=0 and a pure black with the Opacity set to 0% on the pure black side.
We'll use this same color for his lips and shading. It's fairly easy to work with these colors are it shows up well on his initial skin color.
Once we have these main elements, we can apply his eye color. I like to take a darker shade other than white and apply it first, then I can overlay white. In Step D you can see how much dimension this little trick adds to his face.
We'll now apply the simple shading to his suit. We're using the two toned linear gradient made from a lilac grey: R=102, G=94, B=107 and a pure black.
From here we can add ring box. The main box color is a two toned radial gradient made from a pastel purple: R=98, G=94, B=208 and a pure black. The pillow color is a two toned radial gradient made from a passion red: R=162, G=0, B=39 and a pure black.
The next item is the ring. Start with the gold of the ring, which is made from a three toned radial gradient made from a stained gold: R=71, G=36, B=12, orange tan: R=162, G=78, B=0, and a butter cream: R=255, G=235, B=162.
Apply the same gradient colors for the shine, but adjust the Gradient Slider to vary the color.
From here I can apply my diamond. The main color is a two toned radial gradient made from a cloudy blue: R=199, G=201, B=229 and a pure white. It works just as well for the majority of the facets within your diamond.
In this step I'm applying the text for the inside of the ring. I've typed the words "LUF YOU" and while highlighted, I clicked Effect > Warp > Arc and my Horizontal default option is checked, I'll set my Bend at 22%. Keep all of your other settings the same and click OK. After curving my words, I can now go up to Expand Appearance and my letters will now retain their shape, no matter how I turn them.
Turn the text in order to make it fit the shape of the ring. I have recolored the text using my gold color, duplicate the layer again to overlay another layer of the text. Shift it over a little bit and tweak the Gradient Slider to give the words an embossed feel.
Add a little shine to it to really make it shimmer.
In this step we are finally adding our motion lines to accentuate the path of the ring. We'll start out with a Stroke line that we will change in our Stroke options window. To access this feature, press either Ctrl + F10 or go to Window > Stroke to bring this window up. Change the Stroke Weight to 1pt and click the Dashed Line option. Change the Dash to 10pts and your path should now look like Step A by this point.
Using your Width Tool or Ctrl + W, hold down your mouse and expand the end closest to the ring. An optical illusion of depth is conveyed by this simple technique. If you feel comfortable with the end result, go to Object > Expand Appearance to lock in your newly shaped dash lines.
The pieces will now show up as a Group. Turn the Opacity down to 48% for a more subtle look.
Next, we'll finally pick a color to use on the boyfriend's tie. I'm using the same purple used in her dress. It's not meant to be match, but a compliment of her dress.
From here, we can make our simple lighting that streams from our accent lamp in between the couple. I've made another layer entitled "Lighting" to start.
The coloring is made from a two toned radial gradient made from a yellow butter: R=255, G=238, B=162 and a pale peach: R=243, G=220, B=149.
Our final steps are to add the bird poo, feathers, and change the background color. The bird poo color is taken from the color of the candlesticks. Even though we're using the same color, it's the shape that conveys the idea of what it is.
The feather coloring is taken from our original bird color, and the background is changed from our original red to compliment the mood as well as the couple's clothing. The color is a two toned radial gradient made from a hazy purple: R=94, G=30, B=31 and a shadow red: R=43, G=20, B=13.
We have put our poor boyfriend through plenty of hoops and obstacles during this tutorial, but I'm sure his evening will at least end on a positive note. I hope this piece was able to catch your fancy, and possibly pique your interest in using patterns to enhance your pieces, especially the ones hosted here on Vectortuts+. Remember to always check the licensing for whatever "extras" you plan to use. Each artist whose resources you use was done with great care, in the hopes that someone else will see the benefit that they themselves see in it. Keep in mind that they are giving you permission to use their resource, so use discretion when appropriate.