Mar 9th

Underwater Content Box Design in Photoshop

Underwater Content Box Design in Photoshop

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.


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

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.

Share Your Thoughts84 Comments

  • Jonas July 27th, 2011 at 3:12 am

    Very nice tutorial!

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

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

  • 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?

  • 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.

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

    Amazing tutorial and thank you for sharing

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

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

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

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

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

    great dude

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


  • 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

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

    Cool easy to understand tutorial.


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

    fantastic very good

  • 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!!

  • 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.

  • Mansoor June 7th, 2012 at 12:56 am

    Thumbs up well done :)

  • Oliwer Grevillius June 28th, 2012 at 8:29 pm

    Oh! VERY NICE!!Thanks /illius

  • don July 10th, 2012 at 12:33 am

    nathi saru

  • stojaki ekspozycyjne July 30th, 2012 at 3:04 pm

    I rarely comment, but i did a few searching and wound up here Underwater Content Box Design in Photoshop. And I actually do have a couple of questions for you if it’s allright. Could it be just me or does it appear like some of the responses appear like they are coming from brain dead visitors? :-P And, if you are posting at other online sites, I would like to follow everything fresh you have to post. Would you make a list of all of all your shared sites like your Facebook page, twitter feed, or linkedin profile?

  • Clipping path August 29th, 2012 at 10:13 am

    have come across many tutorials but this one is very neat and to the point.. nice blog.. will revisit from time to time..

  • web developer January 13th, 2013 at 12:47 am

    Absolutely spectacular collection. I wish I could get close to this kind of creativity. I’ll keep

  • web developer January 13th, 2013 at 12:50 am

    Absolutely spectacular collection. i wish i could get close to this kindof creativity i will keep trying.

  • Bovada casino no depposit bonus February 13th, 2013 at 12:46 pm

    vhowaefwjtfgvodujpo, bovada casino, eoltNKH, [url=]bovada[/url], Cgoqnhf, bovada, nZvnSos.

  • Best Dating Websites April 19th, 2013 at 5:49 am

    Hi! I just desired to ask if you ever have any issue with cyber-terrorist? Our previous blog site (wp) was broken into and I found themselves losing nearly a year regarding hard work due to no files backup. Have you got just about any solutions to stop hackers?

  • Sala weselna Suwa³ki April 26th, 2013 at 8:18 am

    I leave a response each time I appreciate a post on a site or I have something to valuable to contribute to the discussion. Usually it is caused by the fire displayed in the article I looked at. And on this post Underwater Content Box Design in Photoshop. I was actually excited enough to drop a comment ;) I actually do have a couple of questions for you if it’s allright. Could it be simply me or do a few of these remarks look as if they are left by brain dead visitors? :-P And, if you are posting on additional online social sites, I would like to keep up with you. Could you make a list all of your community sites like your twitter feed, Facebook page or linkedin profile?

  • fcrzoizo0880 June 5th, 2013 at 7:09 am

    meer, jana, boy-hul/rock val, 13.74, w:-1.7. 24, ellerbeck, megan, denison-schlswg, 13.97, w:-3.3.boys 100 meter dash 3a1, norman, brandon, ia falls-alden, 11.27q, w:-3.0. 2, brogden, chris, pella, 11.34q, w:-3.0. 3, lebeau, devin, marion, 11.37q, w:-3.4. 4, sanders, darrion, keokuk, 11.38q, w:-3.2. 5, whiton, will, perry, 11.40q, w:-3.4. 6, hadachek, trev, union, laporte c, 11.41q, w:-3.0. 7, dunkin, tanner, knoxville, 11.42q, w:-3.4. 8, harding, cory, norwalk, 11.54q, w:-3.0. 9, dave
    rio de la capilla de san antonio, 901 nw loop 410 contacto: peggy brink, 313 a 3600 o eva longoria celebrity casino night, beneficiando a la actriz local no heroes beneficio de eva, se llevarán a cabo 05:30-11 a.m. 06 de octubre en el jw marriott hill country resort and spa ubicado, 23808 resort parkway. esto incluye juegos de casino al estilo las vegas, refrescos, subastas silenciosas y en vivo, música en vivo, una en texas hold ‘em torneo de póquer y cele
    Gafas de sol Ray Ban Aviator
    35region ivjudson 34, churchill 20o’connor 42, southwest 12laredo alexander 35, donna 24weslaco 28, los fresnos 24madison 37, wagner 21east central 35, clark 31mission sharyland 72, laredo united 30harlingen 41, mcallen memorial 20class 5a division iiregion iabilene cooper 40, ep americas 21arlington 28, keller timber creek 16denton ryan 31, hurst bell 28cedar hill 35, copperas cove 28abilene 34, ep montwood 15arlington lamar 37, justin northwest 30colleyville heritage vs. lewisville
    para san pedro springs park. llamada: 207-6924.order de los hijos de hermann, pershing hotel rústico 160, tendrá su cena de espaguetis anual 31 a las 4:30 pm en el edificio de la asociación hermann sons, 525 s, st. donación de santa maría es de $ 6 por plato. cene en o para llevar. los ingresos benefician a los perros guía de texas, sin fines de lucro. está abierto a la public.feb. 7san antonio college estudiantes de teatro realizan la steve martin comedia los calzoncillos1
    ray ban glass

  • yzkjpvlf2220 June 26th, 2013 at 9:16 am

    maker sagde, at det var dens 19. måned i træk salget stiger . den boerne -baserede selskab bager og sælger håndlavede tærter på sit tootie pie gourmet caféer, i butikker og gennem selskabet direkte. april salget steg 17 procent i forhold til samme måned sidste år. selskabet rapporterede et nettounderskud på $ 38,514 i løbet af kvartalet , der sluttede i december sammenlignet med et overskud på $ 29,321 forhold til samme kvartal i 2009, if
    Christian Louboutin pumps
    reneurship topics such as identifying an opportunity, securing startup funds, organizing your new business, business planning, protecting your intellectual property and marketing product ideas.UTSA alumnus and entrepreneur Vinicio Montes will serve as the boot camp’s keynote speaker. Montes is the founder and CEO of NERD Beverage Corp. The Entrepreneurship Boot Camp is co-sponsored by the UTSA College of Business, College of Engineering, Office of the
    ed hardy sko
    335-4963 or email, or call Deputy Gilbert Rodriguez at 335-4975 or email New Braunfels couple pleaded guilty Thursday to dodging $491,005 in taxes by making misrepresentations to the Internal Revenue Service.Ronald Sober, 70, pleaded guilty to causing the tax loss during the years 2002 to 2006. His wife, Candace Sober, 68, pleaded guilty to impeding tax collection.The Sobers admitted that they failed to in
    af rene doping test som evidence.those på armstrongs side synes villig til at kæmpe, hvad har potentialet til at være mor til alle dopingsager – en aggressiv retsforfølgelse versus en sagsøgt med millioner af dollars og en vedholdende, prideful streak.armstrong ’s advokater hævder undersøgelsen er spild af penge. armstrong selv sagde, at han ville være glad for at deltage, så længe det ikke er en heksejagt. nogle mennesker interviewet af
    Kvinder Intimates

  • kfsfjcde3477 June 30th, 2013 at 7:38 am

    ede kontrollen over sit køretøj og kørte ind i et hjælpeprogram pol , embedsmænd said.officials sagde manden rejser vest på interstate 10 nær la cantera parkway exit , da han mistede kontrollen over sit køretøj , tangerede ind median og kolliderede med staven. hans navn og alder ikke var andre var i bilen , og ingen andre køretøjer var involveret i ulykken , der skete omkring 22:30 alle vestgående baner af i-10 blev lukket ned
    Jordan 6
    vad er i sæsonen. ! bravo adresse: 840 currie st., fort worthhours: 5-10 pm tirsdag-torsdag, fra 11:00 til 02:00, 4-11 fredag, 5-11 lørdag, 10:30-2: 30 pm, 5 – 10:00 sundayprice sortiment: $ 20 – $ 30info: brownstonerestaurants, 817-332-1555gerhard tyske restaurantthe lille by roanoke, nordøst for fort worth, har en af ​​områdets mest travle restaurant scener, og det omfatter gerhards, en fremragende tysk restaurant fra mor -and-pop gerhard og
    Timberland 6 Inch Støvler
    edstefar stadig taler til mig i dag gennem salmer, jeg lærte på denne kirke, perry , sagde i south carolina, kvælning op og bøjer hovedet i flere sekunder, før genvinde hendes composure.the perrys gift i 1982 efter en lang frieri, de har to voksne børn, griffin og sydney. anita betalte regninger i mange år arbejdet som sygeplejerske, mens rick serveres i texas legislature.johnson mødte parret i 1984, da han og rick var freshmen lovgivere i t
    A&F Shirt Short
    agency website.EL CARMEN, Mexico On the west flank of the Carmen Mountains in northern Mexico, the grass grows knee-high and glows iridescent red in the setting sun.It has been decades since this mountainside has had such thick pasture.From overgrazing the valley floor and clear-cutting the old-growth pine and Douglas fir on the 8,000-foot-high ridgelines, this mountain range, stretching for 90 miles, bears scars from three centuries of people try
    Nike Air Max BW Mand Kvinders Sko

  • trewzonrern July 9th, 2013 at 10:45 am

    Unsure about the feasibility or logistics, but might be helpful information. If you read that descriptions, you’ll get a sense of whether your customer is serious or not. Look at the Lasik request in comparison with the SEO request. Both have 0s for their purchase rating. I’d write for that Lasik customer without concern but I’d be much less incliend to write for your SEO customer just based along the way they worded their demands. Also, the date gives an individual a clue too. The Lasik request is new. Now, if it were three weeks old and continue to showed a zero, I’d figure the buyer’s not serious, but since it’s a weekend and also the request is just each day or two old, then I’d give him comfort of the doubt (providing certainly that I was keen on writing about that distinct topic). That said, SEO articles are reasonably popular, so if I ended up so inclined, I’d write one and submit it on the SEO guy. I wouldn’t be confident in this guy buying it but I would be confident in a few other client buying it based on the popularity of the subject. So really, if this guy offers made 100 requests and never bought a single document, my overall decision can be based on the topic’s larger appeal.

    SEIKO 時計
    ポールスミス 時計
    腕時計 メンズ
    コーチ 時計
    セイコー 腕時計
    coach 財布
    コーチ アウトレット
    コーチ バッグ 斜めがけ

    Contemplate also that newbie customers could be posting their calls with regard to content on multiple freelance sites. Look at the explanation for clues that it may not be a CC exclusive require. This is tricky, but you get a sense of CCspecific requests opposed to more generic requests. If it sounds like a canned request that’s very likely put here, there, and everywhere, then CC has a chance to shine! We don’t have to offer ourselves just write the particular article. It’s risky because we are competing with other web sites, but if the topic appeals to you personally, you think it can sell to another individual later, then this is a fantastic chance to help CC land a brand new customer. It may take a person like this 5, 10, or 20 requests to view the value of CC’s product over bid sites.

    ハミルトン 腕時計=
    ポールスミス 時計=
    腕時計 メンズ=
    SEIKO 時計=
    セイコー 腕時計=
    coach アウトレット=
    coach 財布=
    コーチ バッグ 斜めがけ=
    コーチ バッグ=

  • fd0r4s62hp July 9th, 2013 at 10:54 am

    t can’t-miss silver sky ornament setting in the southwest.Venus is currently sitting near the lid of the teapot shape of Sagittarius. If you scan the area with binoculars, you’ll find an eyeful of stars since the Milky Way rifts up from the area as a meandering trail of glitter.Whenever I trace the Milky Way with binoculars, it seems that there are millions of paparazzi in the sky with their flash bulbs just popping away in the night.The moon sits at a distance in Capricornus in the east.The moon will reach first quarter phase Dec. 2, so it will light the sky and cause some of
    Gucci Hobo Bags
    March 2011 to legitimize its power, according to the website of the official newspaper, Al Ahram. The report said the court further found that the military-appointed justice minister had wrongly usurped 鈥渢he power of constitutional legislation.锟?/p> Heba Morayef, a researcher at Human Rights Watch tracking the issue, said the courts 鈥渉ave never had this kind of faceoff before锟?with the generals. The same court, Morayef said, may now seek to reinstate the Parliament, which the generals dissolved the day before the presidential vote. The generals said they had acted on the
    empt.Brandeis’ Colin Blake qualified with a silver medal in the 100-meter dash (11.29).Local water polo teams begin their quests for a title this week in the State Water Polo Tournament in Austin, including Brandeis, Clark, Marshall and O’Connor.Pat Turner is a San Antonio-based freelance writer.Tucked away in the Lincoln Heights shopping center, Zo?s Kitchen is among San Antonio’s newest additions to the culinary scene.The fast-casual restaurant is the 63rd location for the Birmingham, Ala.-based chain, which opened in 2003 with Zo? Cassimus’ original recipes that combined her
    cracked foundations, is pushing for additional regulations of home builders in the city.The group is backing and has proposed additional ordinance changes, including requiring a home builder to be bonded before they are issued a city building permit and to provide full disclosure on homes they build 锟?two notions James said the city rejects.Requiring home builders to be bonded does not address any structural problems found in homes after they are built, James said. Bond requirements in place in other cities are used as a means of addressing code violations before a certificate
    YSL Sandal Outlet

  • 2014 Nike Air Jordan 2012 March 10th, 2014 at 5:15 am

    These 2014 Nike Basketball Shoes‘ golal is to make everyone like sport and join in.This shoes biggest luminescent spot lies in the ankle area unique butterfly color wing designHowever, this aqua colorway has never been seen and Seems to have a certain amount of explosive force.They possess the ability to enhance the Nike shoes owner individual attractiveness since it also reflects women’s standing in existence and at the same time to on society.You shouldn’t ignore the fascinating apperance of this kind of 2014 Nike Air Foamposite Pro.This shoes have not used the former Flywire technology, but with the net surface etched design covers the entire vamp, and ensure a breathability.If your shoes do not have enough protection, the hard impact that the feet is receiving can lead to damage. In order to prohibit further damage to the feet of the athletes, Nike has come up with an innovative system for feet cushioning.Everyone that has worn a pair of these shoes knows that Nike does not fool around with quality. You might find many other shoe brands messing around with low quality materials in an attempt to increase their overall profit. That is something that you will never see Nike doing because they offer only the highest quality shoes available.Kobe’s name is written in the middle of the shoes and the new technology will make you look more stylish and more easy. People speak highly of the shoes since it is good for sports.The achievement that the Nike obtain are really great, which make both the customers and merchants surprised. According to the present market situation, the selling of the Nike now are able to reach almost ten million pairs, which remains to be a really huge figure, and it is the record that any other brands can never reach.The 2014 Nike Air Jordan 2012 from our are designed with synthetic leather upper for comfort and a great ball feel, and they can help enhance your movement and traction.Nike is the top shoes that you can pick out and the reputation of Nike can prove it. They also good to look and design for man and woman, of course its price are reasonable and qualities are usually good.

  • Cheap Air Max 90 Premium Women March 10th, 2014 at 5:16 am

    These Cheap New Jordans Shoes‘ golal is to make everyone like sport and join in.You will be the person who lead the trend and fashion by wearing these Cheap Nike Free Womens Shoes.As you begin shopping for these mouth pieces you will notice that they come in many different shapes and sizes. It is important that you find one that fits your child correctly as this can easily prevent them from losing it during the game and experiencing an accident.So the next time you are on the search for the finest shoe to keep you on top of the game and to bring out the best in you, make sure to wear only dunks from Nike shoes.Nike shoes, as the famous sport shoes, many women and men love them very much. Maybe some people ask why the Nike shoes are so popular around the shoes marketing? The question is that Nike shoes have the high quality manufacture, exceptional features and extensive and unique styles.Every pair of the Nike shoes can be the best partner to people. There is no one can refuse the magical feeling, just at the moment you put these shoes on, every people would be watching you and your jacket again and again.These shoes are the wholesale versions of our very own Nike shoes. Wholesale shoes are manufactured in countries like China and since the labor is cheap in that particular country the cost of production are also substantially cut down.Nonetheless if you can’t get your hand on a pair of Nike footwear, you might contemplate purchasing them on the net from a good deal of internet sites that stock these wonderful shoes.Depending on this feature, you will never need to worry when your shoes are getting wet. The durability of the materials can enable you to get the same look for a quite long time.If you have tried the Cheap Nike Shoes from our online shop, you will find that you haven’t found a good pair of Cheap Air Max 90 Premium Women that suit you so much before.What sets them apart are not only the name or the extensive marketing operation that the company undertakes to promote the product but also the quality and art that goes with all Nike shoes products.

  • louboutin chaussure femme April 12th, 2014 at 4:59 am

    This website was… how do I say it? Relevant!! Finally I’ve found something that helped me.
    Appreciate it!

    louboutin chaussure femme

  • Top Car Racing Games May 16th, 2014 at 1:43 pm

    Nice post. I was checking continuously this blog and I’m
    inspired! Extremely useful information specifically the remaining
    section :) I care for such info a lot. I was seeking this
    particular indo foor a long time. Thhanks annd good luck.

    My webpage – Top Car Racing Games

Leave Your Response