How To Create a Grand Theft Auto (GTA 5) Effect in Photoshop (+ FREE PS Action!)

Hello everyone this is Chris from Spoon Graphics back with another video tutorial for Adobe Photoshop Today we're going to look at creating a photo effect inspired by the loading screens and cover artwork of the Grand Theft Auto 5 game, which feature a life-like illustration style of the characters but with a clear digitally painted appearance

I kind of wish I'd covered this topic back during the game's prime, but it has become a classic effect that remains popular for creating tribute art and parodies The result could also be used as a foundation for creating a cartoon or comic book effect too Due to the nature and theme of the game, the effect works best when combined with pictures of gangsters, fast cars and scantily dressed ladies against the city streets Whereas the originals were likely painted from scratch, we'll use stock photos as the source of the effect, which will then be transformed with the help of a cocktail of Photoshop filters Each filter produces an important part of the overall result, and together they replicate the digitally illustrated look perfectly

But before we begin, a big thank you to Envato Elements for sponsoring today's video So to create the GTA photo effect, begin by opening your desired source image into Adobe Photoshop

You can find this free image I've used linked in the description The first step is to right click the Background layer and convert it into a Smart Object This will allow all the filters to be applied non-destructively, so the settings can be altered if necessary Begin with a Shadows and Highlights adjustment from under the Image > Adjustments menu I'm assuming this array of settings are set by default

So simply click OK What this step does is brighten up the photo to bring out the details from the darker areas Next, go to Filter > Stylize > Oil Paint Configure the settings to 2 in the Stylization option and max out the cleanliness to 10 Leave all other values at zero with no Lighting effects

This oil paint step seriously smooths out the image, so the niggly details aren't enhanced with the next filter, which is applied from the Filter > Filter Gallery menu In the Filter Gallery window, choose Poster Edges Configure the settings to 0 Edge Thickness, 1 Edge Intensity, then max the Posterization to 6 If you want more of a comic book effect with a cell-shaded appearance, you can try out lower posterization values The Poster Edges filter helps add some line work to enhance the illustrated appearance

Even though everything was smoothed out with the oil paint filter, some areas are too detailed with unwanted texturing Double Click the little icon next to the smart filter in the layers panel, then drop the opacity to around 60% so the texturing is less visible A great filter that helps clean up those unwanted lines is Reduce Noise from under the Filter > Noise menu Max out the Strength to 10 with all other sliders at zero A side effect of the noise reduction is everything is now slightly blurry, so go to Filter > Sharpen > Unsharp Mask

Enter values of 70% Amount with a Radius of 4px, which helps bring back some definition to the edges Filter > Blur > Smart Blur is another great filter that helps smooth out the unwanted details Set the options to 4 Radius and 25 Threshold, with the Quality option set to Low One last addition that really brings the effect to life is another effect from the Filter Gallery This time choose Cutout and set the values to 4, 4 and 2

Depending on the lighting of your image, you can play around with the number of levels to find a better array of shapes Once applied, change the options for this Smart Filter by double clicking the little icon Set the blending mode to Soft Light and reduce the opacity to 50% to enhance the shading of the artwork The basic effect is complete, but adding a complementary backdrop really finishes off the artwork Open up a photo of a city street, like this shot of LOS ANGELES, CALIFORNIA by Sean Pavone from Shutterstock

Follow the exact same steps to reproduce the effect on this background image To save some time in this tutorial, I've created a Photoshop Action which will automatically apply the filters You're welcome to download it for yourself by following the link in the description Add a new layer and use the colour picker to choose a hue from the image to use as a colour cast Use the ALT+Backspace shortcut to fill the canvas, then set this layer's blending mode to Screen

Reduce the opacity to fine tune the amount of colour grading Switch back to the original document to copy across the model Since we'll want to add a stroked outline later, any easy selection method isn't going to generate nice smooth edges, so to cut out the subject from the background, the Pen tool is going to be the way to go Double click the Smart Object layer's thumbnail to access the original source photograph Select the Pen tool and zoom in, then trace around the entire subject, staying a few pixels towards the inside to avoid capturing any slithers of background in the clipping

Any loose strand of hair can be excluded to keep a basic silhouette Click and drag to form simple bends, then if you need to navigate around a sharper corner, give the point a click while holding the alt key to remove the bezier handles before continuing Once your path is complete, right click and choose Make Selection with 0 feathering Apply a layer mask to have the background erased around the selection To erase any negative space, make selections of those paths and fill the area with black within the layer mask

Go to File > Save to have the new source file updated within the main document with the same filters applied This PSB file can then be closed Go to Select > All followed by Edit > Copy Merged to capture a snapshot of the artwork, then paste it into the city scene document Scale it to size and move it into position A great little trick to easily colour match the clipped image to its new background is using a Curves adjustment layer

Hold the ALT key and click between the layers to clip the effect to just this layer By default the adjustment layer's layer mask is activated, so give the actual layer icon a click to select it instead, then in the Properties panel, hold the ALT key and click the AUTO button Choose Find Dark and Light Colors from the options, then colour pick three new hues for the Shadows, Midtones and Highlights, choosing relevant colours from the background Change the blending mode of the Curves adjustment layer to Colour, then alter the opacity if necessary to blend the subject with its new environment To add a Stroke, double click the subject's layer to open the Layer Styles window, then select Stroke

Configure the settings to Outside, then adjust the stroke amount I ended up with about 6-7px Sample the stroke colour from the darkest part of the image, rather than simply choosing pure black The final result is a great recreation of the GTA 5 art style that retains the realism of the source photograph but processes it with enough filters to give it a digitally painted appearance If you enjoyed this tutorial or found the tips useful be sure to give the video a Like and subscribe to my channel to stick around for more of my content

Head over to my Spoon Graphics website to grab my free design resources bundle, otherwise thank you very much for watching, and I'll see you in the next one

1 Comment

  1. Hey,
    first of all, thanks for all of your tutorials and your good work!
    So today I found this effect, so I really wanted to try it out. So I downloaded this Action, since I got no time atm to try it manually (will do later). Picked the same picture as showed in the video, got the action on it… But it didn’t even looked like yours, did I something wrong?
    (A Screenshot of it: https://i.gyazo.com/d9e4c02a8d4b7fbd67625a31bf7701f7.png)

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.