|
|
How to create rollover buttons
- From the File menu select New to create a new image.
- Settings: width: 100px, height: 25px, resolution: 72px/inch, mode: RGB
color, contents: transparent
- Use the Paint bucket tool to fill the image with the color you want.
- Apply a layer effect. For example, select Layer Styles > Bevels >
Simple Sharp Inner
- Add and align the link text, e.g., Verdana 12pt, white.
- Save the file for the Web: GIF 64 no dither.
- Make another new image of the same size with the same layer style but
a different color and different color text.
- Save the file for the Web.
|
How to create a feathered border around an image
- Open an image and select the Rectangular
Marque Tool.
- Select an area of the image that leaves a
border of the width you want.
- From the top menu, select Select >
Inverse.
- From the top menu, select Select >
Feather.
- From the Feather Selection window,
specify, for example, a feather radius of 5 pixels and click OK.
- Make the image foreground color white,
and then select the Paintbrush tool.
- Apply the paintbrush to the active
selection to erase all of the color.
- Deselect the active selection from the
top menu: Select > Deselect or from the keyboard: Ctrl + D.
- Flatten the image: from the menu: Layer >
Flatten Image.
- Feather another image and experiment with
different feathering settings; try using the Elliptical Marquee Tool and
the Lasso Tool.
Fade an image on one side
- Open an image and select the Rectangular
Marque Tool.
- Select an area on the right side of the
image that is about 70 pixels.
- From the top menu, select Select >
Feather.
- From the Feather Selection window,
specify, for example, a feather radius of 30 pixels and click OK.
- Use the previous procedure with the
Paintbrush tool to remove the color and to complete the effect.
Fade part of an
image with a layer mask:
- Make the image foreground color white,
and background color gray.
- Select Layer > New Fill Layer > Gradient.
Give the layer a name or accept the default name. Click OK.
- In the Gradient Fill window experiement
with options.
- Flatten the image to complete the effect.
- Use the technique with another image,
experimenting with different foreground and background colors.
|
How to create a Web page banner with
text, a gradient, and a drop shadow
-
Select File -- New: Name it
"banner," 740 pixels wide, 50 pixels high, contents White, Resolution 72
pixels/inch, Mode: RGB Color.
-
Change the foreground color
to navy blue (#000099), select the gradient tool, and extend the gradient
cross hairs horizontally across the image from left to right, then release
the mouse button.
-
Select the Effects tab,
select the Drop Shadow Frame image, and click Apply. Click OK to Flatten
Layers.
-
Crop the image so that
there is no white space on the left side of the image.
-
Select the Text tool, and
from the Text tool bar select Verdana, 36 pt, Regular, White,
Anti-aliased. Position the cursor on the image, and then type "Verde
Canyon Elementary School."
-
Select the Move tool, and
center the text on the image.
-
From the Layers palette,
click the Layer Styles tab, select Drop Shadows from the menu, and click
the Hard Edge icon. Go to the Layer menu -- Layer Style -- Style Settings.
Change the Shadow Distance to 3 pixels. Deselect the text.
-
Save the image as
banner.jpg to the web site images folder. Accept the jpeg options
defaults. (Results in ~755 x 70 pixel image.)
|
How to create round text boxes
-
Set up a new image named "round1" that is
700 px wide and 100 px high with a white background.
-
Select View -- Show Grid from the top menu.
-
Select the foreground color you want. In
this example, select #FFCCCC.
-
Use the Paint Bucket tool to fill the image
with the foreground color.
-
Using the Rectangular Marquee tool, select
the top, left grid cell and press the Delete key.
-
Select the Custom Shape tool, and select
the Ellipse tool.
-
Make a circle in the cut out grid cell.
-
Select Layer - Flatten Image from the top
menu.
-
Use the Paintbrush tool to fill in the
white space in the top right, bottom left and bottom right sections of the
circle.
-
Using the Rectangular Marquee tool, select
the top, left grid cell containing the circle.
-
Select Edit -- Copy from the top menu, then
select Edit -- Paste.
-
Select the Move tool and click the pasted
image.
-
Select Image -- Rotate -- Flip Horizontal
from the top menu.
-
Move the image to the top, right grid cell.
-
Select the Crop tool, and crop the image so
that the section with the white corners is retained.
-
Save the image in the gif format. Accept
the default save options including flatten the image.
|
Optimizing Graphics for
Websites
Web pages
require JPG or GIF or PNG image types, because that is all that browsers can
show. JPG is the best choice (smallest file) for photo images, and GIF is
most common for graphic images.
JPG compression is the most efficient – it results in relatively small files
– but the price for achieving this is a loss in image quality. For this
reason, JPG files are not a good choice for archiving your important images.
The visible signs of excessive JPG compression are JPG artifacts. Artifacts,
such as patterns or blocky areas of banding, are created each time you save
an image in JPEG format. Therefore, you should always save JPEG files from
the original image, not from a previously saved JPEG.
GIF is an excellent format for graphic images on the Web that use a limited
number of colors. The GIF format uses 8-bit color and efficiently compresses
solid areas of color while preserving sharp details like those in line art,
logos, or type. You also use the GIF format to create an animated image and
preserve transparency in an image.
The PNG-8 format uses 8-bit color, and like the GIF format, it efficiently
compresses areas of solid color while preserving sharp detail like those in
line art, logos, or type. However, PNG-8 is not supported by all browsers.
The PNG-24 format supports 24-bit color, supports background transparency,
and, like the JPEG format, is suitable for photographs. PNG-24 preserves
sharp details like those in line art, logos, or type. PNG-24 files are
usually larger than JPEG files of the same image, and are not supported by
all browsers.
TIFF is the most universal and most widely supported image format across all
computer platforms (Mac, Windows, Unix), and TIFF is the format of choice
for archiving important images, but Tiff files are much larger than other
file formats.
Optimizing a photograph for the Web:
-
Open a photograph image to experiment with.
-
Choose File -- Save For Web or choose the
Save For Web icon in the Shortcuts bar.
-
In the Save For Web dialog box you can view
much or all of the original image, a preview of the compressed image, and
relevant settings and download speed information.
-
From the Settings drop-down list you can
select JPEG High (60%), JPEG Medium (30%), or JPEG Low (10%). You can
fine-tune the setting using the Quality text box.
-
Click the arrow button to the right of the
optimized image to view the preview pop-up menu where you can choose
display and download speed options:
-
The Browser Dither option shows what you
can expect if your JPEG image is shown with limited color.
-
Uncompensated Color (the default option) to
view the image with no color adjustment.
-
Standard Windows Color to view the image
with color adjusted to simulate a standard Windows monitor.
-
Standard Macintosh Color to view the image
with color adjusted to simulate a standard Macintosh monitor.
-
Document Color Profile to view the image
with its color profile if one exists for it.
-
Experiment with the different options
available to see how your image will look, and use the Zoom tool and the
Hand tool in the upper-left corner to inspect the preview image closely.
The higher the Quality setting, the more detail is preserved in the
optimized image. However, a high Quality setting results in a larger file
size than a low Quality setting. View the optimized image at several
quality settings to determine the best balance of quality and file size.
-
The JPEG format does not support
transparency. When you save an image as a JPEG file, transparent pixels
are filled with the Matte color. To simulate the effect of background
transparency, you can match the Matte color to your Web page background
color. If your Web page background is a pattern, you should use a format
that supports transparency (GIF, PNG-8, or PNG-24).
-
Specify Progressive to create an image that
displays progressively in a Web browser. Progressive images display first
at a low resolution, and then at progressively higher resolutions as the
image downloads. If you chose Optimized to create a smaller file, the
Progressive option won't be available. Progressive JPEGs are not supported
by some browsers.
-
Use the Preview In area in the lower middle
of the dialog box to preview your image in various Web browsers.
-
Click OK when you're ready to save your
image. The Save Optimized As dialog box will open, and from it you can
specify the folder in which you want to save your image. Click Save to
save the image.
Using background transparency
to create a non rectangular optimized image for the Web
-
Background transparency is supported by the
GIF and PNG formats.
-
Select File – New or click the New icon in
the toolbar. Name the image go2, 120 x 100, mode rgb color, and specify
transparent.
-
Create the GO button using the ellipse and
text tools. Bold, Arial, 36 pt, white.
-
Layer Styles – Bevels – Simple Outer.
-
Select File – Save for Web. Specify GIF Web
Palette, no dither, transparency, matte: none.
-
OK, save as go2.gif
-
Display in a web page with a red table.
|
|
