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.
Mar 9th
Underwater Content Box Design in Photoshop
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:
Related Articles
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.
Leave Your Response
Subscribe
Get the latest updates via our RSS, Email, or twitter feed.
Share Your Thoughts35 Comments
Brian Jones March 9th, 2010 at 7:14 am
Nice tutorial – thank you for sharing. This just gave me inspiration and an idea for a future re design on my brothers marina. Great post!
Imon March 9th, 2010 at 8:36 am
Yea I must say bloody awesome outcome. Great job on this tutorial!
Rafael March 9th, 2010 at 9:01 am
The only thing that i´m wondering in almost all tutorial with this cool layouts is… who does it works in widescreen? Do you just make a ugly box and it´s all right?
see ya!
Matthew Heidenreich March 9th, 2010 at 10:14 am
in this case, that is not the problem. The image we use for the background is very wide. So you wouldn’t have to even worry about it cutting off. You can work at the size i used in Photoshop, and then re save the background image at a different time.
Vinícius March 9th, 2010 at 10:58 am
Nice, I loved it!
Now a tutorial to convert this to HTML, CSS e jQuery!
see ya!
Kartlos Tchavelachvili March 9th, 2010 at 11:33 am
Cool design
Jeff March 9th, 2010 at 11:42 am
Very cool design! Great site you have here Matthew.
Herman March 9th, 2010 at 10:45 pm
This is very cool, Thanks for sharing. I’m so touched ToT
chaitrax March 10th, 2010 at 1:03 am
very creative design, but can be extended more for more contents.
Smashing Share March 10th, 2010 at 10:42 am
Nice design and tutorial.
Tutorial Lounge March 11th, 2010 at 10:48 am
beautiful design with helping tutorial.
Blogger Den March 11th, 2010 at 12:32 pm
Excellent tutorial! Very simple to follow and the directions work well, keep it up!
Matthew Heidenreich March 11th, 2010 at 3:46 pm
thanks for all the comments. Really appreciate the feedback
Erik March 15th, 2010 at 11:39 am
So beautiful man! Thank’s for sharing
Robby March 22nd, 2010 at 1:05 pm
very very excellent!!! Thanks for your kindness, for share this tutorial,
I hope this tutorial will never be removed from this website.
Penn wrongful death law March 23rd, 2010 at 4:41 pm
The way that this tutorial is executed is creative and engaging. Thanks for sharing the process.
piscesning April 2nd, 2010 at 4:12 am
wonderful!Thanks for your share
3G新潮流 April 9th, 2010 at 2:15 am
en,it’s cool.
Rene Enriquez April 12th, 2010 at 10:37 pm
Nice tutorial good Job!!!
Google April 19th, 2010 at 4:54 pm
very cool layout! keep it up man…
Google April 19th, 2010 at 4:56 pm
nice and cool! keep it up man…
b2cmother April 21st, 2010 at 4:30 am
Thanks for the post ,really helps me
pete April 22nd, 2010 at 1:59 am
Cool man! We put a link to your tutorial on our site.
pete April 22nd, 2010 at 2:01 am
…oops…that site being bestphotoshoptutorials.net
arnold April 23rd, 2010 at 2:35 am
Looks so cool,
arnold April 23rd, 2010 at 2:35 am
Wow damn , Looks so cool, thanks for the tutorial .
Rahidy2k May 1st, 2010 at 5:58 am
coooooooooool
Rahidy2k May 1st, 2010 at 5:59 am
this tutorial is look so cool
I will try to make it!!!!!!!!!
Raman May 3rd, 2010 at 3:24 pm
Like this tutorial very much.Thanks for sharing.
clippingimages May 13th, 2010 at 1:59 am
nice work:) thanks for sharing……..
rock May 13th, 2010 at 8:05 am
very good concept i like it
Gokul May 13th, 2010 at 11:52 pm
Wonderful work…
Mego May 23rd, 2010 at 2:24 pm
Good tutorial, thanks!
Sophie C. May 26th, 2010 at 7:51 am
J’aime beaucoup, c’est magnifique. Cela dit, c’est dommage que ce ne soit pas en Français.
Bonne continuation!
Sophie C.
Ijaz ali July 28th, 2010 at 5:25 am
I Like this