The very talented Steve Knerem is the guest artist behind a majority of the content of our vector set 22.  In this tutorial, he shows us how to assemble a rad rockabilly poster using various elements of the set, a bit like what Jeff did for us when we released Set 18. 

In the first part of the tutorial, Steve will be walking you through his process to design the poster, from concept to final piece. In a couple of weeks, we’ll publish the 2nd part, which will infuse the composition with an even stronger rockabilly/1950s feel, by doing some additional research in terms of typefaces by digging at the source: 1950′s/1960′s era gig posters (as well as more contemporary material too). Finally, a few weeks after that, we’ll publish a wrap-up piece that will provide additional tips and tricks to give a vintage finish to the poster, like if you had found it in your parent’s/grandparent’s attic after all these years.

But no more rambling, let’s let Steve have the microphone!

— Simon, Go Media’s Arsenal Manager

Hey Guys,

Thanks for reading my article on how I built this Rockabilly poster using the Arsenal’s Vector Set 22.

In this set you are going to notice that it’s all revolved around icons from vintage 1950’s U.S.A: hot rods, babes, tattoos and everything in between. As you search through the set notice I threw in a mix of styles from my hand drawn look to straight vector art (done in Illustrator). Have fun with the pack and add it to your own arsenal of goodies!

Let’s have a quick look at the set’s content

So let’s get started!

My thoughts to create this poster are keep it simple within the realms of design and content, yet pack a punch with enthusiasm and detail. When I think of design, I definitely try not to throw in the kitchen sink, but be selective and make sure I have for this project a title focus and an image focus. In addition to that, make sure your eye flows either top to bottom, in the “Z” pattern or in what I think is helpful is a circle pattern. These are the elements the the brain locks into and make the poster reads well, creates good flow and is a successful piece.

Choosing the Color Palette

I need to think about colors. When I thought about my color palette typical Rockabilly/50’s colors seem to be red, black, white, tan and a cool color. This isn’t etched in stone but what seems to be the norm. I know I want to go with a vintage look as it were designed back in this era.

I did some searching and remembered one of my favorite websites when I need some inspiration or knowledge. This is what popped up after doing a search for “vintage rockabilly colors.”

Thinking through the composition

Ok I have my color palette, now for design. I am setting up this design for a 16×20 4-5 color screen printed poster for a fictitious event in my home town Cleveland, Ohio, U.S.A. I worked- up a few quick ideas and am going to call this “The Rockabilly Throwdown Fest.” Imagine a huge fest with all your favorite bands, hairdos, pinups and vintage styles for one day, sounds awesome!

I’ll first set up a ½” bleed area around the poster. This guarantees me that anything within these borders will be printed, and I don’t have to worry about it getting cut off. You could probably set up a ¼” in bleed as well.

Looking at Typefaces

I’m going to then move on to the title “The Rockabilly Throwdown Fest” and search for a font. There is an endless supply of possibilities but let’s go with something that feels like it belongs.

Quick note: if I were to choose a font that seemed like it could go with a black death metal fest, it wouldn’t have the right feel. Do your research.

Down to the Nitty-Gritty

Next let’s piece this together.

Choosing the Centerpiece

My initial thought is to utilize one of the pin ups as the main character… Maybe the devil girl.

A Layout Change

Ok, so an interesting turn of design events is taking place. I was originally thinking of placing an image in the center, but because of the title design I am thinking of something else…Let’s see where it goes.

Let’s Change the Centerpiece, and Let’s Add Some Supporting Design Elements

I like this pose better, and I think she goes better with the design. I know I want some sort of starburst in the background to create a sense of depth so I grab the star tool and set it to 75 points.

I want to trim the bottom and left side so I take the pen tool and make three points in at “L” shape. Make sure the color is selected in the stroke color box. Note the purple color “L” at the bottom left of the artboard.

While the “L” shape is selected, I also select the starburst then I go to the pathfinder panel and select the divide button all with my black arrow tool. Both images will look united, but then click on the part that looks cut away with your white arrow tool and delete it. The starburst might spill over the document parameters, so you will have to select those parts and delete. From here select the starburst with your black arrow tool and choose a fill color in the color box. Most likely you will see areas fill in the where your dividing “L” line was.

These are a few extra steps, but this makes the object complete. Click off on a blank area and select the parts that are spilling over and the parts that filled in with your white arrow tool and delete them. Click off on a blank area, then click on the starburst one more time and select unite in the pathfinder panel. I like to do this just to give it a final merge of the object. Now you are all set. Now we can play with different colors of the starburst and create some background texture/depth.

Remember the arrow patterns I drew once I noticed the design took a different direction? Well, I want to keep this design going and incorporate all things related to the fest. So let’s grab a guitar, a microphone, and an old car. I also swapped out the pinstripes at the bottom for some military looking wings. Also, don’t forget to switch the starburst’s color to a red slightly brighter than the background. The yellow was too strong, and overpowered the character.

Adding More Supporting Elements

I have in mind flames also, pretty iconic piece for this scene. But something a little different… like this, from the pinstripes pack.

I know I don’t want to use the whole image, only half. So, I have to cut it in half.

Here’s how I did it:

Select your lasso tool, and draw around the part you DO want to keep.

Cut it and paste it back (CTRL/CMD + X, then CMD/CTRL + V or F). Select the image and select unite from the pathfinder panel. This is so there are no open points and you can select it and change the color any time. Let’s place it on the poster in a few open spots:

Quick note: the one placed left of the pinup had its color changed to the same red as the background. Since it’s overlayed on the starburst that’s lighter, it gives it that sweet punch through effect. One more thing to play with!

Time to Add More Copy!

Quick note: work around the canvas and DO NOT focus in one area for a long period of time. You have to work around the canvas/design and give most areas enough attention. Say I completed this bottom left part completely and came back to it in two days. Well some of those fresh thoughts will be gone and you need to think through the design once again. If you work around the canvas little by little you can give most of it attention and develop those first thoughts.

Alright, back to the game. Keep developing the text, make parts pop, and make the fonts of the bands specific. If you look at any poster the bands will have their own text font.

Time to Make Sense Out of the Mess of Items at the Bottom Left

When coloring for a spot color project such as this poster or a tee shirt, you’re limited to one color choice usually. This is where you need to be selective/creative and think this through.

All I did here is create color shapes and place them behind the character and objects.

Here is another technique that is good to use especially with my hand drawn pieces. If you know my style or if this is the first time seeing it..it’s pretty detailed… Yes? So here is a time saver. Make a copy of the outlined image and place it behind the original piece. Lock the top original piece. Select the car with your white arrow tool. Select merge  from the pathfinder panel then add a fill color to the color box then unite it using the pathfinder.

Change color and we just saved 10 minutes of using the pen tool.

Do the same with the microphone and the guitar and now we can take this to the next step.

Adding a Tad More Depth, and Other Refinements

I also wanted more dimension that just the starburst in the background. So I took the flames from the pinstripe pack pack and made this into a solid image by repeating the steps we just did for the car. You just got a free vector! Take a look under the pinup at the light red flames, cool feature and more interesting things going on.

Time to add some finesse to the border. You can taper the edges by expanding the stroke of the frame, then deleting the top point of the square edge.

I also added a stroke to each image. You have to add the stroke to a solid image that is underneath all of your layers. For the car we have two layers. One is the black outlines and one is the green color. Add the stroke to the green color. Make sense? Notice I changed the black lines to red… Looking cool!

Well I’m liking what I see, title reads well, colors look cool, feels like a Rockabilly poster.

Last Touches

Last thing I like to do is add a touch of my own flair. In this case I’ll grab some dot patterns from the symbol box.

I’ll just throw a few down and figure out what I like.

Next I’ll expand it because I don’t want to use the whole pattern just parts. So click on Object > Expand.

I’ll then take the lasso tool and cut out random parts that I want to use.

Cut then paste it then unite with the pathfinder using your black arrow tool.

I like to place these splatters behind the white stroke and make it the color of the stroke, in this case it’s white. So now we have a cool 16″x20″ – 5 color promo poster!

Let me know if you have any questions, go crazy with these vectors and send me your designs: put them in the Go Media Flickr Pool, and/or in the comments! One thing to add is that I illustrated a mix of hand drawn and vector/Illustrator images. This adds a really nice feel of that hand drawn look yet utilizing the strengths of Illustrator.

Enjoy guys!

— Steve Knerem

Note: find Steve online at: 

• SteveKnerem.com
• steve.knerem@facebook.com
• @SteveKnerem
• EstablishtheFrontLine.com

The post Create a Rockabilly Poster With Vector Set 22 – Part I appeared first on GoMediaZine.

A few sources of inspiration for this design.

You’ll notice that it looks like the dragon’s body is snaking back and forth. To create this appearance, I simply copied the body, pasted it and flipped it horizontally.

I grabbed the wings and tail from Vector Pack 19.

The Sakai family crest provided to me by Heather.

The post Sakai Vector Portrait appeared first on GoMediaZine.

Website: www.petemaric.com // 3D animation demo reels: www.vimeo.com/petemaric

Let’s get started!

As always, it’s a pleasure working with Go Media! I was excited to create his illustration for their headquarters exterior renovations, and my main goal was to make it look as good as possible.

In this tutorial I’ll walk you through the process for manipulating photographs, compositing 3D elements using Cinema 4D, establishing perspective grids, and using elements of the existing photo to create an accurate illustration.

Step 1: Fix the Photograph

Drag guides next to the building walls, double click the background layer. Edit > Transform > Skew. Drag the corners of the image using the skew function until the walls are lined up with the vertical guides. Flatten image. Use the crop tool to resize the canvas, dragging the handles past the edge of the image to the desired aspect ration/composition. Save image.

Step 2: Create 3D Elements

In Cinema 4D, create a new material and import the corrected photo inside the color channel, uncheck ‘specular’. Create a background object and place the new material on the background. Now the photo should be visible in the perspective viewport. If the photo looks disproportionate, too long or too narrow, you’ll have to match up the output size of your file with the aspect ratio of the photograph. To do this, open the render settings and background material so you have both windows open next to one another. In the material editor, color tab, the resolution size is right under the imported photo. Type these numbers into the render settings output width and height.

Step 3: Create the Bike Racks

To create the Go Go Go bike rack, start with a spline text object and type in the letter ‘G’ using Frutinger font. In the front view trace the center of the ‘G’ with a Bezier spline. Next create a profile with a circle spline, then drop the Bezier and profile splines into a sweep nurbs object. Change the ‘G’ text spine to an ‘O’ and repeat the same process. Group the ‘G’ and ‘O’ into a null object, then duplicate using a Mograph cloner to create three ‘Go’ bike racks.

Step 4: Compositing

To composite the bike rack into background, add a floor plane and use the grid in Cinema 4D as a guide to match the floor plane and ‘Go Go Go’ bike rack to the perspective of the photo.  Add the background material onto the floor plane and use a frontal projection. Right click on the floor plane > Cinema 4D tags > Compositing Tag. Inside the compositing tag, check ‘Compositing Background’ so the floor plane is not visible in the final render. Add a camera, right click the camera > Cinema 4D Tags > Protection Tag.

Step 5: Light the 3D scene.

Create two omni lights; one for the main light source with hard shadows turned on and the second as a fill light without shadows, and position them into place. Use the photograph to determine where the light source is coming from, this is where the main light source should be placed (top right of photo). In Photoshop, pick the color of the light (sky) using the eyedropper tool and enter the RGB values for both of the omni lights colors in Cinema 4D. Additionally, use a sky object with an HDRI material for reflections on the bike rack.

Step 6: Render the Cinema 4D Scene

Open the render settings, make sure the output size matches the resolution of the photo. Click effects to add a Cel Renderer effect. Check ‘Outline’ with edge color set to black and background color set to white. Specify a save path and render the line drawing.

Next, create a multi-pass render. In the render settings, check ‘multi-pass’, then ‘add image layers’ with the multi-pass button. Turn on Global Illumination and Ambient Occlusion via the effects tab. Check Save > Multi-Pass Image > Check ‘Multi-layer File’ > specify a save path, name your file > hit render.

Step 7: Establish the Perspective Grid

Since the perspectives in photographs are usually not 100% accurate, it is important to establish a perspective grid to work off of prior to creating the final line drawing.

In Photoshop, create two new layers; one layer filled with white and opacity set to 50% and a new layer for a rough perspective grid. On the perspective grid layer, choose a red color and start laying out the perspective grid using the line tool. First establish the horizon line which should be at approximately 5’-6” above the ground (5’-6” is the average person’s eye level). If there are not any people in the photograph, you can use other elements to approximate this height such as doors (6’-8” average height) to get as close as possible to 5’-6”.

The next step is to find the vanishing points, where the perspective lines converge. In this illustration, based on a 2-point perspective, one vanishing point would be on the left side (as shown in the illustration below) and other point on the right, way off of the canvas and not visible in this illustration.

Once the horizon line and vanishing points are established, draw in some general perspective lines for important architectural elements such as building lines and top and bottom of windows. Continue to block in the new elements like signage and awning.

Step 8: Create a Final Line Drawing

Open the cel render created in Cinema 4D > Select All (Command A) > Copy (Command C) > Paste (Command V) into the illustration file. To create the rest of the line drawing, use 4 different line weights all on separate layers; 3pt, 2pt, 1pt, and an additional 1pt w/ 50% opacity. Start by drawing with the heaviest line (3pt) on the bottom of the building and bottom of sidewalk. The 2 pt line can be used for the building outline, 1pt line for interior details like windows and doors, and thin line for corbels/crown, garage door, and background trees.

