Give Your Ordinary Imagery a Stylized Comic Book Look

The most effective designs are those that tell a story. Storytelling resonates with customers of all kinds, and contextualizing their needs or your (client’s) products and services into such a narrative is a proven, effective strategy. Everyone likes to consider themselves the hero of their own story, which makes dramatizing ordinary imagery with stylized comic book effects a worthy option for a wide variety of projects.

Designers and artists have used the style quite heavily in advertising, and for good reason. Decades have passed since the peak of comic book popularity, but don’t let that discourage you; those who relished comic books long ago at a young age are now potential customers with far more disposable income.

Today, I will show you how to give your photos a comic strip style using Photoshop. We will use some interesting tools and filters to achieve the desired result. So let’s start!

Resources:

Ninja image by Drayke Larson

Subtle Patterns Set

Halftone brushes

Rays Brushes

Comic book Font

(Download the finished, layered PSD file.)

First, let’s have a look at our final result:

final

Step 1:

Open Photoshop and create a new file with a 1000px width and a 1024px height. You can adjust the size as you want and according to your photos.

Step-1

Step 2:

Open your image and paste it into the file.

Step-2

Step 3:

As you can see, our image size is smaller than our canvas, so we will fill the empty space with the similar base color using the Paint Bucket Tool.

Step-3

Step 4:

Now we will start with the effects, so duplicate the image layer by right-clicking on the image layer and selecting “Duplicate layer” (or you can press CMD/​Ctrl + “J”).

Select the image layer and click on “Filter” > “Oil Painting” and adjust the options to stylization 1.34, cleanliness 0.5, scale 0.8, bristle detail 10, direction 300, and shin 0.25. You should make additional adjustments according to your image and what suits it best.

Step-4

Step 5:

Now, click on “Filter” > “Filter Gallery” > “Artistic” > “Film Grain”. Keep the settings the same as shown in the image below.

Step-5

Step 6:

Select the background image layer and duplicate it. You can accomplish this by right-clicking on the layer and selecting “Duplicate layer” or by pressing CMD/​Ctrl + “J”.

Now, click on “Image” > “Adjustments” > “Black & White” and click “OK”.

Step-6

Step 7:

Select the above layer and click on “Filter” > “Stylize” > “Trace contour.” Adjust the settings by setting the level at 30 and selecting “Lower edge.”

Now, change the blending mode of the layer to “Overlay” and reduce the opacity to 30%.

Step-7

Step 8:

Once again, duplicate the background layer (by right-clicking on the layer and selecting “Duplicate layer” or pressing CMD/​Ctrl + “J”) and place it on top. Then, select the new layer and click on “Filter” > “Filter gallery” > “Sketch” > “Bas relief” and adjust the settings with 13 for details and 1 for smoothness.

Now, change the blending mode of this layer to “Overlay.”

Step-8

Step 9:

Select the above layer and click on “Image” > “Adjustments” > “Levels” and keep the settings the same as shown in the image below.

Step-9

Step 10:

Create a new layer, click on “Layer” > “New” > “Layer” or click on the new layer option within the layer panel. Now, select one of the halftone brushes I’ve included in the resources and use it on the side with color #eaeaea. Then, change the blending mode of the layer to “Overlay.”

Step-10

Step 11:

Now let’s create the text bubble and title, so select the Pen Tool and create a shape. Fill the shape with color #d5652c. Then select the layer and click on “Layer” > “Layer style” and add both Stroke and Drop Shadow. Use the settings shown in the images below.

Step-11a

Step-11b

Step 12:

Using the same technique, select thee Rectangle Tool and create a rectangle. Fill it with color #364370. Then, click on “Layer” > “New” > “Layer” (or click on the “New layer” option from the layer panel), select a halftone brush, and use on both shapes. Change the blending mode of this layer to “Soft light” and reduce the opacity to 70%.

Step-12

Step 13:

Duplicate the background layer with a trace contour filter applied and place the new duplicate on top of the orignal layer. Then, click on “Filter” > “Pixelate” > “Color halftone”. Then, change the blending mode to “Overlay” and reduce the opacity to 45%.

Select the Eraser Tool and use it where you want to reduce the halftone style.

Step-13

Step 14:

Create a new layer and select one of the rays brushes I’ve included in the resources above with color #ffffff. Then, change the blending mode of the layer to “Soft light.”

Now, add text to the shapes that we’ve created before and click on “Layer styles” to add a 3px stroke to the text.

Step-14

Step 15:

Click on “Fill adjustment layer” > “Gradient” and add some gradients with the “Hard light” blending mode.

Step-15

Step 16:

Create a “Vibrance” adjustment layer and employ the settings shown in the image below.

Step-16a1

Once again create a “Color balance” adjustment layer and keep the settings the same as shown in the image below.

Step-16b

Again, create a “Level” adjustment layer and adjust the settings according to the image below.

Step-16c

Then, create a “Brightness & contrast” adjustment layer and adjust the settings according to the following image.

Step-16d

Finally, create a “Selective color” adjustment layer and adjust the settings according to the image below.

Step-16e

Step 17:

Create a new layer, reduce the fill to 0%, and click on “Layer” > “Layers” to add some inner shadow and pattern overlay.

Step-17a

Step-17b

Step 18:

Now we will create a white frame using the Line Tool. Select the Line Tool with a 5px weight and create a frame using color #ffffff. We are all done; our retro comic style is complete

Step-18

I hope you guys enjoyed the tutorial. Stylized, dramatized comic book panels are timeless and they resonate with a large demographic. I hope you find a great use for the technique.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • i alarmed alien

    Great tutorial! I love that grainy retro comic look.

    For anyone seeking good quality comic book typefaces, I highly recommend Blambot, blambot.com. There are lots of excellent quality fonts in many different styles available for free. I love them!