 |
home • fansite • fanfiction • links • awards • tutorials |
|
home • fansite • fanfiction • links • awards • tutorials |
WickedFox’s How To Do That Voodoo Too When you're starting out in web design and graphics, the web can look like an intimidating place. It's truly a vast space of endless wonder with flashy web sites with graphics to make you 'ooh' and 'ah'. You too, my padawan learner, are capable of doing that stuff too. All it takes is a little know-how, lots of practice and wah-lah... you're a Jedi Web Master. While I'm not anywhere near an expert, I've dabbled and taken a few core classes enough to pass along the bare bones of just what you're getting yourself into. |
Web / Tools / Graphic Law / Source Shots / Tips / Links / Photoshop Layers & Masks I'm still very new to this wacky world of web design but that doesn't mean I can't pass along some juicy links. Here are some core sites I could absolutely not do without when it comes to know-how and design tips.
|
WickedFox's Graphic Graphics... This upper section isn’t meant to be a tutorial on Photoshop or a step-by-step to my trademark tricks (beards, vamp, etc.). For that, check out Photoshop Layers & Masks and other tutorials coming soon. :o) If you are a graphic artist and wish to offer up some advice on any related topic or some of your favorite source/tutorial/graphic website links, please email me and I'll compile all I can on this fandom-based art. I'll credit, of course, and pimp you all over. Disclaimer: Though I want to be general in my tips, I do use Photoshop so some of my vocabulary will refer to terminology representative of that application. Sorry… just what I know. I use Photoshop CS2 (PS) but there are newer versions out there. The main problem with PS is that it’s fricken pricey at around $700 a pop. If your one of the lucky ones, students and school faculty, you may be capable of getting an educational discount and purchase a copy for around $300. I’ve tried other graphic applications, specifically Paint Shop Pro (PSP) which is quite a bargain compared to PS at around $120 and should also be available at a discount for students and school faculty. The usual rule of thumb is the more money spent, the more goodies and less effort it takes to accomplish something. I almost exclusively use PS. For me, it’s a matter of laziness. I like PS because so many others have created goodies like shapes, gradients, filters, brushes, and plug-ins for it that you can save time and effort by simply plugging that grunge brush file into the correct folder and you’re off. PSP is the next popular choice with just as much goodies available out there and is an amazing product for the cost. The truth is, PSP can do nearly everything PS does, you just have to know how to do it. What PS can accomplish with once click, PSP may take a series of steps. Hence, me so lazy. I will say that it makes a heck of a world of difference if you can get an application that allows you to work with layers. I would DIE without layers. Take a look-see at the red circled part of the graphic below to see layers in action in PS. Think of layers as similar to how they used to do animation and you might get an idea of what I mean.
Layers allow you to copy the original source shots to avoid altering them. Layers also enable you to play around with color and settings for different effects then if you want, you can simply turn that layer off and have your original shot sitting there, unaltered. Graphic Law (otherwise known as WickedFox’s rant and you didn’t hear it from me): I don’t claim to be a legal guru but it doesn’t take a Supreme Court justice to know that photo manipulation is illegal. Most photos and screencaps you see are copyrighted by the photographer, studio, or production entity so get over yourself when it comes to ownership of such things. That being said, it’s considered quite rude to use something from a site without a) getting permission, and/or b) giving credit to that source. And it is especially rude to try and pass off such things as your own. Most screenshot sites don’t mind you using their pics for fanart, banners, LiveJournal art and the like, as long as you don’t post the originals into your own archive and try to pass them off as if you took all that time to painstakingly capture the screens for each picture. Heed and follow the “rules of use” that many sites post. As a common courtesy, when you do find a great resource for source shots, PS or PSP goodies (brushes, tubes, filters, plugins, etc.), pimp it by posting links for all to see! Now, to be honest, I don’t post links for each and every single piece I create… some of my works would have tons of links I’d have to credit if I chose to post sources every single time. So what I do is have a links page at my website and list a handful on my LiveJournal informing folks of the places I frequent. You’ll notice the absence of credit for the sexy body shots. To put it plainly, I don’t care. It’s a double standard, I know, but I could care less if Ralphy Laurenso doesn’t want Giles’ head manipped into one of his model’s bodies. Doesn’t he have a fashion empire to run rather than police how his magazine advertisements are being used? So it’s up to you if you want to give credit when it comes to that part of the gig. The toughest, most agonizingly tedious part of sexy manips is finding the body/pose shot you had in mind for your manipulation. I won’t lie to you, often times finding them isn’t pretty or fun. A matter of fact, finding sexy shots can mean hours of wading through disturbing porn sites in hopes to find something less… um… graphic. It also helps to have a network of friends you can post requests to like “keep an eye out for a shadowy chest shot” or “need a shirtless leather coat torso”. Where: I use Google and Yahoo Image search, putting in terms such as “male fashion models”, “gay male couples”, “advocate” (which is a gay magazine), “modeling agencies”, “men’s designer fashions” and so on. To make sure I don’t miss out on any of the possible shots out there, I will set the “safe search” setting under “preferences” to off so I see everything. This is where all the utter manure will torment you. If you want to try and avoid the more icky gaspage shots, you can set the safe search to censor what you see. When you stumble upon a picture that strikes you as promising, save it for future use and continue looking. The reason for this is because you already spent a half an hour weeding through a ton of crap just to find that one. Do you really want to see all that stuff again tomorrow when you get another idea? Also, when you find a pic, check out the site itself. Chances are the place has more to offer. I call all this “fishing” and it’s best to try and sit down with a generous block of time, a beer or glass of wine, some good music and a heaping helping of patience and just get it over with so you don’t have to suffer over and over. You might have noticed that I don’t get off on porn. That’s why I write fanfic. *wink* Fashion magazines are a great source for shots if you have a scanner and the know-how to touch up the inevitable weirdness that scanners pick up. Since most of my works are exclusively for web, I recommend scanning things at no more than 150 dpi resolution to avoid moiré patterns (the scanner picking up the halftone screen patterns on the page). Be sure and check out the advertisements for websites you might peek at, especially if you’re looking for slash materials. Underwear adverts, gay clubs, personals and similar avenues can have nice pictures. What: Sometimes how to choose can be as much a chore as finding shots. My personal pet peeve is how many folks tend to pick out beefcake, superhero shots for our average shaped guys. Giles is not a teenage underwear model. Buffy is not an Amazonian fashion diva. Spike is not a body builder and Ethan is not a heroin abusing junkie runway model. These are important distinctions to make if you want to create believable manips. Unfortunately, much of what is available is not right for our characters. I've actually de-muscle-toned body photos for use in some of my manips to make them look more appropriate. Besides body type, be mindful of clothing and style. Giles in gangbanger garb isn’t gonna work. Of course, if it’s fun and silliness your after, go for it. Getting Your Canvas Dirty (Tips): Tip #1: Black and white… but especially black, is your friend.
I concentrate on matching blacks first. Different photos may have different contrast and brightness levels. When you cut one and paste it to the other, these differences get amplified. This is especially true when viewed from plasma and LCD screens which tend to be very contrasty and in some cases, unable to display all the colors CRT monitors can. So what they do is try and match the best they can which can cause your darker shades to suddenly appear brighter. To avoid this blatant manip symptom, try to match your blacks as closely as you can then work with your neutral greys and then whites. I use a similar technique with color, only with color, it's very important to try and match skin tones and shadows. Again, the process of how to adjust this depends on your graphic application. "Levels" or "curves" is often times what I use to make these changes.
Tip #2: Lighting and Shadow exist, don't ignore them. Another boo-boo folks tend to do is use source shots not complimentary with one another in regards to light and shadow. Sometimes someone who can "draw" in light and shadow to account for the inherit differences can work past this but it does take practice and a good eye of which I'm still trying to master. So rather than struggle with shots that are completely different in light direction and shadow, it's best to save time and choose shots that look similar in this sense. The shot above with Giles hugging Buffy is an example where the lighting just isn't right and where I tried to correct it by "drawing" in shadow. Though it seems to work at first glance, when you really stare at it, you can see there is something wrong.
The cute relaxed shot above is an example of nearly complimentary light source, adjusting to better match between source shots, "drawing" shadow and limb to fixed cropped source shot and size/proportion adjustment. Phew... if that doesn't seem way to much work, I don't know what does. Tip #3: Your manip is only as good as your lesser shot. Rather than spend all your time trying to mend a lesser quality photo to match a better quality one, it’s best to go the other way and lessen the quality of the better one. This can be done by adding “noise”, “pixelate”, blur, fade, desaturate colors, etc. It takes practice and fiddling with settings to figure this out but once you do, it will help make the shots work better together.
So what is all this "drawing" nonsense I keep referring to? My brand of manipping is 1/4th character shots, 1/4th body shots, 1/4th adjustments, and lastly, 1/4th drawing. Drawing is the most difficult part because it means practice, practice, practice. I won’t say it takes talent because I don’t feel you need talent. Anyone can learn how to do this but it takes practice to develop an eye to what works and what doesn't. I'm still trying to master this and more often than not, my drawing just doesn't work. So what do I mean by “draw”? You will need to draw shadows and light to add depth to manips and correct lighting to make two separate figures appear natural together. You might need to draw body parts to fix cropped pictures, extending arms and torsos that the original shot doesn't have. And of course you might even want to draw hair, beards, earrings, and vampy brows, if that is your particular kink. ::cough:: How you go about drawing depends on your graphics application. For PS, I use four tools almost exclusively, stamp (to copy another part of the source pick to fill in a empty space of similar material, used for vamp face and hair), the smudge tool (usually shown as a finger icon that smudge/smears the source shot in the direction you drag the cursor, used for vamp face), the blur tool (to help blend in sharp edges and lessen the obviousness of cut and paste shots), and the brush tool that is peculiarly shaped like grass (used for adding hair). Tip #5: Brushes, gradients, fonts and shapes are your guilty pleasure. So for good or bad, now you have your resulting manip. What the heck do you do with it? Well, for starters, you may want to look at brushes, gradients, fonts and shapes to add a decorative touch. I suggest that when you are heading into this territory, you might want to go find some tutorials or a good how-to book. I’m still learning how to apply these techniques. Some folks have it down so much so, they can take a crappy arse fuzzy screencap of Giles with a chainsaw and turn it into a emotive, seductive, squee-fest and they usually accomplish this by knowing how to apply these goodies I mentioned above. Brushes and gradients are running rampant all over LJ icons lately. They act as borders and highlights, provide a sort of mood with color and help present a theme for a shot.
The dirty little secret in the use of brushes and gradients that often times, they are being used to cover up or lessen the obviousness of something that’s off with a manip. I embrace these tools for that very reason. No matter how hard you work, you need every trick you can to bring it all together. Besides covering up boo-boos, brushes and gradients can also aid in making text stand out more, dulling the background so that the text is easier to read. Even text itself can become a mask for mistakes. So this reason alone makes it worthwhile to learn how to apply these goodies. Tip #6: Finding your style. That dang talent thing. I haven’t even begun to do this so it’s hard for me to claim I know how. All I can offer is my perception of my work in comparison to others. I don’t go for much cover up. My stuff is in your face, crisp, sharp, not hiding. The characters are the shot and they have to balance or it just won’t be believable. Many times, the balance isn’t right, I can only force the shot so much with what I’m working with. The problem with my style is that when I make a mistake or don’t quite have the right balance, you can see it way.too.well! Others with talent know how to turn a screenshot into art. With those textured, gradient highlighted, brushed, texted-up scenes… they have style. It’s those pieces you see and just know what the point is. The individual pieces of the scene don’t matter, it’s the whole of the thing that makes it work. It takes time to develop this and it doesn't hurt to look at what others are doing. There are tons of talented graphic artists to learn from. Imitation is the sincerest form of flattery so if you see something you like, try to do it yourself only make it yours by adding your own touch. Eventually, you'll find your niche. Links (for source graphics, tutorials and plugins) : Here are some general links I use. Always be sure and use a virus scanner/security software before installing anything from online. Though these all have been reliable in the past, I've been burned even by reputable sites. I'm sure I'll add to this list as I find more and as folks point them out. Thanks to those who keep a keen eye out for great sources. Special thanks goes out to my buddy elle for all the texture and brush source suggestions. Buffy the Vampire Slayer Screencaps: BuffyWorld.com Artsy... where I got some of the lovely brushes I use:
LiveJournal Communities: Testures and Background Graphics: General Graphic Sites: Fonts: Image Hosting (if you don't have a website but want to share photos) The graphic below was intended to be one of my Halloween fun ones but I never finished it. The basic idea was a spoof of the classic Invisible Man movies. I scrapped it after losing interest. But seeing as how it plays with layers, it should make for a good example (fingers crossed).
There are many layers to this image. Ethan alone is made up of three, the text is two and Giles was two until I merged them into one. But before I created those layers, I began with an empty black background. What's a layer? Try to think of a layer as a clear canvas just waiting for you to brush, stamp, and/or paste an image into it. Each layer has numerous settings that can all be controlled from the layer palette traditionally positioned at the right bottom corner of your screen; layer on/off (1), layer mode (2), opacity (3), fill (4), new layer icon under the (5) and the add layer mask icon under the (6).
I started by creating a new image of 500x560 pixels and filled the background in with black. Then I opened the sleepy Giles source shot I wanted to use and copied and pasted it into its own layer. By default, Photoshop should put the pasted selection into its own layer. Photoshop will attempt to center the item on the canvas but you can move it around by using the aptly named "move" tool. If you start your project with your source shot, you'll notice it will default as your "Background". I suggest copying this layer and tinkering with the duplicate since the "Background" layer is protected from many alterations (see the little lock beside the word "Background"?). Rule of thumb in Photoshop, never alter the original or background, tinker with copies. You can create a new empty layer by way of the "Layer" option of the menu; select "Layer", "New," then "Layer" (repetitive, eh?). A "New Layer" pop-up box will appear for you to select the settings you want or just ignore those and click okay. Too much work! If you're like me and prefer easy and instant gratification, you can create a new layer by clicking on the little graphic that looks like a paper positioned just left from the tiny rubbish bin at the base of the layer palette. That would be 5 in the graphic above. Or you can duplicate a preexisting layer by clicking a layer, dragging it to that same new layer icon (5) and releasing it while over the icon. An exact duplicate of the layer should appear above it, only labeled a copy of the layer, see "sleepy Giles" and "sleepy Giles copy"? I use this often, oh so very often.
So why would I want to copy a layer, besides avoiding altering the original source? Because of the special effects and the flexibility it offers. You can try something and if you don't like it, you can turn off that layer by clicking in the column just left of the miniature version of the layer. The layer is on when you see the eye there and off when you don't. You can also adjust the opacity/fill of the layer which comes in very handy. Take a look at the pasted Ethan head. Not so menacing and not particularly working in its " Normal " mode at 100% opacity and fill.
In preparation for playing around, I've done some masking with the the chaos mage's noggin. Masking is pretty much what it sounds like, masking or hiding parts of the layer image you don't want to see. It's one of those options you will find under the "Layer" menu and the icon under the (6) in the layer palette graphic. Photoshop represents a masked layer with a chain-linked second image beside the layer image. The unmasked areas to be shown are in white, the masked areas to be hidden are in black. Then there are all those wonderful grays to allow for all the in-between settings. To alter the mask, you must first click on the mask then you can use your brush tool to brush the areas you want to hide with black or use white to reveal areas previously masked. Anyway, I wanted a ghostly Ethan head so I masked out all but his face then used a grey brush to gradually fade out his face beyond his hairline. But his face is much too dark for my tastes and not quite what I had in mind. I lessened the fill of the layer to 82%. Lessening the opacity would have the same effect. Still not very thrilling.
So what's a fangirl to do? I want to mix things up by selecting a different layer mode. As in everything with Photoshop, there are a million ways to do things. You can set a layer mode when you create a new layer, as seen in the "New Layer" pop-up box below. Or you can adjust the mode after the layer is created by clicking in the layer mode selection box within the layer palette, located where you see the word "Normal". I prefer the post-creation method. The options available are the same either way. "Normal" is the default mode and looks, well, normal and not particularly inspiring. Let's fiddle with Ethan's head, already.
So I move on to the layer mode to accomplish two things, brighten the image and exaggerate the opacity. Now the fun begins. I set the layer mode to "Screen" and a magical transformation occurs. Okay, so it's magical to me. Much more ghostly.
I like it but I want to draw attention to his face so I drag the layer to the new layer icon below and renamed the new layer "Ethan masked 2". See how "Ethan masked 1" is duplicated, screen mode, fill % and all? After masking out a touch more of that particular layer, Ethan has more of a glow about him and we didn't lose too much of the opacity/fade effect.
Just to show you what the new layer looks like on its own, here it is with the original layer turned off beneath it. See how the highlighted blue layer has the eye open and the others don't have an eye? It's Photoshop layer palette peek-a-boo!
Each layer builds upon the others beneath it based on the layer mode selected and the opacity/fill %. When an image is too dark, the first thing I do is copy the image layer and change it to screen mode which brightens it. The opposite effect of screen is multiply, though I rarely use this since screenshots are notoriously dark. Okay, so now Ethan's face is glowing but we lost some of the distinction and darkness by using the screen settings of the two Ethan layers. Anytime I'm working with Ethan, I want those eyes to be black as licorice and just as tasty. Mmmmm, licorice. So how do I get some of that darkness back? Why another layer, of course. I dragged and released the "Ethan masked 1" over the new layer icon and moved the newly created layer above the other Ethan layers. I chose to duplicate the less masked one due to the new layer mode setting I was using and the effect it offered. Then I desaturated the new layer, a fancy way of saying I made it grayscale. I've changed the layer to " Normal " mode so you can see what it would normally look like.
Now watch what happens when I set the layer mode to "Overlay" and lessen the Fill % to 35%. The blacks get blacker and his glow seems even stronger. So very dramatic.
Just for fun, here is what the layer looks like with the other Ethan layers beneath it turned off…
Then I added the text and wah-lah, movie poster-ish. There is no better way to learn how to use layers and their settings than to play around with them. I fiddled and fiddled, trying weird combinations just to see what effect they might have. Most of what I do comes as a complete surprise, accidentally fumbling into an effect I like and not particularly planning for it. Don't be scared to play around because all you have to do if you don't like something is to turn off that layer. Web / Tools / Graphic Law / Source Shots / Tips / Links / Photoshop Layers & Masks / Back to the Top |
Why: The most believable manips are done with pieces taken from the actual show and publicity shots. Lighting, color and style can be fairly consistent if you stick with the same source archive and especially good if you stick with a particular episode. The best manips are created from pieces of the same scene screenshots, preferably from the same single shot. What I mean by this is find a shot with Buffy and Giles near each other and move them closer. Of course the reason these shots work well is that lighting, color, and sometimes position/proportion is already set, you just have to move them as close as you want to make an innocent scene seem two seconds away from smoochies. 
I admit it, I get lazy. One of the most excruciatingly boring parts of photo manipulation for me is to try and match one photo’s color/tone to another. I’ll let you in on a little secret, I haven’t got a clue what the vast majority of all those settings do in PS. So early on, what I did was narrow the field by cheating, in a sense, and getting rid of the color. Sometimes referred to as “desaturate” or, “grey scale”, these options will remove some or all color and leave you with shades of grey to work with. It helps simplify things so that you can concentrate on shadow, size and position rather than focusing on whether Giles is way too tan compared to Buffy in that shot.
Tip #4: Draw and Quarter me.
So what’s a brush? Well, it’s what it sounds like, a brush, shaped a certain way. In graphic applications, a brush can look like blood splatter or sparkling stars. They can look like fangs or like lace. They can look like texture or even text. When you see an icon with Angel looking all broody and in the corner is a decorative flare curling around to fill empty space, you’re most likely looking at the results of a brush. Gradients are what make those perty, moody colors. There are tons of uses for them but the popular application lately is to make a dull colored shot or black and white shot look better by running a warm orange into a pale red or an earthy green to a sandy brown. If applied as a “screen” or “overlay” or “color” layer, these colors seem to mesh into the shot rather than covering it totally. Though covering may be what you’re looking for.