When creating the line drawing, we can take a little bit of creative liberty from the existing site conditions. For instance, in the existing photograph, the telephone pole by the corner of the building is slanted and blocking the new awning. Let’s straighten this so it’s completely vertical and move it over to the right a few inches so it does not block the new awning. Additionally, we can slim down the foreground telephone pole and move the street names down so they are visible in the illustration.

Remember, we are trying to create an idealized representation of this building. If a few elements need to be shifted around for the sake of clarity, feel free to exercise your creative license. Just make sure to run these changes by your client and get their approval prior to proceeding to the final rendering.

Step 9: Establish a Color Scheme

Use the eyedropper tool in Photoshop to select a brick color from the existing photograph. Launch the website www.kuler.adobe.com, input the brick color’s RGB values to create a custom scheme, then play around until you come up with a good looking color palette.

For this illustration, I started with the color of the existing brick, played around with Adobe Kuler, then experimented with different sky gradients in Photoshop until I came up with a scheme that worked for this building.

Step 11: Set Selections

Before adding color to the illustration, set selections for important architectural elements. Use the pen tool to draw a path around the building > Command + click the path in the path palette to activate the selection >  Select > Save Selection > name the selection ‘building’ > Hit OK. This will create a new channel in the channels palette. Repeat this process for the windows, go bike rack, and foreground telephone pole.

Step 12: Render the Illustration

Start the rendering by creating a custom gradient using the blue color from the color scheme with a yellowy/orange color. Create a new layer, set it to multiply blend mode, and drag the gradient from top to bottom to create the basic color for the sky. When rendering, starting with the sky color is a good idea because this sets the mood for the entire illustration. Next, add a layer mask to the gradient > command/click the ‘building’ selection in the channels palette > paint away the building, but let some of the color on top and bottom bleed into the building.

Next, create additional layers for the sidewalk and street, set blending mode to multiply, pick colors from the existing photo, paint in street and sidewalk.

Step 13: Render the Windows

Window Color: Duplicate the sky gradient layer > Layer > Layer Mask > Delete, and rename the layer to ‘windows’. Create a new layer mask in the layers palette > Command/Click the windows selection in the channels palette > Select > Inverse > use a large brush and paint away everything, leaving just the color for the windows. Duplicate the windows layer and reduce the opacity to around 50%.

Window Reflections: Open a photograph of a cityscape to be used for the window reflections > Select all (Command A) > Copy (Command V). Jump over to the illustration file > Command/Click the ‘windows’ channel > Edit > Paste Special > Paste Into. This will paste the photo into the window selection. Click the window layer > Edit > Transform > Skew > manipulate the pasted photo until it somewhat matches the perspective of the illustration. Add a 4pt gaussion blur to the photo and reduce the opacity to around 40%.

Window Light Rays: Create a new layer > use the pen tool to draw some light rays > fill with an off white/yellow color > add a layer mask > mask out all areas leaving the light rays only in the windows.

Step 14: Render the Brick

For the building, we’ll use as much of the existing photograph as possible. Duplicate the background photograph > add a watercolor filter (Filter > Artistic > Watercolor) > and drag the layer to the top of the layer stack. Add a layer mask > activate the building selection > Inverse the selection > paint away everything except the brick. Activate the window selection > mask out the window area to reveal the rendered windows from the previous step.

Step 15: Create a Brick Pattern

On the duplicated background layer, select a portion of brick using the Polygonal Lasso Tool. Create a new file at 11×17 inches, drag the brick selection in to the new file. Use the skew transform tool and align the top and bottom so they are horizontal, not slanted. Duplicate this layer to create a consistent brick pattern.

Next, create a new layer and draw grout lines using the line tool in Photoshop.

Step 16: Fix the Inconsistent Brick Pattern

Flatten the new brick and grout pattern > Select All (Command A) > Copy (Command C) > jump over to the illustration document and paste the brick for the front of the building. Use Edit > Transform > Skew to match the new brick pattern to the perspective of the illustration > mask away the areas for the windows, doors, telephone pole, and signage. Repeat this process for the corner of the building and left side.

Find a brick pattern on www.cgtextures.com and use this texture to render the building on the far right side.

Step 17: Add Background Trees

Duplicate the original brick layer (the one with the watercolor filter applied) > Mask out everything except the background trees, cars, and grass > set the layer to ‘Multiply’ blend mode > Reduce opacity to 90%. Fix any blotchy grass areas with the clone stamp tool. Duplicate this layer > flip horizontal > move to right side of illustration > mask out unwanted areas to create the right side tree.

Tip: Keeping all of the elements of the illustration on separate layers will give you complete control over the final look of the finished piece.

Step 18: Render the Go Bike Rack

Open the multi-pass file that was rendered from Cinema 4D. Double click the ‘diffuse’ layer > drag all layers into a group > name the group ‘Go Bike Rack Render’ > drag the entire group into the illustration file. Mask out each multi-pass layer individually and place the group into position.

Step 19: Render the Telephone Poles & Signage

For the telephone poles, use the background photo with a watercolor filter applied, mask out each telephone pole individually and keep all poles on separate layers. For the ‘Lorain’ & ‘W.45 St’ signs, use the text tool in Photoshop and skew each word into position.

For the ‘Go Media’ main sign, use the original reference image and cut/paste the sign into the illustration. Use Edit > Transform > Skew to match the perspective of the illustration.

To create the front awning, add a new layer, set it’s blending mode to multiply and paint in the black part of the awning. Copy/paste the Go Media logo mark from Adobe Illustrator into Photoshop. Use Edit > Transform > Skew to match the perspective of the illustration. Create the address in Photoshop using the text tool.

Step 20: Add People and Cars to Populate the Illustration

Turn on the perspective grid that was drawn prior to creating the final line drawing. Open your people and cars stock files > add watercolor filter to each file > place into illustration. Tip: Make sure that the eyes of every person are lined up with the horizon line.

For this illustration, stock files were used from www.realworldimagery.com and www.doschdesign.com.

Step 21: Add Shadows

Turn off all layers except the final line drawing and entourage (people & car). Create a new layer and manually paint in the shadows using a hard brush and a cool grey color. Set the shadow layers blend mode to multiply. In this illustration, the light source would be coming from the upper right.

Step 22: Final Touches

Street Reflections: Duplicate the original photograph > flip vertical > move down so the building is reflected in the street > add a gaussian blur > mask out everything except the building > reduce the opacity to 18%.

Birds: Use a custom brush > turn on scattering in the brush palette > choose a blue color from the sky > turn layer to multiply > paint in a group of birds.

Highlights: Create a new layer > use the line tool with a 1pt line > paint highlights on the right side of all architectural geometry.

Light Bursts: Create a new layer > set blending mode to overlay > pick a yellow color > paint with a soft brush over the front of the building > reduce the opacity to 60%. Create a new layer set to overlay and paint with an orange color on both right and left sides of the illustration.

Border: Fill a new layer with a dark blue color set to multiply blend mode > mask out the center of the layer.

Texture: Drop a watercolor paper texture on top of the entire illustration and turn the blend mode to multiply.

Step 23: Revisions

One thing that you should always anticipate when doing illustration work are client requested revisions. This is a very important thing to keep in mind when setting up your working files. Although assigning each line weight and all aspects of the rendering to it’s own separate layer may be a little bit more time-consuming up front, it pays off when you have to go back and revise your files. Tips: Keep everything on a separate layer, organize your layers into groups, and name all layers.

A few of the revisions to this illustration were to replace the side brick with a painted grey color, change Go bike rack to a brushed metal finish, and add clouds and a hot spot in the sky behind the building.

Change brick to grey: First turn off the new brick pattern in Photoshop to reveal the existing grey brick color. Next, use the clone stamp tool to touch up any wires, unwanted poles, and grass/weeds growing on the bottom of the building.

Change bike rack to a brushed metal finish: Open the Cinema 4D file and replace the Go bike rack yellow material with a stainless steel found in the content browser. Re-render the multi-pass file and replace the existing yellow color in the illustration with the new stainless steel.

Step 24: The final illustration!

Pour yourself a coffee warmer, you’re done!

The post Creating an Architectural Illustration Using Reference Photography appeared first on GoMediaZine.

Introduction

One of our clients Disciple Clothing needed a “logo” and business card designed for a ministry they are a part of. The Ashish Mubarak Ministries to be exact. They sent me their current business card along with the illustration they are using as their “logo.”

Wow! That’s technically an illustration and not a logo. As an illustration, it’s gnarly 90s gold and obviously in need of an update. Lauren Kusant from Disciple recognized this and asked me to simplify this into a logo, modernize it and add the word “Revivalist” to it. But in my professional opinion, if I reduced this entire scene into a a logo (what is and what isn’t a logo), it would ultimately lose all the different messages its trying to communicate. There’s a lot going on here!

Sidenote: If you’re interested, I suggest reading the article A Logo is Not a Brand.

You can’t fit a flaming sword, a bible, mother Earth, a dove, a scroll, and some stalks of wheat in what is traditionally called a logo. Sure you could take ALL of those elements and identify its core message and communicate that single message with a single mark. Sometimes when I do this, the client often feels that it’s too simple and too far removed from their vision. It loses some sort of wow factor. Now, a logo is meant to be a placeholder for a brand. A simple icon or wordmark that represents the brand that can be resized and repurposed for any application you can think of. It should be easy to spot, easy to recognize and easy to reproduce. Sometimes, clients will incorrectly ask for a logo, when what they really mean is “a cool looking graphic design that represents them.”

I once had a client ask for five different “logos” for their apparel line. What!? After talking more with them, they really wanted five different t-shirt designs. Specifically, five different typographic t-shirt designs. In other words, cool ways of writing their name mixed with other graphics.

So how was I going to tackle this project?  I felt the best solution would be to maintain the integrity of the elements but simplify the illustration entirely into more basic shapes and iconic forms. I decided to go with a thick line art style. It won’t be a “logo” per-say, but it will still be a simple and iconic design that can be used on a variety of applications to represent the ministry. So without further ado, let’s get into the design process!

TIP: For this style, stick with ONE line weight for a uniform look. We aren’t going for “realistic” here. Don’t over-illustrate. Simplify and keep things spaced evenly.

Step One: The Sword

Since we’re aiming for iconic and simple, always start with basic shapes and add detail from there. If you start going crazy with the pen tool, you’ll have a harder time making things “perfect”. You’ll see what I mean later. For the sword, I started with a box and used my pen tool to add a point. Then I used my Direct Selection Tool (white arrow) to select the three points at the tip of the sword. To make sure they are evenly spaced and my midpoint is exactly in the middle, I used the align tool “Horizontal Distribute Left.” Make sure “align to selection” is checked and not “align to artboard.” Otherwise you’ll spread out your points all across your artboard and you don’t want that.

To make the tip, I wanted a perfect 45 degree angle. Why? Because I feel it’s more iconic when angles are in good harmony with each other. Angles like 45, 90, 60, 30 are all good angles to use. To get the 45 degree angle, I held shift when creating my line. I lined it up with the left point and then selected and repositioned the “tip” to match. There might be a more exact way of doing this, but this way gets me close. I also drew another vertical line down the center of the sword and aligned it with the rest.

To create the handle, I did a lot of the same techniques as above. I started with a basic rectangle, created a midpoint, and moved it upwards slightly. I used a 15 degree reference line instead this time. How did I get it exactly 15 degrees? I started with a horizontal line, then used the Transform palette to rotate it exactly 15 degrees. Get used to this tool because it comes in handy!

I gave the handle guard a white fill in addition to the black stroke so I could position it on top of the blade and cover up parts I don’t want people to see. To create the rest of the handle I did more of the same. For the pommel (bottom tip of the handle) I made a rectangle and used Warp > Bulge to get it a slightly bulbous shape.

Step Two: The Book

For the book, in this case The Bible, I kept things simple by illustrating only the essential elements. The page, stuff on the page, and the dimension or thickness of the book. I started with one half first and then mirrored it.

I’ll create temporary vanishing point guidelines to make sure I get my perspective angles correct. You can fake this of course but I wanted to make sure. And one technique that’s very common is designing one half first and then mirroring it so each side is symmetrical. Then center it up perfectly with the sword using the align tool.

Step Three: The Fire

Truth be told, this took me many attempts to get right. I had to imply the sword was on fire without over illustrating it. The fire had to look like fire and not a leaf or some other decorative doodad. And it had to be symmetrical, but I didn’t want to have the same flame on both left and right sides. The challenge was to make it FEEL symmetrical without actually being exactly the same on both sides.

I started with a flame on the left side. I made sure the bottom part of the flame followed the contour of the book below it. To communicate a flame instead of a leaf, you need to have a few tendrils. You don’t need a lot, but if you have just one (like a candle flame) it doesn’t look like a flame. Unless of course a candle is underneath it. But I didn’t want any more than three tendrils or points to keep it simple.

Once I got one I liked, I mirrored it for the right side. I used my pen tool and adjusted points around until I had something different but still similar. I kept the bottom part the same which helps create the illusion of symmetry. I only adjusted the top two points. Once I was satisfied with my flanking flames, I put in the smaller whisps on top of the sword and behind. These don’t need a lot of tendrils because there are other flames around it that communicate “this is fire”. Without the more complex flames to the left and right, you can’t be sure whether it’s fire, wind, or some other decorative swoosh.

Step Four: The Banner

I purposely left room at the top for the banner. This is where the text “revivalist” is going to go. I started by using the font Modula Sans as a base. Since I want everything to have a consistent line weight I’ll need to create new lines from scratch. Before I did that, I roughly set things up how I wanted it using the Warp > Arc Lower tool and distorting the text into position. Once it’s close, I lower the opacity of my reference and start drawing lines as simply as possible. It doesn’t have to match up exactly with my reference and it’s ok to adjust later. For the A, I actually used an upside-down V.

