Photo Sharing

[Painter Essentials 3]
[Colour Management]
[OnOne Suite]
[Photo to Art]
[Photoshop Elements 4]
[Paint Shop Pro X]
[PhotoImpact 11]
[Adobe-Macromedia]
[Photoshop CS2]

Applications:

[Apps Overview]

[Camtasia Studio]
[CompuPic Pro 6]
[Digital Image Suite]
[Deep Paint 2]
[FotoFusion 3]
[Paint Shop Pro X]
[Painter IX]
[Painter Essentials 3]
[Photo Album 6]
[PhotoArtMaster]
[Photo-Brush]
[PhotoImpact 11]
[PhotoObjects 2]
[PhotoSEAM]
[Photoshop CS2]
[Photoshop Elements 4]
[PhotoSuite 5]
[Piranesi 4]
[SnagIt 6]
[Texture Maker 2]

Plug-ins:

[Plugins Overview]

[AutoEye 2]
[DreamSuite 1]
[Eye Candy 4000]
[Genuine Fractals 3.5]
[GraphicXtras]
[Image Doctor]
[KnockOut 2]
[KPT 7]
[Mystical Lighting]
[Mystical Tint]
[OnOne Suite]
[pxl SmartScale]
[Virtual Painter]
[Xenofex 2]

[Articles & Tutorials
Overview
]

[Colour Management]
[Photo to Art]
[Adobe Macromedia]
[Extending Bitmaps]
[Image Modes]
[Elements Tutorial]
[App Roundup]
[Photoshop Patterns]
[Texture Library]
[Creative Roundup]
[Photo Bargains]
[Creative Suite]
[Tablet PC]
[Pen Input]
[RGB to CMYK]
[Filter Tips]
[Photoshop Filters]
[Image Resampling]
[Image Resolution]
[Digital Video]
[Image Channels]
[Photo Apps Roundup]
[Image Management]
[Understand Halftones]
[Photoshop Vectors]
[Image Enhancement]
[TIFF,PSD,PDF,PNG]
[BMP,TIFF,JPEG,GIF]
[Image Hoses]
[Producing Panoramas]
[DTP Compositing]
[Brush Control]
[Digital Cameras]
[Stock Photography]
[Bitmap Editability]
[Photoshop 5 Colour]
[Selection/Masking]
[Image Management 2]
[Layer Handling]
[3rd Party Solutions?]


[Home / What's New]
[DTP / Publishing]
[Vector Drawing]
[Bitmap / Photo Editing]
[Web Design]
[3D Software]
[All Reviews]
[All Articles / Tutorials]
[Book Search / Shop]
[Site Map / Search]
[Contact]
 

you can help support the site with a direct donation or by shopping via the following links:

[Amazon.com]
[Amazon.co.uk]
[Amazon.ca]

Thank you!

 

 

The best way to show off your photos online

Tom Arah investigates web galleries and online photo sharing.

flickr.com

The Web is changing how we think about photography.

When Tim Berners-Lee invented HTML and with it the World Wide Web he was explicitly creating a HyperText system. This focus on text meant that something essential was missing: images. In fact it was only when university student Marc Andreessen unofficially extended HTML with his <img> tag (against Berners-Lee’s wishes) and added support for GIF and later full-colour JPEGs to the popular Mosaic/Netscape browser that the Web as a design medium really took off. Now that favour is being returned and the Web is redefining how we think about image handling and digital photography in particular.

The reason is simple. Whether you’re a happy snapper or professional photographer the real point of taking a photo is to let it be seen - and nothing matches the Web as a way of getting your work seen. Yes you can email images directly as attachments to friends and family, but that’s awkward and inefficient for sender and receiver alike. It makes much more sense to post your photographic JPEGs (the default file format of virtually all digital cameras) to a single web server where each photo can be accessed by any user, at any time and from anywhere.

Browsing JPEGs directly via their URL has some advantages, particularly as most modern browsers let you toggle between viewing actual pixels or fit-to-window. However, thanks to the <img> tag, by far the most common way to view the photos is embedded directly in an HTML webpage. Image embedding offers a number of advantages such as the ability to include related text such as headings and captions, to include navigational links and to turn the embedded image itself into a link, to include multiple photos on the same page and to specify a particular image size either in pixels or percentage terms (though for maximum browsing efficiency you should generate separate versions of the image at the desired sizes).

Put it together and you have all that you need to create a web gallery consisting of thumbnail-based index pages linking through to individual photo pages complete with their own navigational links. Add in other features such as frames, CSS and Javascript and you can provide a richer experience with permanent onscreen thumbnail access, instant photo switching and automatic page loading to create onscreen slideshows and so on. It’s relatively straightforward to create your own web gallery like this, but in practice it quickly proves a repetitive chore and most users will opt for dedicated software to automate the process.

As you’d expect, the professional photographer’s tool of choice, Adobe Photoshop has offered web gallery capabilities for many years now, stretching back to 1999 and version 5.5. What’s rather more surprising is that the web gallery functionality is as clunky and unimpressive today as it was then! To create your web gallery you need to access the File > Automate > Web Photo Gallery command and select one of the limited range of styles from the dropdown list, retrospectively checking the tiny preview to see if it is likely to do what you want.

If you’re using a recent version of Photoshop you can then select to work with all files selected in the File Browser or Adobe Bridge, otherwise you’d better create a separate folder and copy the desired files into it as the awkward dialog’s Browse… command doesn’t let you select individual photos. After selecting or creating a Destination directory, you can then check the grab-bag of miscellaneous settings in the dialog’s Options section. Note incidentally, that there are actually multiple pages of options, providing core capabilities such as setting image and thumbnail sizes, though for reasons known only to Adobe these can only be accessed via a dropdown list. Finally you can click OK to see your expensive, professional photo editor start loading, resizing and outputting each image in turn in true amateur shareware tradition. To add insult to injury, you’ll then need a separate FTP program to upload the resulting HTML and JPEGs to your server.

photoshop web gallery

Photoshop’s web gallery capabilities are underpowered and amateurish…

It’s an ugly system but for the most part it does work. When your new web gallery opens into the browser you might even be pleasantly surprised. Select one of the Centered Frame options for example and, as well as a frame of always-available thumbnails running down the left of the screen, each photo page includes a smart collapsible widget where visitors can view captions and details and email or even post comments. If you select one of Photoshop CS2’s two Flash-based themes, it will even add in some animated effects and interactivity.

Reasonable results are possible with Photoshop but it’s clear that it’s not exactly the last word in web gallery creation. In fact it’s not even as powerful or easy to use as its cut-price sibling, Photoshop Elements. Elements’ Create > Web Photo Gallery command is based on the same underlying engine but gives it a much needed makeover and usability boost: providing all currently selected images as selectable thumbnails, larger theme previews and a larger choice, a much clearer tabbed interface and behind-the-scenes image resizing. Most importantly, thanks to the central role of Elements’ Organizer window, the whole web output process is much more integrated – it’s just part of the natural workflow of enhancing, tagging, cataloguing and sharing.

Ultimately I’m convinced that the benefits of integration mean that the natural home for web gallery creation should be your favourite photo editing and management application which for most users will be Photoshop or Elements. For the moment though neither application rises to the challenge. The solution is to turn to dedicated standalone alternatives and a quick Google search shows that there is no shortage of choice. However one application stands out – JAlbum from http://jalbum.net (see cover disk). To maximize compatibility, JAlbum’s Swedish developer David Ekholm has written the program in Java which enables it to run on any platform though this does mean that you’ll need at least version 1.4 of the Java runtime installed (you don’t need Java to view the galleries that it generates).

Once installed, the whole process of creating a web gallery with JAlbum is incredibly easy, in most cases involving just three main steps. Using the Main tab of the single dialog you choose input and output galleries, select a themed skin and CSS style, make various core settings such as image size and thumbnail layout and whether to include original files. In the Edit tab you can view and reorder images through simple drag-and-drop, quickly exclude those images that don’t make the grade and add folder and image captions. Finally in the Publish tab you can set up your FTP server and directly upload all images or, if you’re updating an existing gallery, just those files whose size has changed. That’s all you’re likely to need for most jobs but further control is available via an Advanced tabs and, depending on your design choice, a dedicated Skin tab.

Most importantly the end results look the part – a great testimony to the quality of skins developed by JAlbum’s users (each skin is essentially an HTML template populated with JAlbum variables and enhanced with scripts, CSS and graphical design elements). With the default Chameleon skin, for example, the index pages use graphical borders for each thumbnail which, along with the black background, make each image stand out like a slide. Click on one and you are taken to the relevant photo page which appears via an attractive DHTML page cross-fade effect. Here details such as captions and metadata are automatically picked out below the image and links are provided back to the home page, to an automatic slide show and to enable prints to be ordered (assuming that you chose to include your original JPEGs). Crucially all these features are handled in an understated and minimalist way so that it’s the photo itself that stands out.

jalbum

…while the freeware JAlbum is powerful and professional.

What adds the finishing touch to the JAlbum experience is the extraordinary attention to detail. Again with the default Chameleon skin when you click to the left or right of the main image you are taken to the next or previous page, click in the middle at the top and you return to the home page, click below and you load the original JPEG. And you aren’t restricted to mouse-based navigation - you can move through pages using the cursor keys or hit the spacebar to start or pause the slideshow. In many ways this feels more like a tightly-programmed desktop application rather than loosely-associated web pages. Throw in further advanced features such as the ability to nest sub-folders as linked galleries and to customize and create your own skins and even image filters and it’s clear that JAlbum is not just simple and effective but powerful and flexible. And I’ve saved the best to last – it’s also free.

With JAlbum you have all that you need to show off your photos at their best to the world at large – but only if you have access to your own web server hosting account. These days that’s hardly a hurdle but most users would still prefer to have this taken care of for them. If the host provider will also automatically create the web gallery for you, all the better, and if the publishing process is integrated directly into your favourite image management software, better still. If on top of this the service is free, it’s clearly worth investigating.

All this is offered by Kodak working in conjunction with Adobe. If you use Photoshop CS2, Photoshop Elements or the free Photoshop Album Starter Edition, you can quickly sign up to the Kodak EasyShare Gallery (previously Ofoto) Adobe Photoshop Service. You can then post any number of images to the site directly from within your application and use the site’s address book feature to invite friends and family to view the resulting gallery. From here you can click through to individual pictures or there’s even a basic slideshow.

easyshare

Free hosting sites such as Kodak EasyShare are functional but unexciting.

At the price (ie none), it’s difficult to complain; but it’s also difficult to get too excited. Clearly there has to be something in it for Kodak / Adobe and it soon becomes clear that the entire service is built around encouraging you and your visitors to buy prints. If all that meant was reasonably prominent pricing information and click-to-buy links fair enough, after all it’s still nice to have print-outs to look at and hand around. However there’s a fundamental and inherent problem: if Kodak make their online sharing service too professional, there’s less incentive to buy the prints – after all, a full-screen, back-lit, original RGB image is always going to look more impressive than your average 6”x4”. The end result is that the Kodak Easy Share albums are deliberately kept dull and functional.

As the JAlbum galleries show, it doesn’t have to be this way and, if you’re willing to sacrifice integration with Photoshop/Elements/Album, there are plenty of alternative third-party photo sharing services to choose between. Bizarrely though, for services that are designed to bring together the cutting edges of web design and digital photography, the one thing that seems to unite them is that they all seem strangely dated and old-fashioned – hardly the best setting in which to show off your photos. Thankfully there is one exception. The site that has managed to distinguish itself from the crowd and that is booming as a result (2 million members at the time of writing and rising sharply) is Flickr.com. Flickr takes the traditional sharing environment and gives it a few simple twists that take it off in completely new directions.

To begin with, Flickr takes advantage of the latest web technologies to provide its users with as rich and interactive an environment as possible. On photo pages for example there are Ajax-based “widgets” that let you navigate through associated “photo streams” without having to reload the current page. Even better is the use of Flash. On your Organize page, for example, you can create new albums by dragging and dropping photos, and each album can be viewed as a truly interactive slideshow - move your mouse to the top of the screen to access navigational controls, move it to the bottom for clickable thumbnails, click on the photo to shrink it to reveal the photo title and caption. There’s certainly room for improvement – the slideshow could be made scalable for example – but at least with Flickr you know that work is constantly being put in to make the online experience as rich as possible.

flickr album

Flickr uses Flash and Ajax to make the online experience more like a desktop application.

After its leading edge technological credentials, the next major difference between Flickr and most of the competition is that it is truly open. Most online photo hosting services are designed to allow you to share your photos privately between invited friends and family. You can still do this with Flickr, but 80% of Flickr photos are made public. The practical difference is immense – most photographers want their work to be seen and Flickr takes full advantage of the Web to open it up to the entire planet – or at least to all Flickr users and visitors.

Designating your photo as public is one thing, but how on earth does the potential end user find your particular photo? After all, the Web and search engines rely on text to do their magic and the <img> tag doesn’t give them a lot to work with. Flickr’s solution is to foreground the use of tags – keywords that you apply to your photos. Tags are essential for mastering your own photo collection as any user of Photoshop Elements or Album will testify, but they move into new territory when used to navigate through pooled image collections. Click on Flickr’s Tags page and you can instantly find all the photos of, say, whales then explore the selection of associated tag “clusters” narrowing in on “humpbacks” or “orcas” for example or moving off in entirely different directions – “Thames” say or “water”. Find a photo that catches your eye and you can quickly drill through to view all images from that author and then start a new search based on a list of their tags.

Thanks to the combination of text-based tags and visual thumbnails it’s easy to skip from one stunning photo to another but beware – the process quickly becomes addictive. As does another Flickr feature: groups. Each group is an ad hoc collection of Flickr users that share a particular interest – again this could be private, say enabling all guests at a wedding to pool and comment on their photos, but more usually public. The range of open groups is enormous – naturally the most popular are built around users’ best shots, but others concentrate on black and white images, those with striking colour, those highlighting various camera techniques and of course those dealing with specific interests such as babies, pets, nature and so on. Communities then build up around these visual interests no matter how bizarre - such as the 3500+ members who have joined up to the Squared Circle group and posted over 25,000 square photos of circular objects! That might sound obsessive (one member has posted over 4000), but many of the images are beautiful, thought-provoking, funny, or all three, and it’s amazing how much time you can spend browsing - and posting.

Once you’re hooked on Flickr of course you come across the inevitable catch. Although Flickr is notionally free, you are limited to posting 20MB of photos a month and only your latest 200 photos and 3 photo sets are made publicly available. That might sound more than enough for most users – and the limits act as a useful quality threshold – but it’s amazing how quickly you can hit the buffers. Naturally you can always pay to have the limits removed and, with its captive audience, you might expect Flickr to take advantage. In fact unlimited and permanent image storage (based on a maximum of 2GB of JPEG uploading a month) costs just $25 a year. Throw in the free Flickr Uploadr which makes it simple to drag and drop your original photos for uploading and the ability to email images from desktop or phone and this effectively means that Flickr can act as your online photo backup, archive and display case for around $2 a month.

With its leading edge design, functionality and usability, its emphasis on public viewing, tag-based access and community-based groups and its very reasonable pricing for unlimited online image storage, Flickr takes Web photography in new directions and leaves the current competition trailing. And as its userbase and photobase grows, its position becomes ever stronger. Even so, I can’t help thinking that Flickr isn’t the last word on the subject. Just imagine the revenue and profit stream we are talking about if you can persuade 10% of digital camera / camera phone users to spend $25 a year! That must be an enormous attraction and one that can’t have gone unnoticed by others including the big three computing giants: Microsoft, Google and Adobe/Macromedia. And with their respective Digital Image, Picasa and Photoshop/Elements applications and their existing expertise regarding the Web, and search and tag embedding in particular, each is well-positioned to make a major play in this arena - and to further erode the distinction between local desktop and global internet.

Not a moment too soon. After 15 years it’s about time that images finally moved centre stage as first-class online citizens.

Tom Arah

May 2006


Hopefully you've found the information you were looking for. For further information please click here.

For free trials and special offers please click the following recommended links:

For further information on the following design applications and subjects please click on the links below:

[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]

To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:

Google
Web designer-info.com

       
designer-info.com: independent, informed, intelligent, incisive, in-depth...
 


All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.

You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.

Thanks very much, Tom Arah


 
[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Articles/Tutorials]
[Reviews/Archive] [Shop]  [Home/What's New]

Copyright 1995-2005, Tom Arah, Designer-Info.com. Please get in contact to let me know what you think about a particular piece or the site in general.