Previous Entry | Next Entry

Tis my latest contribution to the fireflicons community, and I thought I'd share the tutorial here in case anyone finds it of interest.





The following events take place in Photoshop 7 and its sister program, Image Ready. Questions encouraged.

x. First I rotated Nanda and Mal four or five hundred degrees around and around until I found an angle I liked. I *think* this is rotated 90 degrees CCW, and then rotated 20 degrees CW twice, and then rotated 7 degrees CCW. There's some math in there that'll give up the final angle, but that's more math than I'm capable of. Mostly I just swung it around until I had what felt like the right predatory angle, where Mal was obviously leaning in to kiss her, and where I liked the implied angle of the light source.

x. Then I cropped the image, but the angle I'd chosen made the 100x100 crop such that it left two corners blank -- the image wasn't big enough for the crop I wanted to fill the square. So I cropped, and then used the paintbrush and blur tools to fill in the corners with colors that matched the image -- near Nanda's bangs, and down near her neck. Fortunately, the image was so dark that my paintbrush kung-fu totally blended right in.

x. Sharpened the image twice, then went to Edit >> Fade Sharpen for the second sharpen, set the filter to "luminosity" (because someone once told me to) and wiggled the fader up and down until they were sharp but not overpixellated.

x. Duplicated the image three times, set the lower two on Screen and the upper one on Soft Light. Desaturated the Soft Lighted layer completely, and desaturated the top screen layer almost completely, and cranked up the contrast on the bottom screen layer, as this was a pretty dark image to begin with and I wanted to really draw their faces out from the gloom.

x. Then I utilized the marvel that is a blue square set on Exclusion, which does a great job muting the overexposed glow of the screen layer, and knocks out the higher-end yellows and oranges and apricots. I inserted it between the top screen layer and the soft light layer (thanks to a tip from dtissagirl ), and then dialed down the opacity on the various layers till I had the balance I wanted. The blue Exclusion layer creates a kind of diffuse de-contrasted effect to the whole image, so it's good to have the soft light layer on top of it, to make the brights brighter and the blacks blacker (it's laundry day at Casa del Sab!).

x. Once all the levels were set, and my base image was lookin' the way I liked it, I merged visible.

x. All that desaturating and layering and whatnot sort of made the image monochromatic, and I lost some of the color in Nanda's eye. So, I selected just the eye with the selection tool, went to Image >> Adjust >> Variations and made it one click more cyan and one click more green. When I zoomed in, of course, some of her eyelid and the white of her eye had also been greened, so I used a white paintbrush and a brown paintbrush, respectively, to repaint those areas their normal color.

