Welcome to my second Photoshop Tutorial.
WARNING: This tutorial is heavy on images, so if you have a slow internet connection it might take a while to load up completely, there are almost 30 images in total.
First let me say something, I’m not a Photoshop Guru or anything similar, I like to experiment and play with my pc programs, therefore this is my very own method for this particular technique. If anyone here knows of a better way to achieve similar results, please share the information and help the us build a better Android community by sharing our knowledge.
Okay so now back on track…
Even since I released my work named “Keep it green” I’ve been receiving dozens of emails requesting a more detail explanation of how to achieve the effect of being in “between” another object.
So how can we make a wallpaper like this:
With some icons with like this, be more interesting..?
Maybe by creating this effect:
Okay, let’s get started;
You will need to create a new document in Photoshop 960 x 854 pixels, transparent, don’t worry about any other setting on that screen.
Load up your “main” wallpaper. Press CTRL+A, then CTRL+C to copy the whole wallpaper…
Go back to the new document that you created a little while ago… Press CTRL+V to paste the whole wallpaper, only 960 by 854 pixles will be displayed on this screen, the thin hairline that you see on this image its the whole wallpaper, but like I said, only a small portion (only what we need) it’s displayed, here you can select any of the 4 corners while holding SHIFT and re-adjust the image until you are happy with what you see.
Image relocated and adjusted, (noticed the different size of the hairline) press ENTER to set that new size.
I use a template with a 10 x 10 layout, this helps me to set the icons on the right area this will make it easier tp add a transparent icon (ei. Desktop Visualizer) to make that embedded icon on the wallpaper a working icon. (In this case I’m using 2 copies of that template to cover the entire image , each template it’s exactly 480 x 854).
Lower the “Fill” of each of the templates until you can see the wallpaper, somewhere around 30~40% should do the trick
Now its time to load your icons..then CTRL+A,CTRL+C, then go back to the main document, then CTRL+V to paste the icons, and repeat the same for all the ones you want to add.
Just to keep thing organized, renamed every single new layer to avoid any confusion. Here you can also resized the icons until you are happy the way they are, just select the appropriated layer then CRTL+T and drag one of the 4 corners while holding shift, this will resize the icon to your like.
Now you can turn off the template layers, by this point you must have located the icons on the right spot, there’s no more need to have the templates on.
Now select the wallpaper layer, click on the “marquee tool” and draw a box around one of the icons, then CTRL+C, CTRL+V
This will create a new layer, renamed properly, like on the image, I made a box in top of the “phone” icon, so I will rename the new layer ‘grass_phone_copy), hold it with the mouse and drag it just above the original phone icon layer. This will make the original phone icon to “disappear”, well, kind of , you are actually just putting a small copy of the wallpaper in top of the icon, therefore making it look like if it vanished, but not, it still there, underneath.
Repeat the last 2 steps for each of the icons that you have on your document, after you are done with all it will look like if you have nothing but a single empty wallpaper.
Now turn off the “grass_phone_copy” layer and zoom in until you have a clear view of the icon
Select the eraser tool, and set it up to about 30 pix size by 50% hardness, make sure you still on the “grass_phone_copy”, to have a better view of what you will be doing you might need to turn on and off this layer several times, you are about to delete a big part of it, and you don’t want to mess it up, otherwise you might end up having the repeat the entire copy of the layer.
I think it will be a better idea to have the “grass_phone_copy” turn back on, and get ready to do some magic, start by erasing the areas of the wallpaper that you don’t want to come up in front of your icon, here you are looking to leave only the small pieces of grass going across the icon, everything else should be deleted, you will see now that the icon starts to pup out “thru” the grass.
Be careful around the small details of the grass, you might need to change your eraser size here.
Almost done! just a few more details!
If you zoom out, you will see the effect more clearly now.
By now your icon should be completely finished, but I always like to strive for the best, so I’ll go ahead and add some shadows to it, select your “fx” tool and click on “drop shadow”
These are the settings that I used for this particular project, you might want to play around with these, since they are so many options.
Here the shadow has been added to the icon, giving it the feel of depth.
Following this simple instruction and you will be able to accomplish this and even more.
The final touch it’s just a nice looking presentation. 🙂
I hope you find this Tutorial useful, if you think something its missing or should be fixed, please let me know and I will be happy to modify the tutorial.
Please if you are going to copy this Tutorial into your own site, don’t forget to link me back to my blog and always give the proper credits to the original authors.