An Artist’s Digital Toolkit
© Allan Wood, for educational use only
Web Publishing Guidelines
Setting Up Files for the Web
When creating files to be used for the Web, the measurement settings should be in pixels, the color mode in RGB color, and the orientation is usually landscape mode. Using a measurement of pixels instead of inches makes it easier to lay out graphics for Web documents. This can be set ahead of time in the Preferences area (Edit > Preferences in Windows, or Illustrator (or Photoshop) > Preferences on Macs).
Web Colors
Files to be used on the Web are usually set up in landscape
orientation, in RGB Web color to display accurate colors. Technically only 216 colors can be displayed on the Web, so it’s important to set up images to display in Web-safe colors. If non-Web-safe colors are used in an RGB image, colors are substituted to simulate the missing colors in the Web panel. This process, called dithering, can result in a spotty-looking appearance and should be avoided. To make sure all colors are Web safe, set the initial document to RGB color mode, then in the Color panel menu, select Web Color Slider in Photoshop, or Web Safe RGB in Illustrator.
Photoshop Web Safe Color Settings
Web Job Package Guidelines
When presenting your project for Web publication, you will need the following items to provide a smooth transition to upload the files to be published on a Web host server. A Web host server is a service
provider that stores all text and graphic files in a location on its hard drive with a unique Web address or URL that anyone can access.
Here’s what is needed to publish documents onto a Web site:
• Just as you need to organize files for printing, the same holds true for Web publishing. All files and folders need to be
organized inside a main folder.
• Images especially need to be placed in their own labeled folder inside the main folder.
• Because the smaller the file size (and amount of colors), the faster your Web site will download, graphic files should be saved as:
o JPEG files for compressing photo images or images that use gradients
o GIF files for illustrations
o PNG files for compressed images that use transparency for background or gradients. For instance if you have a photo in a circle or vignette, the background will display as white rectangle unless you save the image as a PNG file.
o Use SWF or SVG files for artwork that involves animation or can be used with Adobe’s free Flash Player which you can download from www.adobe.com .
• If you are creating web pages, the home page or the main first page of the Web site should be named index.html in small
letters. This allows other servers to identify it as the main page.
• All file and folder names should have no spaces and must all have extensions for identification to all platforms. For instance for the file “Web Publishing” should either be labeled as
web_publishing or webpublishing if used as a document for the web.
• Since browsers are case sensitive, all files and folders should be labeled in all lowercase letters.
Determining the size of the Web page itself, or a portion of it, say just the banner as shown above, will also help to create the final composite graphics.
• Computer screen resolutions in measurements of 640 x 480, 800 x 600, 1024 x 768 pixels, and 1600 x 1200 pixels (with the first number being the width), are the most standard settings.
• Screen resolution still always displays at 72 pixels per inch, so if you increase your screen resolution, you’ll notice the icons and images all get smaller.
• Web pages can be created to grow and shrink to a user’s screen size by setting the tables within the page to shink and expand based on percentages depending on the monitor screen being used.
• Graphics that extend across the screen horizontally will need some marginal blank space on both sides so as not to cut off the graphic (usually 5% of screen size). See Adobe’s site below.
If you creating a Web banner, a good rule of thumb is to keep the file size no more than 15K to 20K to keep download time minimal. All bitmap images need to set at 72 dpi (ppi) resolution for Web use.
Although scrolling vertically is acceptable, a user should not have to scroll horizontally through a well design web page. Heres’ a quick guide if you’re designing for web pages. The table below displays the maximum width allowed for horizontal graphics for particular computer screen resolutions.
Computer Resolution Maximum Horizontal Width
640 x 480 pixels 600 pixels
800 x 600 pixels 760 pixels
1024 x 768 pixels 980 pixels
1600 x 1200 pixels 1520 pixels
Save for Web and Devices Command in Illustrator
Illustrator and Photoshop both provide a Save for Web and Devices command (Save for Web in earlier versions) to optimize a flattened copy of the file with the fastest download time while maintaining image quality for Web display. Using this feature allows the designer to preview the results of up to four different settings at a time to determine image quality before they are applied, and to view the download times for each setting at 28K or 56K per second (slowest modem downloads).
Layers are flattened on the saved copy to keep the file size small. The original layered image is not affected.
When optimizing artwork for the Web, one of the things a designer needs to keep in mind is that using a bitmap image within the graphic can increase the size of the file because it generally uses more colors, as opposed to using all vector graphics.
Here is a gradient graphic in Illustrator that works well with PNG extension.
Registering With a Web Host Service Provider
Right now your files are stored on your hard drive and need to be placed on a Web host service provider’s hard drive to display your files for access by other users on the Internet. Before loading files to be seen on the Internet, you need to register with a service provider to store your files on their server hard drive with an assigned unique URL address. This is called registering your domain name. This way when others use search engines to search for your Web site by name, or by typing in words or categories that match your Web page, they may find your Web site.
If they know your URL, or if they find your page, the URL will display in their browser address bar and can be saved as a bookmark. Again when you register a domain name, it becomes your web site address or URL, like www.digitoolkit.com which is where you retreived this document for instance.
The second part is to find a Web host service provider that can store your files. If you pay a fee, you’ll be entitled to more space to store files, no annoying pop-up windows, etc. I use www.dreamhost.com since they provide plenty of space for graphic files and media and have a great support team. You can also set up a domain registration there as well.
NOTE: Stay away from free hosting as you may have to compete with annoying pop up graphics as visitors come to your site. Many service providers offer the service for free, but as part of their advertising scheme, they will place pop-up advertisements on your Web site, and you’ll probably be sent advertisements on your e-mail. Web hosting is pretty reasonable nowadays. You’ll need to check how much space they’ll store for the monthly fee they charge.
Uploading Files
Most Web host service providers give easy directions to upload and download files to and from their host server. The server is the Web host provider’s hard drive that stores your files in a special space reserved for your use only. Uploading files is the process of sending files to the Web host server, while downloading files involves sending the files from the Web host server to your hard drive space for
possible editing.
After all files are checked, updated, and organized within the main folder, you need to upload your files to the unique URL address given to you when you registered with your Web host service provider. The process of uploading your files uses what is called FTP, which stands for File Transfer Protocol.
Most all Web host service provider does not provide the software to upload your files, you can use the application Fetch for Mac users (www.fetchsoftworks.com) or the application WS_FTP for Windows users (www.ftpplanet.com).
Have fun and happy Web publishing!
