|
|
|
|
|
|
|
|
|
ttt |
|
 |
|
 |
Two formats of images are used by web browsers. One is the GIF (Graphic Interchange Format) format and the other is JPG (Joint Photographic Experts Group). The GIF format is used mainly for images with solid color, line art, simple color schemes, and JPG is used for images taken with digital cameras and with continuous tone artwork . BUT the problem here is to turn your images into those formats!!!! THIS IS CRUCIAL!!!!!! Most web editors do NOT!!! make this transformation. You must do it yourself. So, please download either: GraphicConverter (http://www.download.com) for the Macintosh platform or LView (http://www.lview.com/index1024.htm) for the DOS platform are shareware programs which you can use for this semester. Then if you like them, you must pay the shareware fee. NOTE: You can use any image program that allows for conversion of images to .jpg or .gif format. |
|
|
|
1) Lynda Weinman has been a leader in the field of web graphics. Her first book, <designing web graphics> How to Prepare Images and Media for the Web remains a classic in the field. For this week, please read Lynda's introductory chapter from that book. (http://www.lynda.com/products/books/dwg//intro.html).
ttt
2) Place appropriate images on your pages.
1. Select the images you want to use. Crop and resize.2. Convert them either into GIF format or JPG, whichever is available for the type of graphic you chose. Do this by opening your image converter program and then do a SAVE AS. At that time choose the format.
3. Place the image where you want it in your home page.
NOTE1: Most web editors have an insert image button which will look somewhat like this:
NOTE2: Sometimes you will wnat t oamke the backgorund of your image transparent so that it blends in with your page. Click here for How to set Transparency in an Image.
NOTE3: The HTML code for images is:
<IMG SRC ="imagename.gif">ttt
3) Try changing the color of your background.
The command for background is:<body BGCOLOR="#ffffff">where the color is given in hexadecimal notation. Since colors are not cross platform, and only 216 colors appear on both platforms, you need to use colors that will be available on both platforms. This means, DO NOT ask for a special color!!! Keep to the standard colors. You can get the standard colors with codes at Jacobson's color chart (http://www.hypersolutions.org/rgb.html) site. Also, be careful of the text colors. If you use a dark background, then you must choose a light color so that people can see your text easily. Click for an example of BAD text color on a background.
ttt
4) Try a background image.
Some sites use the logo as their background image, but the logo is made to be very faint. Other sites use one of the many background images. You can even use an animated gif as a background image, but please know that this sometimes (unless chosen well) can be most disconcerting!The same problem exists, but even more so, with text color on web sites which have images in their background. Be very careful with text color here. If you use a textured background, make sure your text and links color are in a strong contrast to the background. At IconBAZAAR (http://www.iconbazaar.com/), there are lots of interesting backgrounds including some nice clouds .
ttt
5) Most web editing programs offer a basic horizontal line that can be inserted to break up a page. Once placed, you can adjust the size and the color of the line.
If you want more dramatic lines, there are many of them available at most sites that offer web graphics. Or you can create your own using your paint program. Just save the line to your image folder.
HINT: When saving any image to your computer, you should rename it as you save it. This method allows you easily to identify what it is. You may want to make folders for various web images, i.e. bullets, lines, backgrounds, etc.
ttt
6)Your home page becomes more personal if you use your own bullets or small images for accents on your lists. Lots and lots of places are out there on WWW. Do a search for "bullets." ShockZones Gallery (http://www.theshockzone.com/clipart/index.html) is only one of many which has lots of free bullets, bars and lines.
Those of you who have DingBats or a graphical font can use those images. But you must convert them to graphical images, not text images. The reason is that people can set their web browsers to view the incoming documents with whatever fonts they wish. You have no control over fonts and typography unless you convert it into graphics. . So if you want to use a different style text, then do the following:1. Open a paint program.
NOTE: The little image above by the numbers is from Zapf Dingbats. Also, at the top of the page is the Week 11 gif, which was done using the typeface PaintStroke. Both images were created in image programs using the Text Tool and then saved as a gif.
ttt
7) Work with adding images and styles to your web site that "fit" with your content.
Chapter 7- Designing Web Pages: Principles for Students and Teachers, pp. 209 - 222
(http://www.alphabets.com/)Cooltext.com - a totally free online service which provides real-time generation of graphics customized exactly the way you want them.
(http://www.cooltext.com/)Creating High-Impact Documents - an excellent article reviewing the different image formats with examples
(http://home.netscape.com/assist/net_sites/impact_docs/index.html)Flyvision's TILES- a place of unusual and interesting tiles!! - Escher type tiles!
(http://www.flyvision.org/SI/tiles/index.html)Free Clipart.com - over 30,000 Free Clipart Images, such as animated gifs, icons, backgrounds, bullets, clip art, and pictures; all free for you to download.
(http://www.free-graphics.com/)GifWorks - free tool to develop 3D Text Maker, Animated Banner Maker, ButtonMaker, FontMapper, and PostcardMaker
(http://www.buttonmaker.com/)Hand Writing Fonts - a set of fun handwriting fonts for both Windows and Mac
(http://www.execpc.com/~adw/)Image Alchemy Miles of Tiles - tiles created with Xaos Tools' Terrazzo, a Photoshop plug-in for creating seamless tiling patterns! You can use them ffor free, but you need to credit the site.
(http://www.alchemy.com.au//miles.of.tiles/main.php)lynda.com - Links - a set of links for fast graphics, cross-platform considerations, web color, rules, bullets, background Tiles, typography,m etc.
(http://www.lynda.com/resources/links/index.html)Non-Dithering Colors in Browsers - Weinmans' charts for use of colors on the web
(http://www.lynda.com/hex.html)QBullets by Matterform Media - a collection of 22 free icons that attach to hypertext links to indicate their function.
(http://www.matterform.com/qbullets/index.html)ShockZone Backgrounder - a set of backgrounds and also allows you to view a page using one of your own images as background
(http://www.theshockzone.com/back/index.html)Terrazzo Tiles - tiles in various graphic formats with each faded for use in backgrounds, made with Xaos Tools' Terrazzo, a Macintosh plugin for Photoshop
(http://www.spies.com/~ceej/Art/terrazzo.html)Typofile - Techniques and Technology - a series of articles and resources about fonts
(http://www.will-harris.com/tech.htm)
Welcome | Syllabus | Home | Assignments | Bibliography | Class Links
