The internet is filled with strikingly beautiful photos, along with clever and entertaining animation. When these two elements are mixed together, the result is something that captivates by denying expectations. Enter the cinemagraph, an art form made popular by artists such as Jamie Beck and Kevin Burg. At first glance, these pieces appear to be merely another entry in an accomplished photographer’s gallery. But then a suggestion of movement catches the eye and the image suddenly comes alive with magic and mystery. This form of art makes the tired technology of the animated GIF relevant again. What once was used only for cheesy signature lines has now become something exceptionally artful.
This tutorial demonstrates how to create a cinemagraph from either a video clip or a sequence of photos. Note that the Extended version of Photoshop is required for its animation features.

tools | tech | trends:Photoshop CS5 Extended
expert: Kirk Nelson
tutorial files: download

01. Video layer

Open Photoshop CS5 Extended and make sure the animation panel is visible by going to Window>Animation. If working with a video file, go ahead and open it here by dragging the file onto the empty Photoshop workspace. If working with the sequential images provided on the CD, you can feel free to skip forward to step 5.

02. The sweet spot

In the Animation panel either press the Play button to preview, or drag the playhead handle to scrub through the video. Look for the best portion to keep as the animated part of the cinemagraph. Then drag the beginning and ending timeline markers to define the work area as just that portion.

03. Trim work area

In the top-right corner of the Animation panel is an icon of a small triangle next to horizontal lines. Click it to trigger the flyout menu and choose Trim Document Duration to Work Area. This will cut off the ends of the video that lie outside the area specified in the last step.

04. Frames to layers

From the same flyout menu, choose Flatten Frames into Layers. Photoshop parses the video and creates a new layer for each individual frame. The number of generated layers/frames is determined by the length of the video segment. If working with a video file, please now skip to step 6.

05. Photo sequence

Note: This step is NOT for the video file! If using the photo sequence from the cover disc, please start here. Copy the photos of the swinging tyre to your hard drive. Then go to File>Scripts>Load Files into Stack. Use the dialog box to browse to and add the photo sequence.

06. Frame animation

Photoshop views animation in two different ways. The first is a timeline, tweening approach that is very similar to the way Flash operates. The second is a frame-by-frame approach which is what is required for this project. If the file is in Timeline mode, open the flyout menu and click on Convert to Frame Animation.

07. Frames from layers

Open the flyout menu again and choose the Make Frames from Layers option. Photoshop creates a new frame from each layer sequentially. All the layers are still present, but Photoshop hides all but a single layer for each frame. Click through each frame and see how the layers are revealed in sequence, creating the animation.

08. Timing adjustment

In the bottom-left of the Animation panel, look for a small drop-down menu that controls the repeat of the animation. Set this to Forever. Then Shift-select all the frames in the animation and click the timing setting beneath one of them. From the pop-up menu select Other, and set the timing to 0.06 seconds.

09. Helpful setting

Open the flyout menu once again and make sure the New Layers Visible in All Frames option is checked. This will ensure that the next few steps appear throughout the entire animation. Without this, one would have to reveal the new layers for each and every frame of the animation.

10. Freeze frame

Go to the top layer and press Ctrl/Cmd+J to duplicate it. Be sure the layer is visible and rename it ‘Frozen’. The point of this layer is to cover up any extra movement taking place in the frame, so the movement of the swing will be what draws the viewer’s interest.

11. I see you!

Use the small button at the foot of the Layers panel to add a mask to the Frozen layer. Make certain the layer mask is targeted (click on the thumbnail just to be sure) and then use a large, soft brush with black paint to reveal the animation layers beneath.

12. Troubleshooting and touch up

Play back the animation and watch closely to make sure the Frozen layer is not concealing any of the swing’s movement. If it is, touch up the mask with the brush again. If the paint strays too far, use white paint to reverse the effect. That’s the beauty of using a mask in Photoshop!

13. Added effects

Add in any additional effects like adjustment layers, vignettes, text, etc. Just be sure the items you add are layer-based. If on playback you find that things are shifting around between layers, try Shift-selecting all the frames and then adjusting the position of the elements so the change is applied to all the frames.

14. Save for web

Go to File>Save for Web and Mobile Devices to get this dialog box. Set the file format to GIF – Photoshop detects the animation automatically. Even though JPEGs give better image quality, they do not support animation. Set the colours to 256, the maximum allowed by the GIF format. Then remove the Transparency checkmark. Don’t hit Save just yet!

15. Finish up
The method of dithering is going to be different for each image, but for this particular image, choose Adaptive and Diffusion. Notice that at the bottom-left is a Preview button, which allows a preview of the animation in a browser. Once the settings produce a satisfactory result, hit Save to finalise the project.

The main issue with WordPress templates today is that there are way too many that look pretty much the same. Because they are too simple to create, the likelihood is that most designers just bang out a bunch at once, without considering the quality.
It’s high time designers started pushing the boundaries of WordPress – besides, that’s how WordPress itself will innovate. Let’s make WordPress innovate with us, rather than designers innovate with WordPress. Inevitably the only way for that to happen is to get creative! In this tutorial, we’ll talk about some ways to do just that, using our surf-themed template.

tools | tech | trends: Photoshop CS5
expert: Dann Petty
tutorial files: download here

01. Empty your trash

The first step should always be the same, no matter what you’re creating – empty your trash. That’s right, throw out those web standards – there’s no need for those ‘rules’ of the web. Most importantly, get weird with creativity. Think of a unique theme for your template. In this case, that’s California.

02. Narrow down the idea

Now that we know we’re creating a California theme for this, let’s narrow that idea down even more and create something that’s specifically based on surfing. California itself would be way too broad, and more than likely your first choice of design assets would be to add palm trees – but stay away from clichés.

03. Quick setup

Be quick with the set up – do it however you like, but don’t be constrained. We’re not creating a template here for the late adopters; this site will viewed by early adopters, probably with larger screens. So let’s make this puppy a little wider, at least. Allow for the sizing to change as you progress through the creative process.

04. Sweet landing page

Make it sing! This page determines whether or not someone else will stay on your site for longer than a second and, if you’re lucky, even consider coming back. Most people won’t, generally because the homepage is boring and has too much going on. So be sure to create something unique, in order to keep the users craving more.

05. Fold myth

Ignore the rule that everything important on your site has to be above the fold. Who came up with that misleading statement, anyway? Most of our target audience’s fold, in this case, would be 1,000 pixels plus, at the least. So make a sweet interactive logo/map and place it smack in the middle, and forget the fold.

06. Simple but awesome

Most people think simple means no content and plain colours, but they couldn’t be further from the truth. Keeping it simple actually means placing an emphasis on quality content. So for this design, keeping it simple means creating the perfect background image, using bigger
type, less of a word count and, most importantly, no unnecessary design details.

07. Background that talks

This most important piece of this template is the use of imagery. It adds the visual impact all designers strive for. You can’t just have any old background here. Create a background that absolutely no one else has. A well thought out background can also help differentiate content in creative ways.

08. Less type

The less you can say on your site, the cleaner and more appealing it will look. Let people see your product more and talk about it less. Visually show the data in creative ways. Create whatever it is you are trying to achieve with more visuals and less reading. Remember, interactions speak louder than words.

09. Carry it over

Once the style is set on the landing page, carry every last pixel of that style over to the interior pages. Looking at these interior pages at bird’s eye view, you can immediately tell they belong in a family – but not just any family, a unique one unlike any other.

10. Lifestyle blogging

Let’s face it – the less words, the better. If you can feature a really nice image, especially at a unique size, then let it do the talking first. Let the image say “hello” and the headline give the following important statement: “my name is…” Visual cues work.

11. Support your headline

Add a few supporting lines of text underneath the headline, which helps to describe or set up what you’ll get after the jump on your blogs or features. It’s not always necessary but it’s a nice addition to any headline, especially if you’re not a good copy writer.

12. Type it big

Keep it big and keep it small. What this means is, up that point size and down that word count. Words can be powerful. Cut out all the filler text and add emphasis on the important text by making it larger. Try some new webkit fonts. You can never go wrong with any Helvetica when enlarging a few words.

13. Support Vimeo

…Well, only if you want your videos to look awesome, that is. YouTube videos might get more views, but you can customise a Vimeo player to look and feel just like your site. The simplicity of its player could fit into anything with ease. YouTube, not so much.

14. Huge graphics rule

Why say something in several paragraphs of text, when you can simply just show it? The infographics in this design speak for themselves in their own creative way. Not only do they add visual awesomeness, but you don’t have to read the unnecessary copy. You can never have too many infographics.

15. Footer size small

Big footers are out of style, if they ever were in style. It’s added clutter and content you could easily add somewhere else, like an About page or something. In order to create the best visual site possible, you can’t try to cram everything into one spot. It’ll look like the streets in Time Square – crowded.

16. Bring the noise

It’s always a good idea to keep your elements and styling consistent. An easy trick to that is to add layer style overlays over everything in your PSD. Another trick is to add noise to everything, even the photos you upload as content. Simply add some noise to create some nice subtle texture.

17. Social importance

Don’t flood your site with things like social buttons: ‘500 people like this’-type stuff. Brands only do it for marketing purposes, it actually could hurt your content if you don’t have a large number of followers. Keep it simple with just custom icons on the bottom of every page.

18. Finalise colours

When you started to design, there’s no way you nailed the colours off the bat. Go through the design closer to the end and figure out what’s working and what’s not. Lack of colour is just as important as colour itself. White can stand out more than orange, as it does here.

19. Tad more depth

If you feel your design still doesn’t have enough depth even with the creative background image, try layering smaller images on top of your content. Lay this over even your web fonts. In this case, the surfer’s surfboard barely cruising over the interactive map demonstrates that added depth.

20. Necessary details

Not all details help the creative side of the site. However, in this case, adding creative cues as simple as crossing out the schedule events that already occurred in unique hand-drawn lines, selecting the navigation items with hand-drawn circles and even using subtle hand drawn arrows really adds to your overall feel.

21. Done and done

Looking back at your design from a bird’s eye view again, you should be able to see how you just created a great-looking template that could push some of the limits in WordPress and showcase the true meaning of creative simplicity, speaking through large type, a minimal word count, simple shapes and, most importantly, broken standards.

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 | tech | trends: 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
little unrealistic.

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.

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.

Vector art is usually associated with Adobe Illustrator, but similar effects can be achieved using just Photoshop. The style has a minimalist, modern feel and can help to get a point across quickly, while also creating something that looks unique and clean for web or print purposes. This tutorial looks at how an interesting design with a focused subject matter can be created in under two hours. We’ll turn it into a simplified infographic with stats about the percentages of water, landmass, etc. This tutorial is fairly easy but ideally requires a good knowledge of the Pen tool.
The inspiration for this piece came from involvement in the Gaia 10 project – a community design project with over 5,000 designers looking to help raise awareness of climate change and support the planet. They can be found at www.gaia10.us.

tools | tech | trends: Photoshop CS5
expert: Josh Overton
tutorial files: Download here

01. Set up your file

The first step is to establish the file size that you will be working with. Set your document to the international paper size A3 with a DPI of 300. This is great because you can even print up to A2 posters with this document size at no loss of quality and at the same time save a few megabytes on your computer’s memory.

02. Set your background

Next set up the background colour. We are going to use a pale grey to off-white Radial gradient. For the grey, use ‘c4c4c4’ as the colour and for the off-white use ‘fcfcfc’. Do this in the Layer Style settings box, which can be activated by double-clicking on the layer in the Layers panel. Make the inner colour white.

03. Draw a circle

Now draw a circle for your global warming planet to roughly follow within. Use the Ellipse tool and draw a big circle in the centre of the document. Set the Fill Opacity to 0% and give it a Stroke Size of 3. This way you can see the background through the circle.

04. Bring out the Pen tool

On a new layer start to create the main shapes in the piece. With the Pen tool (see ‘Tools explained’ boxout), follow the circle near the top and draw a shape similar to that in the screenshot. Next look to the Paths tab located by the Layers tab.

05. Paths to shapes

On the Paths tab, you should find your recent path. Simply Ctrl/right-click on it and select Fill Path and then Use: Foreground Color. Now deselect the path and head back to the Layers tab. Hide the circle layer for a better look. Apply a Reflected gradient at 141 degrees, using the colours ‘f9f9f9’ and ‘ededed’.

06. Underlying layer

Now make a new layer, but be sure to place it below the previous layer that you created so that you can draw the 3D effect with your Pen tool underneath. Fill it just as you did before, but this time add a Linear gradient at 90 degrees with the colours ‘a7a6a6’ and ‘ffffff’.

07. Lay the turf

On a new layer located at the top of the list, you can use your circle shape for guidance again and draw in a green element with soft curves similar to the white ice shape from before. You’ll then need to fill this with a Reflective gradient at 133 degrees and the colours ‘9ad429’ and ‘ddf470’.

08. What lies beneath?

As you did with the ice layer, now create a layer under the green shape and, with the Pen tool, draw the under-shading and give it a Linear gradient, this time at -90 degrees, with the colours ‘87bc0f’ and ‘79aa08’. Remember that all colours and degrees provided are just guidelines. Experiment until you are happy with how it looks.

09. Turf’s up – again

On a new layer, and still under the original green layer, you can draw the top part of the green shape. Ideally this should be a flat surface like a lawn. Fill it with a Linear gradient at 90 degrees and with the colours ‘9ddb16’ and ‘d7ff46’. This shape is made to look brighter than other elements as it is receiving more light.

10. Careful: falling rocks

Add a brown shape below the green one to represent rocks. Use a Linear gradient at -70 with the darker colour at the top, indicating it’s overshadowed by the green shape. We will use the colours ‘8d6b50’ and ‘d1bc98’. We’ve aimed to keep the colour scheme light to remain in keeping with the clean vector style.

11. Water, water everywhere

At this stage, you can begin to add the water element. Following your circle guideline, draw a shape for the water towards the bottom. You want to leave a small gap at the base for another ice element (see image). You can use a Reflected gradient at -36 degrees for the main shape, along with the colours ‘33abbb’ and ‘36e6ed’.

12. To the South Pole

Now make a shape that fills the gap left by the water for another ice layer. Use the same colours as the original ice shape but add a third which is blue. Lastly incorporate an effect that looks like ice melting from the bottom of the shape. These will turn into water drops.

13. What a drip

Now make some water drops falling/melting from the tip of the ice. Simply draw them with the Pen tool and use the same colour methods as the water shape, ensuring it has a darker shape placed behind. The last object we need to add is the desert.

14. Hot enough for ya?

For the final shape you can fill the gap between the green and the white elements at the top to add the desert to our planet. Follow the same process as before and use the colours ‘dbc146’ and ‘ecf774’. Now you’ve finished the Earth graphic you can move on to the text.

15. World of words

We use the classic font Futura Lt as it goes well with the simple and clean vector theme in this piece. The bolder font is Geometr706 Md BT, though a bold version of Futura would work equally well. or indeed your chosen web font might be best. Make the colours two variants of grey, light and darker shades for effect.

16. Add the statistics

Finally add the percentage statistics, which are just rough estimates that reflect the shapes as this is a simplified interpretation as opposed to a detail-perfect representation. Last but not least, add a legend next to each category (Land, Water and Ice) to describe the various elements of the image. And that’s it! A powerful combination of vector graphics and statistics created fully in Photoshop.

Transgressing the boundaries into web design, these styles are creating a greater environment for your work. There are no limits, allowing you to construct your own unique experiences. In this tutorial we explore this style and its potential, with the help from its main tool of production – Photoshop. This delivers a gamut of tools and option sets, tailored for a project such as this. Here we’ll explore the potential of integrated photo stock, complemented with options such as layer masks, blending modes, layer palette options and colour adjustment options. We’ll also show you how to create individual elements – from skylines to cityscapes. Manual lighting effects are also explored and add to a process that will let you understand and produce your very own matte backgrounds just like the big studios.

tools | tech | trends: Adobe Photoshop – Layer Masks, Blending Modes, Colour Adjustments, Pen Path, Gradient Overlay, Dodge and Burn tools, Smart Sharpen Filter
expert: Adam Smith
tutorial files: Download here
Originally appeared in Web Designer Issue 177

01. Sketch ideas

Your image will require strong depth of field (DOF) effects, so it needs to be split into background, middle ground, foreground. Best effects will usher the eye to the image focal point (usually in the middle ground), so keep your foreground as simple as possible and backgrounds as your light source.

02. Resourcing stock

Open up a file at the size 1024px by 768px, at 300dpi, RGB. Scour the net for available resources you can purchase or are royalty free. Alternatively, use the royalty-free resources that are supplied on the disc.

03. Introducing background

Begin by constructing the background. This will determine your lighting. Open the Alaskan sunset by Lisa.jpg and select the sea only, Copy>Paste it into your document. Select Edit>Transform>Flip Horizontal, placing it where you want. Open the Great sunset shot.jpg.

04. Second sky

Copy, paste and orientate your skyline from the Great sunset shot.jpg, matching it to light fall in your sea layer. Open and Copy>Paste in Eveningsky.tif skyline. Increase scale, placing to the right of your skyline, matching sunlight areas once more. Set an Overlay Blending mode, 60% Opacity and apply a layer mask, erasing noticeable edges.

05. Blending layers

Fill your background with orange (#ffaa0c) and decrease your first sky layer to 80%. Apply a 60% Overlay Blending mode to your second sky layer, decreasing Saturation to -100. Apply an orange-to-transparent layer style to your sea layer. Set Blend to Hard Light, Opacity at 20%, Angle at -90-degrees and Scale at 56%.

06. Photo filter

Apply a Deep Yellow Photo Filter from the Layers palette. Create new fill or adjustment layer
drop options, at 50% Density. Next, from the same options, apply a Hue/Saturation layer, set to Colorize, Hue at 175, Saturation at 4 and Lightness at -35. Apply a Multiply Blending mode and apply a soft-edged black brush to set layer mask, eking through exposures, leaving borders in shadow (as shown in the screenshot below).

07. Introducing planets

Open the 948573_45038586.jpg (www.sxc.hu), using the Elliptical Marquee tool, set at 2px Feather, to select your planet – Copy>Paste into your image. Descale this planet layer, applying a Screen Blending mode. Use a layer mask to blend edges into the skyline. Open 1197175_45043198.jpg (www.sxc.hu), Copy>Paste> Descale the small planet into your scene as before, no blending mode this time.

08. Shoreline

After following the technique boxout, continue by opening 1269426_80856669.jpg, and make a selection of the sand, copy and pasting and editing from in your image. Open 1272216_33256011.jpg and Cut>Paste a section of where sea meets sand into your image.

09.Colour tweaks

Blend these two layer together by applying a layer mask to the sea layer, tweaking tones and dropping Opacity to 90%. Open 1305771_58743580.jpg and select the Channel palette, hiding all but Blue. Ctrl/Cmd+click this selecting Duplicate. Activate this duplicate and select Image>Adjustments>Levels.

10. Channel palette cut-out

Increase the highlight slider until the background bleeds white. Ctrl/Cmd+Shift+I, inverting, then Ctrl/Cmd+click the thumbnail. Reactivate your RGB Channel then your Layers palette, Copy>Pasting into your image. Rescale and edit edges using layer masks, and fixing colour shifts using a Desaturate Sponge tool.

11. Populate your image

Using these techniques, and using Pen Path selections, Copy>Paste in more foreground elements. As the background is your focal light, the foreground will be a lot darker. Creating this effect is simple. Begin by creating a new layer at the top of your stack, and select a black to transparent gradient style.

12. Gradient shadows

Apply this using the Gradient tool, from the bottom of your layer to the middle. Decrease Opacity to 90%. Duplicate all your foreground objects from step 11, and in Hue/Saturation set Lightness for all duplicate layers to -80. Drop Opacity to 90%, apply a layer mask to each, and erase from edges where light falls.

13. Cityscapes

Selected the cityscape, using the Pen Path tool, from the iStock image 000001964136, placing this in behind your statue layer. Rescale this element and then apply a black-to-white Gradient Overlay from the Layer palette fx options. Set Blend mode to Multiply, Opacity to 75%, Angle at 138˚ and Scale at 66%.

14. Uniform colour and lighting

To create water reflection, duplicate this layer, horizontally flip it, and decrease Opacity to 30%. Paste in several building elements using the images on the CD. Apply black-to-yellow Gradient Overlays, varying option values, keeping Multiply Blend modes.

15. Finishing touches

Include misty mountains in the background. Copy>Paste in iStock 000000578525 and place behind your sky and sea layers. Apply a black-to-white Gradient Overlay, Blend Mode set to Hard Light, Angle at 90˚. Apply a layer mask and erase edges, before merging all and applying a final Smart Sharpen filter.

Create a basic HTML5 page with the new layout tags

How to build a simple and semantic one-page template with HTML5

tools | tech | trends: Photoshop, Adobe Dreamweaver, HTML5
expert: Neil Pearce

This article originally appeared in Web Designer issue 181, you can download the cover CD tutorial files by clicking here

In this tutorial, we’re going to build a one-page template using some of the next-generation techniques from HTML5. Everyone’s talking about HTML5, it’s perhaps the most-hyped technology since people started putting rounded corners on everything. Apparently though, HTML5 won’t be completely supported until 2022, but this is a misconception based on the projected date that HTML5 will reach the stage in the W3C process known as Candidate Recommendation (REC).All this means is that the spec won’t be completely finished until you can use all of it, and in at least two browsers. But don’t let that stop you from using the new tags now – after all, this industry moves so damn fast that it’s nice to be able to stay ahead for once!
HTML5 introduces a bunch of new elements that will make our pages more semantic, cleaner and faster. It also includes fancy APIs for drawing graphics on screen, storing data offline, playing video and a lot more. The web industry is buzzing right now with the introduction of both HTML5 and CSS3, and if you couple that with jQuery (or any other JavaScript library), then you have some very powerful, sought-after skills all ready to take the industry by the scruff of the neck! So open up the supplied PSD design (on the CD) and let’s get cracking…

01 Set things up
Before we jump into Photoshop, it’s always a good idea to create the basic markup first. Open up a new file in Dreamweaver (or your chosen editor), and name it ‘index.html’ and add the new and very simple doctype and head section. It isn’t even necessary for HTML5, but it’s used for current and older browsers that require a specified doctype. Browsers that do not understand this doctype will render the markup in Standards mode.

001 <!DOCTYPE html>
002 <html>
003 <head>
004 <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
005 <!–[if lt IE 9]>
006 <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
007 <![endif]–>
008 <link rel=”stylesheet” href=”styles.css”>
009 <title>Web designer</title>
010 </head>

02 Inside the head
As you can see, the new doctype is much cleaner than what you would have if you were writing HTML4 or XHTML. You will also notice the link to the style sheet is missing its type attribute. This is no longer necessary, as it’s implied that this link refers to style sheets. This is also true for any links to scripts that you may use.

001 <link rel=”stylesheet” href=”styles.css”>
002 <script src=”js/scripts.js”></script>

03 HTML5 shiv
In IE, excluding the newest version (IE9), you cannot apply styles to elements that the browser does not recognise and our new HTML5 elements, in all their glory, are not recognised to CSS rules. This is where Remy Sharp’s html5shiv comes to the rescue.
Simply include the link in your page’s <head> section and you will be able to style the new HTML5 elements without fear.

001 <!–[if lt IE 9]> 
002 <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
003 <![endif]–>

In this tutorial, you will learn how to design a clean and professional-looking WordPress theme in Photoshop. The design used in this tutorial is an actual theme from Themify.me called Bizco. The theme is targeted at business and product-based websites. The homepage features a slider where you can display call of action content. Under the slider, there is a list of icons with text where you can display highlighted content. Then there are several widget columns where users can display latest blog posts, Twitter feeds, recent comments, and text content. This tutorial will provide detailed instructions on how to design a professional Photoshop mockup based on a wireframe sketch. You will also learn several useful design and Photoshop techniques such as creating grids and guides, deining background patterns, organising layers, and using layer styles.

Download tutorial files here

01. Wireframe sketch

Before you jump into Photoshop, it is always best to do a wireframe first. The wireframe doesn’t have to be detailed, it can just be a rough sketch on paper. A wireframe provides a general guideline of the design and it helps to speed up the design process.

02. Custom grid generator

The grid we use in this tutorial is a custom grid created from a generator. Go to http://bit.ly/grid_gen, enter column width 54px, 12 columns, and 30px gutter width. It will give you a total 978px content width, which
is optimised for 1024px displays.

03. Photoshop guides

Run Photoshop and create a new document: 1300px x 1770px. Create a screen capture of the grid and paste it in the middle. Turn on the document Rulers (View>Rulers). Based on the grid image, drag from the vertical ruler to create a three-column and four-column grid.

04. Build the foundation

Fill the first layer with a brown colour (#4a3f31). Add a new layer, make a selection across the document at 395px height, and fill it with a tan colour (#bd915f). Add a new layer, create another full-width selection and fill it with #f8f2e8. Add another layer and fill the bottom portion with a darker brown colour (#423628).

05. Noise background

Follow the technique column for detailed steps on how to create a noise pattern. Double-click on the base
background layer to activate the Layer Style, apply Pattern Overlay with the noise pattern that you’ve created, set the Blend Mode to Multiply and Opacity to 10%. This will create a subtle background.

06. Site logo

Use the Type tool to create a text layer for the site logo and description in white. Our logo text is 30pt bold Arial and the description text is 14pt Italic Times. Apply a light drop shadow to the logo text. Set the description text layer Opacity to 70% so it appears lighter than the logo.

07. Main navigation

Use the Type tool to create the sample navigation text buttons. In our design, we used a rounded box behind the text button to highlight the active state. To create the rounded shape, use the Rounded Rectangle tool with 7px radius. Then apply a light drop shadow and inner shadow to add depth to it.

08. RSS and social buttons

Now we need to add some social media buttons above the main navigation. Use the Type tool to create the text buttons: Twitter, Facebook, Flickr, and RSS. In our design, we only include the RSS icon graphic. If you want to add an icon for the other social media links, go to http://bit.ly/social_btns to download the icons.

09. Slider background

Open the cork_bg.psd file from the CD. Define a new pattern with the cork image. Go back to the Bizco PSD, apply a Pattern Overlay layer style to the slider background layer. Create a new layer, colour #dec3a8, with the Gradient tool select Foreground to Transparent, and drag from the bottom to top. Set the Blending Mode to Multiply.

10. Feature image

Since our theme is about WordPress design, we have chosen two screenshots of our themes as the feature
image. You may use any image you want (including samples of your own work). To create cast shadows behind the image, first create a flat oval shape and then apply Gaussian Blur (Filter>Blur>Gaussian Blur).

11. Text and button

Create a sample heading and text block with the Type tool. In our design, the heading font is 32pt bold Arial and the text block is 15pt Arial. Draw a rounded button shape with the Rounded Rectangle tool (8px radius). Add Gradient Overlay and Drop Shadow layer style to the button. Then use the Type tool to add the button text.

12. Slide indicator

Now we are going to create some buttons to indicate the active slide. Use the Ellipse tool and draw three small circle shapes below the feature image. Fill the shape with a grey colour and 2px stroke layer style. We need to create three different states: the darker colour is for active state, the middle tone for the hover state, and the lighter colour is the normal state.

13. Navigation arrows

For the slide arrows, it is easier to create the shape in Adobe Illustrator (or you may use Photoshop Pen tool). In Illustrator, create the arrow stroke, select Round Cap and Round Join in the Stroke palette. Expand the shape (Object>Expand) and paste the arrow shape in Photoshop as a layer shape and apply a Gradient Overlay and 20% black 3px stroke.

14. Content area background

Now it is time to work on the content area. Double-click on the content area background layer to activate the Layer Style and apply drop shadow with the following settings: 50% Opacity, 90-degree Angle, 1px Distance, and 6px Size. Add a new layer, use the Gradient tool to create a white gradient to highlight the top portion.

15. Welcome message

With the Type tool selected, create a 870px text box in the middle. You may type in a welcome message or use
Lorem Ipsum as a sample text if you wish. Set the font style to 24pt Italic Times with a central alignment. Then create a 1px stroke below the welcome message in order to slightly divide the content.

16. Highlight items

Turn on the guides, these will help you structure your page. Follow the three-column grid, put an icon along with the text box in each highlight item. You may use your own icons or the sample icons that have been supplied on the cover disc. Repeat this step to create six highlight items. Then create a 1px stroke below the
highlight items as a divider.

17. Latest blog widget

Now you need to design a widget mockup for the latest blog posts. Turn on the guides. Follow the four-column grid, have the latest blog widget spanning two columns. Use the Type tool to create the headings and text boxes. Create a 1px stroke to separate each item.

18. Twitter widget

Next to the latest blog widget, you are going to create a one-column grid to display the Twitter feeds. Follow
the guides, use the Type tool to create the sample tweets. You may use Lorem Ipsum as you want. Again, separate each item with a 1px stroke.

19. Text widgets

On the last column, you want to use it to display some short text content. Create two text blocks as shown in the screenshot above. After you have done that, you should have: two-column span latest blog widget, one-column Twitter widget, and one-column of text widgets.

20. Footer background

Select the footer background layer and apply the same noise pattern as you did earlier in the base background. A simple shortcut would be: right-click on the base background layer and select Copy Layer Style, then right-click on the footer background layer and Paste Layer Style.

21. Wrapping up

Since the steps are very repetitive, we are not going to go through the details on designing the footer widgets. In the footer, you should have three columns of widgets: Recent Posts, Recent Comments, and About Us text widget. Feel free of course to go your own way and be inspired to produce more unique variations.

Author: Nick La

The purpose of this tutorial is to transform a Photoshop document into a working web interface. We are going to focus on exporting ready-made imagery and working it into a structured HTML document with additional CSS styling. Photoshop plays a very important role in web design and is favoured by most web designers. Although with CSS3 now in the mix people are under the assumption that we don‘t need to rely on Photoshop as much as we did in the past, this is not the case since CSS3 is not fully supported in all browsers as of yet, which means we won‘t be putting Photoshop to bed for a while. It will have its role in web design for a long time to come as it is such a great tool for creating graphics. The more conident you become at transforming your Photoshop documents to HTML the easier you’ll ind it and realise the two go hand-in-hand in the world of web design.

Author: Lee Grant | Tutorial Files

01. Getting started

To start you’re going to need to create a new folder and give it a name, something like ‘website’ will do. Now inside this folder create two more, named ‘images’ and ‘css’. This is where you will be saving all of your files and assets which you will eventually create from this tutorial.

02. Cut the logo

Open up your Photoshop document and set each group and any layers not contained in a group to invisible by clicking the eye icon beside the layer. Be sure to leave the ‘logo’ group visible. Click Image>Trim then trim away any transparent pixels and save your image as logo.png to your images directory.

03. Background image

The next step will be to crop the background image down to size, so set all groups to invisible (done using the eye icon which can be found next to the folder) except the background image. You then need to crop from the top of the page to about 300 pixels down and roughly 10-15 pixels wide, and then save this as a .png.

04. Some XHTML
Now you have the structure for your folders set up, move on to some xhtml to prepare the header section so you can place your images in once ready. So next open up Dreamweaver (or your favourite text editor) and copy the following code into a new index. html and save this to your ‘website’ directory. The full code for this step can be found on the disc.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type”content=”text/html; charset=utf-8” />
<link rel=”stylesheet” href=”css/style.css” media=”all” />
<title>PSD to XHTML</title>

05. Welcome box image

Back in Photoshop, extend your ‘welcome box’ layer by clicking the arrow icon, you need to set the dummy paragraph to invisible by clicking the eye icon. Now crop from the top left all the way to the right and leave about 5px from the bottom and save this image as welcome-bg.png.

06. Welcome box small image

Follow the same process as step five, but this time you will need to crop from the bottom of your welcome box upwards. So select the Crop tool and crop from the bottom of the box up to around four or five pixels high. You can then save this image as welcomebg- bottom.png.

07. Let’s style
The markup and images are all set up now for the heading section of the page so all you need to do is add some styling to add some colour and position your elements properly. Open up Dreamweaver and create a new .css file and insert the following code (which is included in full on the disc). Once done save the file as ‘style.css’ and place it in the ‘css’ folder.

body { margin:0; padding:0; font-family:
Arial, Helvetica, sans-serif;
font size:12px;
color:#959595;
background: #ececec url(../ images/bg.png) repeat-x; }

/***** NAVIGATION *****/
#nav_container { backgroundcolor:#373737;
width:100%; }
#nav { width:950px;
height:40px;

08. More html
Next you need to add some more html to the index.html document, this will essentially place all of the different elements on the page to which you will then
need to slice up your thumbnails in Photoshop and add CSS styles to position the new divs. The full code for this step is included on the disc.

<div id=”services_holder”>
<div id=”services”>
<div class=”services-block”>
<img src=”images/social.png”alt=” Socialmarketing” />
<h2><a href=”#”>Social marketing</a></h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s

09. Slicing the thumbnails

Open up your Photoshop document again and select the Crop tool. You now need to crop down the first thumbnail image being extra careful to not crop out any of the drop shadow, so it is best to allow roughly five pixels around the edges and considerably more at the bottom.

10. Service block styling
With all of your images and markup in place, the page isn’t much to look at. You can fix all of this with the help of some CSS. You can float each containing div to the left which will position your divs side-by-side. Full code for this step can be found on the disc.

/***** ABOUT *****/
#about_container { background:#ececec url(../images/about-line.png) repeat-x; ~
width:100%;
padding-bottom:25px; }
#about { width:950px;
margin:0 auto;
padding:25px 0 0 0; }
#about_me_box { width:479px;
background:#000 url(../images/aboutbg.png);
padding:60px 10px 0 10px;
float:left;
position: relative; }

11. HTML  divs
Again you can insert your markup into your html document with all of your image tags in place ready to crop down the images afterwards. Notice that
we use empty divs with the class “clear” in our markup, these are essential as they play a part in keeping divs in position. The code for this step is on the disc.

<div id=”about_container”>
<div id=”about”>
<div id=”about_me_box”>
<p>Lorem Ipsum is simply dummy text of
the printing and typesetting industry.
Lorem Ipsum has been the industry’s
standard dummytext ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a type
specimen book.</p>
<p><span><a href=”#”>Go on … read more</
a></span></p>
<img src=”images/about-bg-bottom.png”
alt=”About bottom” /> </div>
<div id=”blog”>
<img src=”images/thoughts.png” alt=”My
thoughts” />

12. About box background

You can use the same technique here as you did for cropping the background for the welcome box. Switch over to Photoshop and select the “About me
box” group, crop from the top left to five pixels from the bottom, save this image then hold Ctrl/Cmd+Z to go back, this time crop the bottom of the image and save as a new image.

13. Blue button
For the button you need to create two images, so in Photoshop hide the layer over the button which contains text. Crop from the left of the button to the
right, leaving about ten pixels to the right. Save this image and press Ctrl/Cmd+Z to undo, and crop from the right to the left leaving ten pixels and save this image.

14. Blog title image

You have a little bit more cropping to do before you can close up the Photoshop document. In Photoshop select Crop from the Tools palette, and crop
out the text which says “My thoughts…” and save this to the images folder as thoughts.png.

15. Social networking buttons

All you have left now is to crop the social networking buttons and you’re all done, so select the Crop tool again and crop around each of the buttons
individually and save them to the images folder. You can see in the illustration how to do this.

Page wireframes from rough concept to Fireworks mockups

Wireframes are a simple and effective technique for exploring your layout options and demonstrating your concepts to clients

Documenting your initial layout ideas can save projects time and money, without having to invest a lot of time and effort. When working in teams, designers can do their thing while programmers can get on creating the functionality. In that situation it’s important that the front and back ends meet up without any surprises. By documenting your layout and interface ideas with wireframes, splitting tasks up between different people becomes much easier.
Wireframes are also really simple to understand so clients can get an idea of structure without being distracted by colour and branding. By separating the visual styling from the interface, you can focus on how users will interact with the site functionality and content rather than how good it looks, which can help designers avoid generic designs.
In this tutorial we’ll create a homepage wireframe for a restaurant website and translate that into a design.

This article originally appeared in Web Designer issue 170, authored by Jo York. You can download the tutorial files by clicking here

01 Capture requirements

