I've recently purchased a Lomography camera (a modern re-make of classic Russian Lomo camera), which takes very stylised photos due to it being an all-plastic camera and therefore a bit crap, but crap in an interesting way. You never quite know what you're going to get with a Lomo, but the best shots really capture something a normal camera never can.


The glow-in-the-dark Lomography camera I purchased © Fototo (2010)


That said, you can re-create the best-of-Lomo look with a normal photo and some image-editing software (Photoshop for this tutorial). Once I get my first Lomo film back, it will be interesting to compare the real thing against the fakery, but for now, you can see the basic Lomo effect from the results of the Photoshop fakery.

So here's the transition from standard camera shot (left) to Lomo effect (right) - click the image to see an enlarged version:


Original photo (left) and applied Lomo effect (right) © Beats! Design (2010)

There are a number of guides to creating a Lomo-effect using Photoshop, but most of those I tried lacked something or weren't very adjustable. A few sites had Photoshop Actions you could download, but these make the process automatic and limit the amount of control you have, although they are create to use for a quick-and-easy adjustment.

I used four sites with 'how-to' guides to assess which processes were useful and which were the simplest techniques to get the job done. The following is a 'best of' from these 4 guides, and although I don't claim it to be the ultimate guide, I've split it into 4 easy sections so you can easily understand the process and alter it to your image accordingly:

------------------------------------------------------------------

Contrast / Saturation

1. Brightness/Contrast: increase contrast by ~20.

2. Hue/Saturation: increase saturation by ~20.


Vignette

3. Choose the Circular Marquee Tool and set the feather amount to ~1/12 the width of your picture. Draw an oval that fills the majority of the picture.

4. Right-click the selection and choose 'Invert Selection'. Now go to Layers -> New Adjustment Layer -> Levels. In the first pop-up box click OK (100% opacity, normal) then drag the arrow in the middle of the graph towards the right, until a suitable vignette effect shows on your image.


Over-exposure

5. Now add a new layer above the base layer and select the Gradient Tool (select radial gradient and 'foreground to transparent' mode).


6. Change your primary color to white and with the gradient tool, click in the middle of the picture, and drag the line out to the farthest edge of your picture.

7. Change the blend mode of this layer to Overlay and the layer opacity to ~70%.

8. Add a new layer


Radial Blur

8. Select the base layer (your original photo) and go to Filter -> Blur -> Radial Blur. Select 'Blur Method' to 'Zoom' and set the blur amount at either 1 or 2, so it gently blurs the edges of the photo, with sharp focus in the middle.


Final Saturation Adjustment

9. Add a new layer above the base layer, fill it with Black. Change the blending mode and set it to Hue and reduce the opacity to ~30%.

------------------------------------------------------------------

So, that process should give you the effect as shown in my image above. I'm sure you'll tweak the process on the way - in fact, the final step (#9) is there for that purpose. It is similar to step #1, but allows a gentle readjustment of saturation after the other key processes, whilst step #1 changes the image's look to best-suit the other adjustments.

It's a pretty fun thing to have a play with anyway, best of luck in your efforts. I'll try and do a post later on when I've got some real Lomo shots to compare it to - until then, here are some useful links to get your teeth into:

Digital Photography School: Lomo Effect
Faking the Lomo Effect
Deviant Art: Lomo-effect Photoshop Action File
Photoshop Lomography Photo Action (includes Action File)

Lomography Diana F+ Glow at Fototo
Wikipedia: Lomography
Original photo for above Lomo effect on Flickr


 
 
 

That's a lovely photo album design.. http://bit.ly/6Xm72H

I'm pretty sure a CSS project is what most of you wanted for Christmas, right? Well, maybe not, but that's what you're getting from me. I've been meaning to give CSS a real workout so I finally got round to making a website that fully uses CSS for layout as well as easy re-styles.

I'd been asked a few times recently for some recipes I'd cooked up, and I have to rely on the original html file I created years ago that's no longer online. So, I thought I could spruce up this page and make a CSS site for my recipes:


A 'snazzy overview' of the site. © Beats! Design (2009)

The site was to rely on:

- Divs defined for every separate part of the page.
- A variety of CSS styles to give variety and print options.
- PNGs with invisibility, so they suit every style.
- Backgrounds with opacity for the recipe title.
- A stylised form menu to suit each page.
- CSS corrections for major browsers.


Various design elements across the site. © Beats! Design (2009)

Although some of these requirements were just for design purposes, the CSS coding was designed to allow major re-styles of the page just using a new CSS file. This would give each page a print version (few graphics, black and white) and two design versions (one white on black, one black on white).

Anyway, the best thing to do is check it out. I've only got 3 recipes up for now (I'll add some others as time passes) but do check out the Christmas recipe as it's one of my favourites and then it makes this post seasonal :)


The Christmas recipe in all its glory. © Beats! Design (2009)

This site (and plenty of others) shows that CSS can be used very effectively to re-design a page with the same HTML content. I don't think it's that important to give users many re-styled versions of a page, but a simple print version is one way to aid the user. It also shows a sleek design can be achieved without relying too heavily on graphics.

Beats! Design - Recipes
Recipe: Christmas Pudding Sauce


 
 
 

Teabag Studios - I love their work: http://teabagstudios.com/

Flash can be a useful tool to jazz up a website, but is often used pretty inappropriately. One rule I always abide by is: 'Never make a large flash intro sequence, especially if it involves a fair amount of loading time, silly animations and ridiculous sound effects'. The flash developer at Hema (a Dutch department store) took this mantra and threw it out the window, doing everything wrong...


Looks like a normal product page to me... © Hema (2009)

...except the result is BRILLIANT. It makes their product list come to life and actually serves a useful function, guiding people around their products, keeping them entertained and leaving a sizable impression on them for next time.

Hema Product Page - wait until it loads.


...but it's much more fun than that © Hema (2009)

Normally these animation things only serve to boost the developer's ego, but I think in this case, he or she should be praised - it's silly, but great too :)


 
 
 

Digital flowerpot - I wish they'd make it! http://bit.ly/sQJCT

I know, I know. It's been a while.. Work has been pretty hectic and I've just not had time to finish off a number of posts that I've written 80% of. Somehow they've become an annoying job, so for now I'm moving on to something new.. and pretty old.

So, we've got a Christmas photo competition going on at work and for the 'funny' category I've entered a pic of me impersonating a security guard somewhere on Lake Geneva. Saving any suspense, here's the photo:


This is probably illegal in Switzerland. © Beats! Design (2001)

All I remember (well, until further research helped out) was that the sign was next to a big castle on Lake Geneva, near the town with the Freddie Mercury statue. Well, that town is Montreaux and a small amount of googling got me to the castle as well, Chateau du Chillon:


A stunning shot of Chateau Chillon at sunset. © Creative Commons (2008)
- Photo taken and released by Flickr user 'Pear Biter'

Now that is a pretty amazing photo, and looks for all the world to be an HDR shot, although apparently it isn't. Anyway, I particularly like the fact that I visited this castle but only bothered to take a comedic shot of me and a sign, the castle features no where in my album - ha.

Just for fun (this would also have been another route of castle-based discovery), I maximised the sign to try and get the french and then translate it. The bit I could make out reads, "..saut autorisation expresse de intendant du chateau du chillon la plage sise sur cette..", which comes out as:


I'd love to go to a beach where you need a Superintendent's permission to visit - sadly I didn't have said permission so just ended up disrespected his/her authority instead. For those interested, there's a wee map of the area below, along with a few links - enjoy!




Wikipedia: Chateau du Chillon
Pear Biter's Flickr Photo of Chateau du Chillon
My 'comedic' photo, within my Europe Trip Flickr gallery

PS It's good to be back.


 
 
 

Creating a classy form textarea: http://bit.ly/4nIiQM

I've just ordered myself an HTC Hero phone, the latest Android offering from HTC (and the 3rd Android phone released to date). It's got everything I wanted in my new phone: 5MP camera, WiFi, GPS, Social Networking integration and stylish looks.

And yes, it has a chin. I think it looks great - futuristic and 80s retro all in one, but others may disagree. Take a look at the info below and see what you think. I'll perhaps post a wee 'user experience' post later on:


HTC Hero Phone © HTC [2009]





HTC Hero - Official Overview


 
 
 

Really nicely designed top menu: http://bit.ly/12WUlg

I don't always get asked to build completed sites: in the case of 10 Clarendon Crescent - residential apartments for visitors - I was asked to build a site-shell that can be added to easily over time.

Part of the reason for this was the ongoing development of the apartments themselves (being converted from an old hotel) but also the marketing was already beginning and a web address / site needed to be set up to supply more information at this early stage.

Therefore the site needed to be easily updated, simple to use and also easy to edit repeatedly as content may well change as the development entered different stages. So, it may be a shell, but feel free to check out the design - what was required was a striking, classy and informative site, with clearly defined sections and big buttons to make each page obvious.

The page also needed to incorporate a nice hand-drawn picture of the building (a remnant of the old hotel's design work), as well as a new logo for the establishment, all blending in to a high-contrast look.


The homepage of the 10 Clarendon Crescent website

One aspect of the site that I was asked to build was the mapping elements. In the end we went with a simple locational map, with a smaller inset-map on the homepage, leading to the map / address details. In time, a directions box will be added, but as the apartments aren't ready yet, we felt this could wait a while.


Detail of the maps on the 10 Clarendon Crescent website

So that's a bit of detail on a (relatively) recent project - I've been working away on a major project that is nearing its release date, but I can't give any more information out until that point - but I'll be sure to do a profile of it once it's done. Due to the reduced amount of time I have on design work, it makes it easier taking on one-off large projects than multiple small ones as I did before.

Beats! Design Project: 10 Clarendon Crescent


 
 
 

It's amazing how many I remember! http://bit.ly/18uhzY