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
 

I like learning new things to do on Photoshop and there are loads of great tutorials out there. My favourite site is Tutorial9 and I've posted the results of one of their tutorials before (Article #48: Apple Artwork & Dust). This time, I thought I'd try a text effect...and I'm pretty pleased with the result [click to enlarge].



It was nice and easy to follow and as always, they provide a PSD file in case you get stuck - click the links below if you fancy trying it yourself.

Tutorial9: Glowing Text Effect
Tutorial9 Homepage

UPDATE: I combined variations of this image into a cinema board image, so the colours of the banners change - check it out:

Cinema Image Rotation - Beats! Design Projects
 

The way webpages are shown on company sites has varied over time, from simple screenshots and drop-shadow thumbnails to iTunes-style reflections and increasingly, perspective shots.

The principal is simple - take a screenshot of your webpage and add a reflection, but instead of a face-on view, take a side view in perspective. Some of you may be wondering how best to go about doing this yourselves - and thankfully, it's pretty easy in Photoshop.

Let me start by showing you an example I created, using my Fringe 2008 Site as the template [click to enlarge]:



The effect is a nice one and allows your work to be showcased in a stylish manner. Here's a quick run-down of how it's done:

1. Open up a new document, roughly 2000x2000 and add a background colour.
2. Open the webpage you are showcasing and press 'Print Screen' - open a new document and paste this in.
3. Cut out your webpage from the screen grab using the rectangular marquee - paste it into the first document.
4. Hold CTRL and use your mouse to resize the webpage, keeping both sides straight and the bottom angle bigger than the top (see example).
5. Duplicate this layer and use the same technique as above to make this layer a rough reflection of the first. Reduce the height of the layer of a bit to enhance the reflection effect.
6. Set your foreground colour the same as your original background and set the gradient tool as foreground / invisible.
7. Finally, use the gradient tool to fade out the end of the reflected image until you get a good fade-out - again, check the example for reference.

I hope that makes some sense - Good luck in creating your own :)
 

A lot of the posts on this blog centre around design techniques for business and commercial use, but sometimes it's good to just have a bit of fun. When I'm not working on a commercial project, it's nice to put a little bit of effort into making a fun profile picture for a website or social networking site.

I realised I've created a number of 'arty' (and some stupid..) pictures for my Facebook profile page and thought I'd stick them all together for all to see. These are by no means design classics (!) but thought I'd share them anyway, hopefully inspiring others to make stupid profile pictures and make me look less stupid!

[All photos can be enlarged by clicking on them]

Aug 2008		June 2008		April 2008
March 2008		February 2008		December 2007
June 2007		March 2007		January 2007

 

Photoshop can often be a confusing piece of software and sometimes seems to excel in making the easy seem complex. I still use Photoshop in combination with MS Paint at times to save a bit of time when doing simple jobs (curved lines for example!).

But when you need to do something new or more complex, an online tutorial can be just the ticket and there are loads of great ones out there.

I had a go myself, using a couple from tutorial 9:

Apple / Coldplay Style Photography

Simple Tutorial to Make a Magic Dust Effect

I've tried to add my own touches to these designs rather than simply repeating the instructions and the results are below:

Firstly, I used a photo I took from a Micah P Hinson gig to make the Apple-style design [click to enlarge]:



Secondly, I've played around with the colours when making the sparkling dust picture [just one size]:



Both tutorials were simple to follow and produced great effects, so why not give them a go yourself? It's also a great way to learn new Photoshop techniques - meaning MS Paint might one day be removed altogether! :p
 

When designing a new site, I like to keep an eye on the latest designs to make sure the colour scheme I use is fresh and looks good. I have nothing against using whatever colour scheme you fancy and great sites can be made this way - but I do notice myself favouring sites that look good. Only if I find a site with an incomparable service will I accept it with really poor design.

I think it's fair to say that colour schemes have varied since the internet started up. One of the most obvious areas to see this change is the hyperlink - it started its life as a (unstylised) royal blue and with the advent of CSS, this blue was often toned down and eventually done away with completely.

So I thought it would be fun to have a look at the colour schemes of major websites throughout time and create a chart of colours, with the most up-to-date colour scheme coming at the end. In fact, my most recent project (Fringe 2008 venue Map) was based on the colours shown at the end of the colour chart below.



The colours have been gathered from a host of well-known websites using links to their old versions. This was made possible by the Internet Archive - Wayback Machine, a list of cached web pages spanning over 10 years of the web's history.

The general trend is from royal / bright colours to murky / pastel colours and now onto bright, funky colours - avoiding royals. An interesting exercise, maybe it will be of use some day! :)
 

I'm interested as to how many people use Tag Clouds for anything useful? Are they an idle graphic or a beneficial tool? I imagine most of us will have come across Tag Clouds and similar web 2.0 gadgets before...

...I normally look at a tag cloud to grasp a general of idea of the data / users I'm looking at / blogging with. Therefore, why not play with the idea a little bit and create a nice tag cloud graphic, showing the most popular topics within a blog.

This will instantly give the user an idea of what the blog is about and also which topics dominate proceedings...



This is the tag cloud for the Beats! Design Blog as of June 2008. Font size is scaled with the number of tags for each word (from blog posts) and all the tags are jumbled together in a slanty cloud.

I've added it to the new blogbar at the right of the blog, just so people can see roughly what the blogs about. As this is a bit small, clicking on the cloud will take you to this post...simple :)
 

Inspired by a competition and equally by new techniques I'd learned in photoshop - I decided to try and turn a webpage into a paper aeroplane...

You see, I'm a regular reader of the BBC Magazine Monitor Blog and recently they suggested a competition to show how a webpage could be folded.



I was quite pleased with the results (well, for 20 mins work) but the main reason I tried it out was the ability of photoshop to move images in a 3D space...(try pressing CTRL in a free transform).

It's an interesting tool - and one I'll use more and more - that can really help with designing various image products. This function has been in photoshop for a while but I've only just got to grips with it, yet it seems pretty effective..



I'll keep you updated as to the results of the competition - fingers crossed my ideas are appreciated, but there's a lot of talented peeps out there so I'm not expecting anything! :)

UPDATE [10/06/08]: Success! My design was the first feature in the competition results - great stuff!

BBC Monitor Blog: Make your own foldie.
 

I was recently traveling on a train and saw an advert for free wireless on all National Express train services. The advert conveyed the point simply whilst using the photographic background to get across the slogan.

A low-res version of this image is below - the advert used this with the National Express Logo and the slogan "Free Wireless - Your Gateway to the World":



This got me thinking about the possibilities of using a similar technique for a simple advertising campaign. So...I got Photoshop open and made a fake ad for a made=up company, 'Fauxcorp'.



The premise was of a lady "sitting on the fence", which paints the picture of why you may need Fauxcorp: Decision-making. It was just a 5 minute job, but it shows what can be achieved when the picture tells most of the story.
 

It's nice to use Photoshop and similar programmes to fine tune your photography or to make nice designs for websites etc, but combining the two can also be fun!

Here, I've taken a photo from my collection and applied a simple Photoshop filter - the stained glass effect. Then, applying it at different levels, I have saved 4 images that vary from difficult to comprehend to the original image.

This feature could easily be used to hide the identity of a photo for a guessing game or competition on a website - with the half-way images used for clues when the competitor is stuck. The setting used for each shot are shown at the bottom of the photo. Just go to Filter -> Texture -> Stained Glass.. to eneter the effects menu:









 

There are a variety of ways to create sepia effects on photos using a simple photo editing programme. Some seem more complicated than others, but they don't need to be - here's a very simple technique for creating a nice sepia effect using photo shop - starting with a standard colour digital photograph.

First, choose an image and open it up in Photoshop. The following image will be used in this tutorial, so the effect can be seen from start to finish:



Firstly, remove the colour from the image. This can be done by converting it to black and white, but can just as easily be done by following this menu path: Enhance -> Adjust Colour -> Remove Colour.

Next, add a new adjustment layer and use an orange colour similar to #9b6921. Now, in layer options simply select 'Soft Light' rather than 'Normal' and you have yourself a nice sepia image.



**For an even simpler (but slightly less effective) method, simply add a new fill layer with the colour above and set the opacity to around 15%.
 

Adobe Photoshop is a great design tool, but - like any program - can be put to both good and bad uses. Sometimes, the desired effects take a lot of time, so I thought I'd introduce a couple of very quick and easy techniques that can create great design looks!

First up, creating custom brushes.

All you need to do here is grab a picture of a shape you want to use and isolate this using the select or magic wand tool (see picture below, left). Then go to the edit menu and select Edit > Define Brush from Selection. Now, save the shape and go to the paint brush tool. Now, select the brush you just created from the bottom of the paint brush drop-down menu.

You can play around with it as much as you like. Here, i used a hot air balloon for my brush and made a little image for the made-up (although it may exist!) organisation 'Ballooning UK'. This has a gradient background, 2 layers with a bigger balloon and smaller balloon and a bit of text:




Next up, iTunes-style reflections.

This is much easier than you might think! First up, grab a photo of an album cover or anything really. Either use a two-tone background or all black, but make sure the bottom half is all black. Copy the photo in and let the bottom land just below the half way mark.

Now, duplicate the layer and (using the free transform tool) drag it down so it is the reflection of the image above. Now, select this layer and apply a gradient to it. Edit the gradient tool so it is 'foreground to transparent' and set the foreground colour as black. Apply this tool in different ways until the bottom half of the reflection fades into the black background.

On the left of the picture below, a simple vertical reflection is used and on the right, the reflection image is slightly rotated (and slightly edited) to give an off-centre reflection. try it and see!