Search
Search this site for:
Categories
Related Links





Valid XHTML 1.0 Transitional

Valid CSS!
   

Informative Articles

Nine Indisputable Rules for Creating A Killer Website
Nine Indisputable Rules for Creating A Killer Website by Caterina Christakos 1) Keep it simple. Movies, audio and animation may be cool but if it takes your user more than 10 seconds to download they are gone. 2) Make it easy to navigate. If...

Website Accessibility explained - what YOU can do
Standard society The widespread use of standards to facilitate equality is familiar in our society. Just as buildings must be designed to be accessible to everyone, so must websites be. The Internet was founded on the principles of accessibility;...

Why You Should Stick to Design Conventions
A mistake often made by people who are new to web design is thinking that they shouldn't pay any attention to what has come before: they're going to design a website the way they think one should work. You have to realise, though, that there's...

 
Making Nice Looking Thumbnails for HTML Photo Albums.

Learn how to create non-rectangular nice looking thumbnails with frames, bevels and masks for your web photo galleries.


Several years ago I spent a nice summer in Europe, visiting great countries like Spain, France and Netherlands. I brought a huge collection of digital photos from this trip and wanted to share them with my friends and relatives. I started to look for the software that can generate photo albums to upload them to my homepage and was quite dissapointed with the quality of the thumbnails pages - even though the pages themselves looked fine - the small pictures were just resized originals, rectangles, the one-pixel frame around them was the best that I could found those times. What I wanted is something like bevel effect or frame effect around the thumbnail and a shadow to make it look more 3D, alive and fancy.


Then I thought that it could be easily done just saving a script in Paint Shop Pro with bevel, frame and shadow effects, and then running batch on all my gallery photos. But I figured out that I can't create HTML pages along with my generated thumbnails.


So I decided that we might develop that kind of software ourselves. At that times we were a team of software developers that were working on projects for the offshore business. I talked to guys and after some planning we started on this project.


The main goal was to create nice looking, stylish thumbnails, so we started with a picture frame. The frame looks like a conventional picture frame, so you can specify frame thickness, give it round edges, specify the frame height, light direction, overlay any texture - for example any wood or marble and give it 3D shape. But if you want - you can create all sorts of fancy frames with acid textures and irregular borders - it depends on what style do you want!
Another effect I always wanted was Bevel - it is an effect that makes your picture look three dimentional, thus more effective and striking. Also - rounded edges together with bevel give us nice and extreemly good-looking thumbnails. Almost what I wanted...


But what about other shapes ? Rounded rectangle was not enough for me, so here is where the masks come out ! I was really amazed, I remember, how effective the masked thumbnail looks together with beveled edges, just pick a mask and bevel does the rest. Or create a frame and apply a mask to make irregular shape for the frame.


Also we created many other features like HTML gallery templates, e-mail sending, batch processing and others, here I just wanted to point out why we started this project - we wanted our galleries to look unique, stylish and fancyScience Articles, and we think we did it ! You can try it yourself - the program is called Photo Shaman.


ABOUT THE AUTHOR
Mark Loumbert - Communication Director and CEO, Brave Orange. http://www.photoshaman.com