Create Abstract Landscape Art From a Photograph
Tutorial Details
- Program: Adobe Photoshop CS4+
- Difficulty: Beginner
- Estimated Completion Time: 2 Hours
Download Source Files
Final Product What You'll Be Creating
Photographs are excellent tools to show you how something looks. Tracing photos to create artistic pieces however doesn’t teach you much about shape, volume, lighting, and color. Today, I would like to demonstrate an alternative way to create abstract artistic pieces using a photo merely as inspiration. We will start by choosing and simplifying its components and then proceed to apply a retro-futuristic look. Let’s get started!
Resources Used
Step 1
For this tutorial we need a photo of a landcsape that contains both natural and architectural elements. Any photo will do, really, provided the composition is potentially interesting. I say potentially because we are going to do a lot of interpretation and guesswork therefore we can improve on the initial composition if need be.
I chose a shot of a lake from the EUR neighborhood in Rome (1a). While the photo itself is nothing special, the composition has potential: the shoreline is interesting, there’s a curved bridge coming in from the left, a bunch of buildings in the middle, a couple of low rises on the left and trees on the right. When you analyze the photo, take notice of any element, not just the physical ones: there are triangular reflections on the water, we’ll definitely use those! (1b).
Step 2
Grab the Brush Tool (B) and start blocking out the shapes you see using random but contrasting colors (2a). This is the first phase of the simplification process: choosing what to preserve from the plate. Block out the low-rise buildings on the left (2b), the bridge and the tall buildings (2c), the shore and the hill leading up (2d). Eventually you’ll have the entire photo blocked out into shapes. Introduce some variation by crosshatching over the vegetation. Keep it simple and clean and you’ll be all right (2e).
Step 3
Now we can get rid of the photograph and put a black background behind the sketch (3a). Before analyzing the composition, though, we need to eliminate the colors because they might distract us. To do that, create a black layer above the sketch and set it to either Hue or Saturation mode (3b). Now the colors are gone and we can evaluate the composition better (3c).
Step 4
I’ve drawn arrows to show the ideal paths formed by our shapes. It’s a good idea to have the composition lead the eye towards the focus point, in this case the center buildings (4a). As you can see we have three groups of shapes that pull towards the tall buildings and these in turn point upwards. We need to add a contrasting direction: that’s what the background and the empty spot at the far right are for. We’ll probably create a background pattern made of slanted stripes and we’ll put irregular shapes next to the rigid buildings (4b).
Step 5
Start building shapes using paths, going directly over the sketch. For now keep the original colors (5a). When you’ve traced everything (5b) do all the tweaking you want, moving points, changing colors to group shapes chromatically and, most importantly, eliminating the smallest shapes that only add confusion to the composition (5c).
Step 6
Let’s examine the final composition: a couple of low buildings seen in perspective on the left; a curved bridge coming in from the bottom left corner; a couple of roofs and a ramp leading up to four tall buildings placed roughly in the middle, strongly pulling upwards; a hole at the far right of the image, to be filled with organic shapes. This abstract landscape is the result of interpreting a plain photograph (6a).
We will start shading the tall buildings. Apply a bunch of layer styles to the shape layers: everything is editable and scalable at any time. A gradient overlay to make the top of the buildings lighter (6b), an Inner Glow with noise to create texture (6c), Outer Glow (6d). Since these buildings are the focus of the image, it makes sense to give them a bright appearance (6e). Apply the same layer style to the other buildings, changing the colors appropriately (6f).
Step 7
For the roofs and the ramp we are going for a “neon and space dust” look. It’s just a matter of using layer styles in a slightly unorthodox manner to achieve interesting results. Take the first roof (7a) and turn down the Fill to 0%, effectively making it disappear: only the layer styles will be visible. Apply a Stroke and make it bright by choosing the Linear Dodge blending mode (7b). This is neon enough. The space dust effect is accomplished by turning on noise for both Outer Glow (7c) and Inner Shadow (7d). See? (7e).
Step 8
Apply this layer style to the other roofs and ramps, each time adjusting the colors to match those of the parent shape. Tweak values like the amount of noise and the size of the glows to add variation and to suggest perspective: farther objects have less noise.
Step 9
The green buildings on the left receive a strong blue glow from the adjacent building so add it with a noisy Inner Shadow (9a). Use the Size and Distance values to tweak the effect to your liking (9b). Since these are secondary elements I’ve decided to desaturate them from green to a pale water green (9c). Remember that everything you see on the screen is vector shapes and layer styles so you can change shapes, colors, effects and image size at any time without losing sharpness. There are pixel limits to layer styles, though, keep that in mind.
Step 10
To make the green buildings more recessed in space let’s erase them partially. To do that group the layers and add a blank mask to the group. Click on the mask and paint with black on the areas you want to hide, using a soft brush (10a). Make the buildings fade behind the high-rises (10b) and out of the left side of the image (10c). Layer masks are raster elements so they’re not scalable but it’s easy to paint them again if you have to scale the image up for printing.
Step 11
Hide the black background, leaving everything else visible. Hit Cmd/Ctrl + A (Select All), Cmd/Ctrl + Shift + C (Copy Merged) and Cmd/Ctrl + V (Paste) to flatten all the elements on a single layer. Turn the background back on. The image is pretty dense as it is so we won’t add any stripes to the background. Instead we will place the grungy paper texture in the document, resizing it appropriately (11a). Desaturate it (Cmd/Ctrl + Shift + U) and invert it (Cmd/Ctrl + I) (11b). Change the blending mode to Lighter Color and lower the Opacity to 25%. Now the texture is barely visible, giving a subtle variation to the boring flat blackness of space (11c).
Step 12
You can color the texture by adding an Adjustment Layer to it. Check the Colorize option and move the sliders around until you find a suitable hue (12a). I chose a faint red tint, taking a hint from the triangular shapes at the bottom of the image (12b). This might be a secondary space dust made of finer particles that reflect the glow form the light objects. Always have a story to go with your illustrations!
Step 13
We have to take care of the glaring hole on the right. Let’s put some slanted billows of smoke there. Select the Brush Tool (B) and enter the Brushes window (F5). Pick a textured preset (13a). Turn on both Size Jitter (13b) and Opacity Jitter (13c). You can control the values with a tablet (Pen Pressure setting) which I recommend. Tablets are not cheap but they are indispensable. Paint vertical lines in white on a new layer, varying their length, thickness and opacity (13d).
Step 14
Rotate the smoke layer 45 degrees, scale it down and place it next to the high-rises (14a). Erase the parts that overlap the other elements (14b) and smudge the ends with the Smudge Tool (14c).
Step 15
The final step is to color the smoke. Add a Color Overlay style to the layer (15a). Choose the color you want. I picked purple because it contrasts nicely with the bright yellow of the objects surrounding the smoke and it recalls the thin purple building in the main cluster (15b). You’re done!
Conclusion
In this tutorial I’ve shown you how you can use a photograph as inspiration and a base for an abstract landscape. By interpreting the elements we see in the picture we created a highly stylized version of it which we then transformed into a totally unrelated image. In particular we have created an abstract space scene entirely out of vector shapes and layer styles, thus making the landscape scalable and tweakable. Unorthodox settings for mundane layer styles gave us an interesting "space dust" look that blends well with popular light effects. I hope you had fun and learned a useful workflow. Now go flip through your vacation photos and turn them into unique landscapes!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Andrea Austoni
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
This is just bad… :(((
wtf it looks retarded
i agree.
LOL!
i’ll second that.
I third that. Good lord, is this what tuts+ has come to?
I see that, for that is necessary skills in Photoshop, but to me it looks pretty miserable…
good technique, but te outcome sucks
^This
are you joking psdtuts? wtf is this crap?!
This is a joke right ?
THis is dumb, why would this be approved as a good tutorial??
The tut has some good stuff in it, but the final outcome looks like something from the 80′s movie Tron. I love your work Andrea, but this looks a little rushed and not thought out compared to your other work. I will be looking forward to the next one.
^agreed. Love your other work, and feel it is significantly stronger.
You get what you pay for I guess
blooooooows….. harrrrrrrrrrd
The worst outcome i ever seen on Psdtuts. Sorry, but this is the truth
hmmm…I like the final result
looks poor
I can’t find use to this
You know, I can see taking some of the steps and using them for different things – but I’m a little lost as to why this made it as a tutorial. I don’t mean to offend the creator, so I apologize in advance, but this seems elementary – and not what I’ve come to expect from this site.
Hmm I tend to agree with most the comments. This almost feels like ‘not knowing when to stop’, or almost make it up as you go. Gradually getting used to being disappointed of late. Sorry.
I have to agree with others: It looks rushed and low-quality tutorial overall, and you would’nt know it’s a “abstract landscape” without seeing the original image. Like Amanda well put it there, you get what you “pay” for, I guess…
I mean no offence to the author, but this is by far the worst outcome I have seen on PSDtuts+. It really does not deserve to be on here.
Its seems the site was hacked ?
We all know you can do better Andrea, but this is quite frankly the worst piece on PSDTuts+.
Wow, no offence but wtf is this? why even waste your time. I think im done with this site.
I’m sorry nobody likes this. I thought the process could at least interest someone but I guess I was wrong.
You write up was not bad, its just that you dont need to use a photograph as a base for mashing up random shapes and colors together to achieve this result. The effects are beyond basic, Photoshop 1.0.7 maybe. I am sure you have the skills to create a much better more useful tutorial that everyone will like. None the less, psd tuts thought your tutorial was useful and worthy of being published so you must have some substance there.
Really weird, I didn’t like it.
OMG! No way. This is soo ugly :| PSD TUTSPLUS going sux.
Very nice work, wasnt really sure about abstract work before, but now my faith is restored… sort of , good work anyways.
Hey c’mon… There’re good and bad ideas, sometimes we don’t know if it’s useful or not, i’m happy to have an idea in case i need it later, right now i don’t see how to apply it.
Seems like no1 is very creative here, some ideas seem silly at first, later on they can be like lifesavers
THANK YOU ANDREA!
Interesting concept. Good for theory study
The idea of simple shapes was good, but not so as the final result.
Yikes. Really poorly executed. Which is shocking cuz I just looked at the rest of your portfolio and it’s really good!
This was a really cool tutorial. The effect reminds me of Tron.
I would have never thought that image came from a photo. I apologize for my negative comment in advance but it’s got to be the worst tutorial ever, by far. I can see all the shapes working in a different way but all the lines, including the diagonal ones, are just out of place and the noisy glow is just a No No! Again, I apologize about my comments but this is just terrible.
PSD TUTS+: Are you guys taking bribes? :P
It looks like its made in MS Paint.
+1
Would LOVE to see you replicate that in Paint, my friend…
Don’t take this too harshly because I know that you have done some great stuff in the past Andrea, but this looks like shit. Sorry, but honesty can be brutal sometimes. I’m sure you’ll do better on the next one.
This looks like shit certainly.
Surprises me, cause you’re a good designer.
I like the explanations and the things she did with the layerstyles. The glow-fading with the gradient is a good idea that i haven’t seen too often so far. The result is in my opinion not relevant. This is a tech-tuts page, not a “where can i learn the newest style trend”-page. If you want to learn good tech read it. Else: Go in an art gallery or a museum to learn what’s good.
I would really like to see the quality of the tutorials getting denied these days. Things have been awful and backwards recently
first: the technic is fine and a good job
second: someone love this kind of art or he hates it-there is no way between *yes-no* and
I love this kind of art.
some poeple say it is worse -but not why – it looks like they are followers of the first commenter -nothing more.
:-) I would like to read more of your stuff -come on!
To be honest the first thing I thought was it would be cool to write a program to automatically process an image like that. Although on a PS site it may sound like blasphemy, I understand.
This is not to say this is bad, I certainly like the technique and the only thing I don’t like about the result is the composition, but that was quite bad in the original shot to begin with, so it’s ok.
That’s one hell of a fugly outcome.
PSDTUTS = FAIL
Everyone that says it’s ugly, I don’t see you coming up with a better tutorial! It’s not about the result, it’a about the techniques you achieve from the tutorial.
Thanks Andrea :]
tell that to your reputation
I guess this one slipped past quality control XD
Really??
Why is this even here…?
I guess I’m alone in that I thought this was kinda cool? Oh well.
Thanks Andrea, again. :)
you must have been trippin’ balls when u posted this, because your other work is great!. unfortunate really.
thanks for the tutorials it’s really good techniques
Wow … umm vibrant? I hope they didn’t pay for this tut …. This is just embarrassing!
Hey come on guys, its not that bad after all. The neon effects and all are pretty good and the whole process of creating this can be used for various stuffs. As for people who are saying that these techniques are really basic, well the tutorial states at the start that it is for “Difficulty: Beginner” and not intermediate or advanced people.
I agree the end product doesn’t attract us that much but its modern abstract art after all.
@Andrea: You are a very talented designer and am sure you are going to come up with something brilliant soon….and am sure as most people are saying that this is the worst article on PSD tuts.. then people are going to say that that is the best article on PSD tuts ^_^
Sorry Man But this is sooo bad i don’t like it , it’s a truth !!!!
you can do something best on that…
just look at the effect and you will see the problem with Effect & Colours
anyway thank’s for sharing…
Twitter UniQue
How the review team accepted that tutorial?