Color line art
;Step one: Make a sketch. It really doesn't matter how big or small it is, large enough for you towork with it. This is all relative.
;This tutorial introduces you to creating freeform interfaces. Some examples would be like the Winamp 3 and 5 skins, Windows Media Player skins, etc. Basically it involves shapes that are not squaure, rectangular, etc. I'm not stating that these type of skins never contain these elements, but most are done in a 'free form' style.1. Create a new document, 400X300 with a white background. Now create a new layer and name this layer 'base'. Now set #3D3D3D as your foreground color and then grab your Polygon Tool and make sure it is set to 'Shape Layers' up at the top left of your screen. Then click your Star shape up top and make sure you have your settings like the image below. Set Your indent sides to 50%. For some reason My image only says 5%..must have snapped it to quick.
Step two: Ink your sketch. Again, this is all relative. Ink the lines you'll need when making your pose. TIP: I've found making a bolder outside line makes it easier to have a nice crisp outline on your pose later.
2. Now that we have our tool set up, hold down shift and draw out a shape like mine. Now create a new layer above that and set your foreground color to #管家婆正版四不像图，FE6901 and grab your Elipse Tool. Note: This is not the circular marquee tool! Now create a new layer above your base layer and name this layer 'Elipse'. Drag out your elipse like my image.
Start with a new image about 400x400 pixels with a chosen background, (I'm using white). Make any kind of wacky shape for your button (for this tutorial I will show you one shape). Start by creating a new layer and using the Rectangular Marquee draw a rectangle roughly the size you want your button. See picture opposite.
Step three: scan into photoshop. Now is when things get slightly complicated. Make sure that your sketch is at 150 ppi (pixels per inch). You can find this by going to image -> image size. Its often easier to scan your artwork at 150 ppi to begin with.
Now go back to your base layer and apply a 1 pixel inside black stroke, and do the same for your Elipse layer.3. Now Duplicate your elipse layer by rightclicking it in the layers pallete and select duplicate and then move it below our first elipse layer, Name this layer 'Inset'. Now set your foreground color to 8A8A8A and then press Alt Backspace to fill this new elipse with that color. Now go to Edit>Free Transform and up at the top press the chain link icon in between the width and height box and then enter 110 into the width box. (Note: This might vary depending on how large you drew out your Elipse.)
Now go into your levels pallet (image -> adjustments -> levels.) Here you want to play with the levels by adjusting the three tabs on the bottom and clean up your line art. The goal is to make the whites whiter first, by taking the middle tab and move it to the left. Make sure you have the preview button checked. Don't make your line art TOO bright, as you won't be able to work with it well. (TIP: Ctrl-z for an easy undo command.) After you clean up the white, click ok and go back into levels pallet again. Now move the center tab to the right to make the black line art darker. Now that its good and black, click OK.
Now we have all of the shapes we are going to work with. The reason I used shapes and paths instead of the selection tools is because I can easily modify the shape by adding points and moving points if I decide I want to give something a slightly different shape. This is how I like to work. I like to set up my shapes first before I do any detail work. Now that we are satisfied by our shapes, lets rasterize our layers. Right click on each layer we created and select 'Rasterize Layer' (base, Inset, Elipse).4. Now ctrl click your 'base' layer and then create a new layer right above it. Set your foreground color to a lighter shade of grey, I set mine to 737372, but its not an exact science. Now grab your brush tool, I set my tip to about a 45 pixel soft brush and then my opacity to 22% and flow to 70%. Now start adding the highlights to your interface, focusing on the middle sections of the grey area or our base layers shape.
Click the channels tab and create a new channel. Fill the selection in with white. You can now deselect (CTRL D). Now go to Filter>Blur>Gaussian Blur and use a setting of about 3.5. Click OK. Next go to Image>Adjust>Levels and drag the two bottom triangles towards the center until the button looks nice and smooth (see image). Click OK when done. Hold CTRL and click on the channel "Alpha 1" to select it. Click the Layers Tab.
Now set your foreground color to a little bit lighter grey (ABABAA if you must know) and about a 21 pixel soft brush and start adding more highlights. Don't be scared that is looks sorta blotchy and blocky at the moment, were gonna clean all that up soon. Now set your foreground color to black or almost black and go right around the edges. Make sure your selection is still present while doing all of this! . Here is what mine looks like after the first round of highlights and shadows.
Now that we have nice, clean line art - open your layer pallet. (View -> layers.) Click on the layer marker "untitled" and duplicate it. (layer -> duplicate layer) Now drag the "original" layer to the little trash icon in the bottom of the pallet. It was a locked layer and we can't use it.:)
5. Now lets move on to our elipse because its feeling a little neglected. Click on your elipse layer and then click the littel 'f' and apply an inner glow with THESE settings. Now ctrl click your 'Elipse' layer and then set 'white' as your foreground color, now Create a new layer above your elipse layer and name it 'Elipse_Highlight'. Now grab your linear gradeint tool and then set your gradient to 'Foreground to Transparent' (Second Block over in your gradeint pallete' See Image Below).
Now going from top to bottom while holding shift fill your new layer with that gradient. Now press ctrl d to deselect and then go to edit>Free Transform and now holding shift, grab the bottom right corner and scale it down a bit, press enter to commit the transform and then move it to the mid top part of your Elipse.
Now fill your selection in with your chosen color (I'm using R:255 G:126 B:0), and Deselect (CTRL D). Now to make the button more interesting go to Edit>Transform>Perspective. Drag the bottom right point inwards so that your button goes to the same shape as mine (or something similar).
Now that we have the line art layer, you want to make one layer for every color on your character. I made five extra layers. Make sure that one is all red (or any other color so long as it is NOT in your pose) and it should be named "background". (To name a layer double click on its name.) Once you have all the layers you need, click on the "lineart" layer to make sure you're working on that layer. (Two ways to know if you're working on a layer. 1: its highlighted and 2: there is a little paint brush in the second square on the layer)Now we are going to make the line art one, solid black line. Click on the eraser tool and hold until you find the hidden "magic eraser tool". Click on this tool and make sure none of the top boxes are checkd. Now click anywhere on the white and it should all disappear.
Now on that same layer, click the little 'f' in the layers pallete and select outer glow. Set the color to white, mode to color dodge and size to 7. Everything else can remain. Now press ok and then change that layers blend mode to 'Overlay' and drop the opacity to about 79%.6. Now create a new layer above your Elipse_Highlight layer and name it 'Hot Spot'. Now set white as your foreground color and then grab about a 9pixel soft brush and just rub a small blotch in about the top left of your elipse highlight. Make sure your brush is set to 100% opacity, remember we want this spot to catch alot of light. Then apply an outer glow with the settings below
Now use the magnifying glass and center in on a piece of line art and click away all the brightly colored pixels. Now zoom out. You should have alot of dark grey and completely black pixels. Go now to the levels pallet and move the center tab all the way to the right. You now have crisp line art which allows you to see straight through to all of your layers. (The layer that is all one color allows you to see the bright pixels or stray pixels and clean them up easier.) You line art should look like the picture below ( this particular one has the solid colored layer turned off.)
Now go back to our 'Elipse Layer' and apply an inner Shadow with THESE settings. Notice how I jump from layer to layer. I never completely finish a layer because there is always tweaking to do, each layer feeds off each other.7. Now lets do a little work to our 'Inset' layer. Now click the little 'f' and select 'Gradient Overlay' and apply THESE settings. Next I lowered the stroke opacity for the inset layer down to about 50 or so.
Its looking pretty good, but lets keep going. We still need to smooth out those blotches a bit for our base layer highlights and shadows. Ctrl Click the Base layer and then select the 'Highlight' layer above it. Now grab your smudge tool and set the tip to about a 19pxl hard round. Then up top, set its strength to about 12% and just start making long strokes to the oter edges and just keep blending the shadows around, etc. Just play with it! If you think your gonna mess up just make you a duplicate of it and hide it. I then applied a slight dropshadow to my base layer.
Now, To make the highlight, create a new layer. Using the Freeform pen draw a rough wiggle circle around the top of the shape as seen in the picture. Once you have your path, Right click and choose "Make Selection" use default settings. Then Right click again and choose "Turn off path". Now create a new layer and fill the selection in with white.
Once you have nothing but line art, click on the first layer of color that will be in your pose. Color in the entire pose to that one color. It should look something similar (the colors will vary) to the picture on the right. Now, from here - move on to block in each color where it belongs on your pose, making sure each color is on its own layer. This will come in handy later on when you're shading. The final result of your color blocking should look as below.
8. Finishing up. Now if your not on your 'highlight' layer then get there now. Now we want to get a little more 'realism' out of our metal so lets grab our 'dodge tool'. Set it to about a 45pixel soft brush, Range:Higlights and Exposure:65. Now just start dodgeing around your sphere inset and down the middle portions of where our base layer is.
Thats it! If you want, keep going and keep redefining your skin, Add more layers and shapes to it. Add some details, text, etc.
NOTE: When blocking in colors for your pose. I would recommend using WEB ONLY COLORS. You can get these by clicking the tab on the bottom of the color picker. (get the color picker by double clicking on the color tiles on the main tool pallet.) This way, when your pose is compressed into a .gif it won't murder the work you've done by using the best guess. Working in just 256 colors isn't as bad as it sounds. :) It makes it worth it in the final result.
Next Hold CTRL and click on "Layer 1" to select it. Go to Select>Modify>Contract and enter 1. Now go to Select>Inverse. Make sure you have "Layer 2" active and hit delete. Now hold CTRL and click on "Layer 2" to select it then hit DELETE about 4 times to completely get rid of the white. Do Not lose the selection.
Now we come to the fun part! Shading ! (In my opinion, this is actually the easiest bit of the post making.) Now, personally, I cheat. When it comes to shading I use the dodge and burn tool.
Now press D then X to reset the colors. Using the Linear Gradient in the options tab change the gradient to "Foreground to transparent" and drag the gradient from the top of the selection to the bottom. You should now get a highlight effect.
They're fairly straight forward. Burn will shade the color where as dodge will create a highlight. I would suggest not using them at full strength, adjusting their saturation to somewhere between 50-60%
Tips on color black: When you color black, I would suggest using the darkest grey instead of a straight black. (Hexcode: 333333) This way you can use dodge and burn on it like you could any other color. Once you've shaded and highlighted, it will look very grey. Make sure you're working on the black level and go to you levels pallet (image -> adjustments -> levels) And move the center tab to the right to get a nice, dark black but maintain your shades and highlights.
Tips on coloring white: Alot of people seem to have their own little tips and tricks or ways around shading white. White is a pain in the ass, but quite do-able. When you're in web-only colors, work from the lightest grey to the darkest grey, and use the brush tool to add in the shading. Layer each color one on top of another until you get your desired shading. White will never need highlights as it is its own highlights. Your only concern should be adding in darks.
You have the highlight, now you need the dark shadow. Do the same as before, using the freeform pen draw a wiggly line across the bottom of your button (see picture). Again, right click and choose "Make selection", use default settings, right click, and choose "Turn off path". Now create a new layer -- don't lose that selection.
When you're done with your shading, your final product should look something like below.
Okay, now that we have a completely shaded piece, the real entertainment begins. First of all:
This time fill the selection in with black On a new layer. Hold CTRL and click on "Layer1" to select it. Go to Select>Modify>Contract and enter 1 then go to Select>Inverse and with "layer 3" active in the layers palette hit delete. Now hold CTRL and click on "layer 3" to select it, hit DELETE about 4 times to remove all the black -- do NOT lose the selection.
SAVE YOUR PROGRESS. By saving a .psd file at this stage in the game, it will allow you to go back to the original and make any changes easier. Now, go to the image size pallet (image -> image size) and change the resolution to 72 ppi. Click OK. Yes, I know it looks like crap now. Go back to the image size pallet and now go up to the width / height pixel dimensions and change the largest number to whatever it acceptable for your chat room.( in this case, I made the length 200 pixels.) Click OK. Yes, now I know it looks -worse-, Don't kill me just yet.
Now, change the mode of the image to "index color". (image -> mode -> index.) Make sure your solid color layer is turned off before you do this, and when the dialog box appears (merge visable and discard hidden layers?) Click yes. This changes the image to a .gif and gives it a transparent background automatically.
Now set black as your foreground color, and using a the linear gradient at foreground to transparent still, drag from the bottom of the selection to the top. Then Deselect (CTRL D). Now you may want to blur the black shadow a little Filter>Blur>Gaussion Blur, I used a setting of 3.0, then I lowered the layers opacity down to 42. Now you are done with the button add a Drop Shadow to "layer 1" Layer>Effects>Drop shadow.
All of the little white and clear dots should have mostly disappeared. But it doesn't look quite right just yet. Go to the hightest magnifaction (or whatever you'll be able to see the pixels better) and go on a full fledged pixel hunt using your pencil tool with a 1px radius. Go around all the pose and make sure you don't have any stray pixels on the outline, and I would suggest going back over all the contour lines within the pose itself.
Now that thats done - press ctrl-0 and now you're at full size. And ...we're done! Save your image seperately as a .gif and you've got yourself a completed pose. To get the pose to face another direction, go to image -> rotate canvas -> flip horizontal. This will give you the two pieces.
When you add text make it the same color as the button but a lot darker. To make it look insert duplicate the text layer by dragging it to the create a new layer. Drag it below the first text layer and make the duplicate text the color White. Using the move tool move it up a pixel and left a pixel, Set the layer blend mode to "Color Dodge" go to Layer>Type>Render Layer and Filter>Blur>Guassion Blur. I used 1.0. Now turn the bottom text layers opacity down to about 50 and your done.
Don't stop there, make some whacky shapes and see the cool effects you get. Just experiment and see