Advertisement

Creating a Queen of Hearts Playing Card Through Collaboration

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

In this tutorial you'll see another collaboration between vector artists: Ashley Benson and Sharon Milne. Ashley will be responsible for the initial sketch and flat colors, while Sharon will be enhancing and adding further detailing to the collaboration.


Ashley

The first basic step is to talk with your partner(s) about the concept. Communication is key and allows other members to prepare for their role in the collaboration. Giving a set amount of time, and setting boundaries can work especially well for people like myself , who tend to get carried away. If you feel you need more time, convey this to the others in your group.


Step 1

This sketch was made with both a typical 0.7 and a 0.5 leaded pencil and scanned into the computer using a dpi of 300. We are designing a playing card, so there will be two opposing faces to this piece. To make this an easier process, I've made only one part of the card, the upper half.



Step 2

Before using the sketch, it was taken into Adobe Photoshop and duplicated in order to make the bottom half. After merging the two levels, the lines were darkened in order to refine the final shapes for easier vectoring. The idea is loosely developed which means that there was no need for reference materials. Once the lines are to our liking, we save our sketch as a JPEG or PNG and bring it into Adobe Illustrator. This particular file was prepared at 14 x 18 for detail convenience. If need be, you can 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.



Step 3

In this step, I'm preparing my first set of flat colors for her skin. Using my Pen Tool (P) and Curves which are accomplished by holding down the (Alt) key as points are created to form each path, I'll make her skin and features. I'll be in charge of flat colors this time around, so I'll be working with a simple palette. I've also begun to label my layers to make it easier for those collaborating with me to find various parts of the project. As always I advise you to make this a continual practice until it becomes second nature. I'm using a pure white: R=255 G=255 B=255 and a cool blue: R=53 G=82 B=142 with a stroke line of 1.5pt to start.



Step 4

At this point, our base skin tone has been mapped out with our Pen tool (P). I've labeled my layer "Queen", knowing that I'll have many other layers that I'll want to keep separate. This will make resizing and general work for the duplicate side easier to change.

I will now use the Width Tool or Shift + W to create more depth to my 2D shape. By clicking and dragging, I can create a wider stroke line. If I wish to make only one side of the line thicker, I can also hold down my Alt key as I drag. In all of my steps, for this project I have thickened both walls of the stroke line, but I'm offering an alternative suggestion just in case you'd like to explore more options.



Step 5

For the features I've chosen to go with the same color to make it easier to see my features as well as lowered the Opacity of my layer to about 48%. I am again using my Width Tool or Shift + W to carve out my features after my initial stroke lines have been made, such as the nose and mouth. It makes for quick work of these body parts and allows you to spend the time you've saved on other areas with more details.



Step 6

In this step, I am just starting to finish up my initial features. Working with my Width Tool as allowed me to finish this in several minutes. Once I am ready, I can highlight all of these pieces and click Objects > Expand Appearance to make them Fill. I do this to make sure that none of the items that I might resize change their width.



Step 7

From this point, I am taking my Pen Tool (P) and making my hair shapes. I've started with the main lines in the same blue and I've also done so with my eyebrows and eyelashes.



Step 8

After laying down my hair shapes, I'm ready to take my Pen Tool (P) make my Stroke lines of white at 0.25pt colored pure white: R=255 G=255 B=255. I am again using my Width Tool or Shift + W to thicken up my lines to give the hair more dimension.



Step 9

In this step I have made 7 colored boxes. The colors are pure black: R=0 G=0 B=0 with a Stroke of grey : R=76 G=76 B=76, a bright lipstick red: R=183 G=46 B=46 with a Stroke of fire engine red: R=140 G=32 B=32, a dark red: R=119 G=17 B=17 with a Stroke of berry red: R=81 G=13 B=13, a flamingo pink: R=242 G=165 B=153 with a Stroke line of bright pink: R=229 G=122 B=122, a banana gold: R=249 G=207 B=103 with a Stroke of gold: R=224 G=170 B=50, a white: R=255 G=255 B=255 with a Stroke of sky blue: R=166 G=181 B=209, and a leaf green: R=97 G=112 B=69 with a Stroke of grass green: R=63 G=79 B=26. I've made these specific colors to lessen my palette. Sharon and I wanted to stay with a more or less traditional card palette. Since this is still a creative collaboration, we can allow ourselves to break with tradition and work a few other colors into the mix as well. This will also make it easier to changes colors as I go.



Step 10

Our Queen's skin and features have been changed to a pure black and a bright lipstick red: R=183 G=46 B=46 has been added with our Pen Tool (P).

I have layered over the areas I'd like to take out of my red shape, with other shapes. These areas are over the teeth and the shine spots. I could just overlay more layers in white, but I've chosen to cut these pieces out instead by highlighting them with the main layer lastly, and go up to my Pathfinder window and click Exclude. If you're not seeing this window, you can go up to your menu bar at the top and click Window > Pathfinder or Shift + Ctrl + F9 to bring the option up.



Step 11

I can now work out my costume pieces with my Pen Tool (P). The collar and sleeves are made from our pure black: R=0 G=0 B=0 with a Stroke of grey : R=76 G=76 B=76 and a Stroke Weight of 0.5pts. The Opacity has been brought down to 82%.



Step 12

The crown is made from our banana gold: R=249 G=207 B=103 with a Stroke of gold: R=224 G=170 B=50.

The inside of the crown should have a little more shadow to it, so I've taken it down to a barley gold: R=168 G=119 B=34. The accents are bright lipstick red circles: R=183 G=46 B=46 with a Stroke of fire engine red: R=140 G=32 B=32, a dark red heart: R=119 G=17 B=17 with a Stroke of berry red: R=81 G=13 B=13.



Step 13

To add pearl accents without driving yourself crazy, go to Window > Brush Libraries > Arrows > Pattern Arrows. This will bring up quite a few choices. We'll be using our Pen Tool (P) to make ourselves a few beautifully accented sleeves and a skirt in a matter of minutes.



Step 14

Once we're finished with our pearls, we can highlight our strings and go to Object > Expand Appearance. We will still have a little arrow tails to get rid of which is only a matter of pressing our Direct Select Tool (A) and deleting only those pieces that we no longer need.



Step 15

I've started working on my palette. along with all of the "materials" our Queen likes to use to paint with. I used the same barley gold: R=168 G=119 B=34 to make the "gold paint" as well as our other colors which were taken from our 7 original box colors.

The blue used for the feathers outline is a lake blue: R=71 G=84 B=104. The color highlights the separations in the feathers nicely in my opinion.

Once I am finished with my palette, I have taken all the elements, including the Queen's thumb at the thumb hole and Group or Ctrl + G to combine them. I'll then make a separate layer and relabel this so that I can position it easily above all the other layers. This will act as one of the continuity elements to make our card look more like an authentic playing card. If you look at examples of cards, you'll see that usually the elements towards the middle seem to merge or nearly touch to form a sort of yin-yang design. Once the duplicate side has been made, you'll be able to see this more clearly.



Step 16

If I choose to recolor artwork, it's not a difficult task. I've made this an easier process by taking my elements and making them all into Fills earlier on. This again was done by highlighting my pieces and clicking Object > Expand.

Once I have my pieces ready, I can go to Edit > Edit Colors > Recolor Artwork. A window will open with the option to change my current color to a new color. I am keeping my black, but the white will have to go. Since I liked the look of my raven feathers on my palette., I will be taking that same color and changing her highlights. I think this gives it a slicker appeal for the most part.



Step 17

Once my Queen is finished, I'll take the time to make a separate layer which I call "Rose Trellis". I am making my rectangle shaped fence with a Stroke Weight of 2pts. After I make my first round of diagonal slats, I can Group or Ctrl + G them and duplicate them to make my opposing slats. Go up to Object > Transform > Reflect and choose the Horizontal option. You now have a full fence segment to put behind your Queen.



Step 18

I am still using my banana gold: R=249 G=207 B=103 with a Stroke of gold: R=224 G=170 B=50, and barley gold: R=168 G=119 B=34 as an alternate fill. I've also used my pure black and pure white to make my dishes. I've also taken my Width Tool or Shift + W again to thicken various parts of my tea set. We have a different level of depth with this simple action.



Step 19

To make our Queen's insignia, we've taken our colors from our palette. again and followed our sketch's main lines to make a bleeding heart. To make the "Q", I've used the Ellipse Tool (L) to make an oval shape out of a single stroke of pure white with a Stroke Weight of 1pt. I take my Width Tool or Shift + W and again drag my lines to a width I like. I can now take these pieces and go to Object > Expand Appearance once again to make the change permanent.

I've also gone back to my Pathfinder panel and by clicking the Unite button, I've combined my oval and tail to form a genuine "Q".

From here, I can change my colors to compliment the overall piece. I've gone back to my bright lipstick red: R=183 G=46 B=46 with a Stroke of fire engine red: R=140 G=32 B=32, and berry red: R=81 G=13 B=13 with a Stroke of dark red: R=119 G=17 B=17 .



Step 20

I wanted the card border to look a little more traditional, after making my initial rectangle, turning it into a simple stroke of 2pts, and duplicating it to make a smaller version, I went to Window > Brush Libraries > Borders > Borders_Decorative and used my Avant Garde option.

The color is a default, but I can change this fairly easily by highlighting it and going to Object > Expand and clicking on the Stroke Only option. I can now edit my border as if it were a normal fill. I have chosen to go with a similar lake blue: R=79 G=96 B=132, just a hint darker.



Step 21

I have finished up my border and I can go on to hide it along with the others. I will now work on the flamingos, which are using our flamingo pink: R=242 G=165 B=153 with a Stroke line of bright pink: R=229 G=122 B=122. The face is made from our white: R=255 G=255 B=255 with a Stroke of sky blue: R=166 G=181 B=209 at an Opacity level of 70%. To add a little pop to our base color, I added a hit of coral pink: R=232 G=115 B=109 to the tips and so forth. Each flamingo is put on a separate layer and labeled.



Step 22

The cloth is made from a sea shore blue: R=79 G=96 B=132 with a Stroke of sky blue: R=133 G=135 B=175 to compliment it. The Stroke Weight is 1pt, and the folds were made in the same fashion as the face. By using your Width Tool or Shift + W, you're cutting your vectoring time down tremendously. The main part of our cloth is on it's own layer, while the back pieces are made on the "Rose Trellis" layer.



Step 23

Finally, we can take all of our layers and duplicate them. We want to take the time to pair them all up according to the layer name. After I've made my duplicate I need to turn them the right way. It's better not to do this manually, so go to Object > Transform > Reflect to do your turns. Start with your horizontal axis and click okay. Now return to your Reflect option again, and change your vertical axis. You will now have opposing faces, and half of the work finished for your team. Your collaboration partner(s) can decide whether or not they want to approach the project straight ahead, or work in the same respect that you have done, one half at a time, but I'm giving them the choice.



Sharon

I've received the .AI file from Asher to start my half of the collaboration. When taking part in a collaboration, work with a duplicate copy of the original .AI file, just in case you make any permanent alterations to the design that you can't undo.

Be clear when you set out collaborating, even if it's with a good friend (as I am with Asher), any creative boundaries you may have. Double check that you're OK to alter or even remove elements of the design you've been presented with. However, you won't want to remove too much of the original design as the first artist will want some of their identity and style still ever present in the finished collaboration.


Step 24

The first thing I do is to split the illustration into sections and then create a Rectangle (M) for each layer I create. The rectangle must cover the whole width of the artboard and got half way down the artboard. I've then cut the duplicated elements and placed them into a separate layer and hid it for now.



Step 25

Select each one of the layers and mirror them. You do this by going to Effects > Distort & Transform > Transform. The card design is mirrored on the X and Y axis and because of this, I'll need to create 1 Copy of it. Click on OK once done.


The rectangle that you placed in each layer will then need it's Opacity set to 0%. So although this is defining the area for you to draw in, it wont be visible in the design itself.



Step 26

Playing cards have a limited palette and although we can apply some artistic license to the illustration, I'd still like the illustration to follow the playing card theme. I really like the Alice in Wonderland ideas of our version of the Queen of Hearts, but I feel the background is too cluttered, I may bring back the roses later on though. I know Asher is a big fan of her pink flamingos, so I'm going to keep those in the illustration, just recolor them to match the restricted palette.


This is the design I'm left with after removing and recoloring. There isn't anything major, I've removed the background elements and removed the blues and pinks. I may introduce the green back into the design should the roses be introduced again.



Step 27

I'm going to add something which is more my style into the collaboration, so we have a mixture of both of our styles together complimenting each other. First I'll Create New Layer and add a 0% Opacity Rectangle (M) in the layer folder. Then I'll apply the Transform effect to the layer folder to keep the mirrored effect.


I've then hidden all the hair elements, as this is the area I'm going to add my style in.



Step 28

Using the Blob Brush Tool (Shift + B), I'm going to sketch my hair design. I want the curls of hair to twist around the flamingos and the paintbrush so the hair is very much part of the design, rather than something which is added at a later date.



Step 29

After creating the design, I've then drawn the first hair base shape to go underneath our Queen.


I've placed it in it's own layer folder so it's easier to move, along with any additional elements, depending on the design. I've given it a black fill to follow the color scheme.



Step 30

I've then added the additional shapes on top of the Queen and flamingos and repositioned the crown.



Step 31

I've used my Width Profile brushes to add 10pt black stroke lines with the Paintbrush Tool (B). Some are placed behind the Queen, some above.



Step 32

Using a thinner stroke, I've drawn strands of hair detailing with a black stroke and set to Blending Mode Screen, Opacity 100%.


Although all the strokes were on top of the Queen, there are some I needed to draw below so they didn't overlap onto the flamingos As I'm working on this area I've noticed how much the beaks of the flamingos are being lost into the black hair. I'll have to remedy this...



Step 33

Using the Pencil Tool (N), I've added some white transparent radial gradients set to Blending Mode Screen, Opacity 40% on top of the beaks and over areas of shine in the hair. I don't want to use too many gradients as there is a lot of detailing in the design already. Just enough to help highlight areas where there maybe otherwise less detailing.



Step 34

As well as removing the pink from the artists palette, I've rearranged the paints so it doesn't seem as random.



Step 35

Back on the original background for the design, I'm going to use the roses and integrate them into the collaborative illustration.


Remove all the elements and leave just the roses and their leaves behind.


And then paste them into the "Sketch" layer so I can place and recolor them as desired.



Step 36

I've changed the strokes to the roses to golden yellow and removed the red paint from them. I've then enlarged them and placed them behind the Queen to create a subtle background design.



Step 37

Duplicate the roses and then Object > Expand them and combine them to create one shape by using Pathfinder > Unite and then creating a Compound Path (Ctrl + 8).


I've placed this shape behind the roses and created a subtle Drop Shadow effect by duplicating strokes of varied weights and Opacities as shown below.



Step 38

I've removed the shine elements of the painted/blood heart and changed it to a black fill and a yellow/golden outline.



Step 39

For a background, I've create a shape which looks similar to a stamp. In the UK, where I'm from, we have the Queen on our stamps, so I'm adding this slight theme to the background. So with Asher having her beloved flamingos, I've got my nod to my country. I've used the settings as shown below in the Appearance panel.



Step 40

Some of the yellows are not of the same tone, so I've altered these to be the same yellow. To add the lighter shade, I've used a white stroke or fill where appropriate and then reduced the Opacity. For the darker areas, I've used black.



Step 41

The color from the paintbrush is a little hidden in the Queen's gown, so I've added a white transparent radial gradient to help it stand out a bit more.


I've added a red gradient to the painted heart and also increased the Stroke Weight of it to the same as the golden yellow border on the stamp background.



Step 42

I want to add a subtle drop shadow to the stamp detailing, so I've Object > Expanded the shape.


I've then used Pathfinder > Minus Front to remove this pattern from the light green shape.



Step 43

I've then selected the large shape behind the roses and used that Drop Shadow effect and saved it as a Graphic Style. I've then applied this to the stamp shape and modified it slightly to create the effect I wishing to achieve.



Conclusion

I'm happy with the final result, although I can't "sign off" on the project completely. I've sent the final image to Asher to see if she's happy with the outcome and with both parties satisfied, our collaboration is now complete!

We hope you've enjoyed our second collaboration tutorial. You can still view our first collaboration tutorial created over 2 years ago! Who knows, we might see you again soon with another collaboration.


Advertisement