 |
Creating Web Graphics Using Photoshop
Techniques |
The following pages are intended as a basic introduction to creating
and manipulating existing web graphics using Photoshop.
Below are just a few tips and techniques you can use
to create graphics to include on your Web pages.
- Creating Drop Shadows
- Creating a Transparent GIF
- Creating a Wrinkled Edge
- Screen Captures
Creating a drop shadow is easy in Photoshop 5.0.
To create a drop shadow for some text:
- First, choose white as your background color.
- Open a New file (try making your image size 250 X 50 pixels to
start)
- Click on the Text
tool.
- Adjust the font face, the font size, and the font color in the type tool window.
- Enter your text in the text field of the type tool window.
- Choose OK.
- From the Layer Menu, select Effects, then Drop
Shadow.
- You can affect the darkness of the shadow by adjusting the Opacity.
- You can also affect the angle of the shadow, the distance
of the shadow from the text, the blur, and the intensity of
the shadow from the Effects Window.
- Save your image as a GIF: from the Image menu,
select Mode, then Indexed color and click OK
when you receive the prompt "Flatten Layers?"
Below is the drop shadow effect I created using the above tips.
This tip comes from GrafX Design
Tutorials.
To create transparent text:
- Open the file on which you wish to place the transparent GIF.
- Open a New file. Set the new file at 200 pixels wide, 100 pixels high at 72 dpi.
- select the Eyedropper tool
from the Toolbox and click on the
predominant color of the file on which you are going to place the transparent GIF.
- Click on the New file to select it.
- select the Paintbucket tool
and click on the New file to fill it with
the color from your existing file.
- Use the text tool to create some text. Be sure to select a different color
for the text than you used to fill your New file so it will show up.
- From the Image menu, select Mode, then Indexed
color and click OK when you receive the prompt "Flatten
Layers?".
- Choose Web palette in the Indexed color window and
click OK.
- From the File menu, select Export, then GIF89a
Export.
- The GIF89a Export Options window will appear.
- Click on the Eyedropper in the middle of the GIF89a Export
Options window, then click on the background color of your image (not on the
text).
- Click OK.
- Save your transparent GIF.
The following tip comes from Weinmann and Lourekas' book Photoshop for Windows
and Macintosh.
- First, choose white as your background color.
- Open the image you want to give a wrinkled edge to.
- From the Image menu, select Canvas Size to add a
border to your image. Add a border by adding a little height and width to
the current image size from this window.
- select OK.
- Click on the Rectangular Marquee
tool.
- In the Marquee Options Palette, enter 8 pixels in the Feather
field.
- Drag the Marquee tool so that it is just inside outer edge of the image
(not including the border you created).
- From the select Menu, choose Inverse.
- From the Filter Menu, select Distort, then Ripple
(Click on the - button below the preview image to zoom out to see the
effect).
- If you'd like more Ripples, increase the amount in the Options
box to heighten the effect.
- select OK.
- From the select Menu, choose Deselect.
- Save the file.
Below is an example of the Wrinkle Edge effect.
You've worked so hard to get that web page perfect. Why not place a screen shot of it
in your online portfolio and show off your great design skills?
- select New from the File menu in Photoshop.
- Open the web page for which you'd like to create a screen shot in a web browser. Then
press the CTRL, alt and Print Screen keys at the same
time.
- Flip back to Photoshop. Press the CTRL and V keys (or
select Paste from the Edit Menu)
- Reduce the image size by changing the resolution to 72 dpi and cropping out the
extraneous parts of the screen capture.
- You can also crop the screen capture selectively (to show 1/4 of the
screen, for instance)
For more tips on creating screen captures, see Laurie McCanna's How to Create a Perfect Screenshot
Painlessly.
Here is an example of a screen capture I did using the above tips:
For a list of sites where you can explore more Photoshop fun, see the links page.