You are viewing all posts tagged under 'Tutorial' - Alternatively... 


1
Mar
 
  #158
tags: Photography, Photo Design, Lomo, Photoshop, Tutorial
[posted @ 07:47 on Mon Mar 1, 2010]
 
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
 


 
 

7
Oct
 
  #87
tags: Image Design, Web Design, Photoshop, Tutorial
[posted @ 07:39 on Tue Oct 7, 2008]
 
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 :)