x. Then it was time for brushes! I have a couple usual strategies with texture brushes -- usually I make a square of color underneath my image layer, and then use the brush (set on some sub-100% opacity) in eraser mode to erase sections of the image, allowing the square of color to show through. In this case, rather than using a square of color, I duplicated my original image twice so I had three identical images. Then I picked two brushes I liked (made, I believe, by oxoniensis but I wouldn't swear to it) -- a dotted one and a grid-type one.

I stamped the dotted brush on the first duplicate layer (using it as an eraser), at about 58% opacity. I stamped the grid brush on the top duplicate layer, also as an eraser, at about 40% opacity. Of course, because all three layers were identical, none of the brushes showed up -- rather, what the eraser revealed under the layer was just more identical layer. SO, what I wanted to do was make the layers slightly different from one another, so that the eraser effects would show through in some subtle fashion. SO, I selected the top layer and went to Image >> Adjust >> Variations and made it one click more yellow, and one click darker. Now that it was a different color and opacity from the layer below it, the brush showed up. Then I selected the middle layer and made it one click more cyan, in variations, and now all my brushes showed up, and my image had some subtle color effects I liked.

Using the normal strategy of erasing a layer over a solid square is not to be sneezed at, but I felt I wanted more subtle brushwork here, especially since I wanted to layer two 100x100 brushes atop one another.

I set the middle layer, the dotted layer, to Screen mode, and the top layer, the grid layer, to Overlay. Then I nudged the master opacities of the layers, found a balance I liked, and merged down once more.

x. Now for a border. This is a strategy I employ a lot, because it gives me control over a grungy border rather than having to rely on a pre-fab one. I made a new layer above my base image, then drew a square, with the selection tool, roughly five pixels in, all around, from the icon's natural border. Then went to Select >> Inverse, so I had the five-pixel-wide border area selected. Using the paint bucket tool, I filled the border with red paint, and now had a new layer with a 5px border above my base image.

Then I picked up the polygonal lasso, every icon maker's best friend and one of my favorite tools. I zoomed way in so I had control, and used the polygonal lasso to draw a border I liked on top of the red border, far narrower, and kind of zig-zaggy and choppy. Once I was done, I hit ctrl-x, and the parts of the red border I didn't want went clean away, leaving behind my border, with the nice soft blended edge that the non-specific cuts of the polygonal lasso tool leave. I set the layer type to "overlay," which gave the opaque red a sort of burnt candy effect, and then I darkened it twice in Variations.

I left the border as a separate layer and hopped over to Image Ready to add text.

x. I frelled around with fonts and sizes for ages, experimenting with every font I have in every size from 6pt to 48pt, before settling on the font I use for almost every single icon I make. Ain't that always the way. This here is Chanticleer Roman, my favorite font of all, in all caps, 11pt. I knew I wanted a semi-transparent effect on the text, and I wanted something that cut across her face in and out of the shadows, like a whisper. I chose that kick-ass line from the episode itself: "I've been waiting for you to kiss me since I showed you my guns," which is both randy and lusty and sexy, and very appropriate for these two kids. I chose a cream-colored offwhite for the text, which is all on one layer, set to Multiply, above the base image but below the border.

x. Now to animate! First, I made a new layer, below the text layer, on which I drew a line using the line tool. I used the line as a guide, so when I moved the text frame by frame it wouldn't jump off its vertical axis. I turned the layer off before I saved the completed icon, but for nudging purposes, it was indispensible.

The animation was very dull and predictable. Made a layer, nudged the text a little to the left, duplicated, nudged, duplicated, nudged, blah. I think there's 28 layers total, each at a speed of 0.2 seconds.

I think that might be everything I know, but I ain't promising. Any questions, or anything that needs clarifying, gimme a holler. Thanks!

Comments

( 9 ideas — Have an idea? )
geamhradh
May. 17th, 2004 03:01 pm (UTC)
*shudder* Oh, the old "nudge, duplicate", the one and only reason I stayed away from scrolling texts... X(

I was happy to learn that there's an easier way to get scrolling text (in ImageReady): place your text on the edge of where you want it to scroll from, make a new animation layer, move the text to where you want it to end, add a transition (how many frames depends on how smooth you want it to scroll) - make sure "position" is checked! - and there you have it. No more "nudge, duplicate"! :)
iamsab
May. 17th, 2004 03:09 pm (UTC)
Holy that is FANTASTIC! Thank you SO MUCH!
geamhradh
May. 17th, 2004 03:28 pm (UTC)
You're welcome. :) I had a similar reaction when I first heard about it ("You can do WHAT?! Why didn't I know that?!?!??"). *g*
psychme
May. 21st, 2004 09:03 pm (UTC)
This will come off really idiotic, but, um, how do you add an image transition in ImageReady? I've been making my stills in PS, then transferring over to Animation Shop to do fade, then save each frame, compile again in PS, then do optimization in ImageReady. If there's a way to transition in the latter, my life would be so much easier.

Thanks so much!
geamhradh
May. 22nd, 2004 03:06 pm (UTC)
Strange, I do it the other way round! :P I create everything in PS/IR, then optimize the finished icon in AS if needed, because I've found that sometimes AS can get the file size down a bit (always important when you're close to that 40kB limit!).

Anyway, there is a tutorial on this somewhere, so have a look in the memories. After a quick browse, I think this one will be helpful. :)
psychme
May. 22nd, 2004 03:48 pm (UTC)
*LOL* Really? I hate optimizing in AS, because there are very limited settings. If I move down to the second setting, the image gets very grainy already. I've found that I can get a similar size in IR without sacrificing quality too much. Heh.

Thanks so much for that link. It looks helpful indeed. I'll check it out the next time I open PS/IR. Your help is much appreciated! :)
geamhradh
May. 22nd, 2004 03:56 pm (UTC)
Yeah, AS is annoying that way, I really wish you'd be able to tweak the settings a little more... :( But if I make an icon in IR that end up being too close to 40kB, I try optimizing it in AS (on the highest setting) which sometimes makes it smaller, with no visible loss of quality. Depends on the icon though.

You're welcome, and good luck! :D
psychme
May. 23rd, 2004 06:10 am (UTC)
Oooooh, I didn't know that. Thanks for the nifty tip. I'll try that out sometime.
sleepdebtfairy
Apr. 10th, 2005 08:34 am (UTC)
*grealy confuzzled* @_@ What is an animation layer? And how do you combine all of the different text layers (after tweening) with the original picture? D:
Sorry. ^^;
( 9 ideas — Have an idea? )

Tags

Current Month

July 2014
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

Page Summary

Powered by LiveJournal.com
Designed by Lilia Ahner