You can see below what we are going to achieve:
and this is the original image that we are going to use:
Time: 45 minutes * Level: Beginner / Intermediate
What you need:
- Original Image (right-click, save link as)
- Sky Image
- Texture (optional)
Well let’s get started!
1. Download the original image and open it in Adobe Photoshop. As you can see the sky is pretty boring and we are going to replace it with one more cloudy to give the image a dramatic feel. To do that we need first to cut the sky out, so duplicate the background layer. Now you’ll have 2 layers with the same image: Background and Background copy. Now delete the first layer and change the other layer’s name from Background copy to Original. Now press P to choose the pen tool and make sure your that your paths option is selected (see below).
2. Now we are going to start to make a path along the building edges to separate them from the sky. Zoom in to be more precise and ignore the wires, we don’t need them (we won’t see them anyway in the final image). This is going to take some time but remember, patience is a virtue :)
3. Now after your path is done close it into a shape like the one below and then with your path selected, right-click, and choose make selection, and then press Backspace to remove the sky.
4. Now we need the image with the sky. Download it, open it in photoshop, copy and paste it into our project. (Ctrl+A, Ctrl+C, go to our project and press Ctrl+V). Now we have a new layer that we are going to name “clouds”. Drag it below the “Original” layer. Make it bigger if you need to, so it would be visible just the sky and not the green field. (press M, then right click free transform, drag one of the corners holding shift to re dimension it proportionally, then hit enter). Press V to select the Move tool and then drag the cloud layer and position it so the best part of the sky would be visible. You should have something like this:
5. Now you have 2 layers, the first shoud be “clouds” and on top of it the layer “original” with the street and buildings. Now we need to make them match visually, so desaturate both layers (image, adjustments, desaturate or press Shift+Ctrl+U). Now we’re going to change the contrast and the brightness (image -> adjustments -> brightness/contrast) to both layers so choose these values for the layer with the buildings:
and the following values for the clouds layer:
6. Now after we increased the contrast so much some edge imperfections could me more visible. If you zoom in and your cutout is not perfect, we’re going to do a little trick that I bet you didn’t know about:). As you can see below my cutout is not perfect either, there is a thin white line at the edges that doesn’t look good, so we can automatically cut the building edges with 1 px (or 2 if needed).
Right click on the layer with the buildings and click select pixels.
Now go to Select -> Modify -> Contract and contract by 1 pixels and hit OK:
Now we need to inverse the selection so hit Shift+Ctrl+I to do that. Now we have selected just the 1 pixel thin edge that we want to get rid off. So hit backspace do delete it. If you still have unwanted white edges you can repeat the operation.
7. In this step we are going to add a vignette effect to the image so make an eliptical selection choosing the eliptical marquee tool and with the maximum feather which is 250 px:
Make a selection like the one below and then invert it (Shift+Ctrl+I)
Create a new layer and go to Edit -> Fill choose Black and hit OK. Name this new layer “vignette”. If you feel that the vignette effect is too strong you can reduce the opacity of the layer.
8. Now we are going to colorize the image a little bit so make a new layer and set its blending mode to color, and name the layer “color”. Go to your foreground color and set it to #4a3900 and hit OK. Press G to select the Paint Bucket Tool and then make a click on the surface of the image to fill it with the foreground color. Reduce the opacity of the color layer to 67% (or other value if you want the color stronger, or more desaturated) Your layers should look like this:
and your image like this:
If you’re not satisfied with this color you can go to image -> adjustments -> hue and saturation and change the hue values and make it blueish, purpleish or whatever color you want.
9. Now if you want you can texturize the image a little bit by placing this texture, on our image. Open the texture in photoshop and copy it in our project, pressing Ctrl+A, Ctrl+C and Ctrl+V (the same as you did with the cloud image). Right-click -> Free Transform -> Right-click again and choose rotate 90 degrees CCW so the darker side would be up. Change the blending mode to multiply. Drag the corners and transform the texture until the edges of our project, or you can make it even bigger and move it so you can choose the zone of the texture that you like more. Now go to Image -> Adjustments -> Brightness and Contrast and increase the brightness and the contrast of the image until you’re satisfied with the effect. I used these values:
This should be your final result:
10. We’re done with the image now and you can use it for a wallpaper for instance. Just place it on a 1920 × 1200 new document to have a widescreen wallpaper like this one:
That’s it, I hope you enjoyed this tutorial. You can download the Hi Res PSD clicking the link below:
If you enjoyed this post, please share it using the toolbar at the bottom of the page and follow me on twitter @colourofair and facebook for design news and free resources.
]]>
Time: 45 minutes * Level: Beginner / Intermediate
What you need:
1. After you downloaded the amazing Illustrator brush pack from colorburned.com, you need to install it. If you don’t know how to do that, follow the steps from this article.
2. Now we will try to do the frame in Illustrator. After you installed the brushes, create a new document and draw a horizontal line using the pen tool and then open the brush palette. In the Open Brush Library, choose the brushes you just installed.
Select the line that you made with the pen tool and then click on a brush from the list. Experiment a little bit with the sizes and brushes and see which brush you like most (use thin brushes if you want to have the same result as me ). Remove the fill and leave the stroke at 1pt. The result should be something like this:
3. Now make more strokes (both, horizontal and vertical) using different brushes and dimensions, reposition them and move them one over another until you get a rectangle shape like the one below:
4. Now save the document and leave it open in Illustrator. Open Photoshop and create a new RGB document at 72 dpi, 1000 × 800 px.
Then download the free HQ texture pack and open in photoshop the file named 04_metal_www.davidg.ro.jpg. Press Ctrl + A and then Ctrl+C to select the entire texture and copy it, then go to the document you just created and paste it pressing Ctrl+V. Go to edit -> free transform and shrink the texture proportionally to fit the background.
Delete the layer named “background” we don’t need it anymore, and leave just the texture layer (name it “metal:). Save the document. Now you should have something like this:
Go to image -> adjustments -> brightness/contrast, and change the brightness and contrast using these values:
5. All right, the texture is now darker and looks awesome. Now we are going to add the image. (You can use another photo if you want but pay attention to the step when we are using blending modes because they might behave different depending on the color and brightness of your image.) Download the image that we are going to use and open it in Photoshop. Press Ctrl+A and then Ctrl+C to select the image and copy it, then go to our document and paste it pressing Ctrl+V. So we have a new layer, name it “image”. Now we’re going back to illustrator to copy our frame to our document in Photoshop. Select the frame, press Ctrl+C, then go to our document in photoshop and press Ctrl+V to paste our frame. Now Photoshop will ask you how to place your design. Choose smart object and then transform it until you reach the edges of the image, and then hit enter.
6. Rasterize the new layer (right click on the layer -> rasterize layer) and press Ctrl+J 4 times to duplicate the layer until you have 5 similar layers with the same frame, and name them frame1, frame 2, frame 3, frame 4, frame 5.
7. Hide all the frame layers except frame 1. Right click on it and choose select pixels. Then go to Edit -> Fill. In the “Use” field select color and choose #d9a858.
Then click OK, and again, OK. Now shrink it just a little bit with right click -> free transform. Right click again and choose horizontal flip, repeat the operation choosing vertical flip this time. We have the same frame in 5 layers but we want to create the impression that the frames are different from one another. So, it is very important that the layers with the frames will not have the exact same dimension so resize them, flip them and move them 10-20 px right or left / up or down.
8. Make visible the second layer and colorize it with #8c692f. Now your layers should look like this:
9. Change the blending mode to the frame1 to overlay, and to the frame2 to color dodge:
10. Now we want our image to be more separated from the background so make visible “frame4″ leave it black and change the blending mode to “soft light”. Now you should have something like this:
11. Drag frame5 under the layer image, leave it black and change the blending mode to soft light. Don’t forget to move, flip, transform the frames so they will NOT be perfectly overlapped. You can continue experimenting with blending modes, duplicate the frames and so on, until you’re satisfied with the result.
12. Now that we’re finished with the frame, we are going to add some text. Choose the type tool and write some text (i wrote the name of the guy in the picture) under the image. I used the font AGaramond, but you can use whatever font you want.
Right click on the text layer and choose blending options. Use the following values for shadow:
Check also Gradient Overlay and use a Grey gradient with the angle of 90°. The gradient should be from color #5d5d5d to color #
d3d3d3:
Now the text should have a nice metallic effect:
Add another text smaller than the previous one to create a dimensional contrast between them. But beyond the dimensional contrast when we look at those two texts, we have another contrast regarding the space between the letters (increased tracking) As you can see i used the value 800.
Now copy the Marco Hietala layer style, (right click on the layer, copy layer style), and paste it on the new one, Nightwish.
We are getting close to the end so we will just add two stylish bars and place the nightwish text between them. So make a 1 px thin white horizontal line like the one below:
Now right click on the line layer and go to blending options. Check gradient overlay and make a gradient that starts and ends with the color #181818 but in the middle the color is #9b9b9b. Make sure the gradient angle has the value of 0°. Click OK, OK, and again OK.
Duplicate the layer and move the new one below the “nightwish text”. The final result should be like this:
click on the image to view full size.
So this is how it’s done. You can use this technique if you have a nice photo and you might want to turn it into a wallpaper, or even a print.
If you enjoyed this post, please share it using the toolbar at the bottom of the page and follow me on twitter @colourofair and facebook for design news and free resources.
]]>Create a Professional Portfolio Design in 17 Easy Steps
Create a Sleek, High-End Website Design from Scratch
Create a Magic Night Themed Web Design from Scratch in Photoshop
Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!
Design a Photographer Portfolio Layout
Making the ‘Clean Grunge’ Blog Design
How to Create a Grunge Web Design in Photoshop
How to Create a Simple & Sleek Web 2.0 Site Footer
Business Layout
Make your own portfolio page
If you enjoyed this post, please share it using the toolbar at the bottom of the page and follow me on twitter @colourofair and facebook for design news and free resources.
]]>