adv banner
Photoshop  Home Photoshop ImageReady Animation Photoshop & ImageReady Backgrounds
rss

Photoshop & ImageReady Backgrounds

Author: heathrowe More by this author


Here is a simple way to create small tillable background images for your web pages using Photoshop and ImageReady.
This tutorial assumes you are using Adobe Creative Suite and the fonts bundled with it.

For those not using the Creative Suite, substitute D below with an ornate dingbat font from your collection and ignore 'Ornaments' step that immediately follows.

A. Create a new document. Your preference choice. (The final output will be small, anyway's)
B. Set your foreground Color, your preference (I used #F4F8F1), & create a Solid Fill layer based on this color.
C. Select the Type Tool from the Tool Bar. Go 'Window/Character to bring the Character Palette to the foreground.
D. Within the Character Palette browse to the 'Adobe Caslon Pro' Font and set your desired settings. (I used font color of #5A9221.)
E. With the Type Tool active create a new type layer and use the letter 'v'. (As captured below)


Photoshop & ImageReady Backgrounds

Next, from the Character Palette menu options select the Open Type ligature feature called 'Ornaments'. And the standard 'v' is converted into the symbol I have captured below.

Photoshop & ImageReady Backgrounds

Next, lower the Opacity of this Type Layer to a reasonable integer. I used 25%. (Ultimately, you don't want your background to be glaring to your viewers.)

Photoshop & ImageReady Backgrounds

Next, Ctrl + Click on the Type Layer to select its pixel content, then go 'Image/Crop' to eliminate the surrounding unwanted areas as I have captured below.

Photoshop & ImageReady Backgrounds

Thats it for the Photoshop portion, next hit the 'Edit in ImageReady' button located on the Toolbar.   Photoshop & ImageReady Backgrounds

Once in ImageReady, select the Output menu option (encircled in Red) and from the list choose the 'Other' feature, as I have captured below.

Photoshop & ImageReady Backgrounds

Once in the Output dialog, hit the 'Next' command until you reach the Background settings.
Tick the View Document as 'Background', then OK to commit the Output settings.

Photoshop & ImageReady Backgrounds

Finally, go 'File/Save Optimized As' as captured below.

Photoshop & ImageReady Backgrounds

Set the following options as captured.
Unique filename.
Save Type both .html & Images.
Choose the 'Custom' settings created earlier.

Photoshop & ImageReady Backgrounds

View the final output of this tutorial here.

Plenty of room for possibilities here.
Click the below thumbnails for variations.

Photoshop & ImageReady Backgrounds Photoshop & ImageReady Backgrounds Photoshop & ImageReady Backgrounds Photoshop & ImageReady Backgrounds


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Photoshop & ImageReady Backgrounds"