#gfx tutorial

First, we must notice that skin colours (even paler ones) are shade variations of yellows and reds. If we check the hex code colour/colour pointer on the colour wheel, we will see that Candace's skin colour is at the intersection between red and yellow, and is on the lighter/less saturated part.

Here, I am deepening/saturating the blues of her clothes by creating a Hue/Saturation layer, changing from Master > Blues and adjusting the Hue and Saturation values. Colour theory basics: opposing colours on the colour wheels will give a more significant idea of contrast; the bluer colours will appear colder, and the warmer colours will appear hotter and, therefore, more saturated.

In this second step, I am creating a Selective Colour layer, focusing on the Reds. I want this to be highly reddish for now, so I'm lowering the Cyans to the minimum values I can. Notice how the colour wheel pointers went down, meaning we are in a redder, more saturated and more precise zone. The darker the skin, the redder its colours will be in pictures.

Thirdly, I am now creating a Colour Balance layer. Since I want to adjust the warmer colours (e.g., Reds), I am adding more reds, magentas, and yellows.

The exact process I did for Candace's clothes, I'll do for her accessories. Her accessories blended too much with her skin tone (hex code-wise and I imagine that for the normal eye, too). So, to make the yellows on her accessories pop and be more different from her skin, I created yet another Hue/Saturation layer and changed from Master > Yellows, altering the Hues, Saturation and Lightness values.

Now that we have the image's primary colours (blues, reds, yellows) separated, it is time to deepen/saturate the reds. So here, I made another Selective Colour layer, also focusing on the Reds. Notice that now I'm also increasing the Cyan values. Why? Because Cyans make the reds look darker, and I want exactly that. So everything will increase in value.

To further deepen these colours, I created a Curves Layer and tweaked each RGB curve. I made the blues lighter; meanwhile, the greens and reds went darker. Again, colour theory! Notice on the colour wheel that her skin is extremely red and saturated. This is precisely what I want. Why? Well...

... Because now, by using a Selective Colour layer again, I can make her skin magentaish. Pure magentas are rare in pictures, even fantasy/2D characters. Generally, you will find variations of purples, pinks or reds, but magentas are more difficult to find. Therefore, they're easier to work with/edit. Even if the character had magenta colours, we could've isolated them beforehand, too. This step guarantees that my PSD will solely focus on her skin tone, basically.

Our final step is to create another Hue/Saturation layer and change the setting from Master > Magentas. We will decrease the Saturation and Lightness values and slide the Hue bar to the right. And now, check the colour wheel: it's a beautiful dark brown! It's popping a lot against the yellows and blues. ~

This is where we started vs where we finished!

So there you have it! A speedy but hopefully informative tutorial on how colouring PSD works and how you can quickly love your characters a bit more when doing edits and graphics for them!

Again, please consider reblogging, liking this post, and/or supporting me on ko-fi if this helped you! That way, I can keep bringing you tutorials like this faster and more effectively. ~

⁕ GUIDE:

1. Open/place your picture of your choice on PS. For this set, I took a screenshot from the MV using VLC. Didn't bother to take it from VS.

You need a black & white picture with dense shadow/black shade and focused highlight to achieve this effect. If your base is as colorful and bright as a 4 year old's imagination about the world of unicorns, you gotta need some adjustments. The effect still appears but give a totally different vibe. I put an example at the end of the tutorial.

2. Then, do the basic sharpening and resizing for the base layer. I crop them to 540x540px.

3. Copy the base layer and delete the sharpening smart filters. Double click the layer to open Layer Style panel.

On General Blending, change the Blend Mode to Lighten. On Advanced Blending, uncheck the Green (G) and Blue (B) channels, so you'll be left with Red (R) channel. And then, move the picture to the right because you want the red shadow to "trail" Seonghwa (your subject)'s movement.

Your pic will look somehow like this:

4. Go to Filter > Blur Gallery > Path Blur. The default option is usually Basic Blur. Change the option to Rear Sync Flash.

Now, you have to decide the direction of the "red trail". This is quite tricky because it's better if you apply the blur with the subject's real movement in mind. In this example, I imagined Hwa was swaying to the left in slow motion as he restrained from being dragged away. So, my path's starting point is from the left.

Once you've decided, click on a random point to pin a starting point and stretch the arrow to your desirable distance. You can also curve the arrow to give a more, well, fancy direction.

I set the Speed to 146% and the Taper to 17%. Uncheck everything else.

*Hover over the word "Speed" and "Taper" to know what it'll do to your pic

**If you wanna know more about Rear Sync or Rear Curtain Flash in photography [x]

5. After this part, basically you're free to do whatever with your gfx. These steps below are OPTIONAL.

5-a. First, I adjusted the lighting and contrast.

5-b. Then, I added text.

5-c. After that, I placed a lined texture. I set the blending to Overlay with 82% Opacity and gave it a Basic Blur effect from Path Blur. I definitely just fuckin around with this step and found out that it changed the opacity of the lines depending on where it's applied on: shadow, midtone, or highlight parts.

