Archive for the ‘Uncategorized’ Category

Photoshop CS5 Tutorial: Create a stereoscopic picture using a single image

“Stereoscopy (also called stereoscopic or 3-D imaging) is any technique capable of recording three-dimensional visual information or creating the illusion of depth in an image.” read more on wikipedia

This technique is usually done by taking 2 pictures from slightly different angles and super imposing them, thus creating that 3D illusion.This tutorial will show you how to create a stereoscopic picture using a single image.

After reading this post from Abduzeedo, I decided to write a tutorial on how to create a stereoscopic picture using a single image.

The image I am using here was taken by a good friend of mine, Gabriel Panaiet and he was kind enough to let me use it on this tutorial.

Before we get this started, click this link to get the original image.

First thing we need to do is cut out the elements in order to create the 3d stereoscopic effect.

01. Selecting the Leaves

Open the image in Photoshop, right click on the background layer  and select “Duplicate layer”, then name the new layer “Leaves” and click OK.

Let’s cut off the leaves using the “magic wand” tool. So select it by pressing “W” on your keyboard or select it from the tool menu. Add 60 in the tolerance field and click on the green leaves at the bottom of the picture, then add a mask to the leaves layer.

Now hide the background layer by clicking on the eyeball next to it. If you look at the “leaves” layer you see that the selection has more than what we need, so we’ll have to get rid of that upper green area. Select the mask, choose the rectangular marquee tool and select the unwanted elements. Press “D” on your keyboard to make the background color black and then hit  DELETE.

One more step and we are done with the leaves, so bear with me.

As you see the leaves are not cut out seamlessly because they are out of focus. Photoshop CS5 has a great feature that can help us make the selection perfect with the minimum of effort. Select from the upper menu bar “Window->Masks” to open up the new improved masks menu. Then select “Mask Edge”.

This will open up the mask edge menu, which will help us refine the selection. Select the “Smart radius” box and add 30 in the “Smooth” field and 3 in the “Feather” field and then click OK.

Now right-click on the leaves layer and select “Apply Layer Mask” and we are done with this stage.

02. Selecting the Bike

Duplicate the background layer again and name it “Bike” by double clicking on it. Unfortunately there is no quick way to cut out the bike, so you have to select the magnetic lasso tool and start  clicking around the bike to select it. After you selected the bike, add a mask to the “Bike” layer, just like we did with the leaves layer.

As you can see there are still a couple of areas that need to be cut out. On the arm you can use the Magnetic Lasso Tool again, but for the wheels area we’ll need to use the Magic Wand tool, with a tolerance of 30 and shift+click (shift clicking on a selection with the magic wand tool, adds more elements to that selection) on the ground until we catch all the ground (be careful not to select the wheel spikes).

The current selection is pretty bad, the spikes are missing and the selection is pretty rough, so we need to select “Refine Edge”, check smart radius and enter 6.1 in the radius box, then click OK. This will give us a great selection that will cover the ground and leave the spikes. Now be sure you have the Bike layer mask selected and hit “D” then DELETE.

You can touch up the mask with the brush tool if you think it’s necessary, but if you were careful with the magnetic lasso tool, you should be fine.

Now right click on the Bike layer and select “Apply Layer Mask” and we are done with this part.

03. Fixing the background

Now that we separated the elements from the background, we need to fix the background as if  the leaves and bike were never there and Photoshop CS5 has an AMAZING new feature that will help us do that – it’s called “Content Aware Fill”.

Duplicate the background layer and name it “Base”. Now use the “Rectangular Marquee Tool” and select the lower area that contains the leaves, then press “SHIFT+BACKSPACE”, select “Content Aware Fill” and select OK and by magic Photoshop knows that we need that area to be filled with sand/dirt.

You should have something similar to this.

Now right click on the bike layer thumbnail and choose “Select Pixels”. By doing so you will have a selection with all the pixels that the bike layer has. Select “Select->Modify->Expand” and add a 20px value and click OK, then select “Select->Modify->Feather” and add a 10px value and click OK.

Make sure you have the “Base” layer selected and select the “Patch Tool”. Drag the selection from right to left until the trees and ground align up perfectly.

And there you go, we got rid of all the stuff we did not need to in the base layer. Now let’s add some depth by blurring a bit the edges of the base layer. Select the Blur tool and right click to select a soft brush with a 300px diameter and hardness of 0%. Add some blur around the edges and behind the bike.

You should have something like this.

Now select all 3 layers, add them in a group and name it “slide1”. You can select all 3 layers and the press CTRL+G or do the following steps in order to group the layers.

04. Creating the 3D Illusion

Now we are done with the boring steps and we can start creating the actual 3D effect.

Select the “Base” layer and then go to the 3D menu and select “New 3D Postcard From Layer”. This will help us rotate the base layer in order to create that 3D illusion.

Now select the 3D Object Rotate Tool, make sure you have the Base layer selected and move the image a few pixels like you see in the 2nd image below. Do not go too crazy with this or else the effect will look weird.

Now duplicate the “Leaves” layer,  rename it “Leaves2” and press CTRL+T to transform. Rotate it 180° and move in the upper part of the image.

Go to “Filter-> Blur-> Gaussian Blur” and add a 4px value for the “Leaves2” layer, then select the “Leaves” layer and add 1px Gaussian blur.

Now duplicate “Slide1” and name that copy “Slide2”. Now you should have something similar to this:

Now hide the “Slide1” group (click on the little eyeball next to the group name) and select the Base layer from “Slide2”. Now select the  “3D Object Rotate Tool” like we did a couple of steps back and rotate the background a bit like you see below – be sure to move it in the opposite direction we did before.

Now select the crop tool and crop the image using until there is no transparent area in the canvas (hold SHIFT+ALT+corner click in order to constrain proportions), be sure you have the “hide” option selected, then hit ENTER.

Now select “Leaves2” layer, press CTRL+T and rotate it about 7-9 degrees and shrink it a bit  enough to fit the frame.

Now select the “Leaves” layer and go to “Edit->Transform->Perspective” and transform the layer similar to the 2nd image below.

Now open the “Slide1” group and select the “Leaves” layer and transform the layer so that it fits better the canvas area, then do the same with the “Leaves2” layer.

05. Exporting the animation

We are almost done, we just need to export the 2 slices in an animated GIF format. Go to “Windows->Animation” and then the animation menu will appear. We need to switch the view from time line  to frame. You can do that by clicking the right corner of the animation menu. Now we need to modify the time that each slide is displayed. You can do that by clicking the little triangle below the slice and select “0.1seconds”.

Select “Slide1” and press CTRL+E, this will flatten all the layers that the group contains into a single layer. Do the same for the “Slide2” group. Now go to “Image->Image size” and choose a width somewhere between 300-400 pixels (I have chosen 300), we don’t need to have the image to big or else the animation will loose it’s effect.

Now we need to adjust the brightness and contrast of the image, to make it pump up a bit. We can do that by adding a adjustments layer. Add -10 for brightness and 60 for contrast.

Make sure that the “Slide1” layer  is visible and the “slide2” layer is invisible in the layer menu. Now select the “duplicate selected frames” icon from the animation menu.

Now a second slide appears in the animation window. Now hide “slide1” and make the “slide2” layer visible. One more step and we’re done.

Go to “File-Save for Web & Devices” and the save window will appear. Make sure you use 256 GIF as a file format and that the animation loops forever.

Click to view large image.

And we are done!

This was my first tutorial and I am sure I missed a few steps, so please let me know if you are having any problems understanding what I was trying to say and I’ll be happy to help.

You can apply the same techniques in creating stereoscopic images from all kinds of photos. I’d love to see what you guys come up with.

‘Till next time have fun & be creative!

The current selection is pretty bad, the spikes are missing and the selection is pretty rough, so we need to select “Refine Edge” and and check smart radious and enter 6.1 in the radious box, then click ok- this wikk give us a great selection that will caover the ground and leave the spikes . Now be sure you have the  Bike layer mask selected and hit “D” then DELETE

Adobe CS5 is Here

Hy everyone just finished watching the Adobe CS5 Launch video and to sum it up in one word : AMAZING !

I simply can’t wait to buy it , at least Photoshop and Illustrator. So enough talk – designers start saving cause this is a MUST HAVE.

‘Till next time have fun & be creative!

5 Must-Have Firefox Add-ons for Designers

These 5 Firefox add-ons will definitely  make your life easier as a designer, they will help you speed up your work process and boost your productivity.

01. ColorZilla

This is a simple eyedropper tool and it has a feature that automatically copies the color code to your clipboard and you can easily paste it in Photoshop, Illustrator or any other program you use.

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program.

02. Measure It

Print screening an image into Photoshop and then measuring it usually takes a bit of time – this simple to use tool will spare you the headache of doing so. I find it essential when working on web related projects.

Draw out a ruler to get the pixel width and height of any elements on a webpage.

03. Font Finder

I LOVE this add-on ,  I always see websites with amazing typography and this tool lets me see what fonts the designer used, it’s much more user friendly than going to that page’s source and scanning the code to see what fonts are used.

FontFinder is created for designers, developers and typographers. It allows a user to analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform inline replacements to test new layouts.

04. ScreenshotPimp

The name is lame, I know , but this add-on is really helpful, you can screenshot an entire webpage really quick and you can either copy to clipboard or save to your computer.

Need a screen shot? Screenshot Pimp lets you easily save images of web pages with multiple options for selection, output destination, and image type. Also has new buttons and features which can be easily customized in preferences.

05. Download Statusbar

I HATE the way Firefox opens that annoying download window every time you want to save something. This simple tool will manage all your downloads in a status bar and will let you continue your browsing without being bothered by the download window. I strongly believe that this feature should be implemented by default in future Firefox versions because it will ease the browsing experience of any user.

View and manage downloads from a tidy statusbar – without the download window getting in the way of your web browsing.

These were my 5 favorite Firefox add-ons which I highly recommend. What add-ons do you like?

‘Till next time have fun & be creative!

Free! Shoelace Illustrator Brush

Hi everyone . What better way to kick-start my blog than with a freebie?

Here is a Vector brush I did inspired by this artwork I found on Behance.net. It’s not hard to design such a brush –  make sure to keep checking out my blog cause I’ll be posting a tutorial on how I designed it in the near future.

As you’ve probably realized by now I love Behance and follow the featured artworks on a daily basis. What I like the most is the variation in both style and design fields. If you haven’t discovered this site yet, make sure you check it out. If you already are a member, drop by my page and don’t be shy to say hi. But enough talk, start downloading!

‘Till next time have fun & be creative!