I positioned the banner on top of the sword and made sure it was perfectly centered. I also added the back “flaps”.

Step Five: The Wheat Stalks

I knew I wanted the wheat stalks to circle the design in some way. Instead of trying to draw a curve by hand, I started with a circle as reference and added a single point at the top of my stalk and then deleted other parts of the circle until I was left with the part I needed. To create the head of the wheat stalk, I took two overlapping circles and used the Intersect tool in my pathfinder palette. That gave me a perfect shape. I rotated it 30 degrees and mirrored it so I would have a symmetrical shape to work with. I then duplicated this shape vertically by holding Alt+Shift while I dragged it down some. After that I pressed Ctrl+D five times to repeat the last action and duplicate the shape. I added one more of those shapes on top. For the sprout-like things coming out the sides, it’s just a simple path that was duplicated and mirrored on both sides. Easy.

I moved the head into position on the stem and then individually rotated the shapes along the curve slightly. Just to make it look like it was bending along with the stem. When I was satisfied with the position, I copied it, rotated it, and positioned a second wheat stalk to the left of it. And finally I grouped the two of those together and mirrored it on the other side while making sure my wheat stalks were perfectly aligned to the center of the design.

Step Six: The Dove

Since I am not a pro at drawing a dove, I wanted to make sure I was close! So I grabbed a reference image from iStockphoto. It’s more of an illustration, but I liked the position and symmetry. I thought it would be an excellent starting point for my design.

I started out with extreme basic shapes. Circles, ovals, ellipsis, whatever you want to call them. I tried to make as few lines as possible while still capturing the essence of the bird’s body. When they are properly layered, you can create the illusion of depth very easily! Make sure the head is on top of the body, the feet on top of the wheat. The body behind the wheat, etc.

For the wings, I made one on the left side before I mirrored it to the right. Here’s a good rule of thumb for creating vector illustrations: Use as few points as possible for the cleanest curves. It’s so much easier to manipulate that way. For my wings, I made sure they were behind the body but in front of the wheat. This gives the illusion that the bird is kind of leaning forward.

For the tail feathers, I used the same technique I did in creating the head of the wheat stalks. I used two overlapping circles to cut out a basic feather shape. I used the rotate tool and held down ALT while I clicked the bottom of point of my shape to set the new pivot point. When the rotate dialog box pops up, I used 30 degrees and checked the preview button to make sure. Instead of hitting “ok” I clicked “copy” to duplicate the shape instead. And then I pressed Ctrl+D to repeat this process a bunch more times until the shape copied itself in a full circle. Pretty cool technique!

I deleted the shapes at the top that I didn’t need and set the fill color to white just so they overlapped and didn’t look transparent. I also adjusted the layering of the feathers to keep it symmetrical on both sides. With the bottom feather being furthest behind, the next two features being second, and then the top feathers being in front or on top. Does that make sense? See the image below for a breakdown.

Step Seven: Fine Tuning

In reality, there was a lot more trial and error in the process of this illustration. There was a lot nudging lines around, moving and rotating, and asking “does this look right?” Use your eye and keep the shapes and lines in harmony. And my final design was inverted (white on black) to match the colors the ministry was using on its old business card and website.

But before I made the color change, I wanted to “naturalize” the illustration a bit. Make it slightly rougher and analog. Here is a simple technique for making your vector art look a bit more natural.

Roughen it up a bit.

I selected all my strokes and went to Effect > Distort and Transform > Roughen. This took some tinkering to get to look just right! I was aiming for a subtle wobble to my linework, but not too much.

Photoshop Trickery

This looks pretty good, but I want to take it a step further. I’ll copy my entire design and open Photoshop. I’ll start a new document at about 2500 x 2500 and paste my artwork as pixels. Make sure it takes up most of the document.

After you’ve got it pasted in there, merge it with the background layer. Then go to Filter > Add Noise to about 15%. Then give it a Gaussian Blur of 2%. And finally apply a Smart Sharpen to about 140% with a 34 px radius. Now adjust the levels to eliminate the grey noise in the background.

Repeat this process about 3-4 times tinkering with your settings to get the best effect.

Aside from the fact that the lines are slightly rougher than before, notice the joints between lines. The areas where lines meet up are now a bit more blended together. It doesn’t look extremely precise and perfect. More natural. Now this isn’t always appropriate for every situation. If you wanted to keep the clean look then don’t do this. But in my case I like the analog look and felt like it worked for this project.

Back to Illustrator

At this point, I will copy and paste this back into Illustrator and give it a live trace to convert it back to vector art. I’m ok with some amount of smoothing or “quality loss” here. My image is 2500×2500 so it is pretty high res. A Live Trace will work fine. But if I wanted to keep a lot of those rough details, there is the “lettering” preset under Live Trace Options which works wonders for keeping your rough details, but is terrible for CPU performance. Your resulting vector art is often loaded with thousands of points and that’s not really good here. So I just keep the default settings.

Step Eight: Finish!

That’s it. That’s all there is. I hope you learned a bit about creating iconic vector art in Illustrator. It’s really about being able to simplify the elements as much as possible, using basic shapes as starting points, and keeping things simple, balanced, and consistent. Everything in this design has one stroke weight. Even my text. That’s the beauty of this style. This won’t work for a logo, but this illustration can be just as versatile in many situations.

Here’s my final design on black and then the finished business cards.

Mock it up!

Here are the designs mocked up on some of our templates. You can buy this tri-blend template pack from Go Media’s Arsenal. These other mockups are from our site Mockup Everything.

The post Thick Line Art: Creating Iconic Vector Art appeared first on GoMediaZine.

A quick thanks to Josh Bunts who suggested this post on Go Media’s Facebook page. Technically, he asked for advice on “…document set up and color pallets.” I thought I should expand the post to speak generally about all things Illustrator pre-work.

1. When setting up your document specs, keep the end in mind

When creating a new Illustrator document, the very first thing you’ll be confronted by is the New Document (profile) window that asks you a bunch of questions. The important thing here is that you know what you’re designing for. Are you designing a web page or a poster? Is your design going to be viewed mostly online or in printed form? Once you know the primary way that your design will be used, here are my recommendations:

Name

Duh.

New Document Profile

Adobe has been kind enough to create document spec cheat sheets. Instead of making all the following decisions on your own, you can simply select a common-use profile. But none of these seem ideal to me, so I suggest you set this to “custom.”

Number of Art Boards

If you will need multiple art boards of the same size, go ahead and select how many you’ll need. A common example of this would be a multi-page brochure, or multi-page website design. If you’re planning on laying out anything over 12 pages you might seriously consider switching over to InDesign which is better suited for large documents. If you are setting up a document that will require multiple art boards of different sizes, I wouldn’t worry too much about this here either. You’ll need to set up those art boards once you’re in the document.

Spacing

If you have multiple art boards Adobe wants to know how much space to put between them. Personally, I use lots of space around my art boards to put design elements I’m working with. So, I like at least 300pts (if not more.)

Columns

This is NOT column guides on your art boards, this is simply how Adobe arranges the art boards on your work area. This adjusts automatically based on the number of art boards. I typically leave this alone.

Size

Obviously, this is the size of the art board. Here’s what you need to know. If you’re designing for print and require a bleed, you can either add the bleed dimensions directly to the art board or you can add a bleed dimension, and Illustrator will include the art in the bleed area when it exports. However, if you “Save For Web,” then it will not include that bleed artwork. As with the New Document Profile, Adobe has kindly provided you with a list of common art board sizes.

Width and Height

Obviously, if you’re creating a custom art board size, this is where you put it in.

Units

Before I type in my custom art board size, I like to establish what units I’ll be working in. It’s just much easier for me to think of print dimensions in terms of inches and web dimensions in terms of pixels.

Orientation

The orientation is established by the width and height you enter in. But if you decide to flip it, this is an easy way to swap those dimensions.

Bleed

This is where you’ll enter in how much bleed you’ll need. For most printers this will be .125” (inches) on all four sides. Obviously, if you’re designing for the web you won’t need a bleed.

There is a little double-arrow to open the “Advanced” area, which I recommend.

Color Mode

This is probably one of the most important settings you’ll need to establish for your document. For print you’ll want CMYK. For web you’ll want RGB. If you’re doing something like branding where the design (a logo) will be used on both print and web, I would start with RGB. Of course, if you’re building someone a brand you’re going to need to establish RGB, CMYK and Pantone spot-colors for their company, but that’s another lesson.

Raster Effects

This is the resolution at which Illustrator will render its effects – things like drop shadows. Although technically you shouldn’t really need anything over 72dpi for the web, I always set this to 300dpi. I am just never sure when I might want to use part of a design for print or decide to blow-up a part of the design.

Preview Mode

Most of the time you’ll want to be in the default Illustrator view, but if you’re designing for the web and want to have a more realistic view of how your design will look once rasterized, the Pixel Preview Mode can be useful. There is also an overprint preview mode which, quite frankly, I never use and have a very difficult time imagining a scenario where you might need it, so I’ll skip trying to explain that in this article.

Align New Objects to Pixel Grid

If you’re designing for the web checking this off will force your vectors to align to the pixel grid. This helps keep your vectors pixel-perfect when they rasterize. Though you’ll also notice your objects snapping into locations that are not necessarily where you’re putting them.

2. Set up and save your preferred Workspace

When you’re working in Illustrator there are tons of tool panels (known as Windows) all over your screen. You probably know that you can open, close and move your tool Windows around, but did you know you can also save the way you arrange them? This is critical to my work flow. I know which windows I use most frequently, so I’ve systematically arranged them in just the right order. When you have your work space set up just how you like it click Window/Workspace/Save Workspace.

Then name it something like “Beachy_Print_Workspace.” You may find, as I did, that you’ll want to set up slightly different workspaces depending on the type of project you’re working on. Here is my default workspace set-up.

One item to take note of in my set-up here is that I’ve set up my own color swatch palette and called it Beachy. This is very easy to do. To set up your own custom color swatch palette just edit the normal swatches window until you have all the colors you like then open the drop-down menu and click Save Swatch Library as ASE…

The next time you create a new Illustrator document you will need to open your custom swatch palette by clicking Window/Swatch Libraries/User Defined.

You may also notice my Layers Window, which brings me to my next essential point:

3. Set up and use Layers!

Layers are one of the most important tools for managing your illustrator documents. It took me many years to grow an appreciation for Layers. But just like a computer, the wheel and fire – once you learn how to use them, you won’t imagine living without them. Here is a typical layer stack that I will create while working on a project. Sometimes I’ll get even more specific by setting up layers with names like “Header Art,” “Navigation” or “Footer.” Basically, any design element that I might want to design as a distinct unit can be put on its own layer. Then, as I work, I’m constantly locking and unlocking the layers. This allows me to easily manipulate the elements on the layer I’m working on without disturbing the elements on the other layers. You should really get into the habit of building well organized layers that have clear titles. I promise over your lifetime you will save yourself a lot of aggravation by making this a habit now.

4. Create a template.

You’ll notice that the top layer of my document is labeled “Template.” I always start by designing a template and locking the layer. I actually created tons of templates in advance and now I just open the appropriate template before I start each project. My templates for print projects look something like this: Solid black line for the exterior full-bleed area, then .125” inside of that I make a solid red line for the trimmed art area and finally, .25” inside of that I make a dashed black line for the “live area.”

When I’m working on web designs I typically start with a 960 grid template. You can download one here: 960.gs I normally expand the art board from 1020px wide to 1920px. I do this because I design all my web pages for a monitor that supports 1920px width. Sure, most people will never see the entire width of my designs. But if someone happens to have a monster monitor, I want their viewing experience to be as beautiful as possible. Of course, I keep all the live content within the 960 grid.

5. Link your photos

This little piece of advice doesn’t take place during the set-up, but will occur each time you place an image into your Illustrator file. Any time you place an image into Illustrator, you have two options. You can either embed the image or you can link it. Here is the Place window that will pop up when you go to add an image:

If you don’t check off this “Link” box, then Illustrator assumes you want to embed your image. When you embed an image it means that the photo’s data becomes part of the Illustrator file. When you link your images Illustrator does not embed the photo data. Instead, it just refers back to the photo file that is saved on your hard drive. Here are the reasons I believe linking is the right way to go versus embedding. First, it will keep your illustrator file sizes down. Second, when a photo is linked you can edit the photo outside of Illustrator and it will automatically update the image in Illustrator. Lastly, but most importantly, embedded images are known to corrupt Illustrator files. I’ve lost many Illustrator files because it had difficulty managing my embedded images. The only down side to linked images is that if you move your images on your hard drive, you’ll need to re-link them when you open your Illustrator file. But re-linking files, in my opinion, is a small burden when you consider the advantages.

6. When saving, uncheck “Create PDF Compatible File”

One of the great advantages of Illustrator over raster based software like Photoshop is the ability to keep your file sizes very small.  But for some reason Illustrator, by default, creates a PDF compatible file when you save it. This essentially bloats your file size to something similar to a raster file. While you may want to use this option when saving the final file that you give your client or send to a printer, you don’t need it for day-to-day saving. So long as you’re not done and don’t plan on trying to open the file in some alternative software, uncheck the Create PDF Compatible File option when saving.

So, that’s it – short and sweet. I hope these tips will help you when working in Adobe Illustrator. It’s certainly my favorite program and the more you use it, the more you’ll love it. I promise!

The post 6 Essentials to Setting Up Your Illustrator Documents appeared first on GoMediaZine.

Introduction

