Welcome to CollectorFreaks.com! Register today to gain full access to the forums. Registration is quick and easy!
Advanced Search
Page 1 of 5 12345 LastLast
Results 1 to 10 of 43
  1. #1
    Abnormal Brain
    Join Date
    Sep 2005
    Location
    Sleeping in a jar
    Posts
    2,239
    Feedback
    0
    Reputation

    Default FrankenFan's Photoshop Fundamentals — Avatar Tutorial

    In this tutorial, we'll be building a basic animation featuring a simple pulse/glow effect.

    We're going to learn to make these Iron Man avatars...



    ...using this image:



    I chose this Iron Man image because it already contains some of the data readout text we added in the Iron Man sig tutorial, so it will nicely complement the sig, and be less work for us at the same time!

    This tutorial is aimed at the beginning- to intermediate-level Photoshop user, and we'll be using the Pen and Rectangular Marquee tools, Layer Blending Modes, a Custom Brush, and the Animation palette to create our avatar.

    I'm using Photoshop CS3, but I've tried to limit tools and commands retroactive to Photoshop 7. I'm also using a Mac, so Windows users should substitute all references to the Command Key (Mac) with the Control Key (PC), all references to the Option Key (Mac) to the Alt Key (Windows), and all references to the Delete Key (Mac) to the Backspace Key (Windows).

    If I use a Command or Filter that is unavailable in your version of Photoshop, LMK and I'll try to suggest an alternative for you.

    Note: If you're not using Photoshop CS3, you'll need to have a copy of ImageReady installed if you want to proceed with creating the animation beginning in Step 10. When Adobe acquired Macromedia, ImageReady got the boot in favor of the much more feature-rich Fireworks, and ImageReady's basic feature-set was added to Photoshop CS3's toolkit.

    There are 17 steps in this lesson, so don't forget to save your work early and often!

    Ready? Let's begin!
    Last edited by FrankenFan; 07-01-2009 at 12:52 PM. Reason: Added Windows key commands.

  2. #2
    Abnormal Brain
    Join Date
    Sep 2005
    Location
    Sleeping in a jar
    Posts
    2,239
    Feedback
    0
    Reputation
    Step 1

    Open the im.jpg image in Photoshop, and Zoom-in (Space Command Click) to Iron Man's helmet lens on the left side of the image (his right lens). I zoomed-in 700%.

    Select the Pen tool from the Tools bar and set up the Options bar to look like this:



    The Illustrator users among us will be very familiar with the Pen tool, but if you've never used it before, don't be intimidated by it. It's an essential tool and it's really easy to learn. In this lesson, you are going to create corner points, smooth curves, and convert a smooth curve to a corner point.

    Click once with the Pen tool on the upper left corner (1) of the lens, and again on the lower left corner (2). You've just created two corner points.

    Now click on the lower right corner (3) and drag out and up slightly to the right, to follow the curve of the bottom of the lens. Note: Do not release your mouse button! Click-hold-drag in one continuous motion!. You have now created a smooth curve.

    Your Pen tool selection should look like this:



    Next, release your mouse button, and hold down the Option key to convert the Pen tool to the Convert Point tool. Note: You should see the forward slash to the right of the Pen tool icon change to an inverted "V" pointing slightly to the left.

    Now click on point 3 again to convert it from a smooth curve to a corner point.

    Next, click on the upper right corner (4) of the lens.

    Finally, click and drag up and to the left on point 1 to follow the upper curve of the lens and close the path.

    See? Easy!

    Your completed Pen tool selection should now look like this:



    From the main Photoshop Menu, go to Windows>Paths to open the Paths palette. Double-click the Work Path path layer and rename it Lens Path.

    Save your PSD document and name it im_avatar.psd.
    Last edited by FrankenFan; 03-30-2008 at 09:38 AM.

  3. #3
    Abnormal Brain
    Join Date
    Sep 2005
    Location
    Sleeping in a jar
    Posts
    2,239
    Feedback
    0
    Reputation
    Step 2

    Press Command Option 0 (zero) to view your image at actual size.

    From the main Photoshop menu, go to Windows>Layers to open the Layers palette.

    Press Command Shift N to open the New Layer dialog, name the layer Lens Glow, and press Enter to create a new layer above the background layer.

    Next, select the Brush tool from the Tools palette and choose a 3-pixel brush with a Hardness of 100% from the Brushes palette.



    Now click the Set Foreground Color swatch on the Tools palette and enter the RGB values 0 174 239. Click OK to exit the Color Picker.

    With the Lens Glow Layer active, go to the Paths palette, and click on the Lens Path path to select it, then click on the Stroke path with brush icon on the bottom of the palette (second icon from the left).

    Click in the empty space under the Lens Path path to deselect it.



    Your im_avatar.psd file should look like this:

    Last edited by FrankenFan; 03-30-2008 at 08:50 AM.

  4. #4
    Abnormal Brain
    Join Date
    Sep 2005
    Location
    Sleeping in a jar
    Posts
    2,239
    Feedback
    0
    Reputation
    Step 3

    With the Lens Glow layer active, click the FX icon on the bottom of the Layers palette and select Outer Glow from the pop-up.

    Enter the settings shown, below, and click on the color swatch and enter the RGB values 0 174 239 in the Color Picker.



    Now change the Lens Glow layer's Blending Mode to Screen.

    Your file and Layers palette should look like this:

    Last edited by FrankenFan; 03-30-2008 at 08:51 AM.

  5. #5
    Abnormal Brain
    Join Date
    Sep 2005
    Location
    Sleeping in a jar
    Posts
    2,239
    Feedback
    0
    Reputation
    Step 4

    Next, with the Lens Glow layer active, press Command J to duplicate it. Name this new layer Lens Pulse.

    Your file and Layers palette should now look like this:

    Last edited by FrankenFan; 04-01-2008 at 09:08 AM.

  6. #6
    Abnormal Brain
    Join Date
    Sep 2005
    Location
    Sleeping in a jar
    Posts
    2,239
    Feedback
    0
    Reputation
    Step 5

    Press the letter D on your keyboard to set the foreground and background colors to their default black and white, then press X to change the foreground color to white.

    Select Layer>New>Layer... from the main Photoshop menu to create a new, empty layer above the Lens Pulse layer. Name this layer Lens.

    Return to the Paths palette, Click the Lens Path path to make it active, then click the Load path as a selection icon (third icon from the left) on the bottom of the Paths palette.

    In the Layers palette, select the Lens layer, then press Option Delete on your keyboard to fill the selection with white. Alternately, from the main Photoshop menu, you can select Edit>Fill... to fill the selection.

    Your file and palettes should look like this:

    Last edited by FrankenFan; 04-01-2008 at 09:28 AM. Reason: Added Windows keyboard command.

  7. #7
    Abnormal Brain
    Join Date
    Sep 2005
    Location
    Sleeping in a jar
    Posts
    2,239
    Feedback
    0
    Reputation
    Step 6

    We're now ready to reduce our image to the maximum 80 x 80-pixel dimensions the Draconian Darklord Dave has mandated for all avatars that dare to pass into his forbidden realm.

    VERY IMPORTANT! If you want to create an avatar in which both lenses pulsate, go to File>Save As... in the main Photoshop menu and save a copy of your file in its current state under a new name, and repeat Steps 1-5 for Iron Man's other lens. I'm going to focus on one lens and crop the image.

    Press Command Option I to open the Image Size dialog box and under Document Size change the measurements units pop-up to Percent and enter 75 for the the width and height. Click OK or press Enter to confirm your changes.

    Press M to select the Rectangular Marquee tool, and enter the following settings in the Options bar:



    Click anywhere in the image to create the selection, and move it into place like this:



    From the main Photoshop menu, select Image>Crop.

    Your file should now look like this:

    Last edited by FrankenFan; 03-30-2008 at 09:17 AM.

  8. #8
    Abnormal Brain
    Join Date
    Sep 2005
    Location
    Sleeping in a jar
    Posts
    2,239
    Feedback
    0
    Reputation
    Step 7

    Next, double-click the Background to open the New Layer dialog and type IM in the name field. Click OK to convert the Background layer to a regular, editable layer.

    With the new IM layer active, click the FX icon on the bottom of the Layers palette and choose Stroke... from the Blending Options... menu to open the Layer Styles dialog box. In the Size field, enter 1, from the Position pop-up, choose Inside, and for Fill Type: Color, click on the Color Swatch and enter 0 0 0 for the RGB values.

    The cropped image is looking a little dark to me, and if you think so too, here's a quick trick to brighten a dark image: Select the Background layer and press Command J to duplicate the IM layer. Change its Blending Mode to Screen and adjust the Opacity of the layer to your liking. I reduced mine to 50%.

    Your file and Layers palette should now look something like this:

    Last edited by FrankenFan; 04-01-2008 at 09:09 AM.

  9. #9
    Abnormal Brain
    Join Date
    Sep 2005
    Location
    Sleeping in a jar
    Posts
    2,239
    Feedback
    0
    Reputation
    Step 8

    We're almost ready to create the individual frames we need to animate our avatar, but first, we're going to create a Custom Brush to add some additional flair to our animation, by adding... a flare!

    Custom brushes are a great way to create and archive graphical elements that you can use over and over again in your images, without having to go through the motions of creating them each time from scratch. And, if you create your original image for your custom brush at a large size, you then have the option to reduce its size to make your brush even more versatile.

    Download and open the flare_brush.jpg image, below:



    With the flare_brush.jpg file active, press Command A to select the entire canvas, then, from the main Photoshop menu, go to Edit>Define Brush Preset... and name the new brush Flare.

    Your Options bar should now look like mine, below, and when you click on the Brush pop-up, your new Flare brush should be the last brush in the palette. Change the Master Diameter to 62 px.

    Last edited by FrankenFan; 03-30-2008 at 08:57 AM.

  10. #10
    Abnormal Brain
    Join Date
    Sep 2005
    Location
    Sleeping in a jar
    Posts
    2,239
    Feedback
    0
    Reputation
    Step 9

    Next, create a new, empty layer above the Lens layer and name it Flare.

    Check to see that your Foreground Color is still set to White, and click once on the the upper left corner of Iron Man's helmet lens with the Flare brush in the Flare layer.

    Your file and layers palette should now look like this (I also added my board name by clicking on the Flare layer with the Type tool. I used a pale yellow color RGB 252 243 20 and set the Opacity to 40%.):

    Last edited by FrankenFan; 07-01-2009 at 12:54 PM. Reason: Fixed broken image link.

Similar Threads

  1. Replies: 75
    Last Post: 02-11-2019, 03:17 AM
  2. Lightsaber Effects Tutorial for Photoshop
    By MaulFan in forum Star Wars-Statues, props, etc.
    Replies: 23
    Last Post: 02-13-2008, 05:37 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •