Mar 9th

Underwater Content Box Design in Photoshop

Matthew Heidenreich in Tutorials with 65 comments

In this tutorial I will teach you how to create an underwater content box. We will make it appear as if the content box fell into the water using stock photos and different techniques. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Final Result

Click on the image to view the full-scale final result.

Resources

Underwater Stock Photo
Splashes Pack (credit is given in pack)

Lets get started…

1. The first thing we want to do is create a new document. I chose to make mine 1100×1020.

2. Next we want to set the scene for our theme. From the resource list at the top of this article, retrieve the Underwater stock photo. Open it up and resize it to fit your template like so.

3. Using your Rounded Rectangle Tool with a radius of 10px, make a rectangle similar to the following. I’m going to refer to this layer as “Content Back”. You want to place it in the center of your document (refer to the final image preview if you need to.)

4. On your “Content Back” layer insert the following blending options by right clicking the layer in the layers palette and choosing blending options from the drop down menu.

5. Lower your “Content Back’s” layer to about 15% opacity, and you’ll have something that looks like this:

6. The next step is to add our splashes. This will require a few stock photos. From the resource list at the top, download the set of splashes i have prepared for this tutorial. First thing we want to do is open up the file named “splash1.jpg”. It will look something like this:

7. We don’t need any color in our splash, so we are going to want to desaturate our image before adding it to our template. To do this hit Command+Shift+U and it will turn black and white. It is now time to import it to our template. We don’t need the whole image, so using your Lasso Tool with a feather of about 10px, make a selection similar to the following and then drag and drop it onto your document:

8. This image is going to be a lot larger than our template, so we are going to want to scale it down and place it a similar way to the following in the top right of our content area:

9. Set this layers blend mode to Screen and you’ll have something that looks like this:

10. We don’t want our content box to be covered with the water, but we do want some of it to overlap. So this is where our Layer Mask will come into play. With your Splash1 layer selected, choose the Layer Mask Icon from your Layers Palette. We then want to use a Soft Brush set to black to mask out some of the Splash. Make sure you paint on the Mask, and not on the layer itself. You will want it to look similar to the following if all goes well:

11. For the left side, I simply duplicated this same splash layer and scaled it a little smaller so it wouldn’t look exactly the same and followed the same process used in step 10. I got these results.

12. It’s now time to open up our “splash2.jpg”. We want to follow the same steps used in 6, and 7. But this time our Splash2 will be placed in the bottom left side of our content area (don’t forget to change your layers blend mode to screen):

13. Using Step 10 again, we want to mask out some of the overlapping Splash until we get the following:

14. We are almost done with our splashes! For our next splash, we want to open up our “Splash3.jpg”. You will notice that this image has a white background, which will not work like the others with the black backgrounds. So we need to make the background black so we can achieve the same effect as before.

15. First thing we will do is desaturated our image “Command+Shift+U”. We then want to invert it. To do this we want to hit “Command+I”. It is now at the same point as the other images, so we can make a selection of the desired splash, and then place it on our document in a similar fashion (remember to change the blend mode to Screen).

16. Just like in Step 10 we want to mask out all the access splash. Following those same steps, and make it look like the following:

17. We then want to repeat the process used in steps 14-16 with our final splash image (Splash4.jpg). You will have something that looks like the following:

18. Lets move onto our navigational menu now. We want to find our “Content Back” layer in the layers palette and Command+Click the layers thumbnail to turn it into an active selection. On a new layer above everything else, fill your selection with black:

19. Using your Rectangle Marquee Tool, select the lower half of your newly created rectangle, and choose EDIT>CLEAR. It will look something like this. I will refer to this layer as the “Navigation Back”:

20. On your Navigation Back layer, insert the following blending options:

21. Lower the opacity of your layer to 80% and you’ll have something that looks like the following:

22. For our links we want to use a simple font. I chose to use Myriad Pro set to white.

23. Our active link will have a sort of “glow” under it. To achieve this, use a soft brush with a foreground of #8CFBFF.

