Create the World in Sixty Seconds (and without drawing a circle!)
Using Layers in Photoshop - Experimenting with Composite Modes
Create the World in Sixty Seconds (and without drawing a circle!)
- From the menu bar, select File/New, and make the file size about 200 pixels by 200 pixels. Make sure that the file is in RGB mode.
- Select a light blue for the foreground color, and a darker blue for the background color. Of course, you can select any colors that you prefer, but for best results select two colors that constrast.
- Select Filters/Render/Clouds.
- Behold! The heavens appear within your file. The clouds filter uses the foreground and background colors you have chosen to create the clouds in your file.
- Return to the Filter menu. Select Render/Lighting Effects.
- In the Light Effects menu, change the shape of the ellipse to a circle that is centered within your file. Drag the Focus setting to about 15, then apply.
Making Those Little "Colored Ball" Icons in Photoshop
|Method One - Using Kai's Power Tools and the Alien Skin Drop Shadow Filter|
This method of making those little "colored balls" is almost too easy.
- Open a small file in Photoshop - say 40 pixels by 40 pixels, by selecting from the Photoshop menu bar File/New.
- Use the marquee tool to draw a circle (the tool in the top upper left of the toolbox in Photoshop 3.) It should be set to elliptical. If it is set to rectangular, double-click on tool which will bring up the Options palette. You can change the selection tool there.
In Photoshop 4, you'll find the Elliptical Marquee tool on the flyout menu when you select the Marquee tool.
Hold the Shift key down to constrain the ellipse to a circle. Make the circle a little smaller than the file (so that you'll have room for a drop shadow).
- Fill the circle with your favorite color - say, red. At this point, if you want to be creative, try using a KPT Texture on your selection.
- Use the KPT Glass Lens Filter.
- Use the Alien Skin Drop Shadow filter to finish off your creation, setting the shadow offset amount to 3 pixels for the horizontal and vertical measurements
Voila! There you have it ! A simple colored ball icon. Want to shrink it? Select Image/Image Size and change the pixel value.
Want to change the color? Select Image/Adjust/Hue-Saturation (or use Ctrl+U on Windows, Command+U on the Mac). Drag the Hue slider until you find a new color you like. Go wild!
|Method Two - Using Photoshop without Filters|
- As described above, use the selection tool to create a circle and fill the circle with a color.
- Select Filters/Render/Lighting. Select the "Flash" preset and narrow the focus of the light by dragging the edges towards the center. Drag the focus of the light into a position on the upper right side of the image. Change the Intensity to 35, the Gloss to 45. .
- From the menu bar, go to Select/Inverse. This will mask out the circle, allowing you to paint a drop shadow behind the circle. Use the Airbrush tool, (type the letter A on the keyboard) with dark gray as the color, to paint a drop shadow.
- Add a white highlight as the last step. Use the airbrush to add a small white highlight.
|Using Layers in Photoshop - Experimenting with Composite Modes|
The following Photoshop Tip will help you to understand layers and composite modes (hopefully!) a little better. Also, learn how to fill an area in Photoshop with a pattern.
- Open the file you'll be using as a pattern reference. You can download a zipped collection of background tiles, or use your own texture or photograph for this example. In the example below, I've used tile14.gif as the pattern fill.
- Using the pattern file, select all (Ctrl+A on Windows, Command+A on the Mac), and go to the Edit menu. Select Define Pattern.
- Now we'll create a new file, 200 x 100 pixels. Make sure that the Layers palette is visible. You can open the palette by selecting Window/Show Layers.With a dark green as a foreground color, type the word "NEW!" on the background layer. (I've used Futura Extra Black at 60 points in the example, but any bold font will work.) Then deselect the type (Ctrl+D on Windows, Command+D on the Mac).
- Using the little flyout on the Layers palette, select New Layer. Title this layer "pattern".
- From the Edit menu, select Fill. Make sure that the type of fill is Pattern, set to 100% opacity and Normal mode.
- Now, some fun stuff. Drag the opacity slider to about 50%, and you'll be able to see the type from the background layer. We are going to play around with the way the pattern interacts with the layer beneath it. If you change the setting from Normal to:
You can begin to see the power of working with Layers in Photoshop.
The Importance of Being Anti-Aliased
I work at screen resolution a lot, and I've discovered and learned a few tricks along the way about making low-resolution graphics look as good as possible.
Probably the most important tool to use in creating low-res graphics is anti-aliasing. Anti-aliasing makes the stair-stepping, or "jaggies" of diagonal edges less apparent.
For a quick visual lesson in anti-aliasing in Photoshop, follow the steps below.
- Open a new file, say about 30 by 200 pixels. Choose black as your foreground color. (The foreground color is the color the type will be filled with).
- Click on the type tool, then click on your file. This will bring up the type dialog box. Make sure that the "anti-aliasing" checkbox is checked. Set the type size to about 14 points, and type out, "This is anti-aliased type."
- Now, for comparison, open another new file, also 30 by 200 pixels. Click on the type tool, then click on your file. Type out "This is not anti-aliased type."
- Compare the two files. See the difference a little anti-aliasing can make!
Part II - Anti-Aliasing Other Stuff
Okay, so this is great. You can get nice, readable type. But what about that company logo, clip art, and so on? You've brought that great little logo onto your web page and it looks like it was cut out with pinking shears. It has a worse case of jaggies than the Grand Canyon.
Chances are, you have your logo in .eps format. If you do, open your .eps file in Photoshop. A dialog box will pop up asking the size you want to import. Be sure to select RGB color if this will display on the web. When your file opens up, zoom in, and you'll notice that Photoshop has neatly anti-aliased all of your edges for you.
Pretty nifty, huh?
Let's say you only have your logo in .tif or some other format. If you have Corel, you can bring your .tif file into CorelTrace and trace the file (using the outline, not the centerline method). The resulting file will be an .eps file that you can then open in Photoshop.
And for those little touch-ups, I've found the smudge tool in Photoshop to be perfect. Just draw the smudge tool, set to about 50% pressure in the Options palette, across the offensively jaggy edge. In the example below, the left edge has been antialiased using the smudge tool.
What about those situations where you have a big, old, ugly gif file that you have to use? Convert the image to RGB color (Mode/RGB in Photoshop 3, Image/Mode/RGB in Photoshop 4), the size the image down, using Image/Image Size. Photoshop will automatically anti-alias all the edges for you.