Art
Hosting
Sites and
Designers
Web and
Design Tools
Web
and Design Tools
WEB DESIGN
BASIC PRINCIPLES
- Use a browser-safe color palette to create images and graphic text from scratch. The palette contains the 216 colors that can be safely displayed in Netscape or Internet Explorer, on a PC or a Mac. Use of other colors not deemed "safe" will result in unpredictable results across different browsers.
- When creating graphics on a Mac, remember that images will appear darker when viewed on a PC.
- Graphic images should be no more than 72 dpi (dots per inch). Because the vast majority of monitors have a screen resolution of 72 dpi, it does not improve image quality if you increase the dpi (image resolution).
- File size is a very important consideration when creating graphics for the web. You should keep page download time to a maximum of 30 seconds. Generally, a total of 45k for all elements on the page is good; 65k is moderate.
- Thumbnails (small images) will make your page load much faster than full-size images. Thumbnails can be linked to full-size images, and give your visitors the option of choosing which piece they want to wait for, or look at first.
- Scan images at a resolution higher than 72 dpi to capture more detailed information, then reduce the resolution after working with the file. Keep in mind that when the resolution of the image is reduced, so is the actual size of the image.
- Resize images only in RGB color mode, and not indexed color mode. This minimizes loss of detail and colors.
- If using Adobe Photoshop, save files with multiple layers in Photoshop (.psd) format, in addition to GIF or JPEG format. It is good to keep the .psd file on hand in case any changes need to be made in the future--the layers are intact and can be manipulated easily.
- Be sure to use "height" and "width" tags in your HTML code whenever referencing an image. This helps your page load faster and will also load HTML text first, so that the viewer will have something to read while images are loading.
- Always specify a Mac and a PC font in the <FONT> code, or your text will not look the way you intended. i.e. <FACE="Times">
- If your pages have a lot of text that might be printed, use dark text colors. White text against a colored background will not print, since most printers do not print web page backgrounds.
_____________________________________
Web Pages That
Suck - Site Tune-Up
If you go here, you can have the first ten pages of your site analyzed for
graphix & html bloat. They give you estimated download times, recommendations
of graphix optimization. . . You don't have to buy anything.
Web Editors
HTML Editors
FOR NEWBIES
When you write html, you have
many choices of applications for writing and editing code.
You can write it in Notepad (for
PC users) or Simpletext (for Mac users).
(It's important not to write
in Word, since it will add a bunch of extra
formatting.) But why not upgrade
to a better tool? You can get an editor specifically for web
page designing, like HomeSite
or BBEdit. These editors not only color-code
your html, so you can differentiate
it from the text contents, but also offer a variety of features that
are simple enough for the new html coder (such as keyboard
shortcuts for common tags), yet
complex enough to assist the pro.
It's always
really useful to know some html (even if you
plan to use Dreamweaver). If
you know your html, you can figure out why
something isn't working, and
dive into the code to fix it.
HomeSite
HomeSite is an html editor. It
is not WYSIWYG, but you have the option of
toggling between your code and
a built in browser window, as well as
previewing on a selection of
browsers you install on your machine.
http://www.yahoo.com/Computers_and_Internet/Software/Reviews/Titles/Internet
/Web_Authoring_Tools/HTML_Editors/HomeSite/
Free and Shareware HTML and
Web Editors
http://www.zdnet.com or
http://www.tucows.com
Go to the downloads
section and type
in html editor into the search box. You will get a long list of
editors, rated and ready for
downloading. Try them out.
FrontPage writes bad code that breaks in Netscape.
Dreamweaver writes nice code, doesn't rewrite your code (even when you mangle it, unfortunately) and allows you to move back and forth from the WYSIWYG interface and a very simple editor.
Code
The HTTP
Protocol
This site defines the HTML standard protocol, tells you how it works, and
some history.
VRML
This site has a lot of info and examples of VRML (Virtual Reality Modeling
Language.) VRML is basically a way of doing virtual reality on the WWW. VRML
lets you build 3D models that can be downloaded to a client, then viewed
interactively in 3D on the client, using a VRML-ready browser. The site helps
you choose such a browser, and has lots of examples.
Dynamic HTML
DHTML lets you create web sites that have a lot of animation. Macromedia's
DHTML site has tips and tutorials for authoring with DHTML, plus a good example.
Creating Art for the
Internet
In 1995 I created all the drawings, illustration text, icons and backgrounds for AOL's Jewish Community Online area. (Go to Keyword: Jewish.) The illustrations were created in Adobe Photoshop, and then converted to 8-bit index-color GIF files for AOL.
I began each drawing in Photoshop at 200% of the final size, at 72dpi. I sketched each figure on a backgound layer, using a Wacom digital graphic tablet and stylus. I used Photoshop's "layers" function to create the background on one layer, and each figure and object on different layers so they could be moved and edited separately. Then I made a 'final' copy of each image file, flattened the layers in Photoshop, and reduced the image to the dimensions of the AOL 'window' (500 pixels wide - get current req's from AOL). Last, I converted the 'Mode' to Index Color, and saved each image in GIF format. To reduce the file size, I saved some images as 7-bit GIFs, rather than 8-bit.
When preparing art for the internet you should restrain your inclination to include a lot of detail and texture in the images, since shapes, gradations and color at 72dpi need to be high-contrast and very simple. Blending color is especially difficult. When converting a blend to the reduced number of colors in the Index Color palette, a smooth blend is often transformed into stripes. In many cases I had to enlarge my view of the area where one color mixed into another, and edit it pixel-by-pixel after the conversion to Index Color. Blends in GIFS can appear smoother when saving with the 'Diffusion' option during conversion.
My original idea of a crowd of overlapping people and objects had to be modified in order to map separate "clickable" buttons under each figure or group of figures. In the final preparation at AOL, the figures were reduced in size and moved apart so that at least 2 pixels of space separates each 'figure' button. I was a little disappointed in the result.
The logo text at the top of the main screen was created in Illustrator. I converted the Illustrator logo to Photoshop's rasterized format and placed it on a separate layer in the main screen image file. Later, I added an animated flame above the "i." Each of 9 frames for the moving flame was a small Photoshop GIF, animated at AOL.
Text is always created as vector shapes, which are very sharp, but the minute you embed those text shapes in a Photoshop document, they are rasterized, or converted to a pixel map, and become fuzzy. It is important to have strong contrast between the text and the background. With text, outlines and blended fills don't read well, especially at small sizes. It is important to use clean, strong text shapes at a large size.
When creating GIF artwork intended for other browsers than AOL, use the same methods and file conversion that I used, above. - Li Gardiner
Image Editing Software
ImageReady vs. Fireworks
- ImageReady and Fireworks will do palette optimization automatically (i.e. removing the unused colors from the 216 palette). They also let you play around with several scenarios. (i.e. what will this look image like with an adaptive palette vs. the 216 palette vs. just reducing the bit depth vs. jpeg, you get the idea...)
- They both have strengths and weaknesses.
-
Advantages:
-Fireworks: Live Effects editing, vector-based, fancy type effects, JavaScript support and better image mapping interface, better adaptive palette, quicker.
-ImageReady: Editable palettes (essential), more intuitive interface and preview, better automation, better bitmap editing and adjustment features
Both do GIF animations better than almost anything before. -
Disadvantages:
Neither is ideal for designing graphics, but both work well with Freehand, Illustrator, and Photoshop.
All of these are cross-platform:
To download
ImageReady
visit:
http://www.adobe.com/newsfeatures/imageready/
or
http://www.adobe.com/newsfeatures/tryadobe/main.html#imageready
Macromedia's Fireworks
http://www.getfireworks.com
http://www.macromedia.com
Some pages that explain
Fireworks can be found at:
http://www.carolyns.com/
Macromedia also offers Flash, their vector animation tool.
Try out this one at: http://www.flash.com
Extensis makes a lot of add-ons for Photoshop, Quark and Illustrator.
PhotoTools adds many time-saving features to Photoshop, such as customizable
toolbars, a tool for producing buttons, and better filters for adding embossing,
glow, and instant drop shadows. They have 30-day free trials for all their
products available on the
site.
http://www.extensis.com/products/
______________________
Debabelizer -1
i've just started using debab, v.1.6.5, though the lastest version for mac is v.3. they also make debablizer pro, a pc version. there are 4 basic functions, image optimization, file translation, scripting and batch processing. debab's optimization is wonderful because it uses a really good algorithm to do the crunching. tons of functions. you can control palettization and bit depth really well, down to the pixel. you can build palettes to favor selected colors allowing you to lower bit depth while not losing essential colors. you can also create super palettes of all the images on a page to avoid flashing. debab saves without previews and thumbnails to further reduce image size. there are functions which can raise the intensity of an image which you might want to do if you are working on a mac and porting to a pc. debab's roots are in file translation; it can open virtually any image file type. i haven't yet explored scripting and batching processing but i can see how batching could speed up those repetitive tasks.-- kristin@grimalkin.com (K. Martin)
Debabelizer -2
Translating palette colors involves rearranging the colors within the color table, which changes the index value of a moved or replaced color. You can move a range of values or an individual color for an image palette, or a palette document. Use the Palette pop-up menu (right-click on the palette) to select a rearrange/remap setting. The check mark indicates the currently active setting. The setting that you select determines the way that DeBabelizer Pro executes the specified rearrangement. n Remap Pixels n Rearrange Palette n Rearrange Palette and Remap Pixels In addition to the above settings, you can select the Remap to closest setting from the Palette pop-up menu. To rearrange palette colors: 1 Move the cursor over an open palette window or image palette. The cursor becomes an Eyedropper. 2 Click on one color, or select a color range. The selected color or range appears highlighted. 3 Drag the selected color(s) to a new location. DeBabelizer Pro performs the specified translation based upon the current translation setting When you are working with an image palette (a palette associated with an image), rearranging the colors in the palette can modify the palette only, the image pixels only, or both. DeBabelizer Pro executes the color movement based upon the current setting in the image palette pop-up menu.
Debabelizer -3
there are 4 basic functions, image optimization, file translation, scripting and batch processing. debab's optimization is wonderful because it uses a really good algorithm to do the crunching. tons of functions. You can control palettization and bit depth really well, down to the pixel. you can build palettes to favor selected colors allowing you to lower bit depth while not losing essential colors. You can also create super palettes of all the images on a page to avoid flashing. debab saves without previews and thumbnails to further reduce image size. there are functions which can raise the intensity of an image which you might want to do if you are working on a mac and porting to a pc. Debab's roots are in file translation; it can open virtually any image file type. Batching could speed up those repetitive tasks.
Image Formats
Image types - Vector and Bitmap
There are two basic methods for storing and representing
images digitally: as bitmaps (also called raster or pixel maps)
or vectors.
A bitmap image is created or represented by a pixel grid. Each pixel in the
grid has a specific value, color and location, like a mosaic in which each
tile is a specific color and value. The data, or string of code, that creates
a bitmap image simply describes each pixel, one after the other, row after
row. Keep in mind that this bitmap ‘mosaic’ is too small to be
seen with the naked eye.
Adobe Photoshop and similar ‘painting’ programs, like Fractal Design Painter, PhotoStyler and Ofoto generally create bitmap images which can be saved in a variety of formats or descriptive languages, like TIFF, EPS, PICT, etc. They may also include some vector-type drawing tools which can be used to temporarily select or manipulate areas of the underlying bitmap image. Because they are composed of a mosaic of tiny pixels, the appearance of bitmap images is usually softer or more fuzzy than vector images; areas of color can blend one into the other and are not discrete, movable elements. This offers tremendous possibilities for creating realistic, organic texture and depth.
Artists and designers who have experience working in wet or soft media will appreciate the similarities between bitmap effects and actual brush strokes, pastels, pencil and other media.
One disadvantage of bitmap images is that they can’t be greatly enlarged without loss of data, or detail. The bitmap describes specific pixels which, when enlarged, somewhat retain their original rectangular shape, creating a ‘stair step’ look. The previously invisible ‘mosaic’ of pixels has now been enlarged enough to become visible to the naked eye. To avoid this, the bitmap image should be created at close to the size of intended use, at a minimum resolution of 200ppi for print, or 72ppi for monitor (Web) viewing. This problem is also true of scanned images - scan an image at a higher, rather than lower resolution. Remember, you can always reduce a file size later, but if you start small, the data can’t be increased by simply enlarging the image.
On the other hand, vector images are created as a series of lines or shapes. The vector file description includes the coordinates of each point, the lines that connect the points, and the mathematical formula used to create curved lines (often called Bezier curves) between each point. Also included is a description of the fill color or pattern contained by a particular shape, and the stroke color or thickness of the outlines that define each shape.
Adobe Illustrator, Freehand, TypeStyler and similar ‘drawing’ programs all create these vector lines and shapes, which behave very much like cut-outs that can be moved, layered, or distorted at will, while maintaining their integrity. Their appearance is rather hard-edged and doesn’t easily simulate a photographic illusion of depth. But while vector images often appear rather flat, this is can be a stylistic choice for an illustrator, and is a strength when creating type effects and diagrams. Bitmap images can be imported into vector shapes for textural effects, with some limitations. 3-D models generally start life as vector images, constructed as a mathematical concept of three-dimensional space, on which bitmap images and textures can later be overlaid.
One advantage of vector images (like fonts) is that they can be enlarged without a loss of information, since the description that creates the image is not based on a fixed pixel map, but on lines, points and curves in relation to each other.
Monochrome Images
The simplest monochrome (single color) image is a bitmap
of pure black and pure white. The file size of a monochrome bitmap image
is very compact since a single bit represents each pixel: 1 for black or
0 for white. This type of image would be saved in bitmap mode.
A grayscale monochrome image, however, must also include
a description of variable brightness for each pixel in order to describe
different values, or shades of gray. Four bits can describe a possible 16
shades of gray per pixel, 8 bits per pixel can describe 64 shades of gray,
and 16 bits creates the 256 shades of gray which most monitors will display.
This type of image would be saved in grayscale mode.
The number of bits used to describe a grayscale image
will increase the file size substantially. An image which measures 400 pixels
by 400 pixels (or 2x2” at 200 dpi) contains 160,000 pixels. At 4 bits
of information per pixel the image file size would be 640,000 bits, or 640K.
A 16-bit grayscale image of the same size would measure 2560K.
Color Images
Bitmap Color Images
Color images can be described, or represented, in a
variety of ways, depending on their ultimate use. An image intended for viewing
on a computer monitor, in a game or on a web site, will be represented by
the standard color scheme of computer monitors, RGB, for the red, green and
blue light which creates the image on your screen. It must be saved in RGB
mode. Do not convert the image to CMYK mode at any point or you will
lose the fluorescent colors possible with RGB.
Full-color images intended for print production must be converted to CMYK mode - described as percentages of CMYK, for the Cyan, Magenta, Yellow and Black inks that are used to create the full spectrum of colors in the four-color printing process. The amount of data needed to describe a color image is 24 bits per pixel, which will produce 16.7 million colors. File sizes for CMYK images are larger than for RGB.
Even in RGB mode, images can use a lot of memory. But if the image is created with a small number of colors, some programs will allow you to reduce the file size to just enough bits per pixel to describe that limited Index Color Palette. Images intended for the Internet are also usually reduced to a smaller number of bits per pixel prior or during their conversion to the GIF or JPEG formats required by Internet browsers.
Color Vector Images
Color images created as vector drawings are often smaller files than bitmap images. The colors applied to the elements of the drawing are usually a small number of spot or custom ink colors, but may be CMYK process colors, depending on the drawing’s final use and printing method. The image file will contain less data about color than do CMYK bitmap color images.
Vector drawings are saved in EPS format, which includes a description of the palette used. When imported into a page layout program, the spot colors travel along with the image, and appear in the palette of the page layout program.
Image Formats
TIFF (Tagged Image File Format)
Image type: Bitmap (raster). Owner: Aldus Corp. Platforms:
Mac, PC, Unix. Use: TIFF was deliberately designed for cross-platform use.
TIFF images can be simple bitmaps, grayscale, RGB color or CMYK color. Versatile
and reasonably compact, TIFF allows color resolution up to 48 bits, and can
include a large amount of data about an image, including opacity or transparency
and CMYK color separation data. Some older software uses its own version
of TIFF, so a few different ‘flavors’ exist, and a few older TIFF
images may not be recognized by some applications. However, TIFF images produced
by Photoshop, Painter, and all scanning software are recognized by all page
layout programs and, unlike EPS images, have the advantage of being
‘editable’ in those programs. (See Editing Images) One disadvantage
of TIFF and all bitmap images is that they can’t be greatly enlarged
without enlarging the shapes of the pixel maps that they are based on; they
may begin to lose detail, as edges become visibly ‘jagged.’ TIFF
images should be scanned and edited at close to the final size and resolution
that will be printed.
EPS (Encapsulated Postscript) or EPSF ( “” File)
Image Type: Vector and Bitmap. Owner: Adobe Systems,
Inc. Platforms: Primarily Mac, some PC, Unix. Use: Postscript language was
originally written for printers and other output devices, but the encapsulated
(EPS) Postscript form is also used for image storage and exchange. EPS images
can be simple bitmaps, grayscale, RGB color, CMYK color, and monotone, duotone,
tritone and quadtone (converted from grayscale). Intended to describe vector
images, Postscript doesn’t handle bitmap images well.
One advantage of EPS vector images is that they describe shapes in terms of the relationship between points, lines and curves, and can be enlarged without becoming ‘stair-stepped’ or showing jagged edges. Many popular fonts are written in Postscript, and Adobe Illustrator documents are saved as Encapsulated Postscript files.
One disadvantage of EPS images (vector or bitmap)
is that they can’t be edited in page layout programs. And, when an EPS
image is opened in Photoshop it is converted either to bitmap format, or
else imported as vector ‘paths’, without any color, fill or stroke
information. Type created in Illustrator and rasterized (converted to bitmap)
may become fuzzy, depending on the dpi of the bitmap file in which it is
being placed or opened.
NOTE: EPS format images include a tiny bitmap PICT or TIFF ‘preview’
that allows you to view them when they are imported into a page layout document.
PCX
Image Type: Bitmap (raster). Owner: Zsoft Corp.
Platform: PC. Use: PCX is one of the oldest and most widely supported formats
for PCs. It supports 24-bit color, but does not store CMYK or HSI model data.
PICT (QuickDraw Picture Format).
Image Type: Vector and Bitmap. Owner: Apple Computer,
Inc. Platforms: Primarily Mac, some PC, Unix. Use: Like Postscript, PICT
is actually a language, as well as a format. It supports only 8-bit color
and files can’t include a gamma curve or CIE color model. This format
is not reliable for color separation in Quark or PageMaker.
GIF (Graphics Interchange Format)
Image type: Bitmap (raster). Owner: Compuserve, Inc.
Platforms: Personal Computers, Unix, Internet Browsers. Use: Supports 24-bit
color but only a limited palette of 256 colors. Files must be converted to
RGB before conversion to GIF format. GIF features include LZW compression,
so it is very popular for use on the Internet because file sizes are smaller,
making download time faster.
BMP/DIB (Bitmap)/(Device Independent Bitmap)
Image Type: Bitmap. Owner: Microsoft. Platforms: PCs
that run Windows. Use: Image display and storage under Windows. DIB files
can contain images that are 1, 4, 8, or 24 bits per pixel. This image type
is not well supported outside of Windows. It is supported by Ventura, but
not PageMaker or Quark under Windows.
JPEG
Image type: Compressed Bitmap. Owner: Joint Photographic
Experts Group. Platforms: PC, Mac, workstation. Use: storage and display
of photographic images. Also used for transmitting and viewing images over
the Internet, JPEG is very popular because its compression scheme, similar
to that used in television, retains more information than GIF about an
image’s brightness, so the images appear to have more subtle variations,
even with a reduced palette.
Changing Formats
Saving Files in TIFF versus EPS format
Vector drawings can’t be saved as TIFF files because TIFF describes bitmaps, not vectors. EPS is the only way to save vector drawings.
If you must save a vector drawing in a bitmap or raster format like TIFF, GIF or JPEG, you can import Illustrator other EPS files into Photoshop, which will rasterize them, converting them to bitmap images. All the shapes will become embedded in the new bitmap image and the edges may become a little fuzzy. At this point the image can be converted to TIFF, GIF, JPEG or any other format that describes bitmaps.
Bitmap images can be saved in EPS format. There are at least two occasions on which this is necessary - to save an image with a Clipping Path or to save an image in the Duotone mode. (See IMAGE EDITING: PHOTOSHOP.)
Formatting your art work for the Internet
Suggestion - Thumbnails (small images) will make your page load much faster than full-size images. Thumbnails can be linked to full-size images, and give your visitors the option of choosing which piece they want to wait for, or look at first. If you want to know some of the hexadecimal code you need to make specific colors on web pages, check out my color chart.
From: Monty
"The images on my site are JPEGs; I used Photoshop to convert from the Targa
files that were native to the scanning process. Photoshop lets you pick one
of three or four JPEG quality levels, which determine how lossy, as we EXTREMELY
cool computer types say, (or, if you prefer, how 'lousy', to use another
technical term) the compression is going to be. I saved copies of each file
at different levels of compression and compared them, and in a lot of cases
I found that a scarcely-noticeable degradation of the image corresponded
to a really large reduction in file size- that a 50K copy of an image could
be difficult to tell apart from a 100K copy, for example. I tried to keep
everything I was putting online under 100K; The smallest of the painting
scans is around 60K.
The scans were made from photo prints. As for the compression, I settled on different JPEG quality levels from picture to picture. Some pictures compress better than others. If you've got an image with a lot of solid areas of color, you can usually get away with a higher level of compression (that is to say, LOWER image quality setting- smaller file size-), whereas images that are noisier, say, something with pointillistic surface effects, seem to be harder to 'sum up', and will show more obvious artifacts of compression.
[Monty's online images are surprisingly large. When I clicked on a thumbnail, the larger image came up fairly quickly. I've got a 28.8 modem, but it seemed faster than many smaller images I've accessed. - Li]
Screen Grabs
PC/Windows - Press "Alt-Print Screen," open a new file in an image-editing
program, like Photoshop, and Paste. The file will be save as a PICT
image.
Mac - Press "Command-Shift-3." The file will appear on your
hard drive, named "Picture 1" etc. The file will be save as a Simpletext
picture. You don't need Photoshop
to open a screen grab on the Mac.
Web Color
Palette Reduction in GIF and JPEG
Both GIF and JPEG images are saved in a compressed format because these files are usually transferred over the Internet via modem and phone lines. The final file size is small partly because the color palette is reduced to a very limited number of colors. When you change the file mode to Index Color, Photoshop allows you to limit the palette by limiting the number of bits saved per pixel. GIF format is accessible only after a file has been changed to Index Color mode.
As with other format changes, anticipating changes in your image during the conversion to GIF or JPEG gets easier with practice. One design factor you must be alert to: blends from one color to another do not translate well to a reduced palette. As the number of available colors is reduced, your blends may become a series of stripes. You can avoid this by designing with relatively flat colors. Also, dithering the image during conversion may help smooth the transition from one color to another.
Web Palette
The web uses a palette of only 216 colors. These colors are described by a special 'hexadecimal' code in the HTML code of your web pages. To preview a variety of these colors, and their codes, check out my color palette at colors.htm
Browser-safe color palettes:
can be obtained at http://www.killersites.com/1-design/
http://www.lynda.com/files/ (download
"bclut2.aco" for Photoshop).
The palette contains the 216 colors that can be safely displayed
in Netscape or Internet Explorer, on a PC or a Mac.
Abitom
Quality software for Windows
Color Wheel Expert is a useful and easy-to-use color utility for web designers,
artists, or anyone who works with color. With Color Wheel Expert, creating
harmonious color scheme and your own color palette is a breeze! A handy
and powerful color utility for web designers.
Hexadecimal to RGB, etc.
All the colors of the 216 are dividable by 51. When you look at the RGB measurements in the Debabelizer dialog box or Photoshop's Info palette, if it is something like 51, 102, 204, then it's websafe, but if it's 51, 63, 204 it's not....In web-safe grays, all three numbers are the same, i.e. 51, 51, 51, etc. Watch the colors change as you dial in the grays; there's a neat relationship.
To find your hexadecimal
numbers:
http://www.htmlgoodies.com/javagoodies/colorcube.html
A utility that toggles between Mac and PC gamma settings
http://www.cooltool.com/todaystool.html
Objunky palette: http://www.powerup.com.au/~marver/
Optimizing image palettes - Debabelizer
1) Lower the bit depth to something that looks acceptable
2) remap to the 216 palette (dither only once. Try it with dither, and then
without to see what looks better)
3) remove unused and duplicate colors. If the palette still large, then you
get to go to step two, the translate
4) Sort palette by popularity (palette, sort palette, popularity)
5) Next, go to palette, translate in this dialog box, hit clear all, then
check the closest button, then drag you mouse lassooing the bottom line of
the palette. This will turn the colors into their closest equivalent above.
Hit okay, and look at your image. It will probably look unchanged (unless
you translate more than one line of the palette, and even then it can look
okay)
6) hit remove unused and duplicates. Repeat.
7) If you feel the image needs to be still smaller, that you may want to
uncheck the closest button and check the since button. This allows you to
do a one to one match of the colors you want replace.
As for the 216-color palette, there a couple of schools of thought on that. Some folks say it is just better to leave it in its native palette and allow it to dither, rather than forcing it into the 216 . But Debabelizer should allow you to put it into the 216 without damaging the integrity of the image.
Optimizing - Photoshop
1. Once your image is finished, then IMAGE > MODE > INDEXED COLOR and
select WEB
2. Now click IMAGE > MODE > RGB
3. Finally, click IMAGE > MODE > INDEXED COLOR again, but this time
select EXACT
What this does, is reduce your color palette to web-safe in step 1. When
you convert back to RGB in step 2, the image is converted back, but using
only the colors you converted to in step 1. Now, when you convert to Exact
colors in step 3, you have already got a color-safe palette to choose from.
The Exact will only use the colors necessary. this is great because in the
first step if you get a gross color it's not too late to change it, as it
is when you optimize while saving
IMAGE MAPS
Map an image in Photoshop:
1) open your image .gif or .jpg
2) show the <info> palette (in Window or Palettes)
3) there should be <RGB>, <CMYK>, and <XY>. The
<XY> section has a "plus" or "crosshair" symbol. click on that symbol
to set the measurements to Pixels. If not, choose Palette Options in the
palette submenu.
4) for a RECTANGLE - you only need to find the TOP LEFT and BOTTOM RIGHT
coordinates. this means putting your cursor over what you want to be the
top left corner, look at the <XY> numbers, and write them down. do
the same for the bottom right corner, for a total of 4 numbers in <x,
y, x, y> format.
For a CIRCLE - you need the <XY> of the CENTER point, and then a pixel
length for the RADIUS (from the center to edge, not all the way across),
for a total of <x, y, r> for an IRREGULAR shape - like a 5-pointed
star, you need the <XY> of EVERY point. So, with this star, there are
not only the 5 points, but the 5 indents, each with 2 numbers, making a total
of 20, yes, 20 numbers as in <x1, y1, x2, y2, x3, y3, ...., x9, y9, x10,
y10>.
5) now that you have your pixel coordinate(COORDS) numbers, you're done with
Photoshop. You need to create the actual links or "hot spots" in html.
Sample HTML:
AREA SHAPE= "rect" "circle" or "poly" for an irregular shape.
<MAP NAME="buttons">
<AREA SHAPE="rect" COORDS="14,5,81,20" HREF="here.htm">
<AREA SHAPE="rect" COORDS="117,5,162,20" HREF="there.htm">
<AREA SHAPE="rect" COORDS="195,5,260,20" HREF="everywhere.htm">
<AREA SHAPE="rect" COORDS="290,5,338,20" HREF="nowhere.htm">
</MAP>
<IMG SRC="nav1.gif" USEMAP="#buttons" BORDER="0">
note the "#name" when referencing the MAP NAME, and BORDER="0". by default, you'll get a link border around the image unless you specify not to. --cockscrow@sprynet.com (Anna Darling)
_____________________
A wonderful compilation of tips put together for the Graphixgrrls group of
Webgrrls. It has lots of info including how to cut up images:
http://www.graphixgrrls.com/wisdom/wisdom.html
ANIMATION
Extensis has a GIF animation app, PhotoAnimator, available as a public beta: http://www.extensis.com/products/PhotoAnimator/beta.html
Ulead GifAnimator isn't as great as SmartSaver, but it does allow animation compressions. http://www.ulead.com. (PC).
Giffy the Gif Animation Builder
http://members.aol.com/royalef/gifmake.htm
___________________________
Transparent moving images
ImageReady handles this very well. It has a built-in animation feature
- not as advanced as Director, for example, but plenty useful for making
animated .gifs. Among other things, it handles optimizing your image to the
number of colors you choose (8, 32, 64, etc.), and you can immediately preview
the results. It can also anti-alias to any chosen background, including "none",
which is handy when you're creating transparent backgrounds. You still have
to take into account how the image will react with the background, but since
you can preview it in your browser of choice, you can make adjustments as
you go. anne@littlelight.com
_________________
A really neat way of animating images is using layers in Photoshop. Create your image using layers, save it, open it again in ImageReady. In IR go to the pallet and open the menu. Choose 'make frames from layers' and bingo-animated image. Tweak it the way you like, optimize it, and save as a GIF. --Bernie Monette, InterActive Arts, Internet Presence Management, http://www.iaai.ca , mailto:monette@iaai.ca (416) 523-4972
__
Flash is the first professional Web animation program that uses vector shapes. You can use it to create small files that look huge and move fast.
File Formats
PDF FILES
Distiller is one of the programs included in Acrobat 3.0. Quoting loosely
from the booklet that comes with the software:
Adobe Acrobat 3.0 works as an integrated set of programs:
Acrobat DISTILLER converts PostScript files into PDF documents.
Acrobat PDF WRITER is a printer driver that "prints" PDF files with the standard
application print command. Use DISTILLER with complex page layaout
documents, or with documents that contain Encapsulated PostScript (EPS) graphics
or images that you need to compress and resample precisely. Use PDF
WRITER for fast conversion of simple business documents to PDF.
Acrobat CATALOG creates full-text indexes of PDF doc collections that can
be searched....
Acrobat EXCHANGE is an Acrobat viewer that lets you modify PDF docs, giving
them features such as passwords, annotations, links and bookmarks, thumbnails,
movies and sound, etc. Use the Capture Pages command to create PDF docs by
converting imported images and scanned paper docs. You can also use EXCHANGE
for simple text editing, and for correction of captured files.
Acrobat READER is available for free on all platforms to view PDF
documents.
It's a confusing array of programs, with multiple functions crossing over
between apps. The purchase of Acrobat 3.0 includes all of the above
apps. Hope this helps. -Linda
You need Acrobat Reader to view a pdf file, but you need Acrobat Distiller to make a pdf file. If you install Acrobat Distiller, you will have the option of saving any portion of your Word document as a pdf (File/Create Adobe PDF). It is very simple to do. You need to purchase Acrobat Distiller, though.
..to make an Acrobat file (.pdf), you need to have the Acrobat application, not just the freebie Reader available for download at Adobe's site. The Acrobat 3.0 software ($100-something, not cheap) has a "printer" that goes in your Chooser. When you print out a doc using the Acrobat printer, so to speak, it reformats to a .pdf file, and doesn't actually print, just gets reformatted and is then uneditable unless you have the Acrobat 3.0 app.... So the crusty crux of the situation is that you need to spend buckeroos in order to make .pdf documents. linda minor
Most QuarkXPress files are too complex for the Acrobat Writer to convert correctly. You need Acrobat Distiller to do the job well. Check it out http://www.adobe.com/prodindex/acrobat/prodinfo.html.
___________________________
PNG
PNG: Portable Network Graphic. Supposedly designed with features designed specifically for the web. Offers "lossless" compression (does not discard image data) and indexed color. Unlike GIF, it also supports full 24-bit color just as JPEG does. Also offers two-dimensional interlacing, which mean the image comes into focus from side to side AND from top to bottom, appearing to download much more quickly than other interlaced formats (which come in from top to bottom.)
It appears that PNG is unique in this way: depending on the size of the PNG (pronounced"ping") file, you can either save an image with real (true) 24-bit RGB values (larger file size) or in an indexed color palette, which gives you some choosing room between color fidelity and file size, so in some ways it's like a cross between a GIF and a JPEG, depending on how flat you crush it.
Also, PNG images retain the original gamma setting of the system on which they were created (gamma compensates for monitors' tendency to display midtones either too lightly or too darkly from system to system). The PNG should look very similar from one system to another. Right now only about 20% of web browsers can support PNG, including the newest versions of Netscape and Explorer.
Compression
WinZip saves and opens compressed files on a PC
ZipIt is a shareware application that can open Zipped PC files on the Mac Available on a freeware CD
Stuffit saves and opens compressed files on a Mac
PROMOTION
Web Promote
helps you promote your web site for free. It has free services to help you
build the META tags for your html to ensure that you achieve prominent
rankings with search engines, free online tool to help you determine your
ranking on 8 of the major search engines, free download trial version of
Web Position software to help improve your ranking under you keywords and
phrases among the important search engines, a free weekly e-mail newsletter
keeping you apprised of the latest online promotion developments, opportunities
and tips affecting your web site, and a utility to help make your internet
browsing more informative and useful.
Web Promote
http://www.webpromote.com/tools.html
Getting Hits
Here are some tips on "Getting Hits". . .. First of all, buy the book of that name from Peachpit Press, available at Stacey's on Market, and Amazon
Artist Resource has grown incredibly over the last few years, but the initial growth was spurred by making sure people could find us. Here is my strategy:
I.) SEARCH ENGINES
Search engines find your site by keywords in a number of places, but determine your ranking by other factors as well. Read on. . .
1.) make sure that your site content includes keywords. Describe what you do, your services, products, audience, etc., in HTML text somewhere on the site, especially on the front page. Search engines can't read text that has been converted to an image.
2.) Make sure your CODE includes keywords. At the top of your HTML pages (within the 'head' tag) create Meta Tags for 'Description' and 'Keyword' categories. One or both will be listed under your URL in most search engine results. Choose 20-30 most important words. Do not repeat lots of keywords in the hope of getting higher ranking. Search engines have a trap for this and can't be fooled. The keywords should be different, AND appropriate to each page. What keywords did you use to find Artist Resource? Here are the ones on our Classes page.
<META name="DESCRIPTION" content="Art classes and workshops calendar, lectures, demonstrations, life drawing, San Francisco Bay Area.">
<META name="keywords" content="art class, classes, lecture, lectures, art workshop, workshops, art school, schools, seminars, instruction, art education, lesson, lessons, tutors, tutoring, techniques, demonstrations, demos, instruction, course, courses, computer, digital, art, arts, artist, artists, Photoshop, Illustrator, Painter, color prepress, desktop publishing, graphic design, painters, painting, silk painting, fiber, watercolor, pastels, drawing, drawings, illustration, digital art, sculptors, sculpture, printmaking, prints, photographers, photographs, photography, portfolio, portfolios, workshops, San Francisco, Bay Area, Marin, Sausalito, Mill Valley, Oakland, San Rafael, Emeryville, Albany, Berkeley, South San Francisco, San Jose, Palo Alto, Sacramento, California, United States, national, international.">
3.) Title every page appropriately. Sometimes this is all that shows up in
a search.
<TITLE>Art Classes and Workshops, Bay Area - Artist
Resource</TITLE>
4.) Submit your site to the major search engines. Do not pay to have this done - it's a waste of money. There are only ten or so big search engines, like Lycos, Yahoo, HotBot, GoTo, etc. See Search Engines below.
5.) Check and update some of your pages every month, at least. Pages that do not change fall rapidly down the rankings, and are eventually dropped.
6.) Make sure that visitors can get around your site from any page they land on. Often they will jump from a search to an internal page on your site. Do not leave them wondering where they are, and they will find their way to you more often.
7.) Exchange links and get your site listed as many places online as possible. Search engines note how many connections there are to your site from other places and assume popularity based on these connections. Networking is a real thing, online.
II.) OTHER WAYS TO GET NOTICED
8.) Exchanging links may get you listed by search engines but, more importantly, will bring visitors to you from other, related sites. Especially valuable are professional associations and memberships -- associations or umbrella organizations that you belong to will actively refer visitors to you as a resource. Your own members should post your logo and a link as part of membership, and their visitors will come to you.
9.) Include useful content that changes, best presented in a clearly defined News, Events, Reviews or How-To section. This will bring visitors back frequently to find out what's happening.
10.) Include community-building functions, like a forum, listserv, chat room, QandA page, and a feedback mechanism for visitor response and critique.
11.) Offer what your audience wants. My Jobs page gets the most hits, and is the first entry point for 65% of my visitors. It behooves me to make sure the Jobs page is well-managed and up-to-date, or people will go away and not come back.
The Art Deadlines site has hundreds of free listings for competitions and calls for art and writing. However, they are only available to members who pay a fee, like the ArtHouse hotline. What keeps non-members coming? They ALSO list some competitions that are paid for by the advertiser and are right there on the front page for all to see.
-- Regards, Li Gardiner, August, 2001
Search Engines - Add Your URL
-----Submit to MULTIPLE SITES-------
The mother of all lists of search engines
Creative
Alternatives
---------SEARCH ENGINES-------
Excite's
- add URL form
Excite Help:
Getting Listed
InterNIC Directory of Directories may not exist
Starting Point(TM): Entertainment Section
Webcrawler's
art search
engine
Webcrawler's add a site
form
Yahoo's
art search engine
Yahoo's
add-a-URL form
User Groups, References and Help
C|Net Builder.com
The site for site builders – web authoring, web graphics & design,
web business, cool tools, web programming & scripting, web servers, hosting,
hardware, getting started and builder downloads.
Email support@builder.com
Computer Help
Forum
Discussion of personal computers, recommendations, problems and solutions,
etc.
High
Five
They promote fine design and high style on the Web to benefit surfers all
over the world through our content – reviews, profiles, features, news,
etc.
Macromedia User group -- LA and San Francisco
Project
Cool
has a discussion list
for Macromedia's Flash, useful if you need technical support. subscribe in
Project Cool's Peoplesphere section. There is also a new JavaScript tutorial,
specifically targeted
at non-programmers. If you're interested,
check out the Developer Zone
on the site. Try checking Project Cool's devSEARCH
http://www.devsearch.com. It's a search
engine specifically designed for web builders which searches over 20 web
reference sites.
Two Cows (tucows)
More freeware, shareware, demoware, and buy-it-before-you-try-it-ware than
you can shake a mouse at.
http://www.extropia.com/selena
this site has so much information, and is linked to such much more ... wow!
Whether your weak area is graphix, CGI, Javascript, or even managing a web
development team, this wacky, new age dude has a link to it,
Sunah's
WebDemo
Free services for webheads, tools, techniques, software.
Viewpoint
3D models, textures, services and software
Web Authoring
Discussion of issues involved in creating Web pages using HTML.
Web Monkey
The Web Developer's Resource.
Webreview.com
Cross-training for web teams – web authoring, web design, web development,
eCommerce, multimedia, site management.
Editorial inquiries: editors@webreview.com,
mail: Songline Studios, 101 Morris Street, Sebastopol, CA 95472, phone (707)
829-6500, fax (707) 829-0104
WebReference.com
The Webmaster’s reference library – web programming, e-commerce,
articles, tutorials, etc.
Email: info@webreference.com
Webtechniques.com
Solutions for internet and web developers – web tutorials, articles,
information about events, etc.
Email:
editors@web-techniques.com
webtechniques@halldata.com
or mail: Web Techniques, P.O. Box 1246, Skokie, IL 60076-8246, phone (800)
677-2452, fax (847) 647-5972
The Yale Web Style
Manual
A resource that concentrates on Web page and site design,
from usability to design, from
graphics to typography.
Printers and Service Bureaus
DISCLAIMER: The information below is based on my own experience, gained through working on specific projects. I am not endorsing the following resources over others you may find. I have used some of the following printers, service bureaus, and suppliers because of recommendations by friends, convenient location, personal service, client request, and lower bids in many cases.
Service Bureaus
High-resolution output to positive, negative, Fiery proofs, Iris, large format, and color copies
Krishna Copy and Printing
(digital color output)
66 Kearny (nr. Market), San Francisco, CA
Speak to Sanjiv: 415-986-6161
551 Mission (nr. 1st), San Francisco, CA 94105
Speak to Rajiv: 415-543-3688
Copymat
(output to negs and positives)
27 1st St. (nr. Market), San Francisco, CA 94105
Speak to Darius: 415-896-0500
120 Howard (nr. Speare), San Francisco, CA
415-957-1700
Top Copy/South Park Digital
(drum scanning, output to negs, proofing)
19 South Park (nr. 2nd), San Francisco, CA
They also do Matchprints from color seps
Color 2000
(Specializes in slide scans to photo CD)
1269 Howard St. (nr. 9th St.), San Francisco, CA
415-861-5151
Graphics Touch
Iris 3047 printing up to 34x36 inches in size.Check price on webpage Xerox
8954 III to 54" wide any length on cloth vinyl 54" wide $3sq.ft. Adhesive
vinyl $4sq.ft., Solid vinyl $4sq.ft., Oneway vison vinyl $6sq.ft. 27" wide,
transfer canvas for wall murals $5sq.ft., on 75gram paper $2sq.ft. and all
of these use UV toners in the xerox for outdoors.
Novajet inkjet 36" $2sq.ft. for indoors and short term out doors. Laminating
up to 25 inch wide both sides $1sq.ft. large then 25 we use a Oroca III call
for price on mounting and other services with the Orca III laminator. Many
other services .
Jack <zapp5@gte.net>
Printers - Spot Color
Quik Print
(bus.cards, flyers, brochures, etc.)
100 First, San Francisco, CA 94105
Speak to Mike or Brett: 415-957-1700
All City
(bus.cards, flyers, brochures, etc)
546 Bryant (nr. 3rd), San Francisco, CA 94107
Speak to Helen: 415-861-8088
Digital Prepress International
(bus.cards, flyers, brochures, etc)
150 Speare, 5th flr., San Francisco, CA
Spot and 4-Color
Krishna Copy and Printing
(Digital Heidelberg press - bus.cards, catalogs, brochures, etc.)
66 Kearny (nr. Market), San Francisco, CA
Speak to Sanjiv: 415-986-6161
551 Mission (nr. 1st), San Francisco, CA 94105
Speak to Rajiv: 415-543-3688
Minutemen Press
(bus.cards, catalogs, brochures, etc.)
1275 Fairfax, San Francisco, CA 94124
Speak to Dan Hickey: 415-957-1700
Howard Quinn
(web offset: booklets, newspapers catalogs)
298 Alabama, San Francisco, CA 94103
Speak to Laurie Lusted: 415-621-3750
Printers - 4-Color Only
Post Script Press
(postcards, catalog sheets)
2861 Cypress St., Oakland, CA 94608
Speak to Drew or Gary: 510-444-3934
Modern Postcard
(postcards)
6354 Corte del Abeto #E, Carlsbad, CA 92009
800-959-8365
Carl Sebastian
(postcards, catalog sheets, folders, posters)
436 E. Bannister Rd., Kansas City, MO 64131
800-825-0381
Catalog King
(sell sheets, catalog sheets, catalogs)
One Entin Rd., Clifton, NJ 07014
800-223-5751
MacapFlags
Custom digital printing on polyester for flags & banners.
1251 NW 116th Street
Seattle, WA 98177 USA
Guillaume Sauzon
Postcard500
You can order as few as 500, full color, coated, 15 point thick cards,
printed from your computer file.
We also print folding cards, posters and envelopes.
Online
Storage
LogoAxis
Secured Online graphic storage for logos and media assets.
118 Buchanan Drive, Sausalito California 94965
Sandra Cannon:
cannon@logoaXix.com
Output
Leslie Bauer Photography
Do you need your artwork, jewelry or craftwork photographed for your upcoming
show, open studios or catalog. I can offer 35mm slides, 4x5 chromes, Color
or B&W prints or digital output. I specialize in professional juried images
or styled for your catalog. Please take a look at my portfolio at http://www.lesliebauer.com
For an appointment and prices please email:
photo@lesliebauer.com or phone
(415) 552-9793
Digital
Studio
High-end digital captures of fine arts. We can capture files as big as
400 MB (30" x 40" @300 DPI) Using a 4x5 camera with a digital back.
325 Harbor Way
South San Francisco, CA 94080
650.952.2609
Peter Barrot
Rice Studio Supply,
Inc.
Has Lysonic Ink and Media for the most popular Epson Ink Jet Printers. Please
contact us for sample packs of Lysonic Papers and product info. Lysonic can
significantly increase the quality and longevity of the prints you are producing.
For more info, see
http://www.lyson.com/media.html.
The latest results of image stability tests are available at
http://www.wilhelm-research.com.
Lysonic also makes Print Guard, a clear aerosol coating with UV inhibitors,
designer specifically for all inkjet print. $12.95 per can. Two or three
coats will provide superior surface protection, especially against moisture
damage.
Scott Rice, rice@transport.com,
800-962-7710
High Resolution Fine Art Output on Archival Materials
Digital Studio South San FranciscoKells Editions San Jose
The Digital Pond San Francisco
Robyn Color Lab Sunnyvale
Tulip Graphics San Francisco
Nash Editions So. California
High Resolution Output and Prepress/Proofing Services
Calypso Imaging Santa Clara
Cal Printing San Jose
Canterbury Photographic Berkeley
Copy Master Graphic Press San Jose
Digital Impressions Milpitas
DXP San Francisco
Elite Reprographics San Francisco, Oakland
Howard Daniel San Jose
Indian Rock Imagesetting Berkeley
Linotext S.F., Palo Alto, Cupertino
Media Resource Advertising San Jose
Pro Line Printing & Graphics Milpitas
Professional Color Lab San Francisco
Rapid Palo Alto
Visual Imaging San Francisco
Laser and Inkjet Printers
Canon
Hewlett Packard (printers)
Read about Iris and Giclee prints at Capitol Camera's site
Minolta (printers)
Paper
| Arvey Paper & Office Products by the sheet, ream, case 2275 Alameda, San Francisco, CA 415-863-3664
Allied Paper Co
Boise Cascade
Champion International Corporation
Consolidated Papers, Inc.
International Paper
James River Corp.
|
Kelly Paper distributor 1375 Howard, San Francisco (415) 522-0420
Mead
Nationwide Papers
Simpson Paper Co.
Weyerhaeuser Fine Paper |