Cool Graphic Design Tutorial | Creating Web Graphics and Images the easy way

By admin on April 23, 2010

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

cool graphic design tutorials

Cool Graphic Design Tutorial | Creating Web Graphics and Images the easy way

Web graphics refer to images of a low resolution that are created and customized for use on the internet. These images include buttons, icons, bullets, menus, animated GIF images, website layouts, and many more.

Web graphics are made using one of the many graphics software including Adobe Photoshop, Corel Paint Shop Pro, the Gimp, etc. One other software is Cool Text Graphics Generator, which is the world’s most popular text generator, since it had been uploaded to the internet in 1998.

A great partner to the Adobe Photoshop software is Adobe ImageReady. This software is a bitmap graphics editor available on computers with Mac OS X and Windows Operating System It is designed to be used by persons to quickly edit web graphics with its specialized features such as image compression and optimization, animated GIF creation, image slicing and rollover effects, and HTML generation.

Steps to creating web graphics by using the Adobe ImageReady software.

Step 1

Click on the ImageReady icon on your start menu or on the desktop to open the software. You could also use the link found in Photoshop, if that software is already in use. Another option is to use the shortcut ‘Cmd-Shift-M’ for Macintosh computers or ‘Ctrl-Shift-M’ for other PCs.

Step 2

Click on the file menu and select New to create a new document. You could also use the keyboard shortcut ‘Cmd-N’ for Macintosh computers or ‘Ctrl-N’ for personal computers.

Step 3

In the dialog box that pops up, you should enter the name that you want your document to have, select the image size and the contents of the first layer. If you are not sure, what the contents will be then the best option to choose is “Transparent”.

Step 4

At this point, you use the same tools and techniques from Photoshop, to create your graphic ImageReady. You can also make use of the toggle button at the bottom at the toolbox to toggle between Photoshop and ImageReady.

Step 5

After creating the image, you can use the slice tool to cut the image into sections and the slice selection tool to select any one of the sections. Areas that are photographic (multicolored) in nature must be compressed using GIF format by using the “Optimize” palette.

Step 6

The “Animation” and “Rollover” palettes can be used to add animation and rollover effects to your image.

Step 7

When saving your file, select “Save Optimized As” from the file menu and create a new folder for the web graphics. The file should be saved using the “HTML and Images” from the format option with the “Default Settings” and “All slices” from the slices option.

*************************

Get a web site graphics course. Discover how easy and simple it can be to do your own graphic design (or at least some of it). Plus, find out the exact resources I recommend to save a bundle.  Avoid going down the wrong path.

Bookmark and Share

Incoming search terms for the article:

Leave a Reply