30 March 2013 @ 12:41 am
Tutorial 6 - I'm not quitting  
This tutorial is the first part of my [livejournal.com profile] farscape_20in20 Round 25 mini big bang project. It only earns me half the points, so expect to see another tut OR some FS graphics soon! :>

I picked this icon mostly cause it was my winning one from the previous round. In case there will be another tutorial happening, I'm still open to ideas about which Farscape icon it could be for!



Difficulty: Intermediate? idek it just has a lot of steps :p
Translatable: not really I'm afraid, uses Gradient maps and Vibrance (and also some Topaz but that step is not necessary at all)

Step 1:
I used this screencap:


And resized and cropped it so that it looked like this:



The cap choice and crop reflect the 'sleep' theme from round 24, so I wanted to get as much of his position showing as possible, so I went for a pretty wide crop. I usually cut the backgrounds out anyway so it's not a problem if the cap doesn't fill the whole canvas.

A much bigger problem is that this cap is kinda dark, to put it lightly. THIS IS FARSCAPE ON A GOOD DAY THOUGH. He's not even on the spaceship, it's a hundred times darker up there o_O

Step 2:
In a tutorial for an older icon I would have probably started with a base copy on Screen, but these days I kinda favor Gradient maps and Curves when it comes to brightening stuff, because they are more flexible.
So in this icon, I used one Curves layer with just one point at Output: 210, Input: 108. Eh, don't use Curves this violently though, smaller adjustments in multiple steps would usually be a much better option. But seeing how extreme the darkness in this base was, I had to take extreme measures now if I wanted to get to the actual coloring part anytime soon. :p



Omg I can see him now :O

Step 3:
Next, I try to bring even more brightness to it, while also making the colors much warmer. Time for my favorite adjustment type - a gradient map!
The gradient looks like this - it goes from #e7ba96 to transparent.
Set the layer on Soft Light, 100%.
This washes out some of the details, but it also brings out some much prettier colors so I'd say it's a fair price :p



Step 4:
This is a bit complicated step, but I hope you'll be able to follow my really weird way of thinking here!
I wanted to do something about that washed-outness, and give it some contrast, so I tried a (slightly adjusted) copper gradient - make a gradient map that goes from #fbd8c5 (placement 30%) to #6c2e16 (83%). Should look like this.
Check the 'Reverse' checkbox and put this layer on Soft light, 50%.

Now, make a copymerge layer (ctrl + alt + shift + E), set it on Luminosity 100%, and hide the gradient map layer you just made.
This was basically just an odd way of bringing some contrast into it without changing the colors.



