Category Archives: Displaying Art on the Web

“Secret Life of Trees”, Dina Brodsky

Secret Life of Trees, Dina Brodsky
Dina Brodsky is a painter and miniaturist who I have featured previously on Lines and Colors.

In July of last year, she embarked on a project to draw 126 individual drawings of trees, each with its own distinct personality — tree portraits, if you will — starting with the drawing shown above, top, and ending just a day or so ago with #126, shown above, bottom.

The drawings are done primarily in ballpoint pen, an under-appreciated variation on pen and ink that has it own character, notably in allowing for a degree of softness not always evident in traditional pen drawing.

These are done on differing papers, some with noticeable texture, and are sometimes augmented with touches of gouache or watercolor.

Her range of subjects covers many varieties of trees, and their related root systems, each given a portrait-level definition of character by Brodsky’s keen attention to their variation in form and texture.

Brodsky expanded the scope of the project by reaching out to her circle of friends, family and acquaintances to provide input in the way of tree stories and photographs of particularly fascinating trees.

I was pleased to participate in a small way by providing photographs of a tree in my area that were used as reference for the drawings shown above, second and third from the bottom.

The series can be seen on Brodsky’s website, along with her statement about the project.

A large selection from the series will be on view and available as part of a solo show at the Bernarducci Meisel Gallery in NYC entitled “Secret Life of Trees”, that runs from September 8 to October 1, 2016. There are also two portfolios of the series on the gallery’s website, for available work and sold pieces.

The show is concurrent with a solo exhibition of works by her sister, artist Maya Brodsky, who I have featured in the post previous to this one.

 
Facebooktwittergoogle_plusredditpinterestlinkedinFacebooktwittergoogle_plusredditpinterestlinkedin

Eye Candy for Today: Pieter Claesz Peacock Pie

Still Life with Peacock Pie, Pieter Claesz
Still Life with Peacock Pie, Pieter Claesz

In the National GAllery of Art, DC, with zoomable or downloadable image, also downloadable image on Wikimedia Commons.

It’s interesting to compare this large (30,51inches, 77x129cm), sumptuous still life to a similar composition in the collection of the Rijksmuseum that I featured previously, Still Life with a Turkey Pie.

I love the reflections in the pewter flagon.

 
Facebooktwittergoogle_plusredditpinterestlinkedinFacebooktwittergoogle_plusredditpinterestlinkedin

10 years of Lines and Colors

10 years of Lines and Colors
Today marks the 10th anniversary of my first post on Lines and Colors, on August 22, 2005.

My initial intention for the blog — which you can read more about here — is still basically the same: to introduce my readers to wonderful art and artists that they may not be familiar with, or to point out something of interest about more well-known artists.

The artwork I feature is in a broad variety of genres, but tied together by two common factors — I personally like it, and it’s more or less within the traditions of representational realism. Other than that, as I’ve always said in the blog’s capsule description, if it has lines and/or colors, it’s fair game.

You can see some of the range of genres in the “Categories” listing in the left hand column, and below that, in the “Archives”, you can still read all of the posts I’ve added over the past ten years. (Well, almost all — I still need to restore about 10 posts from July of 2013 that were “misplaced” when I moved the blog from one server to another — it’s constantly a work in progress.)

My most popular single post to date, at least in terms of response and comments, has been “How Not to Display Your Artwork on the Web“.

The images I’ve selected above are meant as a small sampling of what you may find in the archives.

It has always been my hope that those interested in a particular genre of art — like traditional painting, plein air, art history, comics, concept art, fantasy art or illustration — would be drawn to Lines and Colors to pursue their area of interest, and through it discover wonderful art in other genres that they may not have sought out or encountered otherwise. I see that aspect of what I’m doing as an attempt to gently counter the ever-increasing fragmentation of art interests on the web.

In the 10 years since writing my first article for Lines and Colors, the resources for art images on the internet have expanded dramatically, most notably in the form of major museums, such as the Metropolitan Museum of Art, the Smithsonian and the Rijksmuseum, posting high-resolution images from their collections online; the appearance of remarkable resources like the Google Art Project; and new online destinations for illustration, comics and concept art.

Originally, my posts were short, and the images single and small, and I actually worried that I would run out of “favorite artists” to write about. Today, after more than 3,400 posts (not quite a post a day for ten years, but pretty close), I have an ever-growing list of potential topics to get to — that may actually be longer than the list of already written ones.

There’s more to come!

-Charley

 
Facebooktwittergoogle_plusredditpinterestlinkedinFacebooktwittergoogle_plusredditpinterestlinkedin

My turn as a painter/blogger

Chaley Parker painting
Back in 2005, the year in which I began writing Lines and Colors, I reported about an artist from Virginia named Duane Keiser, who had the year before begun a practice of painting a small painting every day, posting it to a blog titled “a painting a day” and placing it up for auction on eBay.

It seemed a unique thing at the time, and as far as I can establish, Keiser was indeed the originator of the practice.

In my article, I remarked on what a great idea this was, and how I wished I could emulate the discipline. It promised the kind of advancement as a painter that only regular painting can provide, aided by the incentive of selling the paintings as they were done.

The following year, I reported on others who had become “painting a day” participants, like Karin Jurick, David R. Darrow, Shelly Grund, Elin Pendleton and, in particular, Julian Merrow-Smith.

Over the years since then, I’ve watched and reported on the burgeoning of the “painting a day” phenomenon, although it has become so widespread and generalized that the term has lost much of its meaning, and I now tend to use the more general term “painter/bloggers”.

This is a practice in which hundreds of artists, at all levels of experience, are painting and posting their work on blogs and connecting with buyers through online auctions, PayPal payments, Etsy shops, group sites like Daily Paintworks and other means of direct sales — either bypassing or supplementing the traditional gallery system.

After following this for some time, and having gradually brought my own painting practice somewhat up to speed, I’ve decided to jump in and try it for myself.

The regimen of painting every day remains appealing, and the idea of selling the work makes it more likely I will adhere to the practice and hopefully will allow me to devote more time to painting.

What I’ve learned and decided so far.

I’ve tried to observe some of the best practices from those who have been doing this for a while; and as I begin my process, I’ll try to make occasional reports on Lines and Colors for those who might be interested in what I learn.

I’ve also tried to follow my own advice in my article on “How Not to Display Your Artwork on the Web” and the follow up series on “How to Display your Art on the Web“.

So far I’ve established a few things that seem basic and essential, and I’ve also made a few decisions to vary from the mainstream.

Though I endeavor to paint every day, my goal for posting finished paintings will not be “a painting a day” but a more modest one of two small paintings a week, which I will try to post consistently on Mondays and Wednesdays. [Addendum: I’ve changed this to Mondays and Thursdays.]

Chaley Parker painting  blog

The blog

Like most painter/bloggers, I’ve created a blog, on which I will post my paintings as I put them up for auction.

Unlike many, however, I’ve decided that on that blog I will only post paintings, and not water it down with posts about works in progress, studio photos, the new brushes I just got, the weather, or any other topics not directly related to the paintings. I will continue to insist that the home page of a website, or the top of a blog’s home page, should always be aimed at the first-time visitor, not those familiar with the site who are returning.

For the design of the blog itself, I’ve deliberately chosen a dark neutral background, as I think it shows off the color of images to best advantage. Many painters without design experience don’t realize how much a colored web page background, that may seem appealing for the blog itself, can compete with and detract from the presentation of their work.

I’ve made a point of dedicating the sidebar to introducing myself, and describing the intention of the site, the size, medium and support of the paintings, the process, and my policies for selling and shipping the paintings. I’ve also made sure to provide a contact email address.

The current painting will appear at the top of the page, and visitors will have the ability to click on the image to view it large, or click on a link to view or leave comments. Comments will not only add interest for those visiting the site, but hopefully provided informative feedback on the paintings.

Chaley Parker painting  on eBay

The auctions

I’ve chosen to use eBay for the auctions, primarily because I already have an account and there is no upfront expense as with the Daily Paintworks auctions.

Most of my paintings are 5×7″ or 6×8″, and in keeping with the kind of size-based scale I would apply to gallery pricing, I’ve decided to set their auction minimums at $100 and $125, respectively.

I’ve also decided to limit my auction periods to 3 days, though this is one of the elements of the process of which I’m least confident, so it may change. [Addendum: Yes, changed to seven days.]

On the blog, I’ve provided a consistent line below each painting on the entry to show the painting’s status: At Auction, Available or Sold, and a clear link to the auction.

There will be an archive of past paintings, sold or otherwise, and a page for available works that are not at auction. Paintings not sold at auction will be priced at what I would consider gallery minimums at $200 for the 5×7″ and $250 for the 6×8″.

Contact and promotion

Near the top of the blog, I’ve included a sign-up for a newsletter, by which those interested can receive an email notice whenever I post a new painting.

For this, I’ve chosen to use MailChimp, which allows you to create and manage an email newsletter list for up to 2,000 subscribers and 12,000 emails per month for free.

I’ve created a new email address, specifically for contact through the painting blog.

I’ve created a new Twitter account, @CParkerArt, specifically for announcing paintings as I post them. I had to log out of my Lines and Colors Twitter account to create the new account. I’m using TweetDeck to manage multiple Twitter accounts now that they’re established.

I’ve also given the blog some basic search engine optimization (more on that later) and I will probably leverage my ability to place an ad on my own general topic blog (i.e. this one) to perhaps send some visitors, and some “Google love”, to my new painting blog.

Waiting

One thing I’ve decided to do differently than most painter/bloggers is to delay posting the paintings for several weeks.

Common practice is to post a painting as soon as it’s done, hot off the easel, so to speak. This, however, means that the purchaser, whether direct or through an auction process, must usually wait several weeks for an oil painting to dry enough to be shipped.

At the risk of appearing out of sync with the seasons, particularly as they change, I’ve decided to wait three to four weeks for the paintings to dry, and then apply a light coat of retouch varnish — with another week for that to dry, before posting the paintings and putting them up for auction.

This will allow me to ship the paintings as as soon as the auction closes. I’ve tried to weigh the the plusses and minuses of both approaches, but if I buy something, I’m much happier when I receive it sooner rather than later.

Varnishing

My decision to varnish the paintings is as much a desire to even out the painting’s surface appearance as to provide protection. I seldom use medium when painting, so even though I’m using a very high quality paint (more on that later), passages in which I’ve used thinly applied chromatic blacks in particular (e.g. Alizarin plus Viridian or Ultramarine Blue plus Burnt Umber) can look flat or “sunken in” compared to more thickly applied areas of brighter color.

After a bit of research, I’ve decided to use Gamblin’s Gamvar synthetic resin varnish, thinned with odorless mineral spirits (OMS to varnish 5:1), to act as a retouch varnish. This can be applied much sooner than a final varnish as it allows the paint to continue to dry. A light coating of this also has much less gloss than a full coat of final varnish.

Photographing the paintings

Unfortunately, I can’t say I’ve arrived at a completely satisfactory method of photographing the paintings. I’ll go into more detail on what I’m doing in that respect in a future post.

The start

I’ve been pretty consistent in recent weeks with painting every day and finishing two small painting each week. I’ve just posted my first painting (above, top), which was painted at a nearby state park several weeks ago (with a few finishing touches in the studio).

Progress reports

I’ll try to occasionally report on my progress here, as I learn what works for me and what doesn’t.

Of course, I’m always open to comments or suggestions from others who have engaged in the process.

It’s all about learning.

 
Facebooktwittergoogle_plusredditpinterestlinkedinFacebooktwittergoogle_plusredditpinterestlinkedin

Preparing images for the web

How to Display Your Art on the Web: Part 6

[This is part of a series of articles for which the introduction and list of articles is here. If you haven’t read the introduction yet, it would be helpful to read it first.]




Atoms to bits
Unless you work digitally, in order to get your artwork from the easel/drawing table to the web, it needs to be translated from physical atoms to bits of digital information (as Scott McCloud points out), i.e. photographed or scanned to a digital image file. That file will then be used to create the final resized and compressed image file that is displayed on your site or blog.

If you work digitally, you probably know a good bit of what’s in this article already, and can go surf YouTube while the rest of the class catches up.

Photographing your work
This is an area were I don’t have a lot of personal experience, as I largely work digitally, but there are many resources on the web (and in print) from “those who know” (see my list of resources below).

You’ll find some conflicting information here and there, particularly in terms of digital vs. film. If you’re preparing a portfolio for galleries, many of whom still want submissions as transparencies (slides), then slide film is the obvious choice. You’ll still have to scan the slides for the web, which requires a slide capable scanner; and it may be just as easy, if not easier, to take an alternate set of digital photos at the same time, specifically for the web.

Hiring a professional
You may want to take a stab at doing it yourself, but be critical. If you can’t get the results your work deserves, consider hiring a professional photographer. Find one who lists the photography of artwork specifically as one of their specialties. There’s a big difference between photographing a cute, drooling baby and a painting of a cute, drooling baby.

Scanning your work
If you your artwork is flat, on paper, illustration board or the back of a napkin, and is small enough, you might consider scanning; but for good results that don’t require a lot of color correction, you’ll want a graphic arts quality scanner (or access to one). Even though images for the web are prepared at low resolutions, scan at 200 ppi or better to give yourself some leeway. It’s always easy to scale down in image editing software, you can’t scale up. If you’re scanning for print too, scan at 300 or higher.

Again, try it with what you have, but be critical of the results and consider the option of a professional service bureau if the scans don’t look right. I turn off all the scanning “helpers” and image correction options, scan as raw as possible and do any corrections in Photoshop.

Image editing software

Once your artwork has been converted from atoms to bits, you may need to make adjustments to the color or straighten off-square photos or scans; and you will certainly need to use image editing software to create the final resized and compressed image files for display on the web. (Plus you always need something on your computer that will let you put the President’s head on Arnold Schwarzenegger’s body to amuse your friends.)

Adobe Photoshop is the industry standard professional image editor, if you have that and know how to use it, you’re ahead of the game. If you don’t have it, Photoshop is expensive (around $600) and can be more than you need to simply prepare a few images for the web; kind of like buying a Porsche Carrerra to drive to the train station. (I know, you told your wife/husband that a 2-seater would save on gas.)

If you are a full or part time student anywhere, you are eligible, as I advise the students in my Flash classes, for academic discounts that make things like Photoshop remarkably cheap (about the price of an upgrade package). Academic software is the same as the commercial versions, but it has some restrictions, (can’t be upgraded in the future, requires that you wear horn rimmed glasses and a pocket protector). See this description of academic software from About.com. Beware of cheap software scams in this area. (i.e. all those emails you get promising Adobe Photoshop for $29.95!) As a teacher, I can also get the real discounts; when I use them I usually buy from Academic Superstore. You have to produce proof that you are a student or teacher for the real academic discounts, but part time and continuing education classes usually qualify (and it doesn’t have to be art classes). Talk to the coordinator at the school.

Photoshop Elements (Mac & Win) is a lower priced (around $100) consumer version of Photoshop without the gee-whiz, super-duper, hyper special pro features (that let you put the President’s head on Arnold Schwarzenegger’s body and make it believable enough to fool Associated Press). You can read a comparison of the two on Graphic-Design.com and a review on CreativePro.com.

GIMP (The GNU Image Manipulation Program) is a free, open source image editor for Mac, Windows and other platforms, that some genius programmers with too much time on their hands created on all those Friday nights when they didn’t have dates and Stargate SG-1 was in reruns; and is in some ways comparable to Photoshop (and in many other ways, not). Installing and using it requires a degree in particle physics and a black belt in computer graphics, but it’s very capable (and pretty amazing for free software). Again, despite having the “right price” it may be the equivalent of using a bulldozer to turn over your backyard garden (which, granted, can be fun) because of the learning curve. It will also let you put the President’s head on Arnold Schwarzenegger’s body and make believable enough to fool USA Today (not that that takes much). See the description on Wikipedia. Some other geeks have spent their Friday nights putting together GIMPshop, a modification designed to make it more like Photoshop and easier to use.

Graphic Converter is a Mac only shareware application ($40) that is the universal can opener of graphics applications. It has an amazing ability to open and save in almost any image format known to man and computerkind (and some that no one’s ever heard of). Graphic Converter has good basic image editing tools and you can try it as long as you want for free, (but you should pay the modest asking price if you keep and continue to use it).

iPhoto® is the image cataloging application that ships free with iLife® as part of the Mac® OS X® computer® operating® system® from Apple®. It has basic image editing tools that may be sufficient for prepping your images for the web.

Windows Photo Gallery (Wikipedia description) is basically Microsoft’s version of iPhoto, and also has some basic editing tools. Previous versions were called Mocrosoft Picture It! (Wikipedia description). Like all Microsoft applications, to use this application you must click on a button to agree that Microsoft owns your immortal soul, and all reproduction rights thereto, in perpetuity and in all media, physical, electronic and ethereal, in current use, yet to be created, or ever to be imagined by the mind of any sentient being in any plane of existence. Other than that, it’s free.

Paint Shop Pro is a Windows only image editor that has its adherents and detractors. I mention it because it’s popular and relatively inexpensive ($60), and in some ways more powerful than Photoshop Elements; but take the “Pro” part with a grain of salt. If you’re a “pro”, you use Photoshop. See the description on Wikipedia.

About.com has a couple of handy lists: Free Photo Editors for Windows, and Free and Budget Photo Editors for Mac. Turn your sound down and be ready to duck the annoying talking ads for SitePal.

The big list. Here’s a long list of available raster graphics image editors from Wikipedia, most of the items are linked to more detailed descriptions. More than you ever cared to know about.

There are also some online image editors. The idea seems kind of foreign to me and I don’t know much about them, but who knows?. Here is a list of free Online Photo Editors from ExtremeTech. If anybody has tried these, let me know how you like them.

What’s the format, Kenneth?

Web browsers can generally display three kinds of images, news, comics and por… er, I mean GIF, JPEG and PNG. They all use some method of compression to reduce the file size of images so they can be transmitted over the web without taking a week to download.

GIF (Graphics Interchange Format) can be pronounced with either a hard or soft “G”, but the originators of the format say choosy artists choose “jif”. GIF was the original format back in the early days, when the web was 5 steam-powered computers hooked together with Radio Shack speaker wire across the MIT campus. GIF is really only suitable for images with a limited color range (256 colors) and flat areas of color. The GIF format can produce images with a small file size and can be good for some things, like simple, flat-color comics, typography and cartoons of the President’s head on Arnold Schwarzenegger’s body.

JPEG (Joint Photographic Experts Group) is pronounced “jay-peg”. JPEG images are by far the most common image format on the web, and are usually the format you will use to reproduce your art for the web. They support the full range of millions of colors. Used correctly, JPEG compression can compress images to to a remarkable degree without losing apparent image quality. Used incorrectly, it can turn your images into a grunky mess that looks like the cat threw up in your digital camera.

JPEG is a “lossy” compression method, meaning it throws away image data that the algorithm has determined you won’t miss; kind of like your wife cleaning out your studio when you’re not home. If you compress a JPEG too far, however, or re-compress an existing JPEG, you can wind up with dirty looking “artifacts” in the image. This is where is pays to have an image editor that gives you a preview, like Photoshop’s “Save for Web” feature, that shows you an approximation of how your image will look as you choose the compression level. You want the smallest file size possible without seeing any artifacts – dirty, squarish roughness in areas of the image (see the JPEG image above with the compression level of “10”). The stronger the level of compression, the lower the file size; but also the more image data that is thrown away. Always keep copies of your original files; and let your wife know that you really did buy 2 copies of Uncanny X-Men 96 on purpose.

As a general rule don’t re-save a JPEG as a JPEG; create a fresh one from the original file. Re-compression throws away more image data. JPEG’s that are originally saved with minimal compression, however, like those from a digital camera, can be used to make new JPEGs. Not much image data has been discarded. JPEGs saved for the web, though, are generally “pushed to the edge” and compressed as hard as possible without looking bad; re-saving those will make your images look like spoiled peaches.

PNG (Portable Network Graphics) is, the originators insist, pronounced “ping”, though you will hear “pee en gee” in certain circles. PNG images combine some of the characteristics of GIF and JPEG. Like GIF they are a lossless image format and support transparency. Like JPEG they support the full color range millions of colors. The main disadvantage is that their lossless compression method is not as efficient as JPEG’s lossy compression, and they make images with larger file sizes for the same level of apparent image quality.

The emails were right: size matters

Image size
In addition to file size you need to be concerned with image dimensions. You will need to determine how your images will display within your interface design, and how much room you have in your design area, before you resize them and save them out as final files for the web. I’ll be covering the design of online galleries and portfolios in a future post.

Once you know how the images will be displayed, you will probably be making more than one version of each image. Depending on your gallery design, you might be making:
a thumbnail and a full size image,
a thumbnail, medium size preview image, and full size image,
a thumbnail, full size image and jumbo, extra large, Grade-A, hi-res detail image,
a cropped detail close-up,
and/or all of the above.

If you’re clever and persistent, and not doing anything on Friday nights, you may be able to figure out how to have your image editing software save out several size versions simultaneously, for an entire folder full of files, using batch processing.

Resolution, or dpi and ppi, FYI, QED
Resolution in print is measured in “dots per inch” (dpi), or “lines per inch” (lpi), and on the computer is measured in “pixels per inch” (ppi) (or pixels per centimeter for those of you in the rest of the civilised world). While this matters in print, or when scanning or working in Photoshop, image resolution does not matter on the web. What matters is the dimension in pixels.

If a 2″ by 2″ (5cm x 5cm) image has a resolution of of 100ppi (i.e 100 pixels per inch), it will be 200 pixels by 200 pixels. If the 2″ image has a resolution of 300ppi, it will be 600 pixels by 600 pixels. Both of those images will print at the same size, 2″; the higher resolution one will have more detail.

Web browsers, however, are rather narrow-minded and don’t understand or care about image resolution. All they understand is dimensions in pixels. So the first image will display much smaller on screen than the second. (Unless you learned “new math” in the 60’s, in which case 5 images + 5 images = 12 images.)

This concept is made additionally complicated by the fact that computer monitors can be adjusted to display at different resolutions, so “pixels per inch” is actually a relative term. When someone says “on the web it’s all 72 ppi”, they are referring to a default resolution.

Monitors come in different sizes. 1024 x 768 is the default resolution for a 17 inch monitor, and it’s 1280 x 1024 for 19 or 20 inch monitors (with other varistions for “widescreen” monitors). If you have your own monitor set to a higher resolution than the default, it will display more pixels per physical inch, and images will appear smaller onscreen to you than they might to other computer users (and vice-versa if you set your resolution lower than the default).

If you get lost, try a bit of the cake that says “Eat me” (hmmm… or is it the bottle that says “Drink me”?)

Putting it in the browser

OK, you digital artists in the back row who were surfing YouTube can pay attention now.

Embedding images in HTML
Images aren’t actually “in” the HTML page the way words are, they are “referred to” by the IMG tag, which basically tells the browser “Go get this image from this location and stick it here in the page.” The IMG tag can also tell the browser what the size of the image is (in pixels by pixels), which helps the browser leave a place for the image while it’s downloading so it can render the page faster. You can artificially force an image to display at a different size this way, and some HTML editing software will give you the impression this is a fine thing to do. It’s not. It will make your image display poorly. Prepare your images at the size they will display, and don’t trust advice from strange HTML editors to whom you have not been properly introduced in the course a chaperoned social occasion.

Displaying images in Flash
If you are preparing your images for display in a Flash-based gallery or slideshow, save them out as JPEG images, compressed just as if you were going to place them directly in a web page. Dedicated image editors do a much better job of image compression than Flash does. Flash won’t re-compress an imported JPEG unless you tell it to. Flash is considerate that way.

“Protecting” your images

You can’t.

Clever tricks that don’t work very well
Many people try various tricks to keep their images from being easily downloaded, like disabling right-click with JavaScript, placing a transparent GIF over the image in a CSS layer, putting the image in a Flash file, adding a sound file that screams “Don’t touch that!” whenever someone chooses “download image”, etc. They can all be gotten around in one way or another. All of them, in fact, can be defeated by simply using a third party screen capture utility (which is why, of course, all software from companies with less than a $4 billion market cap should be illegal, or at least that’s what Steve Ballmer tells me).

Watermarks and other ways to ruin your image
I should be clear here that by “watermark” I mean a word or symbol, sometimes partially transparent, that is laid over an image in an attempt to render it useless to someone who wants to download and “repurpose” it. The problem, of course, is that this also renders the image useless for showing your artwork as anything but a hideous, insulting joke. You can also choose to display your images so painfully small that they have the same results. See my rant on “How Not to Display Your Artwork on the Web“.

Bylines and credit markings
On the other hand, marking your image with a small, innocuous signature or byline, crediting you as the creator of the image, perhaps with a copyright mark and/or listing your web site’s URL, is a fine idea, as long at it’s done without making your image look bad. If you’re going to be displaying your images against a known background color and you are comfortable that the color won’t change in the future, you can add an additional band of that color to the bottom of each image (by adding to the “canvas size”), and add your byline there without intruding on the image area at all.

Keep it in focus
Unless you’re putting your images up for the benefit of your mom and Aunt Joan (it’s so lifelike!), your purpose here is to have the images on the site present the best representation possible of your work. That’s the end goal for all this fuss. As Fernando sez, you want them to look mahvellous!

Next: Gallery and portfolio design

Resources

Photographing your work
A Short Tutorial from Art Link Swap
How to Photograph Artwork from The Artists Web (images missing, still useful)
List of Resources on Photographing Artwork from Catherine Jo Morgan
How to Photograph Art from Dallas Arts Review
Photographing Your Artwork by Russell Hart and Nan Starr (Amazon link)
Other books (Amazon)
Photographing Small Paintings for “painting a day” blogs from Jeff Hayes

Scanning your work
Scanning Artwork from The Artists Web
How to Scan Artwork from Treelight Studios

Image editing software
Photoshop (Adobe: Mac & Win) (Amazon Mac & Win)
Academic software dicsounts – info from About.com
Photoshop Elements (Adobe Mac & Win) (Amazon: Mac & Win) Comparison on GraphicDesign.com
GIMP, description on Wikipedia, GIMPshop
Graphic Converter
Paint Shop Pro (Win), description on Wikipedia
Free and Cheap Photo Editors for Windows and Mac, (About.com)
Big list of raster image editors from Wikipedia
Free Online Photo Editors from ExtremeTech

Formats
JPEG, GIF and PNG on Wikipedia
JPEG artifacts and Pitfalls of JPEG Compression on About.com

Resolution
DPI and PPI Explained on tildefrugal.net
Display, Printing, dpi and ppi on Photo.net

 
Facebooktwittergoogle_plusredditpinterestlinkedinFacebooktwittergoogle_plusredditpinterestlinkedin

Designing your web site

Designing your web site

How to Display Your Art on the Web: Part 5

[This is part of a series of articles for which the introduction and list of articles is here. If you haven’t read the introduction yet, it would be helpful to read it first.]

OK, big news flash here, in case you weren’t aware of it, but artists, even good artists, don’t necessarily know squat about graphic design. (Gasp!) Yes, true fact: art and design are two different skill sets, even though there is some cross over. Sorry if I’m stepping on any toes, but if you want proof, look no further than the endless array of horribly designed artists’ web sites already out there.

To make matters worse, traditional print designers, even good ones, don’t necessarily know squat about web site design. Again, it’s two different skill sets, though the overlap is much more extensive.

Print designers, if they know their craft, can specify a page design that turns out in print precisely as they designed it, with pinpoint placement of graphic elements, total typographical control and exactly specified colors.

The web, on the other hand, still offers very limited typographical control; color space and page size vary between operating systems and individual computers; and even web pages designed by pros, that once looked fine across the board, can go wonky with the newest release of the most popular browser from The Giant Software Company That Shall Not Be Named. The web is wiggly and squirmy, and designing for pages that can be different sizes and shapes on different computers is a little like eating Jell-O with a fork; it can drive stout-hearted print designers to madness and acts of desperation.

Alternatives
You have some of the same alternatives I mentioned in my article on Building your site, notably hiring a professional and using, or starting with and altering, existing page templates. I can’t give you a course in design here, but I can try to point out some important considerations.

Size and proportion
Here’s where web design gets all twitchy right off the bat. Unlike print design, you don’t know the final size or shape of the area in which your design will display; it varies from computer to computer among those viewing your site over the web. EEK! This understandably drives long-time print designers completely crazy, and they will very often make their pages un-web-like by freezing them at a set width and height, or popping them up in a specifically sized window, and otherwise trying to make them behave like print pages. This is one option if it makes life easier for you, but I think it’s better to approach a web page as a web page and take advantage of the fact that it can shrink and grow to accommodate different amounts of content. Web design has lots of advantages over print design, it’s not all disadvantages.

While you can’t predict the exact size in which viewers will be seeing your pages, you can predict the most likely “window”, based on statistics. Most people are viewing the web in one of several common screen resolutions. The most common, as measured in pixels, are: 1024 x 768, 800 x 600 and 1280 x 1024, in order of current popularity. These figures change over time as more people buy larger monitors. Up until a couple of years ago, I was designing for 800 x 600, but smaller monitors are giving way to larger and I now design sites to display comfortably in 1024 x 768, and try to nicely accommodate the way they will look in higher resolutions.

How big is that doggie in the window?
Taking into consideration typical “browser chrome”, the space taken up by the browser interface and all its wonderful widgets and tool bars, and allowing a little extra wiggle room, I work within a “safe” size of 980 x 550. The page can be longer vertically, of course, but that initial size before the user starts scrolling (if they take the trouble to scroll) is the most important. Try to keep your most important content, navigation elements, etc. “above the fold” in that window. (“Above the fold” is a reference to the front page of newspapers, in which the most important stuff has to be seen when the papers are folded in half on the stack.) You may want to leave more or less in terms of horizontal margins. On larger resolutions, the background will expand to fill out the difference.

Remember in designing your page elements that you don’t want to force part of your main image gallery display, or the gallery navigation, below the bottom of the window so users have to scroll to see or use it.

Would you like ice with that?
The content area of your design can either change width with the window width (“fluid”), be a set width, locked to the upper left (“ice”), or be a set width that floats to the center of the window, with the background expanding or contracting to either side (sometimes called “floating ice”). The first is the hardest to implement, the second the easiest, and the third is currently the most popular design structure.

Design elements
Think of a web page as a grid. You can make it as curve-u-licious as you want, but it’s going to have a rectangular grid underneath it, and you need to make your curves work within that structure.

Where to start
You’d be surprised at the number of high-end sites that are based on a few simple elements with some graphic design embellishments. Try starting with a top bar or banner, a horizontal space across the top of the site containing your “logo”, name or the name of the site, and maybe an image element. Under that arrange a navigation area, perhaps horizontal if your site is very simple, or a vertical column to allow for subsections and expansion, and a content area with your page heading, text and images. If you want you can tie the bottom of the page off with a horizontal footer, usually containing a copyright notice or contact information.

Consistency, consistency, consistency.
Ah-ha! you say. Consistency is the hob-goblin of little minds! Perhaps, but on the web, it’s the guardian of clarity and your best defense against confusing or discouraging your visitors. At any given moment after a visitor opens your site, they should be able to glance at page elements and know: What site am I on? What page within that site am I on; and where am I in relation to the other pages (or major sections) in the site?

Consistency means things like: every page should have the navigation in the same place and in the same form. (Don’t, for example, drop out the nav element for the page you’re on, or change its position. Highlight it, perhaps, but leave it in place and in the same order.)

Headings (page titles) and sub-headings should look the same, and be in the same position on every page. Sub-headings should be clearly subordinate to headings. If you have a footer, keep it consistent.

The exception
While there may be variation within your consistent page layout (a text page for information About the Artist will be different from a portfolio or gallery page, for example); the one page that can be dramatically different from the others is the home page, which acts much like the cover of a book or magazine. It should have some continuity, in that it should look like part of the same web site, but it doesn’t have to follow the same pattern as the interior pages, and in fact, should look different so users can distinguish it easily as the home page. It also serves like the lobby of a building, from which visitors can orient themselves.

Navigation
Here’s another area where the web is very different from print. In print you have page numbers and chapter headings that let readers know where they are and help them find something; on the web you must offer them clickable navigation as well. Some important points:

Put it somewhere users expect to find navigation (usually toward top or left).
Make it look like navigation.
Keep it consistent.
Ideally, highlight the navigation element for the page or section they’re in as a sort of “you are here” indicator.

Every page but the home page should have a link to “Home”, preferably as the first navigation element. Every page should have access to all of the major pages or sections. If you’re in a sub-section (e.g. “Portfolio”), every page in the sub-section should have access to every other page in that sub-section, as well as to the main site pages. Don’t make them use their “Back” button, or your own version of a “Back” button (like “Up” arrows, etc.). This is a web site, not a directory on your computer.

Pop this
I’m not a big fan of “pop-out” or “drop-down” menus. I think it’s a poor substitute for visible hierarchical menus. Lots of people love them, but then lots of people love Michael Bolton and Yanni, I’m just not one of them.

More info
For more on navigation concerns, see Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug. Start looking at sites you visit with an eye toward which ones are easy to navigate, and which are not, and see if you can understand why.

Color
Color can be as personal as clothing choice, and likewise will impact the immediate (and perhaps lasting) impression made on others.

There are a number of color utilities out there, many of then free, that are designed to help you choose “color schemes”, groups of colors that ostensibly work together. They are often accompanied by web sites where color schemes can be posted by users. There is a large list on the Web Developer’s Handbook. (Here’s an interesting variation for atists: Web Design Color Inspiration from the Masters based on picking colors from paintings.)

The most important piece of color advice I can give you is to remember the purpose of your site. Don’t choose a color scheme that will overwhelm, conflict with, or otherwise detract from the display of your work. This may often mean using low-chroma, neutralized colors or even grays, or choosing colors that compliment the predominant colors in your work. But, hey, if you think a background of electric green or baby-puke yellow will set off your work to best advantage, go wild.

The so-called “Web Safe Palette”
Back when web site design was a fledgling art, the major software companies were clueless about our need to access the palette of colors that would display reliably across different operating systems, particularly when one of them was often running on machines with a very limited ability to display colors. (Older Windows computers could often display only 256 colors.) So we were left with third party utilities to choose colors from the small palette of 216 colors common to the two systems. Now that almost all computers can display millions, or at least thousands, of colors, the major software companies are once again displaying their ignorance by acting as if the web safe palette is this wonderful web-aware feature they’re providing for you, when it essentially no longer matters! If you are trying to match the edge of a flat color in a graphic or Flash file with a background color set by hex code in the HTML, it can be helpful to use a color from the web safe palette; otherwise use the colors you want.

Different visions of the world
Be aware that your site will look different on Mac and Windows machines. They have a different “gamma” settings, and colors will generally look darker on Windows than on the Mac. Image editors like Photoshop and Fireworks have provisions for previewing your work in the other system’s color space.

Also be aware, very aware, that your fledgling site design can look fine in one browser, and fall apart in another. Though there are standards for how HTML and CSS should work, the engineers that write the browser code that interprets those standards in displaying your page often appear to live in a Bizzarro World where “rite am rong”. Whenever possible, test in different browsers. Impose on your friends who use a different operating system. I test in IE6, IE7 and Firefox for Windows, and Firefox and Safari for Mac. (Occassionally you may want to ensure compatibility by painting yourself blue and sacrificing a chicken to the Web Gods at midnight on a full moon in a bar-b-que pit that faces Redmond, Washington.)

Typography
If CSS has brought web design out of the stone age and up to Victorian levels of technological sophisitication, web typography is still in the medieval dungeons and is the domain of witches and demons. The problem is that your “live” text has to display in a font (typeface) that exists on the user’s machine. You can specify any font you want, but if the user doesn’t have it on their machine, the browser will default to whatever it can find, sometimes with unpredictable results. This is another thing that drives print designers crazy and I don’t blame them, it’s a terrible limitation that leaves very few font choices. The best universally installed fonts are Verdana, for sans-serif body copy, Trebuchet MS or Arial for sans-serif headings and Georgia for serif. In general serif fonts don’t read well at small sizes on the low resolution of a computer screen. Verdana, Trebuchet MS and Georgia were specifically designed for display on screen rather than in print. Avoid things like Times New Roman, and surpress any temporary possession by demons that may make you think about using Comic Sans.

I can’t give you a whole primer on web type, but I often use 11px Verdana for body copy, 12px Arial or Trebuchet for subheadings or text-based navigation elements. Your milage may vary.

Page headings and navigation elements can be created as graphics, allowing you to use any font and restoring full typographic graphic control to at least those areas. Be sure to use image “alt” tags in the HTML for those images for the benefit of search engines.

Don’t use more then three different typefaces.

Text columns.
Here is an area where some big-time web usability gurus (Jacob Neilsen are you listening?) fall flat on their faces, in apparent ignorance of one of the most fundamental rules of graphic design (and one that has been known for literally hundreds of years): human beings read text more easily if it is constrained to a certain width. The general rule is about two alphabets, 50 or so characters, which is approximately the width you’ll see in most hardbound novels. This is the primary reason that magazines and newspapers have columns, though selling ads is a close second, and in newspapers columns are broken down to even smaller widths to make it easier to sell small ads.

White space is your friend
More than that, it’s a page’s highway system and tour guide, the way you move someone’s eye around the page. White space is one of your most powerful design tools, and the proper use of it is one of the quickest indicators of high end design. (“White space” doesn’t have to be white.) Look at the most appealing professional sites and note the amount of space in the design that is “empty”. You’ll notice the same thing in newspaper and magazine ads. The really high end ones will appear to “waste” a lot of the very expensive ad space, but are actually using it to control your eye and attach importance to the highly focused message. Give your text columns plenty of room to “breathe”. Even artists who understand the concept of “negative space” in painting and composition may not grasp its importance in design. What is not there, Grasshopper, is often more important than what is there.

The elements of style (web version)

Make sure it’s clear what is and is not a link. Don’t use colored text except for links and headings. Never underline anything on a web page that is not a link. Use bold or italic (sparingly) for emphasis.

Don’t center your text! Unless the site is one big wedding invitation, never center anything that is not a headline. For some reason, perhaps exposure to too many Microsoft Word documents, a large number of people suffer from the delusion that centering text makes it look more professional, when in fact the opposite is true.

Don’t use italics for long passages, like centered text, it’s hard to read.

Inspiration
Like artists learning to draw by studying the masters, one of the best ways to learn about web site design is to look at existing successful designs. I’ll list some sites below that are large indexes of sites that someone thinks are well-designed. This, of course, is always a matter of opinion, but you will certainly find a higher percentage of well-designed sites here than on the web in general.

CSS Mania
CSS Beauty
CSS Tux
Stylegala
Netdiver
Styleboost
Wow Web Designs
Media Inspiration (categories for Illustrators, Painters, Sculptors, etc.)

And a big list (Under Creativity, CSS Showcases and CSS Galleries) of many more design inspiration sites on Web Developer’s Handbook, along with a ton of links to other web design and building resources.

Here are a couple of design resources for “stuckness” from The Crafted Webmaster.

Other Resources
In addition to the above links, I’ll send you back to the same resources listed in the articles on Planning your site and Building your site which have information relevant to design issues as well.

Next: Preparing images for the web

 
Facebooktwittergoogle_plusredditpinterestlinkedinFacebooktwittergoogle_plusredditpinterestlinkedin