Hey readers! It’s been a while since we’ve featured a tutorial. We’re bringing back Tutorial Tuesdays with something fresh off the press. Hopefully you’ll be able to lift of some design inspiration from this one. So let me preface this tutorial by saying that this writer is a huge fan of Marvel. I was a little ball of exitement when I learned that a new issue of Matt Fraction’s Hawkeye #16 got released on the 22nd. I’ve been following Aja and Fraction’s work for a while now. It’s a great mesh of storytelling and it features some really stylistic art.
Fraction’s Hawkeye is not only armed with a bow and arrow, but with rather often hilarious quips.
IMAGE SET SOURCE: TUMBLR.
Another really great thing about these comics is that the covers of are done by the spectacular David Aja. Aja does a great job giving a vector based/graphic designer feel to his covers. Here are a few of the covers he designed for the 2012 Hawkeye!
Hawkeye #1 is a pretty good starting point if you’ve been interested in getting into Marvel but have-no-idea-where-to-start, there-are-too-many-universes, and how-does-time-even-function-in-Marvel. You can pick up a copy here!
You can also check out Aja’s Blog, Portfolio and Twitter for more of his stuff.
I wanted to see if it was possible to re-create the effect using image manipulation. And ended up with a few pretty interesting results.
Now, we’ll be re-creating the second picture for the sake of this tutorial.
PART 1. OPEN YOUR FILES AND PREPARE YOUR DOCUMENT.
Prepare your document! Ideally, I wanted this to be a poster but this can work for any printing/web output. I grabbed the free poster template from uPrint and got started. I then fired up Photoshop and Illustrator. I opened up three stock pictures, two of an archer and one city-scape. My Photoshop window looked something like this:
I grouped the print guides together and put them in a Group called: “for when finished” – so that when I was done with the image, I could print it out and hang it up on my wall.
PART 2. CLEAN UP YOUR SUBJECTS.
Now, since I’m 95.5% most of you will be using different photos to apply this effect. It helps quite a bit if you use images with minimal background. If you do have a cluttered background in your image, changing the background to a solid color or cleaning it up altogether might work out nicer. This is however aesthetic preference more than anything. Please do feel free to play around with all the settings.
I placed the images of the two archer girls on my document. Now, what I did here is that – using the Magic Wand tool – I highlighted all the areas of the background. I hit Invert Selection (Either CTRL/CMD+SHIFT+I Or Select > Inverse Selection). Then I clicked the layer mask tool at the bottom of the layers panel; masking the background. I changed the name of these layers (by clicking on their name in the layers panel), to archer one and archer two.
PART 3. MAKE IT HIGH CONTRAST AND BLACK AND WHITE.
All images are not created equally, so there might be variations on this step depending on what you’re working with. Please play with the settings and try to mix and match until it looks close. Then next thing we’re going to do is to put archer one and archer two in a group. We then create some adjustment layers to prep our image further.
On the menu bar, go to: Layer > New Adjustment Layer > Curves. There should be a little drop down-menu that opens up. Go to it and select the preset “Increase Contrast”.
Then go back to Layer > New Adjustment Layer > Brightness/Contrast and try to achieve a vibrant, high contrast effect like the one below. I used Brightness 45 and Contrast 100.
Hit D, so you have your default colors selected. Open up Layer > New Adjustment Layer > Gradient Map. Apply the Black and White gradient to turn the image black and white.
Then hit, Layer > New Adjustment Layer > Levels. What you want ideally, is black and white high-contrast image with very minimal shadows. The settings I used were: 100, 0.57, 255.
And the final adjustment layer for this step, Layer > New Adjustment Layer > Posterize. On the slider that says levels, I used 17.
PART 4. MAKE IT LOOK LIKE A COMIC BOOK.
You now want to select both layers with the archer, right click and select: “Convert to Smart Object.” Now, select the four layers on top and hit ‘Create Clipping Mask’. This will isolate the adjustments we’ve made and make it easier to edit in the future.
My screen and layers panel looked like this:
Now, we duplicate the group and hit CTRL/CMD+E to merge the layers together. Select the merged layer – Group 1 copy – and go to Layer > Pixelate > Color Halftone. I didn’t change any of the settings apart from the Max Radius (making it 10 pixels). I then set that layer to soft light at opacity 80%.
On the same layer, go to Layer > Layer Style > Layer Effects > Color Overlay. I chose a purple and set the blend mode to ‘Linear Burn’ at 50% Opacity. You can chose any color you think would good! I then created another layer and filled it with purple. I set that layer to lighten. This would give the image more tone.
PART 5. BACKGROUND
I then added a new transparent layer at the bottom. I filled it with a radial gradient, fading between any pink or purple and slapped it on there.
I added a new layer and pasted in the stock photo of the city from earlier and set it to Color Dodge. I also hit CMD+SHIFT+U, to convert it to black and white. Now the photo seemed a lot busier. I then grouped everything (except the group where I put the print proofing) together. I named the group: img.
STEP 5. HONEY COMB
I then opened Illustrator. I now created a new document (any size, or orientation). Using the Polygon tool (click the shapes until you see a polygon) and drew some polygons.
I kept SMART GUIDE on (CTRL/CMD+U) so the polygons would snap and be consistent when it came to alignment. Eventually I had a honeycomb type pattern, like below:
I selected everything. Hit CTRL/CMD + C and went back to Photoshop. I pressed CTRL/CMD + V and pasted it in a blank layer. I pasted it as ‘PIXELS’. Play around with the honey comb until you find a decent size/proportion that works with your images.
I then duplicated the group and merged it into a layer. Below the honey comb layer, I filled it with white.
I moved the merged layer on-top of the honey comb layer, right clicked and pressed, “Create Clipping Mask’. Now the image should only be visible on the honeycomb.
Move the top layer around until you find something that works for you. You can also delete the polygons you don’t need. At the end of it, I had something like this:
PART 6. END RESULT.
There are a few things now you can do to make the image more appealing. Such as adding typography, textures or shapes.
To change the color of individual polygons, you select the layer with the pattern and select the polygon you want to change. You then create a new layer and fill the selected it with the color of choice and set it to linear light and play with the opacity.
Play with the settings, the shapes and see what works with your images and what doesn’t!
This was my end result:
We hope this tutorial has helped you in some way! Whether you liked it, loved it or thought you could have done it better – let us know in the comments. We’d absolutely love to see what you do with it We will also accept some Hawkguy love or protests to Marvel Studios about why there isn’t a Hawkeye movie. If you see any designs you like and want to know how it’s done, feel free to link us below and we’ll take a shot at recreating it. Let us know what you think in the comments!