Internet
With the introduction of the iPad, a mobile, interactive portfolio became a practical reality; but with OS4′s lack of Flash support, I needed to ensure that an iPad or iPod/iPhone user could view my images without problems.
Having used SimpleViewer quite extensively, in the past, I needed to find an on-line gallery solution that did not break the bank, was easy to use, could be customized, and would allow iPxxxx users to view it.
For a website building tool, I have done it all, from building a site from scratch in the early days of HTML (using a product called HotMetalPro – anyone remember that?), to using third party hosting services such as Livebooks and Sitewelder (the former still seems to be overpriced for what it offers; the latter is good value but lacks detailed customization options). Despite a previous commitment to myself to never waste time building my own web sites again, I since discovered Rapidweaver for the Mac platform. With a constantly growing number of template web site themes, and a dizzying array of add-ons and plug-ins, I have been using Rapidweaver for more than a year now. In that time I have created sites for myself, friends, and clients, quickly, with functionally-rich pages, and with a high level of standards compatibility.
With my Rapidweaver site, I needed to replace those SimpleViewer pages with a HTML5 or Java driven photo gallery. Even with an hour of searching for HTML5 options, none were forthcoming. So I turned to the Rapidweaver website and quickly found a WeaverPix and SymNivo. Both products allow you to download a limited use trial version which allowed me to understand how I could incorporate either one in to my site.
WeaverPix allows you to import images from your hard drive, from Ember, and from Flickr. What was not clear was whether WeaverPix imported the images from Ember and Flickr, or used them as a source for a page feed. The downloaded trial version did not allow me to figure that out. WeaverPix also includes a basic image editor which seems to be OK for basic adjustments only.
WeaverPix Photo Import
Both products rely on your images to be a standard size and it pays to stick with landscape-only images. As a part of the page setup, you are required to input picture width and height measurements. If your image is smaller than the measurements you provided, the image will be positioned centrally inside the image area. If the image is larger, then it will be cropped to the size you provided.
If you have a lot of images, it is important to get them sized and compressed to a reasonable file size because everything will be opened and saved while editing your website. I accidentally chose a folder of original photographs and was shown a warning message that the file size of my Rapidweaver web site was more than 1Gb!! Because both WeaverPix and SymNivo use Javascript, even large images load quickly. I am now using a standard picture size of 860 wide by up to 600 high, with file sizes ranging from 40kb to 120kb.
SymNivo Photo Upload
Both WeaverPix and SymNivo allow you to select different slide transitions, something I usually just ignore in favor of the clean and simple “fade” option. You can also set the speed of each transition, and how long each slide will be displayed for.
SymNivo Page Configuration
The WeaverPix plug-in costs $21.95 and the SymNivo plug-in costs $8.95. I am not a cheapskate by any means, but found that SymNivo gave me all the functionality I needed.
I still use a Flash component on my web site, courtesy of CoolIris. I couldn’t help myself – it’s just so darn cool… To use CoolIris, I needed to upload the images I wanted to display to a Picasa account (CoolIris supports other photostreams such as Flickr), and copy the embed code from the CoolIris web site to my RapidWeaver Galleries page. Worked like a charm, out of the box.
Cool Iris Gallery Wall
With even the most very basic HTML knowledge, it is easy to tweak the number of rows displayed, and the overall dimensions of the CoolIris window on the web page. The fun really comes when you click on the “full screen” button when using a CoolIris-enabled browser (Safari and Firefox are known to work). This is when you are shown a wall of your images going off in to the horizon, that you can scan through like something out of the Minority Report. Until a Javascript version of that functionality comes along, I guess my site will not be 100% Flash-free.
My SymNivo-enabled site is now ready for viewing at www.MichaelFoxImages.com.
Apple iPad In Use - Guardian.co.uk
The BIG news of today was the launch of Apple’s long awaited, and very much hyped tablet, the iPad. In just a few hours, commendations, opinions, and complaints were flooding the web and blogosphere. The usual set of newsy photographs with the obligatory backdrop of the word “iPad”, the close-up of Jobs, and all the other cliche stuff, was filtered to the wires. Yawn.
Jobs was off. OK, he was very sick for quite a while. He appears thin but better. But he was off. The “updates” were delivered with the impact of a damp squib. There were no tasty little follow-up tid-bits to make us all feel an even stronger connection to Apple and Jobs. It was corporate data, annual report stuff. Big numbers, for sure, but what does that all really mean to me?
Now don’t get me wrong. I am a Mac-addict, no question, just ask my wife. I have even managed to convince her that Macs are the best computing platform that you can use. The many, MANY arguments on the internet, and elsewhere, about Mac vs PC, is an area I always try to ignore because I just cannot understand the ignorance of some people…
Back to the iPad. Apart from Jobs clearly not being at the top of his game today, the iPad itself left me feeling anti-climactic. OK, nice concept, everything that we would expect from Apple. But there was nothing else, just everything we would expect from Apple. Amongst other things, it is a competitor to the Kindle but not much of a game changer. I think that many of us were hoping for another iPod or iPhone experience, but it just did not happen.
The demo was somewhat drawn out – it felt that the timing of each step was just a split second too slow, and that caused the experience to quickly lose its excitement.
It is also a pity that Apple seems to see the iPad as more of a recreational tool, and less of something with commercial applications. Hopefully developers will quickly fix this – I would love to be able to use the iPad as a Wacom-type tablet, to be able to use a touch-screen version of Photoshop or Final Cut (Express would be good enough). Can I plug it in to my video cameras and use it as a monitor? Doesn’t look that way, but that would have been very cool.
Talking of cameras, there wasn’t one. An iSight with the resolution to take decent digital photographs would have been awesome. OK, so it might look a little odd to hold up this big tablet to take a photograph, but I want it anyway.
The USB connection seems to have been taken care of, even though it needs an adaptor, but the lack of an SD card slot is a big disappointment.
There is no handwriting input or recognition. Somebody mentioned that, at some point, you should be able to write with your finger. But that is not natural. I want to be able to write with a stylus. Unfortunately, the touch screen technology works by emitting a tiny electrical charge that connects with your finger. You don’t really even have to touch the screen, just hold your finger a hair’s width above it. Most people just touch the screen. But this means that a regular stylus will not work. I believe that there are pen contraptions out there that will work with an iPhone now, and I assume that this will be the case with the iPad, but until handwriting recognition comes along, this is a moot point anyway.
The demo showed the usual stuff – photos, video, web pages (no Flash!!!), a calendar. All were introduced by Jobs with words but nothing that came across as sincere excitement. “Oh, and here’s the calendar application…” There was no spark. And, sadly, there was no “one more thing.”
One update about Flash compatibility. When Adobe launches CS5, Flash will be compatible for iPhones, iPod Touches, and iPads. Great for all those apps that are built using Flash CS5 but not so much for all previous versions.
Yes, I will probably buy one at some point, but you will not see me lining up outside an Apple store on day one of iPad availability. I am more likely to order one from B&H Photovideo at some point.
It will be interesting to see how the iPad gets adopted by users and developers over the next 12 months. The launch was lame; perhaps the game-changing will occur during the aftermath.
This is the second of two posts that look at the use of Flash to add subtle but pleasing effects to galleries that you can easily add to your web site. In both cases, this is what you will need:
- Adobe Photoshop CS2 or more recent.
- A web site hosting program that gives you ftp access to a dedicated area for your web site.
- All the photographs that you want to add to a gallery on your website, in a single folder on your hard drive.
Here is what you will NOT need:
- Adobe Flash
- Adobe Dreamweaver
- Programming or graphic design experience
- A lot of time.
Because you can add multiple Flash galleries to your web site, you should consider categorizing your photographs in to logical groups of no more than 20-25 photographs per group. Some of the categories I use are:
- Corporate Photography
- Event Photography
- Portrait Photography
- Political Photography
The first option we looked at was the one that came with Adobe Photoshop, the Web Photo Gallery. The second option we will look at works with Adobe Photoshop but is a third party application known as SimpleViewer. As well as a script that works with Photoshop to help you easily create Flash galleries, you can also find code that helps you create Flash galleries for other applications such as Flickr and WordPress blogs. For all the code options, click here. But I will focus on the Adobe Photoshop option here.
Here is what you do:
1. Download the SimpleViewer Photoshop script here. (NOTE: this is a different file than the regular SimpleViewer download). This script requires Photoshop CS2 or higher.
2. Install Photoshop Script
3. Unzip the downloaded file to your Desktop. Copy the entire unzipped folder to your PhotoShop Scripts folder.
- On a PC, the path is – C:\Program Files\Adobe\Photoshop CS2\Presets\Scripts\
- On a Mac, the path is – Applications> Photoshop CS2> Presets> Scripts
4. After copying a script to this folder you’ll need to quit and restart Photoshop.
Now that you have installed the SimpleViewer script, you can create your photo gallery.
Using Adobe Bridge, open the folder of photographs that you want to use in your SimpleViewer Flash gallery.
Make sure that all photographs are as you would want to see them in terms of cropping, color correction etc.
The process that makes the gallery will resize the photographs and create thumbnails for you, so do not spend too much time on resizing your photographs manually. However, I find that it helps to have them all within a similar size-range and generally have my horizontal images at 1000 pixels wide and my verticals at 600 pixels tall, for the purpose of batch processing.
In Photoshop, do File> Scripts > SimpleViewer This will run the script interface. Here you can specify the parameters to create your SimpleViewer gallery. These parameters include such things as:
- The path to the folder where the photographs for your gallery are stored.
- The path to the folder where you want to put your finished gallery.
- A title for your gallery.
- Background color of the page that the photos will be displayed on.
- Color of text.
- Size of images to be shown.
- Number of rows and columns of thumbnails.
You may want to play around with this to find the layout and color scheme that you like best.
When you are happy with the parameters you set, click on the “Build Web Gallery” button. The process will take a few minutes depending on the number of images you have selected, and the specification of your computer.
On your computer, find the folder where you told SimpleViewer to store your Flash Gallery.
The key file, here, is INDEX.HTML. That is the one that you need to refer to in order for everything to work on the internet as it did on your desktop. Don’t worry: this really is very easy. What you have to make sure of is that you transfer everything from your hard disk to your web server in the same file structure. Use an FTP application to prepare to upload files to your web site hosting server.
One thing to keep in mind is that the web server MIGHT be sensitive to upper and lower case names for the path and file name. So Index.html would not work if the file name is index.html.
Without Flash (the actual program), there is not much you can do to alter the layout of this format but it is pretty good as it is. There is a Pro version of SimpleViewer which allows you to do more with the script including removing the small SimpleViewer link in the bottom-right corner. For those of you who are a little more advanced with web site coding, you can get in to the XML file (in this case, gallery.xml) and make changes. Otherwise this is what you get. For free, it’s pretty good.
Finally, there is another option that I am experimenting with when I get time. There are some pros and cons because it requires a browser plug-in to view. But the effect is awesome. The technology is from CoolIris at www.cooliris.com. Take a look at the site and some of the samples.
And now you have one or more Flash galleries for your web site at zero cost. Remember to refresh your images on a regular basis and spend some extra time to ensure that the photographs you use for your web site are sized, color corrected, and hue saturated to really “pop” off the page.
This is the first of two posts that look at the use of Flash to add subtle but pleasing effects to galleries that you can easily add to your web site. In both cases, this is what you will need:
- Adobe Photoshop CS2 or more recent.
- A web site hosting program that gives you ftp access to a dedicated area for your web site.
- All the photographs that you want to add to a gallery on your website, in a single folder on your hard drive.
Here is what you will NOT need:
- Adobe Flash
- Adobe Dreamweaver
- Programming or graphic design experience
- A lot of time.
Because you can add multiple Flash galleries to your web site, you should consider categorizing your photographs in to logical groups of no more than 20-25 photographs per group. Some of the categories I use are:
- Corporate Photography
- Event Photography
- Portrait Photography
- Political Photography
The first option we will look at is that which comes with Adobe Photoshop, the Web Photo Gallery. This offers you several choices for showing your photographs on a web site. Some of the choices use fairly basic HTML, others use frames (which is dated technology and is best avoided), and there are at least two Flash galleries that you can select from. Here is what you do:
- Using Adobe Bridge, open the folder of photographs that you want to use in your Flash gallery.
- Make sure that all photographs are as you would want to see them in terms of cropping, color correction etc.
The process that makes the Flash gallery will resize the photographs and create thumbnails for you, so do not spend too much time on resizing your photographs manually. However, I find that it helps to have them all within a similar size-range and generally have my horizontal images at 1000 pixels wide and my verticals at 600 pixels tall, for the purpose of batch processing.
Next, from the drop down menu at the top of the page, you need to click on:
- Tools
- Photoshop
- Web Photo Gallery
With that done, you have the option to select what type of gallery you want to use and, in this case, we will select one of the Flash galleries.
This tool now gives you the option to make changes to various aspects of the gallery including where, on your hard drive or network, to save the files to, and other options including:
- Site Name – this will appear on the top of the gallery home page.
- Photographer, contact info and date – will all appear on the gallery home page.
Other aspects of the gallery that you have control over include:
- Size of images
- Page color
- Text color
- Who will have access to the pages once they have been posted to the internet.
Once you have made all the changes that you want to make (and it might take a short time, first time round, to appreciate all the choices that you have), click on “OK” and the batch process will start.
When complete, the home page of your new Flash gallery will appear in your default browser for your review.
But this is not yet on the internet.
On your computer, find the folder where you told Adobe Photoshop/Bridge to store your Flash Web Photo Gallery.
The key file, here, is INDEX.HTM. That is the one that you need to refer to in order for everything to work on the internet as it did on your desktop. Don’t worry: this really is very easy. What you have to make sure of is that you transfer everything from your hard disk to your web server in the same file structure. Use an FTP application to upload files to your web server.
When I have transferred all files to my web server, I figure out the path to the essential file, Index.htm which will be the URL for the web site I am installing on to, plus the path to the files as shown in the FTP application.
One thing to keep in mind is that the web server MIGHT be sensitive to upper and lower case names for the path and file name. So Index.htm would not work if the file name is index.htm.
Without Flash (the actual program), there is not much you can do to alter the layout of this format. For those of you who are a little more advanced with web site coding, you can get in to the XML file (in this case, galleryconfig.xml) and make changes. Otherwise this is what you get. For free, it’s not too bad.
For my next post on this subject, I will take you through another free Flash gallery builder that offers you a better screen layout and a few more options, but it just as easy to use.