Hello dear Zine readers. Simon and Jon from Studio Ace of Spade here. Today, we’ll have the pleasure of walking you through the making of our entry for an old installment of The Fox Is Black’s Recovered Books contest.

Our goal with this walk-through/PSD break down is to provide some insight on the concept behind the poster, and on the various techniques that helped during the execution phase of it.

Let’s be clear: we don’t think we’ll give you any magic recipe to create a cool poster, but rather a detailed look at what our workflow for this one was, and a look at some of our favorite techniques when manipulating images and blending them with type elements and textures. We hope you’ll be tempted to actually play with the various values we used in our level editings and filters as well as the different textures in the packs we used, in order to make this piece your own.

How it came to be

The contest on The Fox Is Black

Like we said earlier, what became this poster was an entry for The Fox Is Black’s Re-covered book contest.

The Fox Is Black, formerly Kitsune Noir, was started in April of 2007 as a way of sharing interesting ideas with likeminded people.

— From TFIB’s About page

The contest is quite simple. Bobby and his team of authors choose a book, provide some background inf, cover examples, and a deadline. Here’s some of the announcement post:

Well, it’s been a few months since our last Re-Covered Books contest, so I figured it was time we get back to creating some awesome work, don’t you think? I decided that I wanted to pick a book that was newer, something that could really inspire a lot of bold ideas and not be marred with clichés. Browsing through our library at the TFIB HQ I came across a copy of Do Androids Dream of Electric Sheep?, and realized that’s exactly what I was looking for.

It’s important to remember that this was the book that inspired Blade Runner, the emphasis here is on the word inspired. That means I don’t want to see any Harrison Ford looking guys on your covers, or anything that’s borrowed from Blade Runner. Try and use your imagination and come up with some crazy, sci-fi imagery.

And here are the examples of (beautiful) vintage covers he provided:

Having read excerpts of that book a long time ago and not seen Blade Runner yet, we quickly proceeded to do so in order to understand the difference between the 2. After some research, we also discovered a comic book version of the book, edited by Boom Comics!

After all that research and armed with our best memories of sci-fi movies (from Metropolis to The Matrix), we felt like we could go ahead with conceptualizing a direction that would be ours, even if not totally unique.

Conceptualization

The title gave us the most obvious visual direction. There are androids, sheep, electricity, dreams that are mentioned. The story includes robots that are so close to look like humans that they might not be recognized by an untrained person. It’s also happening in a society devastated by a global nuclear war, and Earth is in a shape so bad that most of the people left to colonize the stars.

In short, we want robots, electronic elements (circuit boards…), sheep, and a gloomy atmosphere.

From there, we started to gather reference photos and some other visual to create something close to a mood board.

This mood board includes a WPA poster with 2 bighorns sheep, a 1890s photo of the National Galleries of Scotland of a sheep named MacGregor, one of Hannes Beer’s ADED project installment, a photo of sleeping sheep, and the Bighorn sheep print designed by Mark Weaver.

After the mood board, we embarked on a quick texture research, to find circuit board textures we could use. As usual, Caleb from Lost and Taken got us covered, with this pack of circuit board textures, published on WeGraphics.net. Bittbox also has a series of circuit board textures up, but we ended up not using them. We’ll explain why a bit later.

After some quick sketching on paper, it became clear that trying to draw a robot sheep wouldn’t work as efficiently as using a photo as the base of our poster. We did some posters including hand drawn elements before, but this one just didn’t seem to work. Instead, we decided to use the 1890 photo of MacGregor the sheep as the base element of our poster.

Once the base of the poster was determined, we also knew we wanted to have the circuit boards present in the image as well, probably overlayed on top of it. We also knew we had to have the author name and book title on it somewhere.

A lot of the things that happened during the execution of that cover/poster were happy accidents, as it often happens with an organic design process. This means one thing: EXPERIMENTATION IS KEY. It also means that what we sometimes consider as mistakes can actually be more interesting than the original direction you planned for.

With all that said, let’s dive in the execution part of this piece, shall we?

First, some useful resources

Most of these resources will be textures. It goes from paper to stone and other grunge elements. They come from all over the internets: Lost and Taken, Bittbox, DeviantArt, sxc.hu…

The very first file you’ll need to get is the picture of MacGregor the sheep. Don’t forget to grab the biggest size available.

Let’s look at our layer palette to see what we used and what you’ll need to emulate it. First, the background.

In here, we have, from top to bottom:

• A photocopy texture made by clarisaponcedeleon and available on DeviantArt
• Scan-32 is a vintage paper texture part of a pack done by Caleb of Lost and Taken called Vintage paper textures vol. 1 (published at Design Kindle)
• VV_PaperDotsSingle is a paper texture with some heavy grain, published on Flickr by Dustin of Valleys in the Vinyl
• VV_DirtyPaperPack_02 is from a series of dirty paper textures collected by Dustin of Valleys in the Vinyl
• bashocorpo_com__paper3 is a paper texture from Bashocorpo
• Metallic blue (6) and Metallic Blue (2) are both from a pack called 7 blue grungy paper textures from Lost and Taken

You’ll also see a color layer (in blue #6faab8), but more on this later.

The next set of resources will be useful for the global texturing process:

Here’s where to grab these ones:

• Tape borders and tape borders copy are constituted of pieces of tape coming from Fuzzimo’s Flickr stream and from Lost and Taken and combined on a layer.
• Splash 3 comes from a pack of textures made by Andre Meca and published on PSD Fan
• grunge_-_dust_-_deviantart_-_too_dusty… is a film texture with dust and speckles I found on DeviantArt
• texture_from_film_-_05_-_4298403252_6b4b31470a_o_d is a grainy film texture, coming from a set by m. r. nelson on Flickr
• 4439092868_c299e91a19_o – subtle grunge – LT is part of a set of subtle grunge textures made by Lost and Taken
• Old Film 02 has been found on DeviantArt
• noise2_7 is part of the second set of noise textures put out by WeGraphics. If you don’t want to buy the set, use the free sample
• circuit board – BB is one of the textures taken from BittBox’s circuit board texture pack
• c_b_2 – BB is wrongfully credited to BittBox here, and can be found in that free set of circuit board textures at WeGraphics

Phew. That’s all the resources you’ll need in terms of textures. In addition to that, you’ll need the 2 aged effect actions, created by the good folks here at Go Media (Aged Effect One and Aged Effect Two).

Note: in order to save the actions, just do a right click on the links above, and choose “Save link as…”

Let’s make this piece

Step 1: creating a new document

Let’s remember that at first it’s supposed to become a book cover. So we could just go ahead and decide on a cover format based on one of the most common book sizes. Since we weren’t sure we’d make it through the contest and just in case we’d want to turn this into a print, we decided to design our submission as an 18×24 inches poster.

So let’s create a new 18×24 inches document in Ps. As you can see, our document will be in RGB mode since some of the filters we’ll be using in the final phases are available in RGB mode only.

Other than that, since we might end up getting this to print, don’t forget to put the resolution of your document to 300 ppi. We’ve also added guides, as they help us to structure the composition. On a 18″x24″ print, we have them typically set up at 1, 2, 9, 16 and 17 inches vertically, and 1, 2, 12, 22 and 23 inches horizontally. Then, you can also add some as needed.

Note: you might want to create a similarly set up document in Ai, and leave it open in the background. We’ll use that one for creating the type elements a bit later.

Step 2: let’s place MacGregor

We could have started with the background texture buildup, but we wanted to make sure we’d place the main element of our poster without the distractions of background textures. We already knew that our type would mimic a typical book cover layout (title at the top, author at the bottom), so a somewhat off-centered placement for MacGregor was what made sense.

Drag the sheep image in your document.  Desaturate it, then, convert it to a smart object (right click on the layer).  This allows to keep “access” to the original file, even though you’re going to resize it and/or apply filters to it. Beware, this state has some limitations. Once it’s a smart object, place and resize it as you see fit.

The image the National Galleries of Scotland are making available is fairly small. We’ll need to think about sharpening and other enhancements. In terms of sharpening, one method I like to use a lot is based on the high pass filter. It’s been explained very well on this blog by Oliver Barrett, so I won’t go over it too much in detail.

You’ll need to make a copy of your correctly placed sheep layer. Then, right click on the layer and rasterize it. Once it’s rasterized, apply the high pass filter. I used the highest value possible for the filter, 250, because the base image is so small. Switch the blending mode of the high-passed layer to soft light and play with the opacity to adjust the intensity of the effect. You can see I actually have my base layer (not high passed) on hard light, to let the color and background effects play through, then the high passed layers are set on soft light at 25% opacity. The second copy is here because I needed to make the sheep a bit more present once the background was done.

The background textures

Since we wanted to create a dark and digital mood but not fall into a Matrix style, we opted for an electric, kind of muted, blue as our base color: #6faab8. After that, we wanted to start with a paper grain and rusted metal background. As you’ll see, it evolved into something a bit different.

First, a layer filled with the base blue (#6faab8).

Then, our first texture: Metallic Blue (2). Open it, drag it in your document and place it at the center. Resize it in order to cover the full extent of the canvas (or even to go beyond its limits). Then you want to desaturate it (CTRL/CMD+SHIFT+U) and adjust its levels (CTRL/CMD+L), to bring the details of the texture out. Then, sharpen it a couple time by using the sharpen filter found at filters > sharpen > sharpen. Just compare your original Metallic Blue (2) file with the one I have here. You’ll also notice that I placed the blending mode of this texture on Overlay @ 100% opacity.

Now, by following a similar process, let’s build up all the other layers used for our background. Here, Metallic Blue (6) has been placed on Soft light @ 100% opacity, after being leveled and sharpened.

bashocorpo_com__paper3 is bringing us the splatters we wanted. It also lightens the piece.

VV_DirtyPaperPack_02 adds folds and other worn effects.

VV_PaperDotsSingle is probably the texture that has the most impact throughout the piece. It’s what makes the final piece’s halftone effect so strong. Now that we have a chance to look back on this, maybe we would have put it on Soft light instead of Overlay, and also down to 50% opacity instead of 75%. Yet, as said before, it’s what brings most of the main feel to the piece. It’s bringing these great lines of worn folds.

Scan-32 is part of the Vintage paper textures Vol. 1. We edited the levels to make it really dark (the black is at 125, the mid-tones at 0.5 and the white at 200). Using Linear burn as a blending mode brings a lot of dark back into the piece.

Finally, ending up with the photocopy texture on Soft light @ 75% opacity helps to restore some light in the center zone, where MacGregor awaits some further treatment.

This concludes the background. If you’ve read our tutorial/case study of our Lost and Taken poster on this very blog, you’ll see that the process to play with the textures and combine them together is pretty similar.

Adjustments to MacGregor

Once you turn back on the layers for MacGregor, this is what your piece should resemble. All the texture work of the background is hidden! So, instead of leaving your base sheep layer on normal @ 100% opacity, let’s switch it to hard light.

The result of this blending mode switch lets the background show through pretty well. We’re definitely hitting the grunge vibe we wanted the piece to have.

We’re not having much of a technological feel to this, but that’s where the global texturing process will play. For now, it’s time to create our type elements.

The type elements creation

As a rule of thumb, when working on a piece like this one where there aren’t too many type elements to manage, we like to create them in Ai. It offers more control on the type, and allows to adjust scaling at will before applying textures and other effects.

Here are the final elements we used in the piece.

You’ve probably all recognized Gotham. We decided to use it because it’s a really legible typeface, but also because it has that great vintage feel. Because of the overall dark piece, we wanted the type to be white. In order to make sure it would be legible, we included it within these black blocks that act as a separation between the busy texture of the piece and the type. Finally, the white rectangles help to structure the type elements a bit better.

If you look closely at our type elements, you’ll notice they’re looking worn out. To achieve this effect, we’re using the roughen filter in Ai (Effect > Distort and Transform > Roughen). You can see the values we’ve used on the screenshot. We need to give credit here to Simon Walker (aka Super Furry) and to Dan Cassaro (aka Youngjerks) for the tips and tricks on how to use this filter. Simon did a great post over at Method & Craft detailing his use of it.

When placing our type back in the piece in Ps, we realized that white type in a black rectangle wasn’t that efficient. We then decided to invert the type elements to black text in white rectangles, which has much more visual impact.

Once both type elements were placed, it was time to start adding texture to them.  Instead of adding another set of texture layers specifically to them, we decided to just place their blending mode on Soft light @ 100% opacity. When stacking copies of the layer, you’ll give it more opacity, with the textures below still playing through it. In our case, we stacked up 3 copies of the layer of each type block.

You’ll also notice a Hue/Saturation adjustment layer for both elements, and here’s the reason why. This is what happens without the adjustment layer:

The colors are just way too “hot”, too saturated by places. Sometimes, this can be a sought after effect. James White (aka Signalnoise) explained in his broadcast about his Dagger Woods poster that his really flashy colors are often obtained that way. But this time, we weren’t pursuing this route, so we added that adjustment layer, and turned the saturation down to -75.

Which gives us the following result:

Much more subtle. Also, remember we’re designing in RGB, and that when printing, these really bright colors don’t translate all that well (unless you add a spot color and work with some really talented pre-press guys).

The last thing we added to the type was a layer mask in which we pasted a grunge texture to add some extra grunge. Demonstration:

Without the grunged layer mask, this is what we get.

Here’s what the content of my layer mask looks like:

The texture was probably taken from this grungy lamp post texture pack from DesignInstruct, but we could be wrong. To paste a texture in a layer mask, it’s quite easy. Start by opening the texture you’re interested to use. Copy all its content (CTRL/CMD+A, CTRL/CMD+ C). Then go to your main document, and ALT+CLICK on the layer mask. You’ll be switched to see the content of the layer mask. You then just have to paste the texture you previously copied in there, adjust its placement, size and levels, maybe use the sharpen filter, and you’re all set. This technique allows to use elements than are bigger than brushed, which are limited to a 2500×2500 pixels size. And here’s the result of our manipulation:

Here’s a shot of the current state of our piece:

Now that the type is in place, it’s time to add some global textures on here.

Global texturing

This step is important, because it helps us to bring coherence to the piece by unifying all the elements together. The technique behind it is the same than when building the textures for the background, except this time you have to take the legibility of everything you have underneath into account. What’s the point of adding more to the composition if it takes your original work away?

Let’s start by adding something we’ve been talking about from the start, the circuit board textures.

We’ll start by using c_2_b, which comes from that WeGraphics free texture pack. We placed it vertically and made sure it would cover all the design. After the typical desaturation, sharpening and level editing, we switched its blending mode to Overlay @ 100% opacity.

Thinking the effect wasn’t as strong as we wanted it to be, we duplicated the texture, which gave us the following result:

We were happy with the added intensity. We just put the opacity of the copy a bit down to 75%.

If you looked well, you’ll see we have a layer mask on part of the board textures. The reason for that layer mask is to soften the board texture on the text blocks. Let’s look closer at our text without the layer mask:

And now, here’s the text with the layer mask being active:

It’s really subtle on the top part, more obvious on the credits, and helps quite a bit. The layer mask content consists of the text blocks surface filled with #d4d4d4 gray.

Next texture in line is one of the circuit board textures from Bittbox’s set. It’s on Soft light @ 100% opacity. It adds some really soft lines.

Next, we have noise2_7 (or you can use the free sample, spot the link under the download button). It’s placed on Screen @ 50% opacity. Screen makes the black parts of the image transparent, which just leaves the white speckles and dust appearing. This ages your piece in a heart beat.

For the same reason we duplicated the circuit board texture, we’ve duplicated that one too. The other thing we did to the duplicated layer is to rotate it 180°, to add some more visual variations.

Next texture in line, Old_Film_02. Placed on Soft light @ 50% opacity, it’ll had some soft hints of more dust and speckles.

The next texture is taken from Lost and Taken’s subtle grunge textures. Placed on Soft light @ 100% opacity, it brings some brightness back in the piece.

m. r. nelson’s texture_from_film_05 brings some of that film grain into the piece. Soft light @ 100% opacity.

too_dusty, the film texture from Miss Alienation’s DeviantArt gallery, is yet another dust speckle texture. You’ll need to apply some pretty harsh levels to make the speckles come out. Place it on Soft light @ 50% opacity.

Andre Meca’s splash texture adds another layer of subtle variations. Its blending mode should be Soft light at 50% opacity.

The tape border layer has been created using the various pieces of tape of the packs I listed above. If it’s too long and painful for you, you could also use these great brushes released by Chris Spooner. Combine your tape elements to create a frame that would go around the edge of the piece. Then, put the layer on overlay @ 100% opacity. Since we didn’t think it was creating a strong enough frame, we duplicated it and tuned down the opacity of the copy to 75%.

Phew. Almost done! Bear with me for the finishing touches, and you’ll have yourself a great finished product!

Finalizing the piece

So far, here’s what we have:

What we’ll do now is to gain time in the following steps. First, select the whole piece (CTRL/CMD+A) and then crop it (Image > crop). The reason we do that is to clear the file of the excess of texture that goes beyond the limits of the canvas. You don’t see them, but Ps does and it slows it down when applying filters and inflates your file size.

Once the cropping is done, let’s create a new layer that will include a merged copy of all the content of our piece so far. There’s a shortcut for this, it’s SHIFT+CTRL/CMD+ALT/OPTION+E. Once that’s done (and it can take a while, so go grab a warmer for your coffee mug), make 2 copies of that layer.

This is where the actions we’ve asked you to download will get useful. Get them loaded in Ps, and let’s play with them a little (Addicted to design wrote a quick how-to).

Run the first aging action on on the first copy of the comp layer. Here’s a preview of the result:

The action effect is a really harsh, almost xerox like (but with color) rendition of the piece. Let’s switch that to Soft light @ 25% opacity, for a less aggressive result.

Let’s turn back on the second copy of our comp and run the 2nd aging action on it:

For the same reasons as before, let’s switch this to Soft Light @ 25% opacity, and it’ll already look much better.

These 2 actions help to enhance the contrast, while still adding something of an aged look to the piece. Now the last piece, the halftone effect.

The halftone effect we use to finish most of the posters we do is greatly based on this tutorial written by Adam Levermore. Mad props to him. Let’s create another comp layer (once again, the shortcut for that is SHIFT+CTRL/CMD+ALT/OPTION+E). Once it’s done, rename it halftones and make it a smart object. Reset your color palette to black as your foreground color and white as the background color. We do this because your active foreground color will be used as the color of the dots of the halftone effect. Go to Filter > Sketch > Halftone pattern. Here’s what you should see:

The first thing you should go is head over to the zoom menu, and hit the “Fit in view” option. Now you’ll see what you’re doing. After that, we choose to emulate a pretty realistic halftone effect, with a minimum dot size of 5. We set the contrast at 15, like that it’s high enough to still show highlights and dark areas, but it’s also low enough for the brightest areas to how some of the halftone dots in them. Here’s the result:

Now, it’s time to use to our benefit some of the smart object status of our halftone layer. First, let’s change the blending mode of the actual halftone effect. Double click on that symbol, noted 1.. Then, in the drop-down menu (2.), choose Soft light @ 100%.

And then, finally, we can put the blending mode of the layer on lighten @ 50%.

Now, hit File > save! Save it as a PSB, as the final file is over the PSD file format size limit. Our file weighs a whopping 2.5+ Gb. And here you are, with a neat grunge, Do androids dream of electric sheep?-themed, poster.

Conclusion

Thanks again for sticking with us to the end of this rather long tutorial. We hope we’ve given you some insight on how we do things. If you have questions, suggestions, love/hate messages, let’s get the discussion going in the comments! Also, if you want to follow the progress of the poster as we made it, you can check the stream of Dribbble rebounds associated with it.

Simon H. and Jon Savage, Studio Ace of Spade.

The post Do androids dream of electric sheep PSD breakdown appeared first on GoMediaZine.

Before we get started

Hey everyone,

Chris Parks (AKA Pale Horse) here for Go Media. Today, I’ll be outlining my recent experience working with The Indomina Group, a global entertainment company who produce and distribute movies, television, music and interactive games. Their latest project was a Hong Kong, wire-fu, murder mystery release called “Detective Dee & the Mystery of the Phantom Flame”. Indomina contacted me to create a limited edition poster design to promote the release of the film here in the U.S.

I absolutely love screen-printed, movie posters, as they give artists the chance to create a piece that is far more interesting and collectable than the standard, glossy, big budget designs released to the masses.

Below is a shot of the final, approved artwork that was printed for the release.

Client correspondence

To give you full insight into the project from start to finish, I’ve included the interaction emails with the client and progress shots along the way so you can follow along.

Lauren Fisher – Client

We’ve started a project at Indomina where we release an art/teaser poster for every theatrical release we do.

We just finished one for Griff The Invisible that will premiere this week at Comic Con and I need to get started on the next one, which is for Detective Dee and the Mystery of the Phantom Flame. It’s an AMAZING film, full of kung-fu awesomeness, high-production values and a stellar cast.

I love your work so much and I think you could come up with something awesome based on the imagery from Dee. 

I’m thinking since it’s teaser art we don’t have to cram a bunch of type on there…the title is a mouthful on its own: “Detective Dee and the Mystery of the Phantom Flame”

I’m attaching the official key art here and I’ll send you a link to the trailer after it premieres, which should be in a couple of days! I was hoping to have it finished a month from now to release before the film comes out. What do you think?

I thought it was really cool that even though I didn’t have any previous movie poster pieces in my portfolio, the client saw the potential in my illustrations for this type of work. I didn’t hesitate to jump all over this one!

Along with working out the budget, I responded with some initial questions to get things rolling. When working out project budgets, there are usually several factors I take into consideration. Some of the factors I considered here were: the number of hours I plan to spend on the piece, where the artwork will be used, timeline for completion, getting public credit for the work / adding my logo to the piece, how much I would enjoy working on it and so on. Since my work is pretty detailed and there are 5 characters, dragons, typography and background imagery, I estimated about 26-30 hours of illustration time on this one. I always attempt to at least get paid for the actual hours put into the piece. There is of course, also, time involved for back and forth emails, phone calls, changes, etc. that are hard to estimate. With smaller projects, like limited edition posters, a lot of these extras often get thrown in for free, as the price could potentially become too expensive to make sense for this type of project. To cover your ass, you definitely want to establish early-on in your estimate, what you are providing (eg. concept sketches, number of revisions, final file formats ex.) so that if things get hairy with a needy client, you don’t go broke trying to finish the project.

Note: As a rule, I also take a 50% down payment (wherever possible) to make the project official and add it to my schedule.

Chris Parks – Artist

Count me in!  The budget sounds good and will allow me the necessary time to put some of love into the piece and make sure it’s really badass! The month timeline should work fine as well. See below for some initial questions and I’ll send over my official pricing .PDF and 1/2 down payment info to lock you into the schedule to get rockin’ as soon as possible.

• Will the poster be screen-printed or full color? 
• If screen-printed, should I stick to a certain # of ink colors
• Can I create custom typography for the title or should we just use the current logotype?
• Will it be a standard 18×24 in. size?
• Do you have a folder of images / characters that I can use for reference? (I found a few on dee.indomina.com, just wondered if there are others to utilize)
• Is it possible to watch the movie before getting started?

The post Screen-Printed Movie Poster Tutorial by Pale Horse appeared first on GoMediaZine.

FOUNDFONT™ tutorial

Andy Hayes here from Hucklebuck Design Studio. The subject for this tutorial will revolve around a pet project of mine called FOUNDFONT™. Foundfont™ is dedicated to typographic archaeology as well as the use of found typography within design. It’s about extracting unique type for specific design needs or creating complete type sets based on found examples. FOUNDFONT™ offers typefaces but also hopes to inspire designers to do their own digging.

In this tutorial we’ll talk about what makes a good FOUNDFONT™ source and the steps to creating your own usable vector characters from found samples.

Type is where you find it

Useful typography is not only found within the bounds of one of today’s successful foundries. It’s all around us. In the bad signs you may see while walking down the street, on old packaging you might have picked up from a thrift store, even in random images you might stumble upon while trolling google image. These artifacts are often one-off, hand lettered little pieces of magic just waiting to be pulled into the 21st century. In many things that I create, whether it be a tee graphic or a poster design, I often look for opportunities to use these found examples in my layout instead of going back to my favorite type families. I find it can often yield interesting and ultimately unique results.

Here are a few great samples that are ripe for repurposing.

What makes a good FOUNDFONT™ source?

There are a few questions to ask when scouting good FOUNDFONT™ resources that will help you get the best result. Here they are:

1. Are you starting with a quality image?
   The source image that you start with should be high res if pulled from online, or in good condition if found more traditionally. If the detail in the characters you have to start with is poor, it’s hard to overcome. It will leave you guessing at details.
2. Is the type sample in a photo skewed?
   If it is a photograph be sure that it is shot without a skewed perspective. If you start with something that is distorted you’ll find yourself putting a lot of work in to fix it.
3. Am I just recreating a font that exists and is possibly copywritten?
   When I do the FOUNDFONT™ thing I am always looking for type that was either hand done or old and out of distribution. Why recreate a font if you can just buy it online? Keep an eye out for interesting and unique sources to make sure you’re not just duping.
4. Does the sample I found contain the key character DNA that you need?
   When retroactively building type from a found sample there is a set of characters that you should try to aim for. These characters will contain the DNA for all 26 letters in the alphabet enabling you to create letters that you don’t have.

The set of key characters for capitals is: A, B, D, E, J, M, O, S.

A: From A you can create V, W, Y
B: From B you can create a P, R
E: From E you can create F, H, I, L, T, X,Z
J: From J you can create U
M: From M you can create N
O: From O you can create C, G, Q

D and S are unique. Especially the S. If you have nothing to go on for the letter S you’re playing that familiar guessing game we’ve mentioned a few times already. D could be created using the O, but it does often have slight quirks.

The set of key characters for lowercase is: a, b, f, g, k, m, o, s, v

b: From b you can get d, h, l, p, q
f: From f you can get t,
m: From m you can get n, u
o: From o you can get c, e
v: From v you can get w

g, k and s are unique. s, again, will be the toughest recreation if you have little to go by. Look at the curves of your c and a for cues. Letters like x and z should be fairly easy to recreate with little information. Remember to pay attention to stroke weight and other foundational elements of your character’s structure.

Cleaning up and extracting your type

Once you have a good source it’s time to start cleaning it up and start the process that will eventually lead to a set of vector characters for use in layout. I’ve pulled a good source and and will go through the process step by step in a series of screencasts.

Step 1. Identifying your type source

To reiterate, be sure your found sample is of decent resolution, not skewed, fairly original, and contains the key letters for your character DNA. My sample is from a motorcycle jacket that I ran across online. I’d guess the typography was hand embroidered or chenille embroidery. Not a proper font but a great piece of typography worth extracting.

2. Killing the color

Open your image in Photoshop and take its image mode to grayscale as the first step in amplifying its contrast.

3. Amplifying contrast

Once you’ve gone grayscale, you’ll need to increase the contrast of your image. Levels are an easy way to build this contrast. The goal is to eliminate all gray leaving you with only black and white in your image.

4. Delete anything that isn’t the type you’re after

Now that your contrast is amplified select the rest of the image and delete it. It may prove easier to select your type and invert the selection. All we need is the type.

5. Adding pixels to smooth out the edges

After eliminating everything else but your type you might notice that the edges are a bit rough. The easiest cure for this is you just bump the resolution up to add pixels. This will take a bit of the roughness away.

6. Finalizing your smoothed type

Now that your resolution has been increased you can completely smooth the edges by simply using the gaussian blur filter and your levels to harden the edges. When you are done with that, save the type as a grayscale tiff and close the file.

7. Going vector

Create a new document in Adobe Illustrator and place your final tiff into the new document. Go into your tracing options (object/live trace/tracing options), turn on the ignore white option and turn on the preview. This should give you a good idea of how good your trace will be. Apply the trace and click expand to make the trace editable.

8. Editing your type

After you click to expand the live trace you’ll need to ungroup the type and begin the process of lining the type up on a baseline, tweaking the trace results and creating the letters you need out of the letters you have.

Once you identify the characters that you need to modify to create the characters you are missing, use your knife tool to cut letters apart. The knife tool allows you to cut through the vector shape without losing any of it like you would with the eraser tool. Once you break up the core strokes of the characters you can easily begin to rearrange and create your missing characters. For example a trimmed down, and rearranged letter “A” easily becomes a “V” and a “W” as seen in the short video accompanying this section.

You’ll find that as you cut your letters apart and so on that there will inevitably be a few edges that need smoothing or refinement. Instead of somehow using the pen tool to pull the points of your type, use the pencil tool. The pencil tool allows you to modify the contours of your character in a more natural way. If you have a wacom tablet or any other brand that allows you to draw with a stylus you will find this technique very natural. Zoom in as much as you can to see the details of your characters as you modify them.

Final Result

Whether you’re trying to create an entire alphabet or just the letters you need for a logo your final result could look something like this.

The big takeaway is that you should explore typography that is outside of where you might typically look. Creating unique typographic solutions using found typography will always be interesting and one of a kind. Good luck on your hunt.

Enjoy this free download of MC GOTHIC and go to http://foundfont.tumblr.com/ to purchase more FOUNDFONT™ sets. We’re adding new type all the time!

Note from the editor: if you have some issues with the videos, you can find them all on Andy’s Screenr profile.

The post FOUNDFONT™ and the Art of Typographic Archaeology appeared first on GoMediaZine.

Hey Go Media faithful! As Go Media has evolved over the years, we’ve learned that collaboration with other artists and designers can be a very powerful tool when trying to deliver the very best product to your client. Different designers have different skill sets. When Go Media assembles a team to work on a project some of those people may be in our firm and others may not. I recently had an amazing experience collaborating with a good friend of mine; Steve Knerem on an illustration for Cage Spawn Clothing. This article will be kind of a hybrid – half tutorial and half discussion on the idea of collaborating.

Getting Started

The design brief for this t-shirt design was fairly simple: “Make a sick looking Samurai t-shirt.” I’ve been working with Preston Bennet of Cage Spawn for a while, so he has total faith in my abilities. It’s nice to work with clients that throw you a simple concept and some ideas, and then just let you go to town. As with any illustration, I started by drawing some horrifically rough poses.

Preston selected pose #2. He liked the way the arms crossed, and thought we could frame up the CageSpawn type treatment between the tips of the swords. Here is the type treatment Jeff Finley did for Cage Spawn. It was actually a design “refresh.” We wanted to fix up their existing type treatment, which we thought could be improved upon. The existing one was just too straight and rigid. We needed to infuse it with some flow. I think Jeff did an amazing job.

Original Type Treatment

Go Media’s type treatment refresh.

Once I knew the pose that Preston wanted, I sat right down and tried to translate my uber rough sketch into a tight pencil drawing. I had plenty of Samurai images tacked up around my drawing table, was excited about the pose, and put in several hours trying to make the pose work. Unfortunately, sometimes the really rough sketches include some physical impossibilities. The exact positioning of the arms in this case were simply not working. In lieu of driving myself crazy, I decided to grab my camera and do a quick model shot. These photos don’t need to be anything fancy. I was just trying to get the pose clear in my head. I had a few tubes to use as the swords and here are the images I shot:

From those photos I was able to work out the following pose sketches:

I posted those for Preston to make a decision about which hand-position looked best to him. We agreed that it was #1.

In many regards, this is the most difficult part of the illustration process. Once I have the pose in place with the right perspective drawing all the armor and the mask/helmet goes fairly quickly. I made decisions about what the armor and helmet looked like through looking at reference photos of actual Samurai armor, and then making some of it up as I went along. Here is the illustration at about 80% complete.

Once I had the illustration this far along I planned on filling in the remaining 20% of the art while I was inking. But before I started the inking I went on vacation. And while I was on vacation I badly injured my neck and upper back. I was in so much pain that I didn’t sleep for three straight days. When I got back to the office, I knew there was no way I could spend 8+ hours hunched over a drawing board inking this piece. But Go Media had a deadline (in this case we were already way past our deadline.) I knew my injury wouldn’t go away anytime soon.

The Collaboration Starts.

Although, in this case the collaboration was born of necessity, Steve and I had been talking about collaborating on an illustration for months before this. I knew he was the guy to take over and get the drawing finished. Check out Steve’s work here: steveknerem.com Once the ink was done, I could get it into the computer and take over the coloring and design. I already had great respect for Steve’s work, so I really didn’t give him too much direction. I wasn’t completely sure what I wanted to do with the bottom of the Samurai, the armor was incomplete and the flames were incomplete. I pointed all that out but basically said: “make it look sweet.” As I handed him my art I really felt like I was just giving him an inking job. But Steve decided to finish the pencils and get my thumbs up before he started inking.

When Steve brought me the finished pencil drawing I almost fell over. I was completely blown away. He didn’t just finish what I had started, he added a LOT. I wasn’t expecting the masterpiece he showed me. This is a GREAT rule in business and in life. Give people more than they expect. “Under promise, and over deliver” we say at Go Media. It turns normal customers into fans and advocates.

Here is the final pencil illustration that Steve showed me:

Meanwhile, Preston had a friend that was studying Chinese/Japanese calligraphy. He thought some original calligraphy would make a sweet addition to the design. I agreed. Admittedly, I wasn’t sure how I was going to put together the growing list of design elements: Samurai Illustration, Japanese Sun, Cagespawn logotype and now calligraphy! But it was very exciting to have all these great elements to work with. Normally, I like to work out the entire design layout in advance before I start drawing, but what can I say – this project just evolved this way, and I was happy to go with the flow.

Steve Takes Over

I couldn’t have been happier to get the bullpen call from Bill. Unfortunately it was at the expense of Bill’s injury, but nonetheless our talks about a collaboration project gave birth. My part of the journey began when I was visiting some friends out of town. I read the email from Bill on my phone and I interrupted my wife who was talking with friends saying “Awesome, listen to this!” In my mind I had to fly home right away, meet with Bill and begin my part of the collab. Well once I calmed down I responded back of course accepting the job.

Here is a lesson learned when responding to an email: make sure they receive your email! After I sent my eager response, I heard nothing from Bill…uh oh. My mind was racing thinking he called in some other help, so I called a few people at the Go Media office on a Thursday afternoon, emailed Bill again and got him on the phone where I accepted the job and we set a time to meet. Whew!

I landed at 5:20pm in Cleveland on a Monday and got to Go Media an hour later. So my point with all this is don’t give up, fight for what you want. Show your clients you are eager and willing to do what has to be done. That day the hand of Crom was upon me!

So I meet Bill and we discuss the project. He showed me what Go Media already had done for Cagespawn which was out of control awesome. I felt honored to be a part of this circle of excellence. I felt at that point Bill really trusted me to finish the job. It was a very professional experience knowing I was trusted, respected and someone digs my work. So the lesson to learn is: be a professional, you never know when you will get a call. Make awesome work because you never know who is looking. Own your game because someone is always looking for originality.

The Pencil Stage

Finally I sat down and I looked over the project and thought of all the illustration I saw Bill do for the past 5 years. I’ve always loved Bill’s style and characters so the tricky part is to retain all of what he did and add my fireworks to it…no pressure. I can say I really felt confident. In the past year and a half this confidence grew on me because I owned my game. In return if I was in the same situation and had to hand a project to Bill, I know that he would reciprocate the same excellence and pride. Lesson to learn, build relationships. That’s what business and friendships are all about.

I did my research on samurai characters, garments, weapons and what the essence of a samurai warrior is. Right away I shifted into “insane detail mode” which is usually my only gear. I looked at Bill’s character as a strong foundation to build upon. I added blood, banners, costume design, smoke, flames, hair and a solid light source and that solidified my part of the pencil drawing.

Remember add your own twist to something in the pencil stage. The worst that could happen is the client won’t like a part. So what. Erase it and set it back to the original state. Lesson to learn: take initiative to present something above and beyond because it might just come to pass!

A quick example is the blood dripping from the mouth and the hand of the samurai and also the hair.

So I take this drawing to Bill. I’m a little nervous but confident. Bill was thrilled and it made me happy knowing I over delivered. Lesson learned: GO OVERBOARD!! I do recall a high five exchange between us.

The Inking Stage

The ink stage is very different. You can have a shaky hand with the pencil but this is where breathing, patience, discipline, skill, and decision making come into play. When I start a drawing I like to attack my fears head on, with the face. I keep it simple at first and outline the jaw line, eyes and nose.

I use Micron pens because they don’t bleed and they have good flow. They do dry up so keep a fresh stock. I noticed there is a lot of symmetry with the helmet so paying attention to proportions is vital. The swords, arm guards and back body armor need to look the same too. These are at different angles so there is a little leeway with symmetry but they still have to be consistent.

The good thing is you lay this out in the pencil stage. Just remember INKING IS NOT TRACING. You still have to think this through. Some parts will need a thick line and a thin line. This is what makes a dynamic piece.

Probably my biggest concern was retaining Bill’s precise hatch marks and style. Bill is very sharp and clean with his edges especially when he inks. With a collab you want it to look as consistent as possible but you can see each artist’s hand. It is a challenge and a lot of fun. I simply had to rest in my own abilities and keep telling myself to breathe, be confident in my own game and have fun. Lesson to learn: Never think that you are so good that you don’t need to stay disciplined. Personally every project I work on has its own challenges and I am always working to prove myself better than before. (It keeps your internal edge sharp!)

I wrapped up my part on time, on budget and Bill took over the color and design stages. Overall it was a great experience to work with Bill. Make those connections with other artists, build your pool of networks and always stay connected. Sometimes the element of surprise is the most rewarding.

Here is the final inked artwork I handed over to Bill:

Bill Takes over on color and design.

When I was a kid I loved to color. It was a fun, carefree activity. I can remember when the only real challenge was “staying inside the lines.” As an adult, it’s a very different story. I don’t think I am a particularly good colorist. I haven’t really spent enough time doing it. Also, I’ve been exposed to the best of the best comic book colorists – for years. On top of the belief that I’m just not a very good colorist, I have the added pressure of living up to the standards Steve set by doing such a phenomenal job finishing my illustration. So, when I considered my task at hand, I’ll admit, I did so with dread.

For better or worse, collaboration will push you to “up your game.” You have a respected peer that will be closely examining, working with and depending on what you produce. The pressure is on. Unfortunately, I’ve procrastinated as long as I can. I have to get started.

I color so infrequently that I don’t even have a good process down. I have some sense of what I need to do, but nothing concrete. For about three days leading up to getting started I kept debating about how to do it. I could put the art in Illustrator and create vector shapes for each color. I’ve done this before and been very happy with the results. But this can be a very labor intensive process. To create the illusion of a gradient I may need to draw 3-7 shapes for each gradient. Although it’s a tedious process, it’s this particular segmented look of those faux gradients that I really like. It’s almost like the coloring is part of the illustration; each color segment forms contour lines that help define the shape of the object. It’s awesome. Here is an example of a piece I did using that coloring technique:

But I chose not to do that. Instead I decided to go into Photoshop and “paint” the coloring into the drawing. I chose this route primarily because this samurai was covered in fire. Vector coloring would have forced me to define the fire in hard shapes. I just couldn’t imagine how I was even going to pull that off. It would have taken me a year. Also, Go Media happens to own a Wacom Cintiq. If you’re unfamiliar with the Cintiq – imagine a large monitor that tilts and spins and allows you to draw directly on the screen with a pressure sensitive pen. That’s right, it’s a high priced designer’s toy… er… I mean, critical piece of equipment.

A Tip to Getting Started on Something You’re Afraid of:

So, I knew I was going to “paint” the coloring in Photoshop, I knew I was going to use the Cintiq and I had the final art provided by Steve, but I was still in dread. I didn’t really know how I was going to combine all the design elements (Japanese calligraphy, Japanese sun, the illustration, CageSpawn logotype and CageSpawn mark – the cthulu). I didn’t know what colors to use. I didn’t know how to restrict the color palette so that the printer could manufacture this shirt using a max of 4 ink colors. I didn’t know how to prep my coloring so it could be easily separated. My mind was a whirlwind of questions and fears. When you’re focusing on all the what-ifs and concerns it can really be crippling. When I find myself in this situation of NEEDING to start, but being afraid of starting I employ a little technique. I focus on getting ready to start working instead of focusing on what I’m going to do once I do “get started.” For instance, I don’t know how I’m going to color this art, but I do know I’ll need to scan the final inked art into the computer. Great! I’ve done it. I’ve started! I know I’ll need to set up a layered Photoshop document where my art is on the top layer, I need to set that layer to multiply and lock it. I know it would be helpful if I created a mask of the samurai so I can fill him in easily without going “outside the lines.” Also, I’ll need to make my Japanese sun – which I choose to do in Illustrator so I have maximum flexibility later. Essentially, I get started on all the non-critical steps of the project. And what I’ve found is that most of any project is just non-critical steps. Even the coloring itself, when broken down into small pieces, are each really not so critical.

So, here are each of the not-so critical steps I took to color this artwork, and a sample image of each:

I made a Japanese sun in Illustrator using a flag image that I found on the internet. But I needed my rays to extend beyond the flag, so I just extended each line further out.

Once I finished the sun I dropped it along with the CageSpawn logotype into Photoshop to workout the layout. I thought the sun would look good positioned over the shoulder of my Samurai.

I wanted my sun’s rays to fade out, but in a kind of grungy way. So, I stared by air-brushing black around the tips of the rays just to make sure they wouldn’t end sharply. Then I used some of Go Media’s Destroy Vector Packs to grunge up the tips of the rays. Finally, I dropped in a black background. This reveals how the sun will look… pretty cool.

Now that I have the sun in place, I continue just working away on “non-critical” steps… like filling in my samurai. I’ll be able to use this shape as a base layer of art and also a mask.

I knew that the flames would require a painterly style with lots of gradients. So, I switch over to my airbrush, dial back the Flow to about 15% and start “painting.”

I thought now might be a good time to give you a look at how I have my Photoshop file layers set up. It continues to get more complex than this, but this should help you understand how I work. When I was young I tried to work in as few layers as possible, and generally didn’t appreciate the power they provide. So, if you’re new to working with Photoshop and Illustrator and you’re not paying close attention to the layers – (like locking, linking and setting visibility) START NOW!

For my flames I kind of stumbled upon this pointillism gradient that looked really good and matched nicely with the style Steve inked the piece.

Because I was working with a lot of flames and glowing, I thought this shirt would look amazing on a deep red shirt, so I swapped out my background color and sure enough – it looked great.

Since the flames were lapping up around the logotype, I decided to also make it flame-like. And that worked perfectly with the shapes of the lettering. It really came together beautifully in the end. Here is the final colored artwork.

Now of course, I’m a HUGE advocate of presenting your designs to your client in the very best way. So, I just had to mock up this design onto a t-shirt. I used one of our t-shirt templates, but you could also use ShirtMockup.com.

Almost done. I still had the calligraphy, and I wanted to use the CageSpawn mark that I had designed on a previous project. Sounds like I need to design a back to this t-shirt!

One last plug… to add the splattered yellow effects around the lettering, I used our Vector Set 17 which has a ton of grungy elements.

At some point while I was “getting started” my fears and concerns faded away and were replaced with fun. I’ll admit, I even forgot about how the printer was going to color separate this. Looking back now, I don’t even know why I was worried about that. That’s not my job. That’s the printer (color separator’s job! That’s why they get paid.)

One lesson I’ve learned in life, business and art is – you can’t let the unknown slow you down. Go Media is an incubator of sorts to several companies that work out of our building. We’re periodically (more frequently than I would prefer) asking ourselves questions like: “Will this get us arrested?” or “Will the fire marshal shut us down?” We don’t always know, but we press on. You can’t let your fears stop your progress. Even if you do something, and your fears come to fruition and all your hard work is for not – I still think the process of doing, learning and experiencing are better than sitting on your butt doing nothing. Fortunately, we have not been arrested for anything – yet.

AND! Last, but not least – if you would like to pre-order this shirt from CageSpawn, go here: CageSpawn Ronin T-shirt Pre-order.

The post Collaboration! Two samurai (artists) are more powerful than one. appeared first on GoMediaZine.

Before We Get Started

Hello dear readers!

Simon and Jon from Studio Ace of Spade here. Today, we have the chance to write a tutorial about one of the Studio’s recent projects, the poster we did for Lost and Taken. What’s great about this particular project is that it gives us the occasion to do a tutorial we’ve wanted to write for a long time: texture, texture and more texture.

We already had a writeup including some tips and tricks about textures published recently, but it was web oriented. Web is a world were subtlety is a key word, so we had to restrain ourselves quite a bit. This time, we can use the full extent of our texture repertoire on a print project.

Throughout this tutorial, we’d like you to keep in mind that we don’t want to give you a “recipe” that you’ll follow exactly and religiously, but rather a open-ended answer to a creative problem. It will give you room to adapt and improvise in your own ways. We want to nurture your creative process by sharing ours, not to kill it or to “dry it out.”

It’s hard to reconstruct the design process sometimes as for most designers it’s really organic and trial-and-error based. But, we’ll do our best. We’ll try to link to the resources we used as much as we can, and to reference other articles that might have been helpful in our process or that could expand your reflection.

If you have questions, want to share what you came up with while following this case study and tutorial, want to suggest different techniques, want to suggest ideas on how to make this better, please do so in the comments! Also, we’d like to precise there is a complimentary article to this tutorial posted on the Studio Ace of Spade blog that details much more the case study part. We decided to split the original post in half (-ish), as we thought 6000+ words would be a bit intense for people to go through.

Here’s a preview of what we’re going to be doing, beautifully mocked up:

With all of this said, let’s get started, shall we?

The Design Specifications

At the start of this project, here’s what we knew:

• The poster will be 18″ x 24″
• The focus should be on a strong type element
• There’s plenty of creative freedom

As this poster was being designed for Caleb of Lost and Taken fame, we were certain to keep him as involved in the project as possible. Through further discussion, we further defined our constraints:

• Utilize “nature,” green and forest scenes, or something similar
• Cut-out shapes are something he’s interested in
• Geometrical shapes should be inlcuded in the design.

The Resources

As this poster was to promote Lost and Taken, we decided to use only L&T made textures. Here’s a list of the packs you’ll need for this tutorial:

• Vintage paper textures vol. 1 (published at Design Kindle)
• 42 vintage paper textures
• 15 vintage stained paper textures
• 19 block print textures
• Old film textures: color edition
• Black and white grunge vol. 2 (published at StockVault)
• Apple Rainbow inspired textures
• 10 experimental noise textures
• White grunge + snow textures

Download and install Massive Dynamite.

We’re also users of two Photoshop actions created by the good folks of Go Media. The actions age your artwork in two different manners.

• Aged Effect One
• Aged Effect Two

The first action (“Aged 1“) has been created by Jeff to specifically distress and age type. You can grab it in the post he introduced it in.

The 2nd action (“Aged 2“) is from a two parts vintage poster tutorial written by Tim Boesel. The tutorial is awesome, you should read it too. But if you just want the action, its in part 2.

To install Ps actions, read this quick tutorial written by Addicted to Design.

Lastly, download the color palette used for this project.

Note: this resource is provided “as-is.” It’s been made by us, for our own use. Learn how to install the color swatch via this About.com post.

Selecting a Font

Here’s where the tutorial part of this begins.

Start by selecting a typeface. To narrow down our font choices, we opened Illustrator and went through our font library to select the some which fit the ‘vibe’ of the project. This is something that we strongly encourage all of you to try as it’s a wonderful way to ‘feel’ your font choices.

We’d like to point out The Lost Type Co-op, Hydro74′s Legacy of Defeat, Dafont, Font Squirrel and Abduzeedo’s Friday Fresh Free Fonts as great starting spots to find interesting typefaces. Most of the time they are free and/or donationware, which means that if you like the font a lot you can show some financial support to its creator.

After we received feedback from Caleb on his font preferences, we narrowed our search down to slab-serif fonts, as well as vintage sans-serif fonts.

We finally settled on a font named Massive Dynamite, created by imagex.

You may notice that Massive Dynamite is pre-grunged – something that we don’t necessarily like. Let’s clean that up a bit.

Cleaning up Massive Dynamite
The next steps were clear:

1. Write “LOST AND TAKEN” in Massive Dynamite
2. Create outlines (right click on the type object > Create outlines) of the type, to convert it to fully editable vector objects
3. Switch the font from solid black to a transparent object with a black stroke
4. Then comes the tedious part. By using the direct selection tool (the white arrow, A on your keyboard), I selected the paths corresponding to the grunge elements and deleted them, thus creating a “clean” font

We made a quick video summarizing this process. You’ll see it’s really simple.

Creating the Type

Well, now that the font is cleaned up, let’s complete the typelock.

Step One: Create a new 18″x24″ document in Ai.

Step Two: Put some turn on the rules (CTRL/CMD + R) and put some guides in place to determine how big that typelock is going to be.

When we design in 18″x24″, we like to have guides at 1, 2, 9, 16 and 17 inches vertically and 1, 2, 12, 22 and 23 inches horizontally. Turn on “Snap to grid” (View > Snap to grid or CTRL/CMD + SHIFT + “) when placing the guides. Then, you’re sure they’ll be placed accurately.

Instead of locking the guides, lock the layer they’re on and rename it “guide“. As you’re designing, place the guides in the bottom layer. It’s a habit we developed after consistently moving guides by accident while designing.

Once the guides are placed, go back to our previous document with the type elements. They should still be one object. Copy and paste it (CTRL/CMD + C and CTRL/CMD + V) in the main document.

Step Three: Set line height and complete the type with geometrical shapes.

Select the type. Ungroup the object (right click on the selected type > ungroup), and then regroup the words separately. You just have to select the letters; use the CTRL/CMD + G keyboard shortcut to do so (or go to object > group). Once that’s done, move the three words closer together as shown.

On this image, you can see the type with its default settings, centered in document in black, and the typelock I used in the poster in gray.

At this point, what we’d suggest is for you to come up with your own typelock organization. Show your creative side! Our goal when creating this type object was to have something compact, bold, and impacting. We sized the type following that logic.

The rectangles have roughly the same height as the type they’re facing. To ensure this, we copied and pasted the values in the object size box.

The Final Step: Develop a ‘worn’ look for the geometric shapes we added to the type. In order to achieve the desired effect, use the roughen filter, in Effect > Distort and Transform > Roughen. Mad props to Simon Walker (he did a great post over at Method and Craft about that) and Dan Cassaro aka Young Jerks for tips and tricks when using this technique!

A point of advice: start by applying the effect to one shape, check if it matches the type you’re using, and then apply it to the remaining shapes. The appearance panel in Ai CS5 makes this a no-brainer. You can also use the Effect > Apply roughen menu (SHIFT + CTRL/CMD + E) to apply the effect with the same values to the remaining shapes.

Once that’s done, the type manipulations are done! Make sure the typelock is at least roughly placed as you will place it in the final poster, and preciously save that Ai file, just in case.

Choose a main image

We still hadn’t settled on the “base” image of the poster. We went to the Flickr Commons collection, and dug some images out. We were specifically targeting large files — big enough to be used at a print resolution (300 dpi).

The neat thing about the Flickr Commons is that a big part of the collection comes from the Library of Congress (LoC) and the U.S. National Archives (USNA).

These organizations have a policy to provide a relatively high resolution documents on Flickr. For instance, a train picture we used in a recent gig poster is available at a whopping 3000×2019 pixels. And sometimes, when following the permalink to the web collections of the LoC or the USNA, you can find ultra-high resolution .tiff scans of the originals (an example: 8000×7000 pixels @ 1800 dpi).

We chose a photo from the LoC collection over the other forest scenes because it was the biggest (6041×7839 pixels). The only downside was that we had to download a 135+ MB .tiff. But with an image chosen, it was finally time to switch to Photoshop for real!

Starting to manipulate the textures

This is where the fun begins! This is where we’ll work our texture magic on both the type and the background photo, blending them together in the best possible way. We’ll cover our main texturing technique, some tips and tricks, and additional goodness below.

Step One

The first step is easy. Let’s fire up Ps and create a new 18″x24″ document at 300 dpi.

“Print, you said? Then why the RGB colors? Isn’t print always in CMYK?” We’ll be using some effects and filters available only in RGB, so we’ll have to use RGB. The thing to know is that the CMYK spectrum is not as extended as the RGB one. It basically excludes some of the brighter and louder colors. As long as you keep this in mind while designing and you work with printers who know what they’re doing, you should be good.

You could also save your flattened PSD/PDF at the end in CMYK to be sure. But we would leave that to the professionals as they know what they’re doing with color. Once the document is created, you should also place the basic guides in it (we used the same measurements than when working on the typelock).

Open the forest picture along with your new document. You’ll notice that ours is a .jpg copy of the .tiff file as it’s a smaller file.

Step Two

Place the source image. It features the frame of the slide it’s been scanned from, which we decided not to keep in our poster. First, slide the photo in your document. Then, once it’s in there, close the original.

Back to the poster. Before resizing the image, right click and convert it to a Smart Object. This allows to keep “access” to the original file, even though you’re going to resize it and/or apply filters to it. Beware, this state still has some limitations. Once it’s a smart object, place and resize it as you see fit.

Step Three

After placing the image, sharpen it by using the high pass filter (Filter > Other > High Pass). Oliver Barrett explains the process for the unfamiliar. Use a value of 50 as it’s a big image, and put the high-passed layer’s blending mode on soft light.

Apply a black and white adjustment layer on the high-passed layer to increase contrast and depth.

Set the adjustment layer to Red filter. Group the black and white effect to the high passed layer by using CTRL/CMD + ALT + G.

Once this is in place, make sure your layers are properly named and group the original image, the high pass layer, and the black and white adjustment together in a group called “forest.”

Step Four
We decided that just adding textures on top of the photo would be a bit bland. So, what could we do to spice it up? We remembered a book cover we designed which had a similar starting point: a forest view. We also remembered a photo manipulation from Luke Beard. We decided to try something in a similar spirit.

Step 4.1: Create a merged layer of our current poster (CTRL/CMD + SHIFT + ALT + E). Desaturate it (SHIFT + CTRL/CMD + U),and press CTRL/CMD + T to transform and rotate it 180°.

Step 4.2: Open Ai and created an 18″x24″ document. You can also use the one from the typelock as long as you hide or lock the type piece to be sure not to damage/lose it. In our new document we created the following pattern:

We’re displaying it in Ps, but you can see the little smart object icon on it showing it has been imported from Ai. To create the pattern, do something along these lines:

1. Turn the grid on (CTRL/CMD + ‘)
2. Draw a 1.25″ diameter circle
3. Copy it 8 to 10 times to create a line of evenly spaced black circles (the align and distribute tools can be of great help here), that go across the width of the poster
4. Group the line you just drew together  (CTRL/CMD + G)
5. Copy it and paste it in front (CTRL/CMD + F). Repeat until you form a grid covering the surface of the poster
6. In order to bring some variety in, just offset each other line (cf. the pattern we drew)

Once the pattern is done, group it together and copy it. Paste it in front in Ps (SHIFT + CTRL/CMD + V) as a smart object. Pasting it in front (or “in place“, as they call it) ensures that it will be sensibly in the same place as in Ai. Pasting it as a smart object will enable you to resize the pattern at will without losing its vector state. You can still edit it in Ai by using right click on the pattern layer > Edit contents. The changes will transfer to Ps.

Once you’re happy with the pattern you created, use it as the content of the layer mask for the black and white forest image.

1. In Ps, you should have the smart object of the pattern looking similar to what we show above. Turn off all the layers you have in the document except for the pattern layer
2. Drag it at the bottom of your layer list
3. CTRL/CMD + click the pattern layer. Doing this will select the content of the layer. Once it’s selected, copy it
4. Let’s add a layer mask to the black and white forest layer
5. Let’s ALT + click the layer mask we just created. This will switch you to view and edit the content of the layer mask, and not of the layer anymore (just click back on the layer to exit the mode)
6. Just paste (or paste in front) the pattern in there! You can slightly adjust its placement if you feel like it. Note that the content of the layer isn’t a vector smart object anymore, so be careful about resizing it, you might loose sharpness and/or details

That’s the concept. You’ll notice the layer mask getting that ‘cross-hair’ focus icon when you’re in layer mask editing mode. We weren’t sold on the result shown above.

Go into the layer mask editing mode, and simply invert its content (CTRL/CMD + I).

Further tweak the content of that layer mask, notably by adding a worn aspect to it. In order to do so, here’s the first time where we’ll use these Aged actions. Go back to that layer mask content, and zoom in a little bit.

Open your action palette (ALT + F9), and play the Aged 1 action.

Aged 2 works along the same lines, but with different values which produces a different output. Our rule of thumb is to use Aged 1 on white and light objects, Aged 2 on dark and black ones. But we’ve also proved that rule wrong countless times.

This is what your layer mask will look like after the action has been played. Because we’re working on the content of a layer mask, you’ll also have to validate the levels panels. You could tweak the values, but I wouldn’t worry too much about that.

Now it’s a tad less sharp, less clean – much more organic. Let’s move onto a second pattern.

This one is built in Ai as well. Start with one black circle, and then start copying and pasting in front and increasing the size of each copy.

We applied the aged effect on it to make it look less perfect and digital.

And here’s the result! Time to texture that thing.

Background textures and coloring

Go back to that background: we’ll use the files paper41.jpg from the 42 vintage paper textures pack, vintage_stained_texture_5.jpg from the 15 vintage stained paper textures pack, and scan32.jpg from the Vintage Paper Vol. 1 pack.

The first one is used because of its beautiful paper grain. The second features some interesting dirt spots, speckles and intensity variations. The third has some folds and worn marks on it that will help to give the aged feel we’re looking for.

This is the current state of the poster, without the textures and the color overlay.

And here it is with them. So how do we do this? Rather simple actually.

1. Open the texture file you’re interested in
2. Drag it onto the poster
3. Size and place it according to what you want to achieve
4. Desaturate it (SHIFT + CTRL/CMD + U)
5. Use the levels (CTRL/CMD + L or use a levels adjustment layer for non destructive editing, just think about using CTRL/CMD + ALT + G to make the adjustment layer apply only to the texture layer) to increase the contrasts and really bring the details you want to use out
6. Sharpen the result a few times (x2 or x3), according to taste (Filter > Sharpen > Sharpen)
7. Change blending mode according to taste

So where can you make the most impact in this process? The texture you’re choosing is important for sure, but also at steps 5 and 7.

The levels

Here’s a quick demonstration of how we use levels to bring out the texture goodness. We’re using scan32.jpg as the support for this example.

The values you see in the Levels dialogue box can be explained as such: the 100 on the left is the value of the dark tones, the 0.50 on the middle concerns the mid-tones (one of the most interesting ones to play with) and the 200 on the right impacts the light tones. You can also adjust visually with the little arrows under the diagram (black for dark tones, gray for mid-tones and white for light tones).

The Output levels section can also be useful. It defines the darkness of the darkest pixel and the lightness of the lightest pixel. It’s a good alternate for overall contrast control.

The blending modes

For a detailed blending mode explanation, we’ll invite you to go through this Visual guide to layer blending modes, done by Franz of FudgeGraphics’ fame.

These are the blending modes we settled on:

Let’s say it now: we are big fans of overlay and soft light. These 2 modes allow the details of the texture to translate on the design, without being overbearing (at least most of the time) or dampening color too greatly. When placing a texture in a design, we tend to go quickly through the full list of blending modes and choose the best.

Black and white textures
Using black and white textures utilizes the textures for the grain and detail they’ll bring without color correcting the piece all the time along the way. Sometimes, we won’t desaturate a texture, but it’s really rare and accomplishes a really specific purpose (the texture’s colors match or complement the color scheme of the project you’re currently working on).

This is actually why we have that color layer on top of our textures. Even if we felt the design was good with the contrast of the black forest, we wanted to bring at least a hint of color into these black spots.

The color overlay

Load the color swatch you installed earlier. Locate the Laurel green (#a7a761) on the swatch. Add a layer on the top of the textures, and fill it with color. Choose a blending mode for that layer to still be able to see the design underneath. We played with just the opacity of the color layer, Multiply, Overlay and Soft light.

It looks neat, but we lose a lot of contrast, and we want the background to be much more discernible.

This is what happens typically while using multiply: everything becomes darker. Not a fit for our goal either.

Here’s where the awesome happened. We were ready to switch to overlay, when we made a wrong click and the blending mode that got selected was darken. Admire the result:

Because of darken‘s properties, the color was applied to the black and white elements from our upside-down forest image, and the rest of the background stayed mostly untouched. Mistakes can show you the way. Also, if you haven’t grouped your layers into a bg group, now might be a good time to do so.

Texturing the type

Step One
Now that the background is done, add the type. You just have to copy your type in Ai, and paste it in place in Ps. Let’s look at the structure of the type layers:

You can see that there’s a bunch of typelock smart objects stacked together, with a Hue/Saturation adjustment layer and a layer mask. Let’s deconstruct how the effect works:

This is the type on overlay, with just one of the layers turned on. The nice thing about overlay is that it lets a lot of what’s behind show. But with just one layer, the type isn’t really readable. Let’s start by stacking copies, still on overlay…

As you can see, the type is getting sharper. There’s still too much background showing up. Let’s add some more.

Step Two
After five copies on top of the original smart object, the type is legible enough. Now, as you can see, it’s overly saturated. Hence the Hue/Saturation adjustment layer:

Now, the type blends in way more, with a more natural “fall” color. Oh, before we forget: the original color we applied to the type in Ai was #faf9a6. The color is called “Crocus yellow” in that Chevy color swatch.

You’ll notice also that the adjustment layer is applied only to the type. To do that, we just CTRL/CMD + clicked one of the type layers to select its content before creating the adjustment layer, which creates the appropriate layer mask revealing only the selection you just made and hides the rest.
Step Three
There’s also a layer mask with some grunge effect on the typelock’s group. Here’s a before/after shot:

Let’s look at the content of the layer mask:

Guess what will help you to accomplish this? The Aged actions, of course!

1. Create a new layer mask for the typelock group
2. Go into the layer mask content edition mode (ALT + click), and CTRL/CMD + click one of the type layers to get the outline of your type selected
3. With the selection active, select the layer mask again
4. Fill the selection with black (SHIFT + F5 > Black)
5. Let’s play the Aged 1 action
6. Now, you need to invert the result (CTRL/CMD + I). Make sure the selection is still active! The layer mask now simulate the edge of the type having received a lot of ink, while the center of the shape not so much (think ink trap)
7. Let’s run Aged 2
8. Deselect

Some screenshots of the process:

Experiment with levels and other contrast adjustments to make yours unique.

Global Texturing

What, more textures?
Yup. This next step, while really fun, is also critical. The background texture manipulations set the “support” you want to emulate. The global texturing adds more grunge, but also the speckle, dust and other dirty effects. Lastly, it will help to give visual coherence and unity to it.

Let’s look at my global texturing group:

So, there are (from bottom to top): some block print textures, a film texture (it features a bunch of scratches and a frame), one of the black and white grunge vol. 2 texture, one of the rainbow grunge, some noise textures (think dust and speckles) and another white grunge + snow texture.

We followed the same process as when we textured the background. It’s a combination of carefully selected textures, desaturated, leveled, sharpened, patiently experimented blending modes that does the trick here. Let’s look at the details for the later:

As you can see, these are mostly on soft light. I played with the opacity as some of these textures were way too strong. Some notes per layer:

• The 2 block print textures are different ones, amongst the last ones in the texture pack
• Rainbow3 and Rainbow3 copy are the same texture. The one above has been rotated of 180°
• The first Experimental noise 6 has been inverted on top of being sharpened, the 2 following ones are just sharpened and the above one of the pair rotated of 180°
• Same scenario for the 2 top ones (same texture rotated)

Feel free to add more textures! Feel free to change the blending modes! Feel free to change the opacity! We decided to stop here, because we reached that “I think it’s complete” point. Also, as said in the beginning, this project was to showcase what’s possible to do uniquely with Lost and Taken’s textures. We have some sweets ones of old, dusty film, scratched metal and more we would have added (cf. this image).

Finishing touches

Cropping the excess out
This is not mandatory, but will save you both time for the following steps and hard drive space. During the design process, you’re likely to have sized some elements beyond the limits of your canvas. You don’t see them, but each time you save the file, Ps remembers they’re here and includes them. Pretty useless. Also, when applying an effect, they’re taken into account too, which can make the effect take longer to be calculated.

What you have to do is simple: select your whole canvas (CTRL/CMD + A), and go to Image > Crop. Then, while it’s calculating, you might want to refill that coffee cup of yours for the last stretch of manipulations.
Creating a Comp and Aging It
If you’d look at our top layer group, called comp, here’s what you’d find:

We started to create comps because we were occasionally experiencing color shifts when saving without them. This seems to either solve it, or to show the shift on the comp layer, which you can then correct with adjustment layers. There’s a shortcut for it, it’s SHIFT + CTRL/CMD + ALT + E. This is an operation that will take a bit of time.

Once it’s done, place it in its group and create two copies of that comp layer. The bottom copy should get the action Aged 1 applied to it. The top copy should get Aged 2 applied to it. Switch the blending mode of both layers to soft light and their opacity to 25%.

The Halftone Effect
We perfected our halftone effect over time, after reading a couple tutorials that were including it (the main one being this one, written by Adam Levermore).

Create another comp. Right-click the new comp layer and convert it to a smart object. This is also going to take some time.

Once the layer is a smart object, let’s halftone it!

Press D to reset your color palette to black as foreground color and white as background color. We do this because your active foreground color will be used as the color of the dots of the halftone effect. Go to Filter > Sketch > Halftone pattern (make sure your layer is selected). This is what you’ll see:

A couple things about this screen:

1. First thing first, look at the bottom left of the screen and switch the zoom level to “Fit in view.” Now you can see what you’re doing
2. On the right side, “Pattern type” should be set to dots, as we’re trying to emulate that offset print effect
3. “Size” and “Contrast” are to be played with to your liking. We used a minimum dot size quite big (8), since the poster is of decent size. We usually keep the contrast low enough to still have some dots in the whitest areas of the image

You should now see something close to this:

Let’s double click on the one that’s highlighted:

This opens a dialogue box that helps you to choose a blending mode for the halftone effect itself.

You should switch the blending mode to soft light via the drop-down menu, and hit OK.

Almost there…: Switch the blending mode of the layer. Change it to lighter. Lower the opacity some. We settled on 50%.

LAST STEP: SAVE YOUR HARD WORK. Tadaa, you’re done! You deserve a beer while the file saves. We suggest you save the poster as a PSB file (Photoshop Big), as it’s likely to be bigger than the 2 GB file size cap of the PSD format.

Conclusion

After seeing this, Caleb approved it. If you go back to the email conversations, you’ll realize that we’re fitting the scope we established at the beginning. We’re giving Caleb something that’s nature-themed, while still having our own stamp on it.

Well, it’s truly been a blast! We hope you enjoyed the post and that we could shine a little bit of light on how we do stuff.

Let us know if you have any suggestions, comments, or ideas on how to improve; or, you can send us love mail, hate mail, or ask us to design posters for you by letting us know in the comments below or just get in touch!

Sincerely yours,
Simon H. and Jon Savage, Studio Ace of Spade and Editors of the Zine

The post The Lost and Taken Poster: A case study and texturing tutorial appeared first on GoMediaZine.