www. Teachwebdesign .Com
Navi- gation
Temp- lates
HTML Tricks1
HTML Tricks2
HTML Tools
Design QUIZ

Make Images For Any Purpose
Using Free Online Image Editors

How To Make Your Own Images For Banners, Buttons, Backgrounds, Awards Or For Anything...

NOTE: Many beginners don't know that anyone can download and save any (almost any) Image from any web page simply by placing your mouse over it, then Right Click, then choose "Save Picture As" [may be called something else depending on your Browser] from the menu that opens... you can save it to anywhere on your PC and you can Rename it (delete the name that is shown and type in your new name) to any name you want (keeping the same file extension of course)...

IN ADDITION: When you open the small menu by Right Clicking on an Image, you can go down to the bottom [may be elsewhere depending on your Browser] and choose "Properties" which will nicely give you the Image's filename, bite size, and physical size in pixels (as it is shown on the page)...

Watch the Image Tutorial Movie which shows the above information to you Live!

Watch Movie in Media PlayerWorking With Images

We will give you a "Blank Gif Image" here which you can Right Click and "Save Picture As" ... you will then use it to build any new Images that you want... at any editor online ...here it is in the center of the gray background table cell, the filename is "blankban.gif", it will be 468 x 60 in size (pixels) but resized here to 100 x 60... byte size is 293 bytes...

blankban gif
  • NOTE: There are of course MANY Downloadable Image Editors available on the Web, some Free some Cost $$$, but for beginners, using a Free Online Image Editor is much better...
  • Free Online Image Editors can be found simply by Googling for them! Below we have selected some for you to try


Irfanview Image Editor

Dynamic Drive's Image Optimizer

Online Photoshop Alternative Free

Another Free Photoshop Alternative

Check out some of the other Websites For Image Design at our Design Links page...

Do you need some kool images to add to your pages? Try a Search at: Google Image Search ...when you find one, then "Right Click and Save Picture As" (as we discussed above)...

REMEMBER: You Should Download Files To Your Own Site...NEVER Link To Them (Hot-Link)...

Even more important: You must always check for any Copyright Infringements before downloading any Images!

After you have made an Image Blank following the instructions at the top of this page...you can use this blank by RESIZING it to make an Image Background for either a full page width, or a table cell, or div block...

Since background sizes cannot be specified in your codes, you have to originally make them the size that's correct for them to TILE across your area...

It is important to use CSS code for proper background usage, and you can STUDY it at W3Schools CSS Tutorials

If you have a full width page area, we recommend making the original the size of 136x60 pixels because it will TILE nicely across most browser windows ...for a table cell or div block you must make the original size according to whatever size your cell or block is...

You can change your height from 60 to whatever you want depending on what you want it to look like in the background...

CAUTION: If you try to make LARGE images to Tile only once across a FULL page especially pictures (jpegs) they will SLOW your load time considerably... keep them small and in (gif) file type...

However making a Large image to use as a Border Background is acceptable and it will tile only once across if you make it wide enough, say 544x375 pixels in original size and use Proper Location and Repeat CSS Properties ... If you keep it's byte size small it will load fast for your background... OR using a Large image to tile once across a top Header is useful... use the proper CSS Codes and select an original image width of say 1200 or even 1600 since many users select their screen resolutions to these higher numbers (and for lower resolutions if you use Proper CSS Background Code... the image will still show, except only the "center-most" section will be visible!)

Typical styling for this background upper header example would be placed into the block level element like so:

style="background-image: url('/images/myimage.jpg'); background-repeat:no-repeat; background-position:top center;"

We made a SAMPLE Border Background: View Sample Background Here

To see it as a background behind a table on a page, look at Our Sample Page