Photoshop Backgrounds
Backgrounds & Buttons (Examples)
Background can enhance or detract from a webpage. In creating or enhancing a background, make sure it fits the theme of the page and does not detract from the images or text. Keep it subtle!
There are thousands of backgrounds available on the Web. Check to see they the "owner" allows you to enhance.
In addition to the usual search terms, also search under Photoshop backgrounds, gray desktop patterns, or artistic patterns. You can recolor grayscale images in Photoshop.
You can create a simple background of one color. Why? Users can change their computer preferences to "overrule" your background color.
You may also wish to create a small "tile" that can be used as a spacer (spacer .gif). When created with the same background color as your page background, this can be used as an indentation tool or in arranging images and text on the screen.
Save a tile as transparent to make it invisible. Invisible spacer gifs can be stretched or skewed without impacting their quality - they are invisible!
For fast load time, create a small graphic tile and have ImageReady turn it into a background image for the page. As a rule of thumb, it is best to save as a 20x20 pixel tile.
Image > Adjust assists with contrast, brightness, hue and saturation.
Filters add special effects to an image canvas - just don't get carried awayJ
TIP:
Fill background color - CTRL + backspace
Fill foreground color - ALT + backspace
Edit > Fill
Creating a Simple Basic Background Color
o File > New > 5 x 5 pixel > color
o Save
Creating a Textured Background
- File > New > 100 x 100 pixels
- Fill it with your desired color (paint or ALT + backspace)
- Filter > Texture > Texturizer > Sandstone > click ok
- Save
Clouds
- File > New > 100 x 100 pixels > fill it with your desired color (light to medium colors usually work best)
- Filter > Render > Clouds
- Filter > Texture > Texturizer > select a texture > click ok
- Jump to ImageReady to eliminate seams
Layer Effect with Backgrounds
- File > New > 128 x 128 pixels > fill it with your desired color (light to medium colors usually work best)
- Layers Palette > new layer > foreground/background black (alt + backspace)
- Layers palette > Layer style (f popup menu) > pattern overlay
- Pattern picker > clouds (scale 400%)
- Layer styles > color overlay > select a dark color - mode to screen - opacity 50%
- Click ok
- Layers palette > flatten image
- Filter > texture > texturizer > sandstone (scale 100%), relief set to 4, light direction to top > click ok
- File > New > 128 x 128 pixels > fill it with your desired color (light to medium colors usually work best)
- Filter > Render > Difference Clouds
- Duplicate the layer by dragging it over the New Layer icon in the layers palette
- (duplicate layer) Filter > sketch > chrome
- drag the detail & smoothness slider to adjust the effect
- blending mode (layers Palette) to hard light
- TIP: use different blending modes and layer opacities to create the background effect you wish to have
Star Field
- File > New > 128 x 128 pixels > black foreground, dark blue background
- Gradient Tool > drag the foreground to background gradient (foreground to background gradient is the first swatch on the top row of the gradient picker) > drag from top to bottom, with black on the top & blue on the bottom
- New layer > black (ALT + backspace)
- Filter > Noise > Add Noise > Gaussian (set amount) & monochrome > click ok
- Filter > Blur > Gaussian blur (radius 1) > click ok
- Image > Adjust > Threshold >
- Drag the slider slowly to the left and stars will soon begin to appear, drag further for more stars
- Image > image size > 300 ppi > click ok
- Image > image size > 72 ppi > click ok (softens the stars)
- Filter > render > lens flare > click ok
- Change the blend mode of this layer from normal to screen
- Click ok
Grid
- File > New > 15 x 15 pixels (white background) RGB color
- Paint > select a color
- Select > all
- Arrow keys (once down and once to the right)
- Fill the background of the "nudged area" with another color
- Select > all
- Edit > define pattern > name the "design"
- Edit > fill > select a pattern
Motion Blur
- Filter > Blur > Motion Blur
- Filter > Other > Offset
- Using a marquee tool, select the middle third of the image and repeat MOTION BLUR
- Option: change the color of this tile using the hue/saturation adjust menu
- TIP: try different distance settings for MOTION BLUR and various angle settings
Angled Motion
Twirl
Filter > blur > gaussian blur (radius 1.5)
Filter > distort > twirl (angle 150)
Filter > other > offset (64, 64, wrap around)
Filter > distort > twirl (angle 150)
Mosaic
Filter > blur > gaussain blur (radius 1.5)
Filter > texture > mosaic tiles (size 12, width 3, lighten 9)
Creating a Tiled Background
- Create an image that is small - no more than an inch square.
- File > New >
- Create an image area of 72 x 72 pixels (transparent background)
- Image > Mode > Indexed Color > web palette
- Airbrush (thin brush) > double-click the tool > dissolve blending mode
- Create an abstract painting
- Save as .gif
Creating a Border/Sidebar Background
These can be added to a table to keep the background from tiling, but more often, they are created with height or width set to prevent tiling.
- File > New > 640 x 1 (white background) - (most browsers view at 640 x 480 pixels)
- Image > Mode > Indexed Color > web palette
- Zoom > select foreground color >
- Airbrush tool > (tool over 1 pixel)
- Paintbrush > add paint to left fourth of the image
- Save as .gif
- File > New > 1200 x 50 (white background)
- TIP: it may help to turn the ruler/grid lines on
- Marquee tool > 100 pixels (left side of image)
- Paint bucket > fill with color
- Marquee tool > 10 pixels (next to the color above)
- Edit > fill > use black (opacity 100%)
- Select > deselect >
- Filter > Blur > Gaussian Blur (radius 1.5) for a soft edge
- Image > Canvas Size > 1 pixel (height) > clipping warning (proceed)
- Save
Return to the Top
|
