[TUTORIAL] “Keep it green” effect in Photoshop.


Hey folks,

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.

Cheers!!!

 

10×10 Template

Advertisements

8 thoughts on “[TUTORIAL] “Keep it green” effect in Photoshop.

  1. AWESOME.

    i have got to try this.

    do you know what this would look like on a screen like the Incredible? What would the size of the screen be, the size of each icon, the grid, etc?

    i want to try this…. thanks!

    • It should look pretty similar, I don’t think it will be too different, the screen size of the incredible its 480 x 800, so just readjust the height of your “canvas” (when you are creating a new document) so your main document size should be 960 x 800.

      I think that if you try to keep the icons on 120 px max you will still have 120 px left (if you are only using 3 icons per screen)
      so check this out:
      every icon= 120px width (x3 icons) =360px
      You can use the remaining 120px to separate the icons and also give them some space form the edges of the screen.

      You should make a grid of the same size, 480 x 800

      Good luck and let me know if you need more help

  2. hmm… one thing confuses me, the icons are part of the wallpaper, and i would be using blank icons in desktop visualizer on top of the wallpaper?

    because when my wallpaper scrolls, it scrolls little by little, not a whole page at a time. so i wouldn’t see the next 3 icons immediately by going to the next page…

    or is this meant for a landscape theme on your phone?

    i guesss my question is, how does this look on your phone?

    • well, if you use adw ex/ launcher pro you can set your homescreen to only have to screens. That way you get one half of the wallpaper on each screen, and nothing overlappes to the other screens.

      But you are correct… with more than two screens, it would probable overlap some.

    • for your first question, the answer its yes, black icons in top of the embedded icons.

      For your second question I think that the issue here its that you have too many screens at once. This kind of set ups its intended to have no more than 2 screens, anything else will ended up stretching the wallpaper

      For the third question: No; this is intended to be a portrait setup

      For the last question: it looks awesome!… he he

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s