Creating Great Web Graphics

Creating Great Web Graphics

The following steps will show you how to create a seamless pattern tile without using filters in Photoshop version 4.0.

1. Start with a new file, 100x100 pixels, in RGB Color. Select pale yellow as a foreground color and dark red as a background color. The filter we'll be using uses foreground and background colors to create its effect. Apply Filter/Sketch/Halftone Pattern, with the Pattern Type set to Circle.

2. There are probably seams in the image you've just created. To check, use Filter/Other/Offset, with the Wrap Around radio button checked. The horizontal and vertical offset amounts are 50 and 50 (see Figure 4.8). This way, the seam will appear through the middle of the image, where it will be easier to see and to clean up.

3. There are now a number of ways to clean up that ugly seam. Many people use the Rubber Stamp tool, but I prefer to use the Smudge tool. It's a lot like finger painting. Just drag the Smudge tool, set to a small or medium brush size, across the center seam a couple of times. You can constrain the tool (as you can many other Photoshop tools) to a straight line by holding down the Shift key while you click the Smudge tool at either end of the straight line you're creating.

Another way to clean up those seams is to grab a piece of the image and copy it and paste it over the seam. Use the Lasso selection tool to make a small, irregular selection. Apply Select/Feather at 2 pixels. Apply Edit/Copy, (or Control+C on Windows, Command+C on the Mac), Edit/Paste (or Control+V on Windows, Command+V on the Mac), and drag or nudge (using the arrow keys) the patch over a seam. Continue patching until all the seams are covered. You'll need to apply Layers/Merge Down before you can save the finished file.

A third method to clean up pattern tile edges is to use a paint tool. Since this pattern tile is made up of a very soft texture, you can clean up the seams using the Airbrush tool set to a small brush size and low opacity setting.

Now, fill a larger selection to check how your image will look when it is tiled and used as a background. Open a new file (or Control+N on Windows, Command+N on the Mac), set to 300x300 pixels. This is large enough to show the pattern tiled. Return to the seamless tile you've created. Apply Select/All (or Control+A on Windows, Command+A on the Mac), Edit/Define Pattern.

4.Next, select the new file, and apply Edit/ Fill. Within the Fill dialog box, select Use, Pattern; Opacity, 100%; and Mode, Normal. The results will appear as shown in the example above. If you see any obvious seams when the tile is repeated, you can clean them up in the original file, using the smudge tool or the patch method. Save this file as a .tif file, because we'll be using it in Chapter 5 to demonstrate how to lower contrast in backgrounds for web pages.

This Photoshop tip takes advantage of the fact that the Clouds and Difference Clouds filters in Photoshop will create a seamless pattern any time they are applied to an image whose measurements are some multiple of 128 pixels.

1. Start with a new file, 128x128 pixels, in RGB Color. Select white as a foreground color and purple as a background color. The filter we'll be using uses foreground and background colors to create its effect. Apply Filter/Render/Clouds. You can check the image for seams in this image easily. Open a new file (or Control+N), set to a 300x300 pixel size. Select the original cloud image. Apply Select/All (or Control+A on Windows, Command+A on the Mac). Next, apply Edit/Define Pattern.

2. Next, select the new file, and apply Edit/Fill. Within the Fill dialog box, select Use, Pattern; Opacity, 100%; and Mode, Normal The resulting image will be a seamless pattern tile, as seen below.

Extra Credit: The Clouds filter is a great place to start explorations into creating different textures using the filters that come with Photoshop. Try starting with the Clouds filter, duplicate the image by selecting Image/Duplicate, then apply some of the Artistic, Noise or Texture filters. Too tame? Try applying Image/Adjust/Invert (Control+I on Windows, Command+I on the Mac) to create a dramatic change in the contrast and color in your image.

Above you can see the seamless cloud background with nine variations. From the upper left: the original image, Artistic/Cutout filter applied, Artistic/Paint Daubs filter applied, Artistic/Plastic Wrap filter applied, Artistic/Rough Pastels filter applied. Second Row: Artistic/Sponge filter applied, Artistic/Underpainting filter applied, Artistic/Watercolor filter applied, Distort/Diffuse Glow filter applied, and Image/Adjust/Invert applied.

Using a flatbed scanner, you can use virtually any object that will fit onto the scanner as a background for your web page. The example below shows just a few of the amazing possibilities that ordinary objects offer for creative backgrounds.

The objects used in the examples above include, from left to right, a bit of fabric, a handful of plastic "jewels" from a craft supply store, a swatch of handmade paper, a paper doily, breakfast cereal, and an artichoke. Think of the infinite variety of creative backgrounds you can create from household and found objects.

Anything from a handful of costume jewelry to a scattering of leaves can become a background for your web page. This tutorial does require the use of a flatbed scanner. Obviously, you couldn't feed half an artichoke or a handful of dry pasta through a handheld or single-sheet fed scanner. I'd also suggest, if you'll be scanning messy or rough objects to protect the glass on your scanner by covering it with a sheet of clear acetate, available at art supply stores. You can also enclose the objects you'll be scanning in a plastic bag.

This tutorial will show you how to scan, make a simple adjustment, and create a seamless background from some colorful candy.We'll be covering more aspects of scanning in Chapter 6 of Creating Great Web Graphics.

1. Select File/Import, and select your scanner (your scanner drivers, obviously, would need to have been installed prior to this step). You'll want to scan a little larger than the image will show up on your web page, so scan your objects in at about 120 dpi. Your scan will probably be dark, gray in tone, and have small artifacts (what I call glitches) visible, but that's okay.

2. You'll fix the overall cast of the image first. This image scanned in too dark, as shown above. By selecting Image/Adjust/Levels, and dragging the right (or white) input slider towards the center, you'll lighten the highlights and midtones in the image.

3.Select Image/Offset with the Horizontal and Vertical amounts set to about half of your file size. Make sure that the Wrap Around radio button is selected.

4. There's a gap in the image, so I selected a portion of the image, feathered the selection using Select/Feather, then copied (Control+C on Windows, Command+C on the Mac) the selection, and pasted the selection (Control+V on Windows, Command+V on the Mac) to cover the blank area. Paint out any glitches in your image using the paintbrush, and resize the image by selecting Image/Image Size and changing the pixel size.

Create a Paper Textured Background

Create a Paper Textured Background

To Create a Paper Texture in Photoshop

1. Start with a new file, 60 x 60 pixels in size, in RGB color. Select Filter/Noise/Add Noise. Select Gaussian, and 80%.

2. Select Filter/Stylize/Emboss. Set the angle to -50, the Height to 2 Pixels, and the Amount to 70%.

3. Now you have a grey embossed paper background. To change the color, select Image/Adjust/Hue-Saturation-Brightness. Select the Colorize checkbox, and set the Hue to 40, and the Saturation to 100. If you would like a different color, change the Hue to a different setting. If the tile ends up too dark, you can adjust the contrast using the Image/Adjust/Levels feature in Photoshop, and dragging the left Output triangle until the image is light enough to use as a background. To save the file as a GIF file, in Photoshop 3 select Mode/Indexed, in Photoshop 4 select Image/Mode/Indexed, and save the file as a gif file.

To Create a Paper Background in Paint Shop Pro

1. Start with a new file, 60 x 60 pixels in size, in 16 million (RGB color). Select Image/Special Filters/Add Noise. Select Uniform, and 80%.

2. Select Image/Special Filters/Emboss.

3. Now you have a grey embossed paper background. To change the color, select Colors/Colorize. Selct a Hue setting of 40, and a Saturation setting of 200. If you would like a different color, change the Hue to a different setting. If the tile ends up too dark, you can adjust the contrast using the Colors/Gamma command, adjusting the gamma until the image is light enough to use as a background. To save the file as a GIF file, select Colors/Decrease Color Depth/256 colors, and save the file as a gif file.

Pattern Tiles

Create Seamless Pattern Tiles
with Fractal Design Painter

This tutorial will teach you how to create seamless pattern tiles using the paint program Fractal Design Painter.

1. In Painter, select File/ New. Create a small new file, say 100 pixels by 100 pixels. Select Edit/Select All (Ctrl+A on Windows, Command+A on the Mac) to select the entire image area.

2.Next, from the Art Materials Palette, select Pattern, then select Define Pattern. Then, paint away using any colors or brush choice you like. Each paint stroke will automatically wrap around the edges of the image, creating a seamless pattern tile. You can continue to paint until you're happy with the results.

3.If the image is to dark or has too much contrast to use as a background tile, select Effects/Tonal Control/Brightness-Contrast. Select File/Save as Gif to save your seamless background tile.

This is a simple, easy way to create many unique, hand painted pattern tiles for your web site.Experiment, and have fun!

Create Seamless Pattern Tiles with PaintShop Pro 4.1

This tutorial will teach you how to create seamless pattern tiles using the paint program PaintShop Pro 4.1, a shareware program available at http://www.jasc.com.

1. Select File/New, and create a new image at least 100 pixels by 100 pixels in RGB color. Create a texture by experimenting with brush strokes and paper texture selections.

2. Now you have a nice texture, but it isn't seamless. To create a seamless pattern, first make a selection using the Selection tool. This selection should be in at least 30 pixels away from the sides of the image. Then, select Image/Special Effects/Create Seamless Pattern. The resulting cropped image will be a seamless pattern.

3. Chances are that the texture you selected is too intense to use as a background on a web page and still have text that's legible. To fade the tile, select Colors/Adjust Brightness-Contrast. Raise the Brightness number and lower the Contrast number.

4. Select Colors/Decrease Color Depth, and save this as a gif file.

You can create dozens of interesting seamless pattern tile backgrounds in just minutes in this way.

Create Seamless Pattern Tiles
with Corel PhotoPaint 5 Plus
or PhotoPaint 6 or 7

This tutorial will teach you how to create seamless pattern tiles using the paint program Corel PhotoPaint 5 (Plus version) or Corel PhotoPaint 6 or Corel PhotoPaint 7.

1. Open an image or photo to begin. You might want to start with some of the clipart or clip photos that come with Corel PhotoPaint. You'll be generating seamless pattern tiles from this image using a filter set built into Corel PhotoPaint.

2. Select the entire image using the Rectangular Mask tool. Next, select Effects/Artistic/Terrazzo. The Terrazzo filter will create a seamless pattern tile from your image. Experiment with the Symmetry and Feather settings. When you find a tile that you like, select Save Tile. You can continue to experiment with different settings and saving the results, thus generating many seamless patterns from the same image. You can only save tiles in the .BMP format from within the Terrazzo filter, so you'll need to open the .BMP files and resave as a gif files later.

3.Open the .BMP file you've created. Chances are that the texture you selected is too intense to use as a background on a web page and still have text that's legible. To fade the tile, select Effects/Colors Adjust/ Brightness-Contrast-Intensity. Raise the Brightness number and lower the Contrast number.

4.Select Image/Convert To/256 Colors, and save this as a gif file.

You can create dozens of interesting seamless pattern tile backgrounds from the same original image in just minutes by following these steps. Experiment, and have fun!

Creat Pattern

Create Seamless Pattern Tiles
with Kai's Power Tools version 3.0

This tutorial will teach you how to create seamless pattern tiles using KPT 3.0 (Kai's Power Tools, a set of plugin filters for Photoshop).

The directions here are for Photoshop, but any paint program that works with KPT 3.0 should work for these instructions, too.

1.Select File/New, and create a new image about 100 pixels by 100 pixels in RGB color. Select Filters/KPT 3/KPT Texture Explorer. Experiment by clicking on the different settings until you find a texture that you like, then select OK.

Explore the interface until you discover a texture you like, then select OK.

2.Now you have a nice texture, but it isn't seamless. To create a seamless pattern, first make a selection using the Selection tool. This selection should be in at least 10 pixels away from the sides of the image. Then, select Filters/KPT 3/KPT Seamless Welder 3.0. Next, select Edit/crop in Photoshop 3, or Image/crop in Photoshop 4. The resulting cropped image will be a seamless pattern.

3.Chances are that the texture you selected is too intense to use as a background on a web page and have text that's legible. To fade the tile, select Image/Adjust/Levels. Drag the left Output slider to the center.

4. Select Mode/Indexed, and save this as a gif file.

Create Seamless Pattern Tiles
with Kai's Power Tools version 2.0

This tutorial will teach you how to create seamless pattern tiles using KPT(Kai's Power Tools, a set of plugin filters for Photoshop). If you have KPT 3.0, you should also have KPT 2.0 as well: on the CD for KPT version 3.0, in a directory named CLASSICS.

The directions here are for Photoshop, but any paint program that works with KPT 2.0 should work for these instructions, too.

1.Select File/New, and create a new image 96 pixels by 96 pixels in RGB color. Select Filters/KPT 2/Texture Explorer. On the Texture Explorer, you'll see one large tile surrounded by 9 smaller tiles. Click on the large tile in the center, and select a Tile Size of 96x96 pixels. Now, any texture you select will automatically be a seamless pattern tile.

Explore the interface until you discover a texture you like, then select OK.

2. Chances are that the texture you selected is too intense to use as a background on a web page and have text that's legible. To fade the tile, select Image/Adjust/Levels. Drag the left Output slider to the center.

3.Select Mode/Indexed, for Photoshop 3, or Image/Mode/Indexed in Photoshop 4 and save this as a gif file.

You can create dozens of interesting seamless pattern tile backgrounds in just minutes using these instructions.

Create Groovy Two Toned, Outlined Text

Create Groovy Two Toned, Outlined Text

This tutorial will teach you how to create a bold, dramatic text effect for your web site. You have probably seen this effect used in print and on television, especially for that 1960's look. Step by step instructions are given for Photoshop versions 3, 4 and 5.

Create

Two Toned Type
in Photoshop 3, Photoshop 4, or Photoshop 5

1. In Photoshop, select File/New, and create an image 120 pixels wide by 40 pixels high. Create your text using the Type tool. In this example, I've used the Eclat typeface from ImageClub. In the Type Dialog box in Photoshop 3 and Photoshop 4, set a Spacing of 1, as shown below:

In Photoshop 5, use the Type Tool to create the Type, and set the Tracking to 40 in the Type Tool dialog box as shown below. You'll need to have the text selected in order to change the tracking.

The reason for using a Spacing or Tracking setting is to give a little extra room between each letter for the outline color.

2. In Photoshop 3, you'll want to select only the text by using Control + Alt+T on Windows, or Command + Alt + T on the Mac. In Photoshop 4, you'll want to turn the transparency off for the type layer by deselecting the transparency checkbox on the layer or by using the / key.

In Photoshop 5, you'll need to Render the type layer in order to apply the outline to the type. Right mouse click on the "T" on the layer as shown below, and select Render Layer.

At this point, you will have something that looks like the image below:

3. Change your foreground color to a contrasting color. I used a yellow orange for this example. Then, select Edit/Stroke, and select a size of 2 pixels and use the Outside setting.

4. Select Mode/Indexed, or Image/Mode/Indexed in Photoshop 4 and save this as a gif file. You may want to add a drop shadow.

Remember, even though this technique is demonstrated with type, you could also use this effect on clipart, line art, or a logo.

Colour

This tutorial explains how to avoid unwanted color shifts with Photoshop 5.

One of the reasons I decided to write this tutorial is because web graphics are almost completely ignored in the Photoshop 5 documentation. One feature in particular is especially unfriendly to indexed graphics. This feature is the new color management system. While there is an entire chapter in the Photoshop 5 User Guide devoted to explaining the new color management system that Photoshop uses, no where does it siscuss specifically what to do if you are creating work for the web. The Photoshop 5 manual has only a single page that discusses web graphics, which is an astounding oversight.

This new color management system by default will reinterpret files and can cause serious color shifts. This can be disastrous for you if you have graphics that you've carefully created with specific colors (ie, the web palette) in any program other than Photoshop 5, or in Photoshop 5 on another computer with a different color management setup.

Here's an example. I created a file in Photoshop 4 that contained only the 216 colors used in the web palette:

I saved the file as both .tif and .psd, and brought the image into Photoshop 5. Then I indexed both files to the web palette. You can see that Photoshop 5 was forced to dither the image, demonstrating that the colors had been shifted from the original files by Photoshop 5:

These color shifts are happening because Photoshop is trying to correct the color for your monitor and printing setup. These color shifts can happen with any file from any application. They don't appear to happen if you've created a gif in Photoshop 5, and open it again in Photoshop 5 with the same monitor and color management settings.

How do you avoid this if you work with any kind of on screen graphics, whether for web or multimedia? You need to turn off all of the RGB color management options in Photoshop 5. If you also do work for print, you might consider having two installs of Photoshop 5, one for print work and one for web work. Either that or remember to reset the color management options when you use Photoshop.

From the Photoshop menu bar, select File/Color Settings/RGB Setup. On the PC, choose sRGB.

On the Mac, choose Apple RGB.

Under Display using Monitor Compensation, uncheck the checkbox .

Bold Text

Although Adobe brought many improvements to Photoshop 5, one of the main complaints is that you can no longer create bold or italic text from the Text dialog box without having the bold or italic version of a font installed.. This tutorial remedies this with a simple way to create a bold font without needing to have the bold version of a font installed.

1. In Photoshop, select File/New. Create your text using the Type tool. Right Mouse click (Windows) or Control+ Mouse Click (Mac) and select Render Text.

2. Make sure that your foreground color is the same as your type color. Select Edit/Stroke, and use a Width of one pixel and a setting of Center (as seen in the second example, above).

To achieve a bolder look, create the text but adjust the tracking in the text dialog box in order to give a little extra space between the letters. Then apply Edit/Stroke, and use a Width of two pixels and a setting of Outside. (as seen in the third "Bolder Text" example, above).

3. Select Image/Mode/Indexed and save this as a gif file if you'll be using this for the web.

Remember, even though this technique is demonstrated with type, you could also use this effect on clip art, line art, or a logo.

What is the typeface used for the title graphic? It's called Caflisch Script Web, and it's available from Adobe or ImageClub.

Italic Text

Although Adobe brought many improvements to Photoshop 5, one of the main complaints is that you can no longer create bold or italic text from the Text dialog box without having the bold or italic version of a font installed. This tutorial remedies this with a simple way to create an italic font without needing to have the italic version of a font installed.

1. In Photoshop, select File/New. Create your text using the Type tool. Right Mouse click (Windows) or Control+ Mouse Click (Mac) and select Render Text.

2. Select the layer that the type is on. Select Edit/Transform/ Numeric. In the Skew section of the dialog box, enter- 15. If you want to make the font tilt less, put in a smaller number. If you want the font to lean more, put in a larger number, like -30.

3. Select Image/ Mode/Indexed and save this as a gif file if you'll be using this for the web.

What is the typeface used for the title graphic? It's called Decotura, and it's available from ImageClub.

Border Text

1. In Photoshop, select File/New, and create a file 100 pixels wide by 60 pixels high. Using the Rectangular Marquee tool, create a rectangular selection. From the menu bar Select/ Feather with a radius of 1 pixel. Fill this with a pale violet. Then change the foreground color to a red violet, and select Edit/Stroke, with a Width of 6 pixels, and a Location of Outside. The result will look like the image below:

Hey, I know it doesn't look like much yet, but hang in here. A few more strokes and we're done!

2. Set the foreground color to a pale yellow orange, and select Edit/Stroke,with a Width of 3 pixels, and a Location of Outside. Change the foreground color to violet, and select Edit/Stroke,with a Width of 1 pixels, and a Location of Center. Add text if you like, and your result should look like the example below:

You can create a multitude of effects depending on the choices of colors and the widths of the strokes that you apply.

Create Rainbow Edges for Text

1. In Photoshop, select File/New, and create a file 100 pixels wide by 60 pixels high. Set the foreground color to yellow and create your text. In Photoshop 5, select Layer/Type/Render Layer.

In Photoshop 4,deselect the Preserve Transparency checkbox on the Layers palette, or use the keyboard shortcut.

2. With the type layer selected, from the Layers Palette, select Duplicate Layer. Select the type on the copy layer by Control+clicking on the Layer (Command+clicking on the Mac). You should see the "marching ants" indicating a selection.

3. From the menu bar, Select/Feather with a radius of 1 pixel. Change the foreground color to a red violet, and select Edit/Stroke, with a Width of 6 pixels, and a Location of Outside. Change the foreground color to orange, select Edit/Stroke with a Width of 2 pixels, and a Location of Outside. Change the foreground color to white, and select Edit/Stroke,with a Width of 1 pixels, and a Location of Center.

4. Select Image/Mode/Indexed and save this as a gif file.

Remember, even though this technique is demonstrated with type, you could also use this effect on clip art, line art, or a logo.

What is the typeface used for this graphic? It's called ITC Vinyl, and it's available from ITC or Image Club.

Text Effect

1. In Photoshop, select File/New. Create your text using the Type tool. This example uses a bold font.

2. The next step will use Layer Effects. You can find these by selecting Layer/Effects. or by right mouse clicking in Windows on the T icon in the Layers palette.

The first example uses the Inner Shadow Layer Effect, using the default settings.

The second example uses the Inner Shadow Layer Effect, using the default settings. Then the Bevel and Emboss Layer Effect was applied, changing the following default settings. The Style was set to Inner Bevel, Depth was set to 3 Pixels, and Blur was set to 2 pixels. Finally, the Drop Shadow Layer Effect was applied, with the default settings changed to Opacity 35%, Distance to 3 Pixels and Blur to 2 pixels.

The third example below uses the Bevel and Emboss Layer Effect was applied, changing the following default settings. Highlight Mode was changed to Normal, the Opacity was changed to 100%, the Style was set to Pillow Emboss with a Depth of 3 pixels and a Blur of 2 pixels. Finally, the Drop Shadow Layer Effect was applied, with the default settings changed to Distance to 3 pixels and Blur to 2 pixels.

3. Select Image/Mode/Indexed and save this as a gif file.

Remember, even though this technique is demonstrated with type, you could also use this effect on clipart, line art, or a logo. Layer Effects can be applied to any layer in Photoshop 5. They can also be copied between layers as well.

Photoshop

Tool bar

1. 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.

2. 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 have a high constrast.
3. Select Filters > Render > Clouds.



4. 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. If you don't like the first effect you get with this filter, hit Ctrl + F on Windows, Command + F on the mac, which will reapply the filter and give a slightly different result each time.

5. Return to the Filter menu. Select Render > Lighting Effects.6. In the Light Effects menu, change the shape of the ellipse to a circle that is centered within your file. Use the Default Spotlight setting, but change the Narrow setting to 39.



Voila! You have created the world in six easy steps.