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!
First, let’s have a look at our final result:
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.
Open your image and paste it into the file.
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.
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.
Now, click on “Filter” > “Filter Gallery” > “Artistic” > “Film Grain”. Keep the settings the same as shown in the image below.
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”.
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%.
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.”
Select the above layer and click on “Image” > “Adjustments” > “Levels” and keep the settings the same as shown in the image below.
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.”
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.
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%.
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.
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.
Click on “Fill adjustment layer” > “Gradient” and add some gradients with the “Hard light” blending mode.
Create a “Vibrance” adjustment layer and employ the settings shown in the image below.
Once again create a “Color balance” adjustment layer and keep the settings the same as shown in the image below.
Again, create a “Level” adjustment layer and adjust the settings according to the image below.
Then, create a “Brightness & contrast” adjustment layer and adjust the settings according to the following image.
Finally, create a “Selective color” adjustment layer and adjust the settings according to the image below.
Create a new layer, reduce the fill to 0%, and click on “Layer” > “Layers” to add some inner shadow and pattern overlay.
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
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.
Anum is Web and Graphic designer. Addicted to Photoshop and crazy for pixel perfection. She is also an active blogger, sharing her passions, skills and creative details on her blog Websoulz. She loves to connect with the community, sharing the latest design gossips and rolling her eyes on boring trends.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja