How to make the rubber picture

How to make the rubber picture

The picture having ability to be scaled is called "rubber". It is possible to create such picture, using computer programs. Its convenience is that it "stretches" in the necessary direction. Such web creation is successfully displayed in any browser. If the picture contains any useful elements, "rubber" properties increase its functionality.

It is required to you

  • image, website, Adobe Photoshop program, Notepad application, HTML-code, root directory of the website


1. Find or create the image which needs to be made scaled and to place on the Internet. Start the Adobe Photoshop program. Open this image in the program. On the toolbar find Slice Tool. With its help cut the image on a part. Separate it so that all picture consisted of three graphic elements and central was empty. It will help the picture to stretch at any resolution of the monitor.

2. Save the picture with optimization for a web format (Save for web). When saving install the necessary file format - gif, jpeg or png. To change separate fragments of the image, find the option Slice Select Tool in the menu and change parts of the picture so that from the size was minimum at the smallest losses of quality during visualization on the screen. After change save pictures as html and images.

3. When saved images, be engaged in editing the HTML-code. Open the saved HTML document in the Notepad application. Erase all code lines in which there is no need. Save invariable only data on the table which images are built in

4. Instead of yourimage.gif specify path to images on your computer in lines. Height and width should be corresponding.

5. For this purpose, to make stretching a middle part of the image when extreme parts get divorced in the parties, register necessary information in code lines. Specify parameters (width and height) of own image.

6. Make loading of the created images in the root directory of the website. Specify new paths to pictures on the server, having edited thus the HTML-code. Enter the code of the picture between tags.

7. Check properties of the picture. Try to change its scale on the Internet. The image should be flexible in any direction.

Author: «MirrorInfo» Dream Team