Step 5:
I didn't really have any plan for this icon so now I'm just trying random stuff .___-
Make another gradient map (I meant business when I said they're my favorites!), this time one that looks like this.
Yes it has a billion points but I didn't actually make them, I just used a gradient from a set by elvensword at DA which you can and should download here. Seriously I'm pretty sure all of my tutorials have included and will include these gradients o.O
I'm too lazy to give the numbers for all those points, if you really need this particular gradient just download it, but for this icon any brownish/muted map will do.
Anyway, reverse the gradient and put it on Normal, 20% (and this is why any muted map would have been ok, it's barely even visible...)



Step 6:
Time to give him a new background!
I used the eyedropper tool to pick a lilac color from the bed cover, and made a color fill layer with it.
I then gave the layer a mask
that leaves John and the relevant parts of the bed visible, while filling the whole upper part of the icon.
This isn't really a tutorial about masking, but I definitely recommend using a pressure-sensitive tablet for this stuff, and also zooming in as close as possible without it all becoming just a blur of pixels, using a really small brush and just taking your time with it.



Step 7:
The colors and contrast are starting to be close to what I wanted, so you know what that means - TEXTURE TIME ^___^
I actually used way fewer of them on this icon than I usually do, but the first of them was this one (I'm sorry, I don't know who made it :/):

I Gaussian blurred it a LOT until it looked like this:

and then out the layer on Screen, 50%. This gives the icon some subtle lighting and brightness.

Then, another texture - this one (don't know the maker here either):


blur it too until it looks like this:

Set it on Screen, 50%. This gives a more prominent lighting to the sides. Result:



Step 8:
The textures washed out some of the contrast again, so this step is about making the shadows stronger and giving them some color.
Make a Color balance layer with the settings:
Shadows: 0, -5, 10

Next, make another copymerge layer, Gaussian blur it (I used a radius of 5px), and set this layer on Soft light, 50%.



Step 9:
It's only now that I was starting to get an idea of how I wanted the coloring to look; I noticed that everything is too blue-tinted and nothing really stands out, and I kinda wanted those purple details to pop against something contrasting.
So, make a - you guessed it - Gradient map, this time like this. The points are #210046 at 19%, #c48c11 at 60% and #e9d7b3 at 100%.

Now, make a clipping mask to get this gradient map to only affect the blurred soft light layer directly below it - you can do this by right clicking on the layer's row in the layer palette (not directly on the layer or mask symbols though) and selecting 'Create clipping mask'. Or by holding Alt pressed and clicking between these two layers in the layer palette.

I use things like this very often with my copymerge layers. This step instantly changes the whole coloring - it's not a radical change, necessarily, but makes all the difference for me - suddenly I really like the colors, as there is a clear contrast between the muted brownish tones and the purples and pinks.



Step 10:
Aaaand we're about done with the coloring, time to focus on composition!
The icon isn't half bad as it is, everyone loves some negative space, but it's not very 'me' and I knew I wanted to add text and some composition-y elements from the start. My initial idea was to make some curved or rotated text that would go along the lines of the image, but sometimes random chance gives me other ideas - in this case, I used my texture randomizer (what? every self-respecting iconer geek programs one :p) to give me another texture to use, and it happened to be this one:

by [livejournal.com profile] scoobyatemysnax

I put it on Screen 100% and noticed that the lines really fit the image, because they frame the most important parts, while cutting 'out' the more unnecessary parts of John and his surroundings. (...ok so I can hear a bunch of Crichton fans protesting how this is not true, but let's not go there :D) I liked the new crop much better. However, clearly the angled text would now look like a mess against those lines, so I decided to just follow the texture lines with the text in the end.

I had initially only planned text for the upper part, but the symmetry of the texture just demanded text for the lower part too. However, the uneven colors and shapes in the lower block made me a bit worried, as it would be difficult to find a text color that would stand out well against both the dark and the light areas, so this is how I fixed that:

Create a new empty layer, make a selection that covers that lower block with the rectangular marquee tool, and fill it with a purple picked from one of the pillows so you have a solid color block that looks like this:
Set the layer on Normal, 75%. Then move this layer below the stripey texture layer.



Step 11:
Make a new Vibrance layer with vibrance +50, and set the layer on Color.



Step 12:
Time for text! I lack imagination, so usually my texts fall under one of two categories: lyrics or quotes. This time it was the latter, as I think John's flippant attitude in this scene is both funny and weirdly tragic. I like this quote a lot, plus it was just the right length to fit the two areas here.

First I wrote 'I'm not quitting' in Arial Black. I picked my colors from the image again; 'I'm not' is in #562c6b and 'quitting' in #85506e.
I had to adjust the character parameters a lot to get this text to fit the frame as well as possible; I also used the underline feature to create another line that I thought could look interesting with the already present lines.

When the text looks alright to me, I usually rasterize the layer and Gaussian blur it with the radius of 0.2px, this is just to avoid oversharpened text.



Step 13:
Next I typed the rest of the quote - 'I just can't go on' - and decided to spice things up a bit by changing the font to something quite different, and went for Brush Script Std. The quote looked a bit too short and I didn't want to expand the spacing unreasonably much, so I put the whole thing in parentheses instead to give it the needed extra width.

For this part I picked a skin color from the image - #e9d5c1 - and the rest of my settings looked like this:



Really, as far as text goes, my only real 'general' advice would be to use that damn character panel :D It makes fonts so much more flexible! and don't be afraid of mixing various sizes, fonts, placements, colors etc. The result can be either interesting or chaotic, but it's worth the risk I think!

Next I did the same rasterize-blur thing as with the previous text layer.



Step 14:
While I mostly like the coloring already, I wanted to make it a bit more vibrant and pink. So, make a Curves layer with these points:

Red: O: 43, I: 44 | O: 214, I: 211
Green: O: 37, I: 52 | O: 189, I: 187
Blue: O: 62, I: 58 | O: 187, I: 201



Step 15:
This step is completely optional and doesn't do much, so if you don't have Topaz you can just skip it.
But anyway, I wanted some ~clarity into it all, so i made a copymerge layer, and used some topaz. I think my settings were as follows: strength 1, Threshold 0.2, Radius 4, Accent 1, Radius 0.7, Sharpness 1.2, and for the Texture part I really don't remember what my settings were, I'm sorry :/

Idek what to do with Topaz really so I just use it for really slight adjustments like this. In this case I sorta used it as a sharpening method, but it's not necessarily something I'd recommend cause it's really easy to go over the top.

Anyway, I set my evil Topaz layer on Luminosity 100% (Luminosity because I only wanted the sharpness, not the sometimes occurring random color changes).



Step 16:
Before the final sharpening step, I smudge the parts that are already overly sharp. I zoom in really close again, pick the smudge tool and a 2px brush with 20% strength (you can never be too careful with this - with settings like these the smudging will be slow but much more easily controlled) and carefully smudge over the sharp edges of the pillows, John's arm, and some lines that look like Topaz artifacts beside him.

Next, make a copymerge layer, select everything but the text blocks and make a layer mask (I still don't want overly sharp text!). Use Smart Sharpen on this layer, my settings were 100% and 0.2px, I use these pretty much all the time with icons cause they give a really precise, crisp but not oversharpened result.



Step 17:
One final touch, then we're done! Take this texture again, this time unblurred:

and set it on Screen, opacity 40%, Fill 50%.

DONE!
Result:



The final layer palette looks like this.

I hope this was clear and easy to follow, but if not, please ask any questions that come to your mind! :)
 
 
Current Mood: busy
 
 
( Post a new comment )
[identity profile] bizarra.livejournal.com on March 29th, 2013 11:28 pm (UTC)
Awesome tutorial.

I did a wallpaper, and did the steps for a tutorial as I went... and had the tut half typed up before my surgery. After the surgery and now that I can go back and work on (some) things, I can't remember exactly what I did to finish the tut.. LOL *headdesk*

Hopefully I can either finish it, or do another couple wallpapers. Haha
neonspider: scorpy blur[personal profile] neonspider on March 31st, 2013 11:48 am (UTC)
Thanks, I'm glad you enjoyed the tutorial!
I'm sorry to hear you couldn't remember the rest of the steps, but I see you managed to do some more lovely wallpapers, so it all worked out in the end ^^
[identity profile] raiindust.livejournal.com on March 29th, 2013 11:40 pm (UTC)
Two things.
1. I did not know there was such a thing as Gradients to import and then use freely in PS. This may be my second favourite discovery this tutorial has given me. 2. UM. HOW DO I ACCESS A TEXTURE RANDOMIZER THAT WILL JUST SELECT TEXTURES AT WILL? I neeeeeeed this in my life.

This tutorial is so much fun though. I am really intrigued with how you develop colours in general, and so this was a wonderful insight into how everything comes together. I am definitely now off to explore the pleasure of colouring gradients because they way you used them was pure magic and gold and awesome here, and whenever my muse returns I'm going to absorb everything again because this has so many awesome and new steps for me to explore.
neonspider: kirk half and half[personal profile] neonspider on March 31st, 2013 11:45 am (UTC)
Oh, yes, importable gradients are definitely a thing! And aw, now I really wish I could give you a texture randomizer - I've been trying to program a better version so I could share it with others, but the current version is pretty much only usable for me, as it assumes a certain folder structure. This type of program isn't difficult to make even for beginning programmers though so if you happen to know any geeks with some extra time on their hands, you could ask them, and if not, I should probably be less lazy with that improved version. It really is a nifty little program in the end :)

Thanks for reading and commenting, I'm glad you enjoyed the tutorial!
[identity profile] raiindust.livejournal.com on March 31st, 2013 09:32 pm (UTC)
This is the one time I wish I could claim owner-age of geeks. Unfortunately mine are all gamers who literally spent over an hour on Saturday night discussing how they would survive the zombie Apocalypse. Which I appreciated to no end, and gave me awesome on-the-spot teaching ideas for older classes, but would be potentially useless for a randomizer. LOL. I think I will just sit and admire you even more for being able to craft something like it because just, HOW AMAZING.

In any case, I definitely did enjoy this. And will be looking forward to future tutorials from you so I can learn all your amazing secrets!
neonspider: oswin vibrant2[personal profile] neonspider on April 1st, 2013 11:22 pm (UTC)
Oh, but your geeks still sound really awesome and what you describe sounds like the perfect way of spending a saturday night! I'm glad you think so highly of my programming stuff, but still I assure you such a thing really is easy and almost trivial to make so it's really not worthy of your admiration at all :p

Now I wonder if others would be interested in the program too, cause if so, I'd definitely continue making a shareable version asap. I just always sort of assumed everyone else has a direction in mind when they start an icon, so they know which textures they're going to need, and I'm the only one who needs random chance to decide things for me!

ALSO, my inbox tells me it's your birthday and if this is true, then I really just want to wish you an incredible, fantastic and amazing birthday!! :)
[identity profile] wikidwitch.livejournal.com on April 3rd, 2013 06:07 am (UTC)
I'm going to hijack your conversation for a moment to say that I'd be totally up for your little program! I rarely have any direction when I'm iconing these days and a texture randomiser would be a spectacular edition to my procrastination tools. Throw on the textures and go wild, I say! I have absolutely zip all talent in the technical department but if such a program came my way, I might just swoon and die.

That is all.
neonspider: sheldon loading[personal profile] neonspider on April 3rd, 2013 12:04 pm (UTC)
Oh, thanks for your interest in it - I think that just convinced me to go back to programming it! It might take a while cause I'm having a loooot of uni stuff atm, but I'll definitely keep it in mind and try to get it done. Glad I'm not the only one who has no direction in mind when starting an icon :D
[identity profile] raiindust.livejournal.com on April 3rd, 2013 08:37 pm (UTC)
Yessss they are. I just found that they'd quoted taglines on a facebook post for my birthday and it's totally made my morning. They are the best kind of geeks to have as friends, haha. But um, yessss it is worthy of admiration. When someone can nail something I can't, it deserves admiration, whether it is "easy" or not ... because if it's easy for you it means you are good at what you do. I still can't imagine it would be easy for me.

I honestly think you'd find a lot more icon makers (and to extend the boundaries tumblr makers) would be interested in it. I mean, my reasoning is that I use the same textures over and over, so I'd use it to explore ways in which new textures can be found and loved. Mainly because I have so many textures and at times I feel they aren't always given enough time to be loved. Soooooo if you happen to fall into some spare time, I would love to see something like this happen.

IT WAS, AND I DID! Thank you, haha! (Also, I will reply to your icon post. This week has simply become the busiest week in existence! But soon, hopefully, I can flail like I want to!)
neonspider: rose doctor blocking[personal profile] neonspider on April 3rd, 2013 09:32 pm (UTC)
But um, yessss it is worthy of admiration. When someone can nail something I can't, it deserves admiration, whether it is "easy" or not ... because if it's easy for you it means you are good at what you do. I still can't imagine it would be easy for me.

Oh, well ok, maybe when you put it like that.. :> I still honestly don't think it would be very difficult for you either - if you like maths and problem-solving and things that are logical/deterministic, I think you'd have just the right mindset to be an excellent programmer if you studied it just for a few weeks. Just saying!

But yes, after your comment and the one above, I think I'm convinced. It might take a while, but I'll do it, and let you know if/when I post the link somewhere.
Good to hear you had a great birthday! And LOL, my icon posts are hardly a chore that absolutely need to be commented on, so don't worry about it! besides when have I ever commented to you in any decent time :D

Edited 2013-04-03 09:33 pm (UTC)