explicitClick to confirm you are 18+

Rendering 148: Intro to Retro

ArchilochusJan 29, 2019, 5:34:41 AM
thumb_up9thumb_downmore_vert

I've been doing middling-quality fashwave edits for a while now, and so I made a tutorial on a few common tricks. Instructions are given for Photoshop CC2015, but can be replicated in freeware alternatives.

(downscaled from 3840x4339) 


First thing's first: try to find the highest-resolution variants of all your sources. You'll want that detail with certain effects. Good material is everything with rendering. Keep in mind that we're going to be throwing on some indexing to give it a simpler vibe, so details don't matter too much. Big and bold colors do.


1. Create vectors

Make selections of background and foreground elements to split into different layers, so that you can edit each part and give the look of depth. If you have neat lines, you can use the magnetic lasso, then manually touch up the details. Keep the feathering on 0px so it's sharp; you can always feather parts later.

In the example, I created one selection for the foreground guys, and another for the pillars. Lastly I separate out the frontmost guy, frontmost pillar, and the bench. Then I create duplicates of the background using the selections as masks.

Now here's where you want to have some nice materials to fill in the background and overlay perhiperal portions. Once you get more comfortable with masks, you can do some interesting substitutions.

Top layer


Middle layer


Bottom layer (above BG)


2. Channel shift

This is the easiest way to get that visual doppler you see in so much aesthetics:

-Duplicate the layer you want to shift

-Open the layer style panel

-Deactivate the 'R' channel under advanced blending

-Move the duplicated layer slightly

-Repeat with the 'B' channel in the opposite direction

Tips: Experiment with knocking out the 'G' and layering in different orders. Overlay tends to be the nicest blending for the shifted layers.


Channel-shifted pillars (note middle has its own red-shift)


3. CRT bars

There are plenty of tutorials already for this, but the basic idea is to have a layer of alternating black-and-white bars, which you scale and align with your image, then use overlay blending to slightly shift the luminosity. If you offset them, sometimes an interference pattern can be neat.

You're almost always going to use this over your background, where it won't effect your focus. In this case, I stuck one copy behind the pillars at 30%, then another at 30% behind the front pillar to amplify the appearance of depth.


Composite image so far


4. Neon

Best on text, I decided this image was too crowded to be text-focused. But I still wanted to use a slight neon effect to emphasize the men. There's a lot of flexibility, but I went with the simplest to demonstrate.

-Create a duplicate of your object then move it behind the original

-Open the layer style panel

-Pick a nice neon color

-Stroke: 10px, inside, normal/100%; use a gradient with color on the ends and white in the center.

-Inner shadow: Screen with color, 30%, 24px 10% 34px; the contour will determine how many waves the "halo" effect has.

-Outer glow: Screen with color, 70% opacity, softer, 0% 47px, exponential contour with 50% range.

As a last touch, I drew some text on the front pillar and threw some neon on it.

The top and middle layers with neon


5. Indexing

At this point, we have a pretty stylish image, but it's a big noisy and the textures are all over the place. We fix that, and add extra retro points, by using an indexed color mode. Because this is destructive, save and export the image first, and work off a copy. What this does is restrict the number of colors the image can use.

-Image>Mode>Indexed Color

-Palette: Local (adaptive)

-Forced:None (can prioritize primaries or grayscale tones)

The biggest differences are visible with fewer colors.

-2 creates a dramatic two-tone image, and works great on unedited sources.

-3-6 add intermediary shades

-7-12 begin allowing in color

-13+ allow more

Here I went with 36, which balanced skin-tones against simplicity. Now the sort-of posterized effect that results can be desirable, but dithering gives us more options.

-Diffusion softens the edges between colors and makes the image smoother.

-Pattern overlays a dot texture similar to an old LCD display.

-Noise is pure noise, and gives the roughest look.

The pattern and noise options are more visible with smaller images; pattern in particular is nice with simple images where one can appreciate the contours, while diffusion is for when you want to preserve more nuance. Because of the faces with this image, I went with a diffusion of about 30%.


The original, full-res full-color result


The indexed result


Final notes

You usually don't want to use all of these techniques in one image; I did so for demonstration purposes. Often one or two will suffice to give it a bit of pop without being overwhelming. Using one effect in one part and another in a second is more dramatic than layering them all on top of each other. Most importantly, these are just a sampling of techniques, and continuing to learn new ones and experiment is key to advancement. Stay tuned for my upcoming tutorial on glitching, aka databending, which in exchange for a lot more work offers limitless upward potential.