5-d. Lastly, add grains texture

Et voila! You'll get this effect 🤩

Now, if you have a bright, colorful pic as the base. For example, I use this The Real Hwa dontevenaskmehowmanypicsofhwaihaveinmyputer. The "highlight" part (the sky) is surrounding the "shadow" (Hwa in hanbok). Then, I applied the same effect.

Still slay but definitely not as "dramatic" and intense as the dark mode version. Kinda lose the purpose of the trail to me. HOWEVER. I encourage you to fuck around and improvise 👍

1. make a white (#FFFFFF) document that’s 800 (width) by 1200 (height) pixels. the size itself doesn’t matter—it just depends on how big you want your receipt!

2. add the text wangsheng funeral parlor, liyue harbor, archon to the top of the document. the text should be centred and near the top. all of my text was capitalized.

font: monaco

size: 13 pt

3. add the name of the character this receipt is for under the first sections of text! this should also be centred! 

font: carlanta bold script

size: 66 pt

4. add a date.

font: monaco

size: 15 pt

5. make a dotted line using the line tool under the text. 

colour: #797979

6. add the text QTY, ITEM, AMT under the line. then, duplicate the line and add it under the text.

7. add the contents of the receipt! all the content should line up according to the titles above them!

font: monaco

size: 13 pt

8. add the text item count and total along with their respective numbers. duplicate the same dotted line and place it under all of it.

font: monaco

size: 13 pt

9. add the text thank you for rolling! under the line.

font: monaco

size: 19 pt

10. add a bar code to the bottom of the receipt. i made mine using a variety of different lines with the line tool!

the barcode: (x)

11. add a wrinkled paper texture on top of everything. set it to linear burn. 

paper texture: (x)

first make sure if you use actions or sharpening in photoshop to save it for the end!! if you sharpen it before the end it’s ok!! there’s just an extra step you have to do instead. so we first have our gif (this is has a width of 177px and as a crop proportion of 4 x 5:

then make sure your’re in timeline!

and convert the gif layers into a smart object by highlighting all the (frame layers) and right click to select ‘convert to smart object’

now the gif layers are all in one

next were going to make the bar that separates the colored part of the gif and the b&w portion. so create a new file with a width of greater then 177px and a height of 4px

then take that layer in the new file and drag and drop it into your gif file

and now the gif has the white bar in it!! (if it’s not center use the marquee tool, drag the box that surrounds the entire gif, hit the ‘v’ key and use the vertical center align)

next take the marquee tool (the ‘m’ key) and click and drag the box to select the entire gif. with the layer with the white bar selected, nudge it left with arrow key and nudge it back with the right arrow key. so the white bar layer should be selected.

next select the gif (smart object) layer and were going to create a layer mask for it by click the icon and the bottom of the layer panel

once you do this, the white bar is the only thing there so select the layer mask of that layer and hit command + i (for mac) and ctrl + i (for windows) to invert the layer mask

and hide or delete the white bar layer so how the gif is transparent where the bar was

next create a new gradient map layer

i used black and white but you can use whatever you want!! so now the gif looks like this

to make it half colored and half b&w use the marquee tool again and drag around the half you want colored (for this one the bottom)

then select the layer mask of the gradient map layer, use the brush tool (make sure the color is black) and paint the layer mask. the layer mask should look like this

then the last part is to just add your text (intro was used for this) and use any sharping or actions on the gif

You’re gonna first start with making you gifs. If you don’t know how to make one, I made a detailed tutorial on how to make a gif

here

. Keep in mind for best results you’ll want to choose scenes that have a decently solid background, and what ever is black, the top layer will show up on. Once you make your gifs we’ll have this:

Once you make your gifs, save it like would be ready to post it online, and then reopen them in photoshop again:

once you open both gifs, you’ll want to change it to timeline again:

once you made it to timeline, highlight all of the layers and convert it to a smart object:

once you convert both gifs to a smart object in timeline, take one of the gifs and drag the layers onto the other:

next this we’re gonna do is highlight and duplicate the top gif. if you’re unsure which one you want to have on top, for this example the top layer is the one that has the white lines. wherever black is on the top gif will reveal what’s under it. now the layers should look like this:

for this next step we’re going to make the lines on the top gif. with the top layer highlighted, we’re going to apply a smart blur. to do this go to filter > blur > smart blur:

then this window should pop up:

for the line effect we want change the quality to hight and the mode to edge only:

now it looks like this:

then change the blending mode for the later to lighten:

then we should have this:

next we’re going to add the gradiant map for the top layer:

for this top one i made it yellow and black:

and the layers should look like this:

for this next part we’re going to apply the gradient map to only the top gif layer by creating a clipping mask. highlight the gradient map layer, right click, and click create clipping mask:

after this change the blending mode to the top gif later to exclusion:

now the gif should look like this:

next we’re going to add a gradient map layer for the first gif layer. for this layer i choose a blue/green color with black:

now the gif looks like this:

now just add the text on top: