The most exciting websites to make are full-screen experiences. You can really let go and enjoy the freedom without walls. Generally, these exist in the advertising world. It goes way beyond your typical UI and way of thinking in wireframes as there is no set grid within which to design.
We all know that anyone with Photoshop can design to a grid with some vector boxes and filters, but it’s when you can create an actual full digital environment that you have made it to a whole different level. You not only now have to think of how to use the whole real estate of the screen, but also how to think in motion by bringing things to life. What types of sounds will help tell your story? What do you want the viewer to feel when they’re looking at the site? Imagery is very impactful in design so we’ll produce one that mimics a poster-style site, advertising a wholly fictional movie site mockup.
Resources: Images used available from www.istock.com
New York City skyline at night (4624693), Stormy Ocean (9276724), Wave breaking on a shallow reef (10045778), Statue of liberty in New York Harbour (10590214)
Tools: Photoshop CS4/CS5
Expert: Dann Petty
Tutorial files: download here
01. The setup
It’s easier to take away than it is to add, so design to around 1,600 x 1,200 screen resolution. This particular layout will make your site feel like more of an actual movie – widescreen. Just keep in mind that the site will scale.
02. Start swiping
Gathering your images will either be fun or a daunting task. Find the shots of water, clouds, Statue of Liberty and fire that you think work best and throw them in Photoshop for a quick rough draft – no need to sketch your idea. Having a folder full of inspiration is also helpful.
03. Rough waters
Now that you have all your images together, let’s make some water. Luckily, there are a lot of great shots of rough waters out there. Grab a few and start merging them together. Overlay the images to make them seem as one. Don’t be afraid to make the wave crazily huge.
04. Style the water
Give the water some attitude. Adjust the Hue & Saturation to pull some colour out for a nice dark feel. For a little extra effect, go to Filter>Sharpen>Unsharp Mask and then sharpen those water sprays up just a bit.
05. Shadows and highlights
Now your water is heavy and deep, pull out the shadows and highlights. Go to Image>Adjustments>Shadow and Highlights. By playing with these sliders you can add a lot of depth. Be sure to pull back the Color Correction as well as slide up the Midtone Contrast.
06. Mask it
Masking your layers leaves the original state in case you ever need it. Since you overlaid the water images, take away the parts you don’t need. Zoom in and mask away with a Soft Airbrush tool.
07. Cloudy day
Behind the water, place your sky image. Since you already masked out the water, it should fit right in. Repeat those same image styles from steps four and five, and it will look like love at first sight. Boom – there is the open sea. Add some shark fins for a bit of fun, but it’s probably best to take them away because that’s not what we’re doing here!
08. Hello NYC
The movie you are going for here isn’t about the open sea, so drop the NYC skyline in there. It doesn’t have to be the best image since it’s going to be pretty small and it’s going to be roughed up any way. Make sure, however, you find an image that has the city’s lights turned on. It adds to the drama, and a bit of drama never hurts!
09. Lights, fire, action!
Place some fire images over the city. Mess with the layer blending modes to find one that brightens yet overlays the fire. Lighten Color is usually pretty ample. Take the Airbrush tool with a nice dark colour and add some smoke. Set the flow of the brush to around 15% or use a nice grunge brush.
10. Statue of Liberty
Find a nice shot of the Statue of Liberty, like this one from iStock and then tilt it slightly to feel like it’s shredding the water in towards the city. Mask out the statue and its lower half, and then repeat steps four to five on this image. Since this image is a focal point, it’s important to really play with the sharpness.
11. Destroy the statue
To add some damage, grab the Lasso tool (or simply hit L), and make some jagged selections along the edges. Mask out those selections. If you have a nice grunge brush, you can mask out using that as well – just don’t overdo it too much, otherwise it’ll look a
12. Break the hand
With the Lasso tool, select the hand with a jagged edge toward the arm. Copy the selection (Ctrl/Cmd+C) and then mask out the selection to make the hand disappear. Now paste the hand above that statue layer (Ctrl/Cmd+V), and tilt and drop it down just a tad so that it looks as if it has just broken off.
13. Add people
Not only does it help put to scale the size of the wave and the statue, but placing people in adds to the drama. We’ve sourced images of people jumping and simply u-turned them upside down to look like they are falling instead. Repeat steps four and five on the images. Don’t add too many people and make it morbid though.< /p>
14. People with depth
For the people who are falling close to the statue, shadows are needed. Add a nice subtle drop shadow using layer styles. Right-click on the layer style and select Create Layers. This will put the shadow on its own layer. Just doing this simple task with add yet another layer of depth.
15. Clipping mask
Turn the shadow layer into a clipping mask, so it only follows the contours of the Statue of Liberty. To do this, put the shadow layer just above the statue layer. Right-click on the layer and select Clipping Mask or simply mask out the shadow if you’re comfy with brushing the mask.
16. Mad taxi
To add extra detail we’ll add an image of a wrecked NYC taxi, but you could opt for whatever kind of debris you can find. Drop it in and mask it out. Repeat steps five and six on this image. Take a white brush tool to add some water splashes. Remember the drama in detail? Add a jumping guy inside the taxi or beside it.
17. Getting misty
To add noise for water mist and dust, make a new layer and fill it with black on top of all the layers completed so far. Then, go to Filter>Add Noise and really crank up the noise. Turn the layer blending mode to Screen, and mask out some areas with the soft airbrush or grunge brush.
18. Dark overlays
Frame in your work of art. Add a layer on top, and with a soft airbrush brush in the edges on top. Now duplicate that layer and flip it vertically. Add it to the bottom. You should now have a black layer on top and one on the bottom. Again this is just helping to add to the depth and drama.
19. Final overlays
Now that your image is complete, add adjustment layers on top of everything to make it all feel as one. Bring down the saturation to get a nice blueish/grey feel. Then adjust the overall colours with Color Balance to find a nice deep blue with some subtle hints of green.
20. Logo and navigation
Now that the background image is complete, start by adding the logo in the top-left corner. Make sure you give it enough breathing room from the edges. Add your main navigation links right beside it and style them accordingly, making sure they really stand out. Don’t forget, this site scales.
21. Details and done
Now it is time for the final details. It’s always smart to include the launch date of the movie in a large enough font to be quickly noticed. It’s quite possible there would be some music on the site, so add a nice set of controls in the upper-right corner, giving it an extra sense of professionalism. Got a nice cast? Show it off in the bottom footer. Save it and there you have it, an awesome movie site.