24. Lower the opacity to around 61%, and then use your Rectangle Marquee Tool to select and delete the bottom half of your glow. It will look something like the following:

25. Lets move onto our hooks. First thing we need to do is create a hole for our hook. Using your Elliptical Marquee Tool, make a selection similar to the following and fill it with #192932.

26. Add the following blending option to your holes layer.

27. Time for the hook. Using your Pen Tool with it set to path mode, make a path similar to the following:

28. Set your Brush to a hard 2px black brush and choose the Stroke Path Icon at the bottom of the Paths Palette.

29. Add the following blending options to your hooks layer:

30. The last thing before we add our string is to add a layer mask to our hooks layer to make it appear as if the hook if coming in from behind the box, and coming through the hole. To do this use your Polygonal Lasso Tool to make a selection similar to the following:

31. Inverse your selection SELECT>INVERSE, and then choose the Layer Mask Icon from the bottom of your Layers Palette.

32. Now it’s time for the string. To do this we need our Pen Tool yet again. Make a path similar to the following:

33. We then need to make sure our Brush is set to 2px, with a white Foreground. Then on a new layer add a stroke to your path by going to the Paths Palette and choosing the stroke path icon at the bottom. You will have something that looks similar to the following:

34. Add the following blending options to your strings layer:

35. Then all you need to do is do the same thing for the right side, and your document will look like the following at this point:

36. All that is left is to add some content. For the boxes that will house our thumbnails, I used the Rounded Rectangle Tool with a foreground of #79B5F5.

37. Then the last thing to do is to create the “left” and “right” sliders. Using your Rounded Rectangle again with a 5px radius, make something that looks like the following.

38. Add the following blending options to your layer:

39. All that is left now is to add an arrow icon, and repeat the process for the other side and your final product will look like this with some content:

Learn profession web designing with testkings online web designing course and get hundreds of free testking 642-974 design tutorials and testking 646-046 study guide to learn useful tips and trick in design work

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts65 Comments

Jonas July 27th, 2011 at 3:12 am

Very nice tutorial!

Reply
Interpreting Service August 16th, 2011 at 5:28 pm

Im giving this a bash. Overall i think its a nice tutorial. many thanks

Reply
robdirk August 22nd, 2011 at 10:05 am

what do you save document as?

how do you create links in photoshop?

or if not how do you get the highlight button to work if you save it and create a hot spot in dreamweaver?

Reply
uggs on sale replica boots August 29th, 2011 at 1:49 am

Howdy! I simply want to give an enormous thumbs up for the nice information you’ve right here on this post. I will be coming again to your blog for more soon.

Reply
mobil bekas September 3rd, 2011 at 1:07 pm

Amazing tutorial and thank you for sharing

Reply
Image Clipping Path September 7th, 2011 at 6:57 am

WOW! Brilliant tutorial. I am speechless to see this. Awesome!

Reply
Parth September 14th, 2011 at 4:45 am

awesome work,can any tutorial to convert it in css?

Reply
Danish usman September 22nd, 2011 at 1:09 pm

great dude

Reply
BALA FROM SATHIYAMANGALAM October 3rd, 2011 at 12:47 pm

ITS TOO GOOD I LIKE IT VERY MUCH……………..TRY TO LEARN FRIENDS

Reply
Fairy Gnome Statue Sculpture October 22nd, 2011 at 2:15 am

Thanks for your insight, really got us thinking more about slider boxes and the various ways they can be used.
Great read, Cheers

Reply
shilpa November 17th, 2011 at 8:20 am

Cool easy to understand tutorial.

Thanks

Reply
vikrant January 16th, 2012 at 6:27 am

fantastic very good

Reply
Ginger May 3rd, 2012 at 2:00 pm

How much would you charge to turn this design into a wordpress theme with just a couple of minor changes? Thanks!!

Reply
Donny Hilario May 16th, 2012 at 11:39 pm

constantly i used to read smaller articles that as well clear their motive, and that is also happening with this article which I am reading now.

Reply