Goto Introduction Page
www.Teachwebdesign.Com
 
Sub Menu contents
· Learn HTML

· Design 1 (Basic Info)

· Design 2 (Building a Page)

· Design 3 (Fine Tuning)

· Design 4 (A Sample Page)

· Design 5 (A Page Analysis)

· Design 6 (Mobile Web Pages)



Design Links
 ·HTML Tags
 
 ·Image Sites
 
 ·Validators
 
 ·Web Hosts
 
 ·Design Sites
 
 ·CSS Sites
 
 ·Javascript
 
 ·Misc Sites


Help Pages
 ·F A Q
 
 ·Page Layout
 
 ·Custom Tables
 
 ·Page Navigation
 
 ·Templates
 
 ·HTML Tricks 1
 
 ·HTML Tricks 2
 
 ·Image Help
 
 ·Glossary
 
 ·Tools
 
 ·Ask Questions


Tutorials
 ·Tutorial 1
 
 ·Tutorial 2
 
 ·Craigslist Tutorial
 
 ·eCommerce Tutorial
 
 ·Page Videos
 
 ·Form Mail
 
 ·Sound Tutorial
 
 ·All Tutorial Videos


Extras
 ·Critiques
 
 ·Quiz
 
 ·News Gps

IMAGE DESIGN movies
Make Images For Any Purpose
Using Image Magick's
Free Online Image Editor


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 Player takes a minute to load... player controls are at bottom!

In order to make an Image at Image Magick, you should have a "Blank Image GIF" to start from... it should have preferrably a White Background and be sufficient in Physical Size in order to enable easy Image Designing...

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 Image Magick (see below) ...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 and this is why we have chosen Image Magick!
  • Next you need to learn how to use the facilities at Image Magick ...you MUST STUDY this site inside out because it is the easiest and best to use for free image design! Even if it take days, it's worth it because you'll be an ACE at image design when you're finished!!
  • Well then... plug in your full address for your "blankban gif" into the form box at Image Magick Studio... you can use their Browse function to locate it from your PC, OR if you have uploaded it to your Online Host Server, you can enter it's URL...
  • When it returns your blank image on the next page, select the "tab" (tool) at the top that you want to use and go ahead and build your new image...
  • Experiment a bit to see how the tools work... remember that at first you will not be able to see the Image, until you begin to add text, colors, etc. because it has a White Background Color
  • NOTE: Your "blankban gif" will be difficult to "see", until you begin to change it using the tools...
  • Click the "Blue Text Links" on the Image Magick pages for more information to help you along... so in the pic below the Blue Text "Filename" is clickable to give you more info about it (so is the text "URL")! You'll find clickable Blue Text links throughout the Image Magick Pages!

  • Just hit your browser back button to cancel a step and redo it...
  • Your new Image can be placed onto any background color of your pages, but you should first change it from White to Whatever Background Color Your Page Has, by using the "Paint Tool" near the bottom of the first tool page... so that it will "Blend-In" if you don't want it to "Stand Out" as when you might design a small Gif or whatever...
  • You'll find that using "annotate", "resize", "decorate", "draw", "transform", and "paint" (down the page) will suffice for your needs but you should also experiment with other "tabs" (tools) to see what you can create...
  • Since you have a blank you can RESIZE IT and use it to design any image for anything you want (banners, buttons, headings, awards, animations etc), this is important to remember
  • AN Important Tip: When you get a few steps into your new design, output it and save it to your site with a new name such as "blank1.gif" then you will know that you have "captured" it at that step in case you want to reuse it from that step to make a different design later...
Watch the Image Magick Tutorial Movie, which simply shows how to 1. Locate your Blank Gif (you can Browse to it on your PC, OR if you have it located on your Host Server, you can Type In the URL)... 2. It shows a typical Resize... 3. It shows a typical Red Border Added... 4. It shows a typical Annotate... 5. It shows how to Output and Save the new Image to Your PC in whatever location Directory that you want, with whatever Name that you want...

Watch Movie in Media Player takes a minute to load... player controls are at bottom!


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

Tricks 2---Tables 1