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
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!
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...
- 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
...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!!
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 Magic page for information to
help you along and 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
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
Watch the Image Magic 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...
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 or midis (sounds) to add to your
pages? Try a Search at:
Google Image Search ...when you find one, be sure to get it onto your Browser screen BY ITSELF, then "Right Click and Save Picture As" ...
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
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
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;
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