Let’s work out what elements are going to go on the page. Start by listing the aims and objectives of the site, as well as any nice interface elements or features that you want to add. In this case we’ll add a rotating banner with special offers and new dishes, and an interactive Google map for the location.

02 What’s important?

After you’ve made your list of what’s on the page, number them in order of priority. Cut them out if you prefer and move the order around until you’re happy and then number them. Identify what you want the user to do and tell them, ie ‘Order Take Away’. These are referred to as calls to action, mark these on our list.

03 Start sketching

We are going to mark out the key content areas of our page and fill in the detail later. Begin by sketching the outline of your page and then add a representation of the logo and a box to show the top-level navigation. Drawing out a rough sketch now will help you see which layout works best before you start developing.

The inspiration behind this tutorial comes from the chatty frenzy and on-going activity in ‘social land’ that’s so prevalent today (think MSN, text messages and Twitter). A mixture of plant-like drawings and geometric shapes suggest a festive mood, while the speech bubbles reinforce the theme of conversation. The colour palette evokes a sense of zaniness like the antsy feeling from reading a juicy story or hearing the breaking news from a trusted friend. Bright pink, red and moss green add to the craze, while a navy blue background sets a more stable tone so things don’t get too crazy.
The first part of the tutorial is created in Illustrator and the second in Photoshop. Although the final working file is a .psd, both the .ai and .psd files are created in a way so that each layer contains one element and is named according to its content. Some of the resources we’ll use along the way are from www.mayang.com/textures and www.cgtextures.com.

The article was originally authored by Wendy Ding and printed within Web Designer issue 168. You may download the companion project assets by clicking here

01 Background begins

In Illustrator, create a new document at 8.5-inches by ten inches. Use the Rectangle tool to create a rectangle in the same size in a navy blue colour – this will be the background. Add a new layer above and create a thinner rectangle in beige – this will be the ‘paper’ that holds the main content.

02 Bubbles in the head

On a new layer, draw a speech bubble with the Pen tool and hit Alt/Option+Drag for numerous duplicates. Resize and rotate each one so none are identical. Right-click>Transform>Reflect to flip horizontally or vertically. Apply colours in red, burgundy, pink and mauve. Make sure they overlap to create a sense of overcrowding.

03 Bubble patterns

Turn the grid on with Ctrl/Cmnd+“. Zoom in very close. Next, create a square spanning across four grids with the Rectangle tool. Click Shift while dragging to make it completely square. Create a circle using the Ellipse tool on the centre points of the first and fourth quadrants inside the square.

04 Colour the circles

Decorate each circle with different colours and apply no fill and no stroke to the square. Select everything and drag it into the Swatches panel to make it a pattern swatch. Click on a bubble and in Window>Appearances, add a new fill and select the pattern swatch. This remains editable in the Appearances panel.