A Free Texture Pack to Make Your Thursday
Join us every Thursday, when your friends here at the Arsenal take over the Go Media blog to share insights, tips, freebies or other fun to brighten your work day.
Today we’re sharing ten textures we created exclusively for you. Check out the Arsenal for more textures known the ’round the world for being the best of the best.
Here’s what you’ll get with today’s download:
These texture samples are from the following categories: dust, motion blur, paper, smoke, paint and fur.
We truly believe that you can never have too many textures. If you’re like us, then head over to our Arsenal, home of the world’s best design resources, where you can soak up thousands of textures (and counting) you can’t find anywhere else.
Love our products? Access our huge product library ($11k in resources) and exclusive content for only $15/mth. Yes, seriously. Learn more now.
Download it now:
Our Complete Halftone Collection
We’re not sure what’s dreamier than a halftone. The tiny dots that create a gradient-like effect can produce such remarkable results.
Here at the Arsenal, we have nine packs that will give you the effect you’re after without the effort. Download them all in this complete collection – originally $105 – now only $27!
Or, become a member of our graphic design subscription and get them all (plus the rest of our huge product library) for only $15 a month.
All of the packs you see here are also available for individual purchase.
Tutorial: Building a brutalist conference poster with Jason Carne’s Texture Lot One (Free Poster Mockup Included)
Conference Poster Tutorial
Hello there! It’s Simon on this end of the keyboard. I’m very happy to make my return to the Zine with a poster design tutorial, that will explore the possibilities offered by Jason Carne’s Texture Lot One. The tutorial will have us explore texture use tips and tricks, but also customized black and white conversion, large scale sharpening, type pairing, layout building, and more.
I’ll be using Photoshop CC for the tutorial, but any version of Photoshop past CS3 should be fine. Note also that I’m working on a Windows-based system, but other than visual appearance and slightly different keyboard shortcuts, that will not have any impact on the process we’ll go through.
Introducing Jason Carne’s Texture Lot One
As the hero shot image tells us, the set contains 30 “finely crafted” textures, that will help us to give a wide array of artifacts to our flat, digital art. They come from a multitude of source material: burlap, cork board, a scratched cutting board, stone, and more.
The textures come in the form of high resolution, black and white textures.
The level of detail is superb, and gives us plenty to leverage to add substance to our compositions.
And one more for the road, just because we can.
Let’s talk some more about the piece we’re putting together here. It’s a poster for a (fake) architecture lecture, focusing on Cleveland’s brutalist landmarks.
What is brutalism? Glad you asked:
Brutalist architecture is a movement in architecture that flourished from the 1950s to the mid-1970s, descending from the modernist architectural movement of the early 20th century. The term originates from the French word for “raw” in the term used by Le Corbusier to describe his choice of material béton brut (raw concrete). British architectural critic Reyner Banham adapted the term into “brutalism” (originally “New Brutalism”) to identify the emerging style.
So, what does a brutalist building look like? There’s this amazing Tumblr called F**k yeah brutalism out there, and it’ll help me to answer that question:
(Education Wing, Cleveland Museum of Art, Cleveland, Ohio, 1971 -Marcel Breuer & Associates – via)
(State Historical Center, Columbus, Ohio, 1970 – Ireland and Associates – via)
There is something monolithic, synthetic, and minimalistic at times.
Now, why choose Cleveland as the focal point of the fake lecture? It happens that Cleveland has its share of brutalist buildings. A 2007 article from the Plain Dealer lists the major local representative landmarks of the movement: Cleveland State University, Cuyahoga Community College Metro Campus, Cleveland Justice Center Complex, Crawford Hall (Case Western Reserve University), and more.
Assembling the free assets needed
It happens that there is a CC-licensed image of the Cleveland Ameritrust Building, one of these major landmarks, available on Flickr for us to use as the base of our poster. We’ll need to grab the biggest size available (4028 x 2704 pixels), through the all sizes page.
Got it all? Then it’s time to get started!
Preparing our Photoshop document
We’ll use is a “standard” 18″x24″ canvas for our piece. For the readers outside of the USA, feel free to use an A3 format. Note the fact that we’re using an RGB document, as some of the filters we’ll use require that color space to function.
Next, we need to setup a grid. It’ll help us when building the composition. First, we’ll leverage Adobe CC’s New guide layout functionality to build a six columns by 8 rows main grid (View > New guide layout).
The result is a grid based on squares of 3″x3″.
The next set of guides are going to help us establish the boundaries of the center column. We need vertical guides at 4.5″, and at 13.5″.
Finally, we need horizontal guides at 11.5″, and at 12.5″.
And with that, our document is ready to go. It’s time to get started for real.
The first thing we need to do is give a solid color to our background layer. It’s going to be the base for the effects we’ll build up through the tutorial. We’ll be using a very light gray, #ededed. If we were using pure white, the contrasts would be too strong, and some of the texture effects we’ll apply later would be “washed out.”
Next, we need to place the photo in our composition. We’ll place the photo as a smart object, in order to maintain a lossless workflow. It will also guarantee us access to the untouched original file. To do so, we have to use File > Place (or File >Place embedded in Photoshop CC), and navigate to the photo file.
Once the image is included in our file, we will give it its final positioning and size using the absolute positioning tools at our disposal. The center point of the image should be at X: 2.55″, and Y: 26″. The image is scaled up to 125%.
With that done, we need to sharpen the smart object, since we scaled it up. We’ll use the high pass filter for that. The Zine archive features a short article about the technique already. Let’s start by duplicating the smart object.
Next, we need to run the high pass filter (Filter > Other > High pass). We’ll use a radius of 100 pixels.
The result doesn’t look like much. To obtain the desired effect, we need to change the copy’s blending mode to soft light @ 100% opacity.
Next, we are going to clip the copy to the original layer (CTRL/CMD+ALT/OPTION+G). This contains the high pass effect to the layer it’s clipped on.
With that done, we can change the blending mode of the original layer to multiply @ 100% opacity. This will make the photo adopt the soft gray we’ve used as background color as its main color once we’ve converted it to black and white.
Black and white adjustments
Desaturating a picture IS NOT a proper way to convert it to black and white. We are going to use a black and white adjustment layer for that. The preset we’ll use is called blue filter. Cyan, blue, and magenta hues in the original image will be light, while greens, yellows, and reds will be untouched or dark. For a higher contrast, the greens, yellows, and reds could be purposefully set to darker (using a negative value in the sliders).
The next step is a curve adjustment layer, set to the lighter preset. This allows us to soften the black and white conversion.
Finally, a levels adjustment layer allows us to push the contrast up.
It’s time for some layer organization.
A hint of texture
We are going to add one of Jason’s textures above the background. It will help us to generate a subtle grain effect. The texture is Corkscrewed – Light.
It’s placed centered in our canvas, rotated of 90°, and scaled up to 225%.
After converting the texture layer to a smart object (Filter > Convert for smart filters), and sharpening the texture (Filter > Sharpen > Sharpen), we can change its blending mode to soft light @ 75% opacity.
That texture concludes our work on the background. Before switching gears and attacking the content columns, here’s a look at our layers so far.
Setting up the columns backgrounds
Back when we set up the grid, we created a set of special guides that we’ll now use to delimit central column for our text. The column is split in two parts, one with a red background, and one with an almost-black background.
Let’s start with the almost black. It sits at the bottom half of the canvas. Here’s the area we have to delimit.
After creating a new layer, we need to fill it with a very dark gray, #040404.
Finally, the blending mode of that layer should be multiply @ 98% opacity. This will allow us to bring a hint of translucency in the shape.
The next shape will be its pendant at the top of the composition, and will be filled with a very bright red, #eb1d1d.
The blending mode of that layer should be multiply @ 50% opacity.
The shape’s translucency is too high (we need to remember that it will be the background to text later on). In order to address this, we’ll duplicate the layer, and change the blending mode of that copy to normal @ 50% opacity.
A quick note about layers, as we’re about to add type elements in there. Here’s what they should be organized into. The background elements have their layer group, and each half column elements have their dedicated layer group. From there, it’ll be easy to add the type in the proper group, so everything stays organized.
It’s time to talk about typography
As announced at the beginning, we’ll be using two type families: League Spartan Bold, and League Gothic.
The main title
The main title reads “CLEVELAND / BRUTALIST / LANDMARKS,” and is set in all caps League Spartan Bold, colored in #ededed, that is 48 points tall, and with tracking set to 250. Each line is its own text object, and they are aligned to the grid lines within the column.
In order to further ground the title element, we are going to add horizontal dividers underneath each line of text. The dividers will be colored in #ededed, and measure 6″x0.125″. The dividers are positioned underneath each text line, 0.125″ under the text line. We’ll use shape layers to generate the dividers.
And here’s what the layers look like.
We are not creating a proper conference poster if we don’t add the secondary information like the lecturer’s name, a date, a location, and a URL. The information is broken down as follows:
“NOVEMBER 20TH 2015 AT 07.30 PM / CLEVELAND MUSEUM OF ART / A LECTURE BY DR RYAN G. BRAVIN / www.clevelandart.org”
The individual type objects are aligned in a similar fashion as before, on the grid lines. “NOVEMBER 20TH 2015 AT 07.30 PM” is set in League Gothic Condensed Regular, that is 72 points tall, colored in #ededed, and with kerning set to optical.
“CLEVELAND MUSEUM OF ART” is set in League Gothic Regular, that is colored in #ededed, that is 60 points tall, and with kerning set to optical.
“A LECTURE BY DR RYAN G. BRAVIN” is set in #ededed colored League Gothic Condensed Regular, that is 72 points tall, and with kerning set to optical.
Finally, the URL to the site of the Cleveland Museum of Art, www.clevelandart.org, is set in #ededed colored League Spartan Bold, that is 24 points tall. The text object is located at X: 9″, and Y: 22.8″.
Here’s what the layer organization looks like:
And with our type in place, our piece is almost complete.
Now, it’s time to layer some more textures to polish the piece!
Textures and artifacts
Here’s a theory: one of the motivations to add textures to our work is to help us to add depth to our digital art, and to break away from their flat, clean, and precise origins. At this point in the process, the photo is pretty gritty, but the type above it is very clean. Adding more textures will allow us to weather that type and the column backgrounds.
The first texture we’ll add is PackingFoam.
It’s placed centered in the composition, rotated 90° clockwise, and scaled to 55%.
After sharpening the texture (Filter > Sharpen > Sharpen), we can change the blending mode to screen @ 15% opacity.
The next texture is the freebie we grabbed at the beginning, BB_AntiqueEnvelope_04.jpg.
It’s placed at X: 18″, and Y: 19.9″, rotated 90° counterclockwise, and scaled up to 1,150%.
After sharpening, we’ll use a clipped hue/saturation adjustment layer to desaturate the texture.
A clipped levels adjustment layer will help us to enhance the texture further.
Blending mode: soft light @ 35% opacity.
The next texture is from Jason’s set, and is called Corkboard.
It’s placed centered in the composition, rotated 90° clockwise, and scaled to 55%.
After sharpening, the blending mode should be changed to soft light @ 25% opacity.
The texture levels are coming together nicely. We’ve added grain, light noise, and small artifacts to the piece with a few layers of substance. Let’s have a look at the layers before the ultimate polishing touches.
Lossless vignette effect
There is a way to create a lossless vignette effect in Photoshop, thanks to shape layers. The first step is to draw an ellipse that fits the canvas. It should be colored in #040404.
Next, we need to use one of the tools accessible via the direct selection tool (A), in the toolbar. It will allow us to display the ellipse inverted, getting closer to the vignette. Once the active tool is the direct selection tool, we need to change the path operation button‘s setting to subtract front shape.
The result is a very sharp edged ellipse, almost ready to be a vignette.
Next, through the layer’s properties panel, we need to feather the layer mask to 350 pixels. This creates the fuzzy edge for the vignette.
Finally, the blending mode for the vignette can be switched to soft light @ 50% opacity.
Last but not least: halftones
The last piece of the puzzle is a halftone effect. First step, to create a merged copy of the piece so far. We’ll use the CTRL/CMD+ALT/OPTION+SHIFT+E shortcut for that. It’ll create a layer containing a merged copy of the piece so far. I called it Halftones.
Once the layer is generated, it needs to be converted to a smart object.
After resetting the color palette to default (D), we’ll use the filter gallery’s halftone effect (Filter > Filter Gallery > Sketch > Halftone pattern). We’re using a size value of 8, and a contrast value of 50.
Then, we need to change the effect’s blending mode to soft light @ 100% opacity.
After that, we can change the layer’s blending mode to soft light @ 50% opacity.
And our piece is now done! Here’s a look at our final layer stack.
Wrapping things up
Phew, that was a long tutorial! I hope that you enjoyed it, learned a few tricks here and there, and that your outcome matches the goals you had at the beginning.
Did I leave anything unclear? Any suggestions? Don’t hesitate to reach out in the comments below! I’ll be happy to help out.
Mockup your poster using the free sample below from our Poster Mockup Templates Pack and please share your work with us in the comments, by tweeting at us at @go_media, or sharing them on our Facebook page.
Free Download: Free Poster PSD Sample from Go Media
If you already purchased Jason’s texture set, I hope you enjoy them, and that this tutorial gave you a sense of what you’ll be able to accomplish with them. If not, go grab them while they’re hot!
And on that note, that’s it for me! Until next time, cheers!
Custom Storefront Window Graphics
We teamed up with Jakprints to show off our brand new store front as well as their awesome large format printing capabilities. Here you’ll get to see the full process from conception to installation.
Step 1 : The Concept
We ran through a few different ideas before finally landing on a concept for our first set of window banners. We wanted to create a large collage of icons which all, in one way or another represented the life of an artist and more specifically the crew here at Cleveland graphic, logo and web design studio Go Media. This included a good mix of the tools we use, the things we like and Cleveland, Ohio!
We thought it would be most helpful to start by creating a list of all of the individual items that needed to be created – then we asked our entire staff to add items that they felt represented Go Media and being an artist to them. We made sure to include a piece of everyone.
Step 2 : Sketches & Measurements
Now we had the concept down, and the first step in the production phase was to measure and quickly sketch the general layout of the icons.
Step 3 : Graphic Proofs
Now we had the concept down, and the first step in the production phase was to measure and quickly sketch the general layout of the icons. Once we had our rough blueprint sketch, it was a process of knocking out each item on the list one by one and working them together with some Jakprints logos to really fill the space.
Once all the icons were in place, a texture was applied using an opacity mask.
Step 4 : Applying an Opacity Mask (Texture)
An opacity mask is essentially a combination of a layer mask and a clipping mask. It allows you to control the transparency of a shape based off of a black and white gradient or in this case texture. You can use an opacity mask in place of a vector texture to cut back on your file size.
How it works:
- Group all of the elements you wish to apply the opacity mask to and make sure they are set to 100% opacity.
- With your group selected, click the drop down menu in the transparency palette and select ‘Make Opacity Mask’.
- A mask is applied to the image like you see here, click into the mask.
- With the mask selected, you can now file > place your texture.
You’re Done! Depending on the texture you selected the result might be very subtle or rather extreme. Because the one we are using here is primarily light the outcome was very subtle. You can also check the ‘Invert Mask’ box to get a different effect, but for our purpose this subtle texture was just right.
Step 5 : Teaming Up with Jakprints
Now we had a graphic proof and were ready to sit down with Jakprints and go over our options. We knew we wanted to do banners for the windows but weren’t quite sure how we were going to tackle the doors. JakPrints was able to provide us with a list of options to consider. Some of which included:
- Vinyl Banners
- Vinyl Mesh Banners
- Poly-Banners with Stitched Hems
- Window Clings
- Vinyl Decals
We ended up up selecting a lightweight stretch banner for the main windows. This material is wrinkle resistant, and because we know we will be swapping out banners over the years this works out best in terms of storage. JakPrints also offers a wide variety of substrates (eco-friendly, economic, or synthetic for maximum durability).
For the windows we decided to go with a clear vinyl application. This was adhered backwards to the inside of the windows, a non-permanent short term option that prevents weathering of the graphics. JakPrints also has long term outdoor durability options as well as many more solutions for just about any application. Some others include: Wall, floor, posters, trade show displays, indoor/outdoor signs, back-lit material, yard signage, even vehicle wrap.
Step 6 : The Printing Process
After rounds of revisions, swapping icons in and out the design was done it was ready for the printers at Jakprints to work their magic.
Step 7 : Installation
Before we were ready to physically install the banners we needed to think through the logistics of the space. We created a mockup of our hanging system and had Jakprints sew in hems to match.
When the banners finally arrived we were all anxious to get them up. So we gathered our team and got to work.
The window vinyl for the doors was a slightly more complicated installation, not one we were willing to attempt. But we need not worry because Jakprints has access to a nationwide network of certified 3M installers, so they set out one of their guys to finish the job.
Step 6 : Conclusion
So there you have it, after all that hard work we are proud to reveal our beautiful new store front and our very first set of window graphics!
A big thank you to JakPrints for working with us on this project!
Want to work with us to create something beautiful? Contact us here.
One of my favorite movies of all time is Eternal Sunshine of the Spotless Mind. I also really love the movie posters that featured a torn paper effect across the person’s eyes with some text underneath. Nice job by BLT on the original posters. I thought it would be cool to make my own version and show you how I did it.
If you want to skip this whole thing and make it easy, I’ve made a Smart Object Photoshop Template so you can easily add your own photo and text. Just double click the smart object layers, paste in your photo, save, and voila! You can even swap out the torn paper images if you’d like. This message brought to you by the keen minds behind digital marketing in Cleveland, Go Media.
On with the tutorial! You’ll need Photoshop CS5 or newer for this.
1. Set up your Photoshop Document
I just started with new document at 486×755 pixels. It’s not high res, but I have no intentions on printing this. It’s mostly just to display on the web.
2. Create your torn paper layers
You can create these from scratch, but I found it easier to just find some torn paper vectors online. If you create your own, you can use the pen tool in Photoshop or Illustrator and draw your own torn paper edges. Be sure to create several variations. Create two parts for each torn paper piece. One will be the “edge” and the other will be the “mask.” The edge is white part with the drop shadow and the mask is the grey part of the paper that will act as a clipping mask for the graphics we want to place on the paper itself.
3. Paste in each torn paper layer into Photoshop
I copied the white part of the torn paper first into Photoshop and enlarged it to fill my document size. Then I copied and pasted the grey part of the torn paper and enlarged it enough to look good with the edge. Place them a little bit apart so there is enough white edge visible. Do this for each “piece” of torn paper. Remember, you want a “mask” and an “edge” layer. Then add a drop shadow to each of the edge layers.
4. Create a top and bottom piece for your portrait photo
You will take one of the pieces of paper (2 layers each: mask and edge) and use it for the TOP layer. The TOP most layer, you’ll need to extend the paper to the edges of the document. It is within THIS mask you will add your headshot photo. Notice how I arranged the paper pieces so they are closer together? See below:
5. Paste in your own photo!
Now this is the fun part. You can paste in your headshot photo above the top piece’s “mask” layer. And then right click on the mask layer and select “create clipping mask.” See how I have my layers set up below. I have also put in a paper texture for a more textured effect.
6. Paste in more photos for each piece of torn paper
I wanted to go for the “torn magazine” look so I sought out some old vintage ads online. I pasted them in each piece of paper group and set the clipping mask just like I did for my top photo above. This is the effect I get below:
7. Do the same for the bottom part!
You’re going to repeat the steps to the same for the bottom section. One quick way is to simply duplicate all the top layers and flip them vertically. Then swap out all the photos with new ones so they are different. One suggestion is to rearrange the order and positioning of the torn paper pieces so it looks different from the top.
8. Add text
See the space in between? That’s where we will add our text! I also added a dark paper texture set to “screen” to and some additional shadows using the paintbrush tool so I could get a more realistic effect. See my layer structure below:
9. Add textures and final effects
One thing that will tie the whole thing together is some colorizing and textures. You’ll notice I have a dark reddish brown layer set to “screen” to color my darks. And a tan color to colorize my lights. Those are set to a reduced opacity to not have an overpowering effect. I also had a couple vignetting layers to bring more of a framing/focus to the image. There’s a levels adjustment layer to brighten and boost the contrast of everything all together. And finally there is a film grain layer set to “overlay” and reduced to 40% opacity. A film grain layer is just a layer filled with 50% grey color with a noise filter put on it. Tweak the settings to what you think looks good.
10. You’re done!
Bonus: Download the PSD
Or just download the PSD template and make it easy on yourself. Again, you don’t have to go through all these steps if you don’t want to. Just download the PSD file yourself. I set it up with Smart Objects so you can just double click on the layers that you are supposed to swap out with your own photos. Purchase Torn Paper Effect – Smart Object PSD Template – $2.99
Here are a few examples!
Stock Up with Our Ultimate Texture Bundle
The endless hunt for textures is over when you purchase the Ultimate Texture Collection Bundle, available on Go Media’s Arsenal.
This download is jam-packed with the best of the best: 6 sets, one collection and one pack of high-resolution, completely unique, Go Media made textures.
That’s 835 textures in total, my friends.
Originally $214, now $45 for a limited time
Here’s what’s included:
You get 105 high quality and detailed texture photos. Included in the set are Concrete, Wood, Paint, Rust, Oddshots, Metal, and Masonry.
You get 105 high quality and detailed texture photos. Included in the set are Paper, Bark, Earth, Grime, Stone, Geometry, and Oddshots 2. All at your disposal for wicked design awesomeness!
A set of which dreams are made. You get 105 high quality and detailed texture photos. Included in the set are Paper Stains, Rust 2, Stamped Metal, Wood 2, Ice, Painted, and Masonry 2.
You get 105 of the highest quality textures available. Included in the set are Ink in Water, Rust 3, Wallpaper, Tiles, Motion Blur, Grunge, and Skin & Fur. Take a look through the image galleries; there are some truly stand-out additions in this fourth texture set from Go Media.
We’re taken things up a notch in this latest texture set, which includes 200 brand new high-resolution images inside 10 unique packs: Clouds, Dust, Fabric, Fur, Lensflare, Motionblur, Paint, Paper, Photocopy, and Smoke.
Textures are an excellent tool for adding subtle, yet effective elements like noise, visual interest, depth and definition to your designs. So are you ready to get your hands a little dirty? Then, dive head first into the Rolled Ink Texture Pack by your friends here at Go Media. The Rolled Ink Texture Pack contains 48 textures we created using a brayer, our favorite black ink, a variety of interesting surfaces and a little elbow grease. What resulted is completely unique and awesome if we do say so ourselves.
- 48 Rolled Ink Textures, from subtle to strong, straight to circular, calm to chaotic, all excellent in their own right.
We have a super cool old building here at Go Media. We went through it with a fine-toothed comb, and cameras, and captured this collection of textures. It includes 122 textures, divided in five categories: fabric, dust, grunge, noise, and wood grains. ‘Nuff said.
The Go Media Watercolor Set 1 contains 45 abstract, high resolution (8.5 x 11″” at 300 DPI) watercolor washes.
Hurry! The Ultimate Texture Bundle is available for a limited time!
Illustrator Tutorial: Using Plant Textures to Create a Gritty Text Tee
I’m going to show you a simple way to use my Plant textures for a text tee design. The purpose is to show you how I use addition and subtraction methods to make text a little gritty in Illustrator.
Want to Follow Along? First:
Ok, Let’s Go!
To start I’m going to use my hashtag #CROMfitness. This is my personal fitness plan I came up with and have fun with. And if you have to ask “Who is CROM?” I’m gonna hang my head in shame, just google it.
I’ll open Illustrator and type out the text in Impact. I know, real creative, but we’re going for simplicity. Open the Plants pack. I’m choosing a texture that has a lot of breaks or speckles in the texture.
The texture I’m using is obviously rectangle so I’m going to cut out certain areas with the LASSO TOOL.
You will want to select the image you cut out, pull up the PATHFINDER box and UNITE the cut out area. I’ll do this for 5 more cutouts and there we have 6 new textures.
Next, I’m going to take one of the newly made textures and make another one with even smaller specs.
Next step is to EXPAND your text and place the texture over the certain letter.
This part has been my own formula, the best way I’ve found to extract the texture from the expanded text.
-Grab a letter with the WHITE ARROW tool.
-Hold Shift +grab the texture with the BLACK ARROW tool.
-Select the MINUS FRONT tab from the PATHFINDER box with the WHITE ARROW tool and there you have the beginning of the grungy look. This is the SUBTRACTION technique.
Repeat these steps with the rest of your letters.
Next, I’m going to add a stroke to the hashtag by using the Offset Path.
Select the hashtag then choose OBJECT – PATH- OFFSET PATH. This will provide essentially a black stroke around the outside of the object/hashtag.
With your WHITE ARROW tool grab the outer edge of the black stroke and make the fill white and create a black stroke.
Here is the additional part that I have used for many of my drawings. This is just a simple splatter effect. I’m going to grab a different Plant texture and cut out different areas with LASSO tool like I did with the texture before.
From here, I’ll start building the various spots where I want this splatter look. I’ll experiment with the look and feel of the different areas until I get the solution I want.
Just a tip, this is not mandatory but you can take your WHITE ARROW tool, select the letter and splatter, select the UNITE tab in the PATHFINDER box. This will keep everything together. So there you have my super simple ADDITION technique. With the subtractions and additions you get a roughed up text that doesn’t look so boring.
Make an EPS file of the image and bring it into Photoshop. Drop it onto the file and adjust the size and color. We now have a great visual for the CROMfitness.
Thanks for reading through this short tutorial. I find that the most simple effects/techniques provide the coolest results that make people say “How did he do that?”
Make sure you pick up these textures and make something nobody has ever seen before so they are asking you “How did you do that?”
Introducing the Ultimate Ground Textures Pack
As you well know, textures give a sense of life and depth to an otherwise flat design. On a recent trip to Italy, I had the opportunity to capture my own gritty, grainy and one-of-a-kind images. I’ve found these to be perfect for roughening up those pieces that need a little punch.
You know I couldn’t keep them to myself.
Today I’d like to introduce to you the second in my series of six Nature Texture Packs.
Say hello to the Ground Pack!
This pack includes 10 carefully crafted photographs from my recent travels and 11 images I vectorized, all of which are available for your use roughening and dirtying your designs.
You’ll need to grab it now, because today I’ll be taking you through a step by step pamphlet brochure design using a few textures and overlays in Photoshop.
What we’re making:
I am featuring a picture of a marble bust from the Uffizi gallery in Florence, Italy. My wife and I had the opportunity in May 2013 to do some traveling with friends and take in a ton of gallery sights and the beautiful country side.
So let’s get to it.
Here is the statue of our character in Photoshop. I wasn’t 100% sure what I wanted to do at first so I just started experimenting.
I’ll go ahead and place him on a document for print that will crop him nicely.
Next I’m going to grab the actual photo that is included in the pack and set it over the character.
Next I’m just going to see what happens and play around with some options to see what kind of effect I can get.
I love this look so far but I want him to look like he is coming out of the ground. I’ll grab some brushes from my Godmachine pack I downloaded and see what happens.
Ok so from here I want to utilize another texture so I’ll grab a different one. Here is an important tip, set the texture on a large document and make it that size so it covers the character.
Once again I’ll start experimenting and see what happens and add some color.
At this point I want to see how this looks with text and I’ll experiment with stroke colors, drop shadows and size of the fonts.
I’m liking it so far but not thrilled with the color….so let’s see what happens.
Very cool! I decided to add effects to the words as well. I feel the words go with the image now. It’s very important not to just slap anything together and expect it to work. Make the image balance with the text and colors.
Last item I thought is to change “History” to “Italy” and add the Uffizi Gallery Florence, Italy to make it look like an actual brochure when you walk into this specific exhibit.
So there it is. This has a complicated look but made simple by experimenting with layer effects, a photograph, a graphic, text and design. It’s like cooking where each ingredient needs to work together yet stand on their own.
Thanks for checking this out and purchasing the packs and set!
Free Textures Freebie Alert!
While going through folders the other day, I stumbled upon all of the textures I submitted to the lovely Liz Hunt for Texture Set 5. To be honest, when creating the pack, I went texture crazy. Needless to say, there was some material that doesn’t appear in the final product. Since it’s just sitting around unused (and also because I love you guys), I thought I would share some of it. Yes, that means free textures just for you.
Here’s what you’re getting:
Download the free textures now!
Or buy bits and pieces as you wish:
Handpicked from the Heavens
We’re super psyched to bring you the newest in texture excellence today.
Introducing the Colorized Texture Set.
At 45% off of the list price, it’s this week’s special.
The textures, brought to us by Maarten Kleyne, are punched with pops of color and are bubbling over with brilliance so palpable you’ll think they were plucked from the heavens.
Over 1,000 shots taken around Maarten’s studio space and office, were carefully captured and post-processed. One hundred and five of the highest quality were handpicked especially for your use. They were then divided up into 7 packs of power.
We’re sure you’ll find them versatile and vivid. At $9 a pop, you can grab them individually, or purchase the whole shebang for only $35!
Take a Peek:
The whole deal, folks:
Want more Maarten?
Maarten Kleyne is no stranger to our Arsenal. A freelance designer from the Netherlands, Kleyne is responsible for such texture pack masterpieces as Etched into Dark, Excluded Rough Grunge, Noisy Under Atmosphere and Rough Surface Grunge.
Grab those too while you’re at it. They’re all on sale this week!
What are you waiting for? Head to the Arsenal now!
Chad Tibbits is a super talented apparel designer, WMC Fest alum, and all around nice guy. As for Chad, we’re super happy to have him join the patiently growing, curated list of Arsenal contributors. His first halftoned texture pack focuses on dust, speckles, and other vintage look inducing goodness. Let’s have a look:
The pack is delivered in multiple formats: one PSD that includes a “threshold” and the halftoned version of the texture, CMYK jpgs of both, RGB jps of both, and transparent background pngs. The halftone versions are the most detailed, while the “threshold” are more intense. There are 10 different textures, coming from different sources: old paper, various grain, etc. These are super versatile, and Chad’s tutorial below only demonstrates one of the many ways these can be put to good use. I’d suggest pasting these in a text block layer mask. Just saying.
The “lighter” versions of the images are the halftoned versions. If I were you, I wouldn’t hesitate to grab this awesome set. On that note, time for Chad’s tutorial. On the menu today: some apparel design, but the techniques can be extrapolated for many other uses. Enjoy!
— Simon, Manager for the Arsenal
For this tutorial, we will be creating a silk-screened graphic in Photoshop that can be used as either an apparel graphic or as a poster. Here is a preview of what my final image looks like. Note: Graphics can vary in look – this all depends on the use of the textures and type treatments.
Step 1: Set Up Your Photoshop Document
Your size can vary but in this example I set up the document at 11” x 11” @ 300 DPI and CMYK. In this example, I am planning on using the design for an apparel design. Therefore, I am selecting a size that can fit within the common screen print size; so keep that in mind.
Step 2: Choose Your Photo
For this design I chose a pink flower from sxc.hu. Once you download the image, drag and drop it onto your Photoshop document. Luckily, this photo has a nice clean/white background. So in this case, complete a quick select of the white with your Magic Wand Tool, and delete out the outer white that surrounds the flower.
Step 3: Begin To Edit Your Flower
Duplicate your flower and with your new layer: click on your upper toolbar under Image > Adjustment > Threshold. Using the slider, adjust the Threshold Level to your desired detail level.
In the upper toolbar click Select > ColorRange. From here, you can select all of the white in the photo and delete it.
Now that the white background is removed, double click on the layer icon and click Color Overlay in your Layer Styles. Here you can choose whichever color you would like in creating this layer. I chose PANTONE 7427 C or #9d162e.
Step 4: Add More Color To The Flower
Duplicate your original flower layer again. Once your layer is duplicated, take your new layer and double click on the layer icon to go back into Layer Styles. Click on Color Overlay again and turn the flower into whatever color you’d like. In this example I used PANTONE 4975 C or #411f1f.
Next, click on your Ellipse Tool in your tool bar and create a circle. This will act as the center of the flower. Once you’ve created your circle, click your layer icon and select your desired color, I chose PANTONE 729 C or #b7814f. Place this in-between your two flower layers and you should have something that looks like the following.
Step 5: Add Some Distress
With this step you will need to purchase the “Halftone Texture Pack – Volume 1 – Dust” I just created for Go Media’s Arsenal. This particular texture is in Group #2.
Open Halftone Dust Textures and drag Group #2 overtop all of your visible layers. Double click on one or both layer icons (halftone and threshold) and click Color Overlay in your Layer Styles. Then, select your background color as the color overlay.
From here you can choose how much detail/distress you would like to have on your piece. Using just the halftone layer shows all of the distress detail, just with finer detail. The threshold layer does not have as much fine detail to it, but it can help make your distress more apparent. Feel free to bring in more distress layers or even duplicate the ones in Group #2 to give your piece even more distress.
After altering your distress to your liking, press Command/CTRL+Click on your distress layers.
Now select the first layer of your flower and click “delete”. Repeat this step on each of your layers that make up your flower. You will now be able to turn your off your distress layer/s and you should see the same effect as if it were still on.
Step 6: Add Some Flare
For this piece I imported a typographic piece that I made for the artist.
Duplicate your layer and hide your duplicate layer, this will be used for the next step. Then go back to Halftone Dust Textures and take Group #1 and place it over top of your text/logo and repeat the same steps as the step before to give the same kind of distress look.
Step 7: Bold It Up
Reveal your duplicate layer and decrease your layer fill to 0%. Double click on your layer icon in your Layer Styles and click on Inner Glow. Feel free to follow my same selection or choose what looks best with your piece. The black inner glow may be deceiving but bear with me; this will make the next step a bit easier.
When choosing your inner glow, try and create an inner glow that helps your text/logo stand out from the background color and flower graphic.
Step 8: Halftone It!
After achieving an inner glow that works for your design, hide all of your layers except for your inner glow layer. Then click Image >Mode > Grayscale and if asked to Rasterize/Merge do so. This step will be undone soon. After doing so, click Image > Mode > Bitmap. From here select a 300 Pixels/Inch Resolution and a Method Use: Halftone Screen.
On the next option (Halftone Screen) I use the following settings that are recommended by Jakprints.
(In case you aren’t sure who they are, Jakprints is an amazing independently owned print shop here in Cleveland that specializes high quality printing. Any print job you have, they can handle!)
- Frequency: 45 Lines/Inch
- Angle: 23.5 degrees
- Shape: Elipse
Once applying the halftone, click Command/CTRL+A and select the entire board and then click Command/CTRL+C to copy it. Now click Command/CTRL+Option/ALT+Z multiple times to go back to your latest layered files. You will now hit Command/CTRL+V, placing your halftoned graphic with the rest of your layers. Now click Select > Color Range. From here you will select all of the white in the photo and delete it.
After deleting all of your white, reveal all of your working layers and do a color overlay on your new halftoned layer. With this layer do a white color overlay to match your text/logo.
Step 9: Merge Layers
Now that your layers are using proper halftones you can merge your layers together that share the same color values. In this example, the only color that shares the same values are the whites.
Step 10: Separate Layers
Now that your layers are separated into your print colors, it is time to separate the screen colors. Click on your upper layer (your type/logo layer) and click Command/CTRL+Click. Now delete that selection from your three layers that are below it. Repeat this step for every layer and delete each layer’s selections from the layer that’s below it.
Step 11: Donezo!
You should now be able to turn each individual layer off seeing the separation between all of your other layers.
It’s time to mock this baby up, and to land that art approval.
Excluded Rough Grunge and Etched Into Dark Texture Pack Tutorial with Maarten Kleyne
Maarten Kleyne, a freelance graphic designer from the Netherlands, feels music. Kleyne believes wholeheartedly that music is a key element in the creation of his final product. Inspired by the works of Steven Wilson and Lasse Hoile, his portfolio is filled with images including cd packaging, posters and collaboration artwork. Recently, WMC Fest alum Maarten cranked up his stereo, picked up his camera and created some texture packs for Go Media’s Arsenal. We are so proud to add his texture packs into our resource library.
We’ve asked Maarten to create a tutorial based on these textures, in order to demonstrate how you might like to apply them.
— Heather, GMZ Editor
Thanks for the introduction Heather and hey everyone! A while back I was wearing my crazy ear-to-ear grin the entire day, because the lovely people from Go Media asked me if I was interested in doing “some stuff” for them again. It’s no secret that I’m a huge fan of everything Go Media so I obviously said yes.
The first parts of my work have recently launched on Go Media’s Arsenal as the two texture packs: “Excluded Rough Grunge” and “Etched Into Dark”. Now – like the introduction said – I’d like to show you one way to apply these in a design through a quick and simple-to-follow tutorial. There are many other ways you can utilize the textures we’ll be using. This tutorial simply highlights one of those; a way I personally use textures quite often when creating a design.
Note: If you want to follow along with this tutorial, you will need to purchase the new packs. If you don’t you will probably still get something out of the tutorial, because I’ll try to keep it general. You will, however, get the best results from using textures from the set(s). Grab the “Excluded Rough Grunge” and “Etched Into Dark” texture packs while they’re still hot!
For this tutorial I chose to go for a 12 inch vinyl cover format. I’m truly stoked to see the vinyl record make something of a comeback, if only for the bigger canvas space we designers have! Now, back on-topic: In order to keep a focus on the texture usage, we’ll be creating an abstract – perhaps somewhat psychedelic – front cover. Here’s a preview of the final design we’ll be creating in this tutorial:
Good to know: Throughout this tutorial you can click on most of the images to enlarge them.
We’ll take our time and go through this step by step. Don’t worry, I’ve kept it a simple-to-follow tutorial. (I just use a lot of words, sorry. It really is simple though.) There’s a whooping total of 10 steps we’ll go through.
Some steps only cover the essential basics because I advocate experimentation, I want you to go beyond just following the steps if you don’t mind. Just try and experiment with the things that’ll pass along and I’m sure you’ll get a truly amazing and unique design because of it.
Feeling reluctant to experiment? You can still create the same thing by following the steps. I would, however, like to emphasize that you should try and experiment with things to create something different. It’s one of the best ways to learn, in my opinion.
Ok, so here it goes:
Step 1: Set up your Photoshop document
Open Adobe Photoshop. I’m using version CS6, but I’m sure any version will do for this tutorial. Now go to File > New and setup your new vinyl sleeve document with the following dimensions: 12½ x 12½ inch on a 300 DPI resolution. The ½ inch is just some safety bleed space I’m keeping. You can use CMYK or RGB color mode for now. I find RGB easier to work with at first, you can always convert it to CMYK at a later point. If you go to print that’s obviously something you shouldn’t forget.
Step 2: Purchase and download one or both new packs
If you haven’t already, take a minute to purchase and download the texture packs we’ll be using from Go Media’s Arsenal. Download the “Excluded Rough Grunge” and/or “Etched Into Dark” packs. We’ll use both, so in order to get the best results I’d advise you to get both too. You can skip this step if you already have some textures you want to use. However, this tutorial is meant to show you a way to apply those from the Arsenal.
The benefit of using the premade textures from the Arsenal is that it saves you time and can help you achieve professional results. I frequently use textures myself. Basically, there’s not a single design that I make without the use of textures. Sometimes I’ll use textures in a very subtle way and sometimes quite heavily to form a complete design. That first case will be the thing I will highlight in this tutorial; the subtle addition of textures. What you’ll hopefully come to see is that the vinyl sleeve we’re making couldn’t go without those subtle additions. They’re essential.
Step 3: Create a ‘foundation’
Before we actually start using textures we’ll need to make a basic ‘foundation’, or ‘composition’ if you will. First, fill the background with a color of your liking. I chose to go for a darker greenish (#5f7463) color.
Next, place or paste a photo/texture of clouds on a new layer and have it fill the entire canvas. Then use the filter: Filter > Distort > Polar Coordinates > Polar to Rectangular (yes you can actually find a use for this).
Place or paste the same original photo/texture of clouds on another new layer. This time flip it a 180 degrees before applying “Polar Coordinates”.
Set the blending modes of these two cloud layers to: Overlay.
Step 4: Add the “Excluded Rough Grunge” textures
In this step I’ve used “Excluded Rough Grunge” textures 7 and 13. Place them into the document and have them fill the entire canvas. Add texture 7 first and set its blending mode to: Screen.
This is something I often do with greyscale/black and white images. It only pops the whites. This way we quickly start adding roughness to the artwork.
Add texture 13, canvas filling and blending mode set to Screen as well. Duplicate the texture 13 layer and rotate it 180 degrees. Perhaps move these 3 layers around a bit to find a suitable spot for the white rough spots. Add other/more textures if you feel like your design needs them.
Step 5: Bring in another color
Next, add a contrast color, something truly opposite from the green you have chosen. I used some orange colored clouds. Don’t worry, this color will not be seen later. The point of that will become obvious.
Add this color in whatever way you prefer, just make sure it’s not a solid color. It has to have a bit more variation to it. A good choices here could be to use water color, lens flare or colorized clouds textures. Or you can go mad with a brush yourself. Just make sure it has some dynamics to it. Don’t overthink it though, because like I said: it’ll be used in such a way that the colors itself will not be shown.
Place this new color layer on top of the others and set its blending mode to: Difference. (Doing this will directly show you why the color did not appear)
Step 6: Add the first “Etched Into Dark” textures
In this step I’ve used “Etched Into Dark” textures: 1 and 10. Place them into the document and have them fill the entire canvas. Add texture 1 first, invert its colors by pressing CTRL/CMD+I or by going to Image > Adjustments > Invert. After that set its blending mode to “Overlay” and its opacity to 30%.
Now add texture 10 and invert that as well (CTRL/CMD+I). Set its blending mode to “Divide” and its opacity to 35%.
Try experimenting with other/more textures and opacity levels to see which result you like best.
Now we’re going to add a ton of minor details by placing texture 1 all over the canvas, multiple times. See those little dotted spots on this texture? Add this texture with inverted colors to your document again. Set its blending mode to: Overlay.
Add a layer mask to it and brush away all the white parts until only those dotted spots show. In order to make it blend into the background well, remove all the white stuff surrounding it. You can also try using different opacity levels.
Now scale it down a large bit to make those spots turn into little dots, or stars if you will. I call them “sparks,” and I’ve added them about 25 times all over the canvas.
Step 7: Transform the ‘foundation’ to several blocks
Ok, so now we have quite a nice ‘foundation’, right? Let’s copy it around and transform it into “something more”. Merge a copy of all visible layers into a new layer by pressing: Ctrl/CMD+Alt+Shift+E.
Now you have a new layer that’s an exact copy of what you’ve (visibly) made so far. Resize that layer to about 80% of the canvas size by pressing CTRL/CMD+T and changing the width to 80% at the top menu bar. Be sure to check the chain icon to have the transform maintain the aspect ratio. After that set the blending mode of this layer to: Exclusion. (Yes, this can also turn out pretty neat for a change. Right?)
Duplicate this newest layer (CTRL/CMD+J). Transform the duplicated layer to 80% of its original size as well. Re-select the original block layer, the one you made before this newest one. Now make a selection of the duplicated layer by holding CTRL and pressing on it in the layers panel. (Still following? I do hope so.)
Invert the selection (CTRL/CMD+I) and add a layer mask to the original block layer (that you should’ve selected). This should cutout the duplication layer from the original.
Now invert the colors of the duplicated layer by (selecting it and) pressing CTRL/CMD+I.
Go through this process a few times. Duplicate the duplication, cutout a part of it that’s smaller and invert it or not. Why “or not”? Well, sometimes the non-inverted results look better. I’ll leave that up to you to judge.
While going through this process be sure to rearrange the duplicated blocks here and there. Or not. Also, don’t cutout all the blocks. Keep some of them entirely visible. You can also try and delete the first duplication after you’ve cut it from the original. Then, you can duplicate the cutout version and re-size it as you see fit. Also, try different percentages to decrease the layers with.
There are plenty of ways to go here, all resulting in different compositions. Play with it, experiment!
Step 8: Add even more “Etched Into Dark” textures
Remember those spots/stars/sparks/whatever we added back in step 6? Well, if you like things “rich with details”; add a whole bunch more. Add them on top of all the rest though. So not inside the basic composition, but on top of the block copies. By doing so you’ll enhance the blocks themselves some more as well.
Here’s about 25 more of them added, however subtle they may be:
Step 9: Add some final touches
Most of the time I use adjustment layers to add a certain “final touch” to a design. In this case I added three to enhance the artwork an extra bit. The adjustment layers I added were: “Curves”, “Gradient Map” and “Vibrance”. See the image below for the settings I used.
Now, add some text to it in whatever way and font you see fit. It will be a vinyl cover after all! Of course you don’t have to do this. When you’ve done that (or not) and you deem the design ready, do one last thing. This is something I always do to bump up the sharpness of a sleeve and to make all the little details pop out just a wee bit more. In print that might be lost a bit, which is exactly the reason why I do the following:
Merge a copy of all visible layers into a new layer by pressing: Ctrl/CMD+Alt+Shift+E. Use the filter: Filter > Other > High Pass with a radius of 5,0 (or any other value). Set the blending mode of this layer to “Overlay” and change the opacity to something more of your liking. I changed it to 50%. Try experimenting with this little technique. Try different radius values and opacity levels.
Step 10: Present it
To help place this vinyl sleeve into context, try creating a mockup for it in order to make it look like a physical sleeve. You can easily do this via Go Media’s vinyl record mockup templates or their online mockup creation tool at MockupEverything.com!
Creating a mockup preview is an awesome way of presenting your design for a lot of reasons not stated here. It could even help you persuade clients about a design. It gives them an idea of how their product will look like as a real-world product, in this case the vinyl sleeve.
So what should you use, templates or the web tool? It’s a personal decision, yes. On one hand, the vinyl record mockup templates will give you a (near) print-ready image. You could print it out and show it to a client while meeting. If you’re sending the preview over via email or a website then http://mockupeverything.com/ is probably best for web-ready presentation. It also keeps the file size lower. Clients might like that. It saves them some space, and makes sure it won’t max out their inbox quotas (and yours!).
In case you don’t know how to use Mockup Everything or the templates, Go Media has put some neat demo material together on how to use Mockup Everything.
Mocking up the artwork we just made – in my case – results into this:
That’s it, you’re done!
Hopefully this tutorial was simple to follow, helpful and even inspirational. Aside from that, I hope the textures will prove of great use to you in many designs. If you create(d) your own sleeves, or something else, using these textures, I’d love to see it. I’m very curious to find out and see how you apply them, so feel free to share those designs. There’s actually a special Go Media place for that!
Show off your results
On the Arsenal Facebook Page, you can post the images you created using Arsenal vectors, textures, fonts, etc. Please show me how you’ve used these products in the real world. It’s not often that we – as in Go Media – see the work you create with Arsenal products, so take this as a call to action to share it with us on the Facebook page.
For even more exposure, you can post your image in the GoMedia User Showcase on Flickr and/or comment on this tutorial below and link us to it!
Thanks for your attention and time! It’s much appreciated.
Comic Book Inking and Coloring Tutorial
Earlier this year I was commissioned to come up with a series of character illustrations for Cohort Pictures new film project; ‘The Northern Mist‘, a suspense horror set during the Roman occupation of Briton. The illustrations would be used to help the rest of the creative team cast the roles for the film, aid in costume design and provide a bit of promotional material to drum up interest from investors and audiences. It was a great chance to really flex my creative muscles and get into some good ol’fashioned doodling. My favourite piece to come out of this one was what I nicknamed the Lady Briton sketch, so I decided to run a quick step by step tutorial for anyone interested in how I took this illustration through from brief to final concept.
So the brief for this character went something like this (and this is me paraphrasing pretty extensively)-
“she’s a feisty female Briton, easily equal to her male counterparts, she get’s captured early on in the film so it’s important to try and get her fighting spirit across in the design as much as possible. Also- she is the only female in a movie full of dudes, so she really needs to not be a troll.”
After a bit of pleading, Patrick (the director working on the film) also sent me through this rough sketch he’d put together. It makes such a difference getting some rough input from a client as it means I have a starting point- even the crudest stick man helps me to get a result closer to what they originally envisioned. Anyway – from this, I gathered she needed to be in pretty light armour, probably leather or cloth and covered in dirt. Nice.
The next step is getting a rough sketch together. My initial sketches are always pretty awful (I think I drew this one whilst on a bus in Spain?), but the point of them is very much like the concept Patrick sent me: to quickly get an idea across. If you spend any massive length of time on them, then (if you’re like me) you’ll resent any changes that need to be made, at the end of the day: time is money after all. In this version, Patrick could see I’d gone for a cloth wrap that showed off more skin in a way that wasn’t too obviously sexual, and made the hair very loose, long and straggly. I also gave her two swords, but Patrick felt that a crude sword and shield might work better, so we went with that.
The developed sketch turned out like this. I tried to stay aware that whilst this character needed to be feral and wild, she also had to be quite attractive in her own way. To keep that appeal in there, I pretty much sketched her naked outline and started adding clothes after so as to keep that core feminine silhouette to the design.
Once that got approved I moved onto inking- I ink right on top of my pencils, but I always make sure to have a scanned copy at a decent resolution just in case I slip up. A lot of top inkers recommend brushes to help you get a good line weight into your artwork, this can make your drawings a lot more dynamic and it really helps to give a sense of depth. Originally I just used digital inking via my Wacom tablet, but at my first comic con in Boston, a few editors from DC comics tore my portfolio apart, saying I had great talent but I really needed to use brushes to ink my work. Since then I’ve tried my best to use brushes, but as with all things it’s easier said than done and I ended up ruining a few sketches with spilt ink pots and the like. Now I’ve found a happy medium in the Pentel Brush Pen- which is what it sounds like; a pen with a brush nib. I think it’s designed for Chinese calligraphy or something, but to my mind, there is no better pen out there for inking your artworks (at least for the major lines anyway).
So now my inks are nailed down, it’s time to erase the pencil underneath and get the inks scanned into Photoshop. I use the Levels Tool (Ctrl+L) to try and clean up my image a bit and get rid of any paper grain. Basically I just move the black and white cursors a little closer to the centre until I’m happy with the definition I’m getting. It’s useful to zoom right in here to make sure I don’t have any pencil trails still knocking about. A trick I sometimes also do (but not for this piece) is run my linework through a Live Trace in Illustrator, then just save it as a PDF and open it back up in Photoshop. This can really help smooth out my lines and can make a huge difference if I’m going for that ultra polished look.
For colour I generally duplicate my line layer and set the top one to multiply. For the lower level I go to Select > Colour Range and choose black to select all the lines. Then Select > Modify > Contract and contract by one pixel. Now I invert the selection and delete. This means that the lower layer (which will become my colour layer) has slightly thinner lines than my top layer. This way I can just use the paint bucket tool on my lower level to quickly fill the areas I need with colour. The downside of this is that the lines on the lower layer are now very jagged, but fear not- that top layer is still perfect and will keep the ultra smooth lines. Smart.
Shading wise I do love my gradient tool, but I’m trying to broaden my horizons and so, with that in mind, for this piece I decided to use Copic Markers. Now I’m no pro with these things yet, but I’ve seen some amazing artwork from guys like Adam Hughes and Mahmud Asrar, so I figure it’s well worth my time getting to know them. They’re basically watercolours in a pen minus the mess (are you seeing a pattern here?). Seeing as I wanted this piece to be really gritty, I figured it didn’t matter too much if I wasn’t perfect yet as it’d probably add to the effect I was trying to achieve anyway.
So here’s how I work- I go back to my inks in Photoshop and place a ‘screen’ layer over them and fill it with Non Photo Blue (#A4DDED – thank me later), this changes all my inks to a special type of blue that is really tough for scanners to pick up (meaning the lines won’t show up as much when I scan it back in and I’ll just have my sexy Copic shading). I print this out and then start going over it with the Copics. I only use grey as I already have my basic colours in Photoshop. Copics have two types of grey- warm and cool. Warm is generally for skin and ‘warm’ things, and cool for clothes and ‘cool’ things (duh!), however, for this character I really wanted to make her as pale and cold as us Brits really are and so I swapped them over, using cool greys for the skin and warm greys for the clothes. This contrasts well with the olive skinned Romans I illustrated later.
So the technique I use is just to start with my lightest colour and keep adding until I’m happy. I apply each colour a few times to get really slight gradient differences and then switch up a pen for more defined shadow and light sections. Another cool tip is don’t worry about going outside the lines- we have our perfect inks saved on Photoshop now, so if needs be we can always use that as a mask to clean things up.
Some other gadgets I have are these Sepia pens. Again, these come in warm and cool greys. They’re not quite as washy as the copics but they have a much finer nib and are great for detail.
I use these for any sections that need real precise details like on the leather strips or strongly defined shadow. They’re great for hair as well.
Finally I have a couple of white ink pens for highlighting any areas. Generally I like to do this digitally as these inks can run a bit, but sometimes it can be helpful to get the whites in whilst I’m ‘in the zone’ and am pretty familiar with the illustration and lighting etc…
Now for the fun part; get the Copics scanned in and throw them into Photoshop.
I grey-scale them up with Ctrl+Shift+U to get rid of any colours that have shown up (or not if I like the effect, I call it as I see it depending on the illustration).
I put this layer above my colour layer (but below my smooth ink layer) and set it to multiply. What I’m left with is my digital colour mixed perfectly with my Copic shading. Sweet.
Now is the time to take a good look over the illustration. I often notice some bits I want to be darker or lighter. Not to worry though, I just hide the Copic layer and start editing my original colour layer. I wanted the eyes much darker and I think I wanted the clothes to cast more of a shadow too, so all I did was highlight those sections and darkened them with either the Lightness Bar on the Hue/Saturation Panel (Ctrl+U), or with the Gradient tool set to black.
Likewise I wanted to brighten up a few sections, like on the sword, so I did the same thing but with white. When I’m creating a glow or a shine, I make sure to do it on a new level above my smooth inks, stuff like this really helps blend a work of art and brings a piece together.
I know what you’re thinking- “this chick is way too clean, where’s all the mud we were promised?”. I know, and I’m way ahead of you. I have this great texture in stock from Go Media Arsenal Grime Set 2 pack, I think it’s actually concrete, but it works really well for adding a natural, dirty looking texture to things. Normally when I’m working with textures I like to desaturate them so they taken on the colours of whatever layers I apply them to, but in this case I thought the bluey grey colour worked pretty well (having flashbacks to Braveheart!) so I decided to keep it as is.
To apply the mud effect I simply throw it on above the colour layer, delete any part that isn’t over the skin and set the layer to multiply- this ensures that all the dark bits of the texture stay dark whilst the light bits show through the skin colour underneath. After that it’s just a case of playing with the opacity to get the muddiness to a level I’m happy with, I think I opted for around 50% opacity in this piece. Another cool trick I do here to add a bit of depth and volume is to select the erase tool and a really soft brush with a low opacity and just go to work erasing bits of the mud texture on the parts of the skin that would be either naturally lighter or catch the light (since the mud layer is set to multiply, and only the dark bits are showing through, erasing them will make that area lighter). In this case I erased around the shoulder and hips, as well as on the top of the thigh to make those areas seem a bit more rounded and curved.
Now the brief asked for a character illustration and didn’t really mention anything about backgrounds, but I work to the Bill Beachy mantra of “under promise and over deliver” so whilst not going overboard I am going to try and produce a background that’ll help set the tone for this illustration. [Note: Bill Beachy is also the mastermind behind the best web design firm in Cleveland, Go Media.] The basis for the background is very simple. Another texture from Go Media’s Arsenal, this time from the Rust 3 set with a blue tint and a black gradient coming in from above. I’ve also included just the hint of a pattern from the tribal vector pack in order to make that background a bit more dynamic. Also since the illustration is for a movie called ‘The Northern Mist’ I figured it’s probably a safe bet to put some mist in there too. This is basically created on a layer above the background (but behind the character) by using some of the sexy Smoke and Cloud textures from the Arsenal. I use a few of these mixed together and set the layers to ‘screen’ (removing any blacks from the texture and just showing the white misty goodness), this gives a sense of volume to the mist in a very authentic (and quick!) way.
To add a bit of depth and to create a foreground, I duplicated the mist layer and moved it above the character illustration to give the appearance that my Lady Briton was stood amongst the mist rather than in-front of it. I also added a bit of light in the top left corner to help show off a bit of light direction and some cheeky dust particles to make the light look a bit more dynamic and to add extra depth. One last cool little trick I did here was to put all the character layers in a group (Ctrl+G) and then apply a gradient mask to that group from the ground up, effectively fading out her feet. The result of which made her look as though her feet were disappearing into the mist, but still allowed me to keep the mist fairly fine.
So there it is, my finished Lady Briton illustration. Patrick and the guys from Cohort Pictures were really thrilled with how this, and the other illustrations turned out. In fact, they even hired me again right away to produce a short comic book in lieu of the traditional storyboards, so that they could use it as a marketing tool for the film!
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.
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.
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:
- Write “LOST AND TAKEN” in Massive Dynamite
- Create outlines (right click on the type object > Create outlines) of the type, to convert it to fully editable vector objects
- Switch the font from solid black to a transparent object with a black stroke
- 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).
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.
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.
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.
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.”
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:
- Turn the grid on (CTRL/CMD + ‘)
- Draw a 1.25″ diameter circle
- 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
- Group the line you just drew together (CTRL/CMD + G)
- Copy it and paste it in front (CTRL/CMD + F). Repeat until you form a grid covering the surface of the poster
- 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.
- 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
- Drag it at the bottom of your layer list
- CTRL/CMD + click the pattern layer. Doing this will select the content of the layer. Once it’s selected, copy it
- Let’s add a layer mask to the black and white forest layer
- 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)
- 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.
- Open the texture file you’re interested in
- Drag it onto the poster
- Size and place it according to what you want to achieve
- Desaturate it (SHIFT + CTRL/CMD + U)
- 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
- Sharpen the result a few times (x2 or x3), according to taste (Filter > Sharpen > Sharpen)
- 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.
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
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.
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.
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!
- Create a new layer mask for the typelock group
- 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
- With the selection active, select the layer mask again
- Fill the selection with black (SHIFT + F5 > Black)
- Let’s play the Aged 1 action
- 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)
- Let’s run Aged 2
Some screenshots of the process:
Experiment with levels and other contrast adjustments to make yours unique.
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).
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:
- 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
- On the right side, “Pattern type” should be set to dots, as we’re trying to emulate that offset print effect
- “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.
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!
Simon H. and Jon Savage, Studio Ace of Spade and Editors of the Zine
Hi, Philip Hepler here from 316 Graphics. A few weeks prior to writing this, Jeff Finley and I discussed possibilities for the next Arsenal vector pack. We decided to concept some hot rod elements which later turned into a vector set inspired by the art style of Ed “Big Daddy” Roth. Here’s the design process for this fun vector pack.
For the record, here’s my list of tools I’m working with:
- Plain copy paper
- “col-erase” blue pencils
- Mechanical pencil (.9)
- Light table
- Intuos Wacom tablet
- Adobe Illustrator CS5
- Inexpensive scanner/copier/printer
- 27” iMac
FIRST THINGS FIRST
Since we wanted to be inspired the art style of Ed Roth I did a Google image search for inspiration. I also checked out the official Ed Roth web site ratfink.com. Rat Fink was an anti-Mickey mascot that represented Roth’s attitude and style in the 50’s and 60’s. I always get sucked in to learning more about the artist, and in this case, ended up spending some time checking out his crazy car creations and wild monster hot rod themed illustrations. I ended up with four or five key examples of his work which I printed out and pasted above my drawing table for inspiration. Next I did a little brainstorming and made a list of possible elements for this theme. Some of the elements on my list were chrome pipes, flames, smoking tires, gear shifters, flying eyeballs, and Hot Rod Monsters of course!
PUTTING PENCIL TO PAPER
Next I took the strongest elements on my list and did a rough sketch of each, constantly referencing my inspiration images and imagining how those elements should look in this art style. I’m in the habit of using col-erase pencils to rough sketch my ideas on plain copy paper. The light blue lead of these pencils help me stay loose and general with my sketch so I can get the basic look right and leave the details for the next step. Then I draw over the blue sketch with a mechanical pencil to refine it more and add more detail.
I also use a light box and a fresh sheet of paper to refine and clean up my sketch even further if necessary. With my rough sketch ideas on paper I scanned and saved them as a pdf file and sent them off to Jeff to see what he thought of the elements so far. He replied back quickly that he was digg’n the elements, but also had a great suggestion to make multiple monster heads and facial features as separate elements. This would allow users to make their own Hot Rod Monster “Mr. Potato Head” style with mix and match parts. What a great idea! Now I was really getting excited.
WHAT’S YOUR VECTOR VICTOR?
With Jeff’s feedback and suggestions I did a few more rough element sketches and decided it was time to color them up in Illustrator. I scanned my revised sketches and placed each scan into my Illustrator file on a background template layer. For the more organic shapes of the monster features I used the brush tool with a 3 pt. round calligraphy brush and set the diameter setting to Pressure with a Variation of 3 pt. For the longer smooth strokes and more mechanical elements I used a custom art brush with rounded ends. Using my trusty Wacom tablet, I traced my sketches, trying to emulate the hand inked look of Roth’s illustrations.
Tip: instead of making multiple brushes of different widths for your graphic, you can adjust the thickness of individual brush stroke paths by increasing the stroke weight in the stroke palette. This is a quick way to get variable stroke weights in your graphic without having to duplicate and modify multiple brushes in your brush palette. See the video link below if I’ve lost you.
I also used the Blob Brush tool to fill in larger areas like the monster’s mouths and some quick irregular shapes and details. Feeling good about how the elements looked, I saved another pdf of the vector elements, sent it to Jeff for review, and hoped for the best.
WRAPPING IT UP
Thankfully Jeff loved the elements and how the vector pack turned out! But before I could send him the files I needed to clean up the elements and make everything nice and neat. First I saved a new copy of the file and then selected each element and expanded the appearance of the brush stokes to create objects (Object-Expand Appearance). With all the brush strokes now converted to black filled objects, I used the Unite function to make the objects one shape (Pathfinder window-Unite). For vector pack art like this, uniting the artwork as one shape makes cleaner, neater elements to work with. Just in case I need to go back and adjust or modify something later, I can always go back to my previous file where my brush strokes are still “live” and editable.
Live brush strokes
Brush strokes expanded to objects
Expanded objects united as one composite path.
GOT ALL THAT?
Here’s a video of how one of the elements was drawn in Illustrator, the brush settings I used, and the method to my madness!
I would like to thank Jeff Finley and Go Media for the opportunity to work on this latest vector pack release. It was a lot of fun to draw and I hope it will come in handy for one of your future projects!
This post was written by:
I’m the man behind the curtain at 316 Graphics, a full time freelance graphic art studio specializing in apparel graphics. The emphasis of my work is on hand drawn illustrations and the ability to adapt to a multitude of art styles and looks. Check out 316Graphics.com to view my portfolio, inspiration section, and freebie downloads. I live and work in Thomasville, NC (home of the big chair), love classic cars, and drink a gallon of southern sweet tea every day.