Animate your images to attract attention and fight the static boredom. This section contains tutorials to help you master the animation process.  Home Photoshop ImageReady Animation Photoshop imageready backgrounds

Photoshop imageready backgrounds


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)


image 1

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.

image 2

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

image 3

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.

image 4

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

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

image 6

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.



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

image 7

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

image 8

View the final output of this tutorial here.

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

image 9 image 10 image 11 Photoshop & ImageReady Backgrounds

Author's URL: heathrowe
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Animate your images to attract attention and fight the static boredom. This section contains tutorials to help you master the animation process. More ImageReady Animation Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Photoshop imageready backgrounds"

Captcha