Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Create Promotional Rendering for High-End Action Figure Packaging

by

Creating artwork for packaging designs can be challenging because the artwork that you create doesn't look the same on your screen as it does on the shelf. That is because designers rely on printers to turn their artwork into usable packaging. This can cause confusion when presenting a design to a client because the client will want to know what it looks like on the shelf, not on your screen. This tutorial is Part 2 of a 2-part series on package design. In Part 1, we explained how to shoot your photography and create a print-ready outer sleeve and inner packaging for a high-end action figure. In this tutorial we will explain how to turn the design we created in Part 1into a 3D render of the package and figure. Let's get started!


Also available in this series:

  1. Create High-End Action Figure Packaging
  2. Create Promotional Rendering for High-End Action Figure Packaging

Tutorial Assets

The following assets were used during the production of this tutorial.


In Case You Missed It: Take a Look at Part 1

Don't forget to take a look at Part 1 of this tutorial Create High-End Action Figure Packaging. In Part 1 you will learn how to shoot your own photography and create a print-ready outer sleeve and inner packaging for this action figure.




Step 1

I have access to a light-tent at work, so I used this for the photography of the figure and weapons.



Step 2

First open up the file titled Render_Base_Start.psd. Within this file you will find 3 layers, Layer 2 (which is a box I quickly rendered using Modo), Ninja (which is the base shot of the figure and his weapons, and Ninja_inbox (which is a shot I took of the figure on a wood block simulating what the figure would look like in the package.


Step 3

Next, we have to outline the figure and his weapons. This is so we can isolate these from the background so we can put the Render on a white field.



Step 4

Command/Ctrl-click the path in the PATHS palette to create a selection, and then apply a layer mask to the layer titled Ninja. The create a new layer, move it to the bottom, and fill with white.



Step 5

Next, open on the final image from Part 1 of the package. On the DIE later, select the window dies cut, and duplicate 2 times. Next, using the rectangle tool with smart guides on, draw 3 rectangles for the left side, the front, and the right side panels. Now, select a panel and one of the duplicates of the window die cut and select the subtract icon in the PATHFINDER palette. Duplicate this process with the other two panels, and you should have 3 separate panels as seen below.



Step 6

Now we need to get these paths into our Photoshop document. Go ahead and copy the front panel path from AI and paste into PS as a path. Using the transform tool (Cmd-T), you can move the corners into place. Make sure you hold Command/Ctrl when moving the corners to move each corner at a time. Don't forget to turn on the bo render so you have something to use as a reference.



Step 7

Repeat this process with the other side panels. Make sure each path is on a separate layer, and that you label each path in the paths palette.



Step 8

Now we need to create the base background of the package. To do this, create a new layer and fill with a medium grey (I also apply a Layer Style > Color Overlay with grey as well, as this will allow us to quickly change it later). Next, Command/Ctrl-click on one of the paths we just copied into PS. Now, Command/Ctrl + Shift-click on the other two paths. This will allow you to add to your selection.



Step 9

Now apply this selection as a layer mask on the base layer. You can see we have a small gap where we didn't align the paths correctly, so with the lasso tool select any misalignment issues you may have, and select the whole middle of the box...



Step 10

And on the mask of the base layer, fill with white.



Step 11

Now we need to start setting up the shading on this package. I created a main folder called FrontBox, and then moved the base file within that folder. Next, I created a folder Called HL + Shad. Now, create a new layer called RtSide and fill with white. Command/Ctrl-click the path in the PATHS palette, and apply that selection as a layer mask. At this time I adjusted the RtSide layer's opacity to 29%, and then changed the Layer Mode to Screen.



Step 12

Now we need to repeat that process with the front panel. I made the opacity slightly higher on this one just so it is a little brighter. Next, in between the Front and RtSide layers, repeat this process to create the LfSide. Change the fill to black, and change the layer mode to black. Set the opacity around 20%. As you can tell from the image below, we have overlap. This is easy to fix though. On the mask of the LfSide, select all (Command/Ctrl + A) and then Command/Ctrl-click the masks of the RtSide and Front and fill with black.



Step 13

All we have left to fix is the top of the LfSide mask (see image below). On the mask, paint that area black.



Step 14

Now we are going to place the figure in the box. Turn on the later called Ninja_inBox and I used the magic wand to make my selection. You can also path this out if you wished. Mask the background so only the figure is available.



Step 15

Next, I realized the perspective of the figure isn't quite right. So, transform the layer so the figure looks more natural in the box.



Step 16

Now, Command/Ctrl-click on the base layer mask, and then Command/Ctrl + Opt-click the front and RtSide HL paths in the PATHS palette. This will allow you to create a mask on only the visible interior of the pack. You should end up with a selection like area highlighted in red.



Step 17

At this time, I also made a box top layer (I got tired of deselecting it). To do this, Command/Ctrl-click the Base layer mask, and then Command/Ctrl + Opt-click the two side paths, and the front paths. Then lasso out the center of the pack. Duplicate the Base Layer, and delete its mask. Apply the new selection we just made to the top one, and rename it to TopBase. On the Base layer, I changed the color overlay as seen below. Note, I also circled two areas on the Ninja_inBox mask that I painted in with black.



Step 18

And here with are with the mask applied.



Step 19

Now it is time to start putting some artwork on the package. Open up the Background file from the Part 1 Package. On the DIE layer magic wand the interior of the side panel. Copy merged, Command/Ctrl + Shift-C.



Step 20

Create a new folder called ART. Paste the artwork you just copied, and skew into place. You can make the artwork slightly larger than the dimensions panel, as we will be applying a layer mask to the artwork. Select the RtSide path in the PATHS palette, and create the layer mask.



Step 21

Repeat this process with the front and top panels as well.



Step 22

Next, I decided to add a bit of depth behind the figure. Add a layer called inner shadow, and Command/Ctrl-click the mask we are using on the figure. Paint in some black towards the top and behind the figure. Set the layer mode to multiply, and adjust to the desired look.



Step 23

Now we need to create some edge highlights. In this tutorial, I will show you 2 different ways of doing this. This first way is to create a long skinny rectangle, and fill with white. Apply a few pixel Gaussian Blur, duplicate the layer, and apply double the blur you did before. This saves us both a hard edge and a softer edge blur. Merge the layers, Command/Ctrl-E.



Step 24

Duplicate that layer for each edge on the front, and rotate each into place. Apply a layer mask to each layer, and paint away where the highlights shouldn't be.



Step 25

When finished painting on the mask, select all three layers and merge them. For good measure, go ahead and Command/Ctrl-click the mask on the base layer, and create a layer mask on the edge highlights. Place this in the HL + Shad folder.



Step 26

At this point, let's go ahead and create the sleeve. Since this doesn't have the die cut window, we can draw our front panel path directly on the reference image for the box.



Step 27

Now, a little trick. Duplicate that path, and then keep the top two points where they are, and move the bottom two points to the top of the top panel. Repeat for the side panel.



Step 28

Set up your HL + Shad folder and create your highlight layers. For the base of this sleeve, I wanted it to have a slight brown/cardstock appearance. So I filled with the following color.



Step 29

Now place your front panel, and side panel artwork just like we did on the package. Since this used both AI and PS, I exported a jpg from out final package AI file. Then selected the panels from that exported image.



Step 30

Next, I created a layer called InnerShading, and painted in the edges with black. Set the layer to multiply, and adjust the opacity. Using the path of the top from the PATHS palette, I created a layer mask.



Step 31

Here is the second way to create highlights. Create a new layer in your HL + Shad folder and Command/Ctrl-click the top panel path. Fill with white.



Step 32

Now, with the rectangular marquee tool (M) selected, us the up arrow on your keyboard and move the selection up 1 pixel.



Step 33

And hit delete.



Step 34

Create a layer mask on that layer, and paint away some of the highlight.



Step 35

Then set the layer mode to Screen, and adjust the opacity to 65%. We now have a top edge highlight.



Step 36

Repeat this process on the side edge highlight. Make your selection.



Step 37

Fill with white.



Step 38

Move the selection and hit delete.



Step 39

Apply a 2.2 px. Gaussian Blur.



Step 40

And mask away some of the bottom.



Step 41

Quick check. I know, it is a lot of layers but try to keep things as organized as possible.



Step 42

Now it is time to switch back over to the package. Open up the final Package PSD file from Part 1, and copy the weapons layer. Create a new folder called weapons, and separate the weapons into individual layers. Place them how you would like inside the package. I applied a layer mask of the interior of the package.



Step 43

These figure sit in a tray, and then it would have an outer protective cover so you can't touch the figure, and the figure is protected. First, we are going to create some of the inner try highlights. Using the pen tool, create a path around the figure. Simplify the path around the figure, as it doesn't need to be the exact silhouette of the figure. Create a new folder called Plastic, and a new layer called FigureRim, and stoke that path with a 2-point stroke of white.



Step 44

Create a layer mask, and paint away some select areas of the stroke.



Step 45

Repeat this process for the weapons.



Step 46

Now, we are going to start on the outer plastic cover. Using the brush tool, with shape dynamics on, I clicked at the bottom corner of the plastic, and then clicked at the top. This varies the line a bit. Next, I selected white, and painted in a bit of white on the side. Apply the layer mask, set the layer mode to white, and you are set.



Step 47

Repeat the process of creating the "harder" edge on the other side of the package.



Step 48

Now we need to confine all of the plastic highlights. Using the pen tool, draw the path as seen below. Command/Ctrl-click to create a selection, and apply that as a layer mask.



Step 49

Next, with the pen tool, draw some shapes as seen below. Fill with white, and apply a few pixel Gaussian Blur.



Step 50

Set the layer mode to screen, and knock back the opacity.



Step 51

Next, create some more shapes on a new layer. Again, fill these with white, set to screen, and knock back the opacity.



Step 52

At this point, I didn't like the fact that the sleeve wasn't reading as a sleeve; I realized I needed an inner shadow. So under the Sleeve > HL + Shad folder, create a new layer. Rectangle select, and fill with black.



Step 53

Now Command/Ctrl-click the Top path, and then Command/Ctrl + Opt-click the layer with the top highlight.



Step 54

Create a layer mask, and set the opacity to 40% and layer mode to multiply.



Step 55

Command/Ctrl-click the layer mask on the Weapons folder, and apply that selection as a layer mask on the plastic folder.



Step 56

Now to make the figure look like he is actually in the package. Duplicate the layer, and adjust the levels as seen below.



Step 57

Desaturate the layer as seen below.



Step 58

Now, apply a layer mask on the figure, and using black and the paint brush with a soft edge, paint away the front facing of the figure.



Step 59

Now we are on the home stretch... some final touch up work. Create a layer mask on the figure folder, and paint away his "scarf".



Step 60

Next, I added another layer of shadows behind the figure to make it darker.



Step 61

Give the boxes a bit of a shadow. I did this by painting them with black on a multiply layer. It really helps having a Wacom tablet for work like this.



Step 62

Noticed that we needed another star, so I duplicated the weapons layer, and then masked everything but one of the stars.



Step 63

Draw a little drop shadow under the figures feet to ground him



Step 64

Duplicate both weapons layers, and merge the layers (Command/Ctrl-E). Give them a Gaussian Blur and move down 2 pixels. This gives a small drop shadow on the weapons.



Step 65

Copy in Texture 1 from the Part 1, and mask away some of the middle.



Step 66

Here you can see the mask.



Step 67

Copy in Texture 2, and again, mask away some of the middle.



Step 68

Here is the mask.



Final Image

And with that, we are done with Part 2 of the 1/6 Scale Action Figure tutorial. As always, if you have any questions, please ask in the comments, and I'll do my best to answer ASAP.


Advertisement