Six Easy Steps to Creating an

Online Artist Portfolio

Overview

This short tutorial will help you create and post an inexpensive artist portfolio style web site in just six easy steps. You don't need any special skills or technical talent and won't need to know html (html stands for hyper text mark-up language) code, but basic familiarity with computers, the internet, and word-processors will be very helpful. I have created and maintained several web sites over the past 15 years, including more recently my own (betsybearcreations.com) and the Fairbanks Watercolor Society (http://www.geocities.com/fairbanks_watercolor). I've learned most of what I know by attending a few workshops and doing a lot of trial and error. Nobody can build your site better than you, the artist-- the one who has the most to gain. Start small, grow bigger, and learn as you go.

This tutorial covers how to prepare your images, name your files, create your web pages with a user-friendly, wysiwyg (what you see is what you get) html editor, insert your links and images, and post your site on the world wide web. I have included some links to specific sites providing software or services I have used, but you would be wise to do your own research and see just how much is available for little or no cost.

If you decide this tutorial involves too much work for you, and you would like a free, art-related web page without images, check out Watercolor Online's free personal web sites. Watercolor Online also offers a paid version that allows images. This option can be used in place of or in addition to a more extensive site created with this tutorial. Of course if you are not a watercolorist, you will want to search out a more general site that offers the same service or check for e-zines that deal with your speciality.

Besides your computer and internet connection, you will need a good wysiwyg html (web) editor. HTML coded documents allow web browsers to display files for internet users to view. Dreamweaver by Macromedia is a great full-featured web editor, but the cost is prohibitive if you are just starting out with a small site. A better option is to use one of the many free or almost free web editors available on the internet until you need more features on an editor. I would recommend NVU's web editor, which is available at no cost and works on most Mac and PC operating systems. I tested the NVU Mac version to help create a small site for a friend and found it very user friendly and trouble-free. There are other free editors available, so do a search and test a few out if you have problems with NVU.

 

Step 1 - Creating Your First Page (name it index.html)

To start your site, you will first need to download the NVU web editor program if you haven't already.  Go to http://download.cnet.com/Nvu/3000-10247_4-10412423.html, for pc users, and http://www.macupdate.com/app/mac/15699/nvu for mac users, and download the version that matches your operating system. It took less than 5 minutes for mine to download.

Once downloaded be sure to open the "Read Me" file before running the program.  My Read Me file said to copy the NVU program icon to my applications folder before it would run properly.  

Here is the main editing window in the NVU editor that will be your starting point.

Now you can start creating your first page.  The editor works very similar to a word processor, and is quite intuitive if you have some basic understanding of word processors. Start typing in the large window to the right.  The narrow window on the left is for entering the information about your web host site.   Use the tool bar to format your text alignment, size, etc. and type. For more information about creating html files with NVU go to http://nvudev.com/guide/1.0PR/ugs03.htm

Before you start with the typing, however, you will need to save your document following a few guidelines to ensure your documents are compatible with html conventions and for your ease in locating files. Name your first page "index.html" (without the quotes). This is the file name that is the default for your URL, and will display automatically when a visitor enters your site. More on naming files is covered in the next section.

Step 2 - Saving and Filenames

Text (html) documents: You will need to save your web page using a short descriptive phrase.  Do not capitalize any words in your file name, do not use any spaces, and do not use any characters other than letters, numbers, periods (dot) and underscores.  You must end your filenames with .htm or html, although most editors will add that automatically to your saved name.  

You will need to follow these filename rules for saving your images as well.  Your jpegs will need to be posted at the same time as your html pages in order to work properly.  Every link that has a filename must be accompanied by that file on your host site.   Do not use any folders to organize your web pages or images until you learn more about how to link to files in folders.  For the most part, just use a convenient system of naming files, such as starting all file names relating to the same subject with the same word and just changing the endings.    Here are a few examples of filenames grouped for ease in finding them:  cards_dogs.jpg, cards_cats.jpg, etc.

Your main page, or home page, should always be saved as "index.html" or "index.htm." Note: .html and .htm are interchangeable, but stick to one or the other for consistency. Save all your html and image files into a single folder on your computer hard drive, but don't make any sub-folders within this folder. For more information on file naming conventions and tips go to http://htmlfixit.com/tutes/tutorial_HTML_File_Names.php

Here's how some web files (on a Mac) look:

Step 3 - Preparing and Inserting Images

Before adding an image you will first need to prepare it display well on the web.  Images need to be saved in jpeg (or giff) format.  Size and resolution are important, since excessively large files will take an unbearably long time to download on dialup or slower internet connections. There are many factors that determine the download times besides the connection speed--the computer's processor, system memory, the traffic on the web, and so on.  The best bet is to keep image file sizes small and download times minimal so you don't leave viewers frustrated and ready to visit a new site.  Some important points to remember when preparing your images:

• 72 resolution is best for web display.
• Image size can be adjusted to your needs, but usually smaller is better.
• Consider using linked thumbnails that are about 100x100 pixels or 50 kb if you are adding many images to one page.
• Less than 500 kb or 5"x4" at 72 ppi will work well for most images.
• Crop and edit images to get the best color and composition for your space.  Image editors come bundled with most digital camera software.
• Remember that different computers will have different color settings and brightness. Maximize brightness and sharpness for best results.
• Honor copyright laws when using images that are not your own.
• Put your copyright info (i.e. copyright© by Jane Doe 2006) directly on any artwork you post online and keep size less than 5" at 72 ppi to discourage illegal use of your artwork.

After your image is prepared, save it to the same folder that contains your html files. To insert the image into the html document, click on the image icon in the toolbar.  In the drop down window choose the jpg file that you saved into the folder.  You can just ignore the alternate text and other fields of the window for now.  After the image is inserted on the page align it using the same button as used to align the text.  You can change the size by dragging the corners. For more information on preparing images for web sites go to http://graphicssoft.about.com/od/digitalphotography/l/blprepforweb.htm

 

Step 4 - Creating External or Internal Links

Below is an image I added and made into an link to a different site.  This is called an external link. To make an external link, highlight the image by clicking on it and then click the link button on the tool bar.  In the drop down window choose the"link" tab and type the URL of the desired link. Always check your links in your preview browser (go to "file" then "browse page"). Check the link again once the files are posted online.  Broken links are a major annoyance and happen for many reasons, most preventable by checking typing and formatting carefully.                                   

This image is an example of an external link, since clicking on it takes you to completely different web site, in this case the Fairbanks Watercolor Society's home page.