Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
19th September 2012

Fresh frontends with Photoshop CS6

Discover Photoshop techniques and styles to maximise the impact of portfolio landing pages.

Fresh frontends with Photoshop CS6

Photoshop has always had a great knack for tailoring its toolsets to allow for cross-platform creation. From CG textures to grid layouts for web, Photoshop has forever strived to be the ultimate creative package, whichever end of the production scale it’s being used. With the launch of CS6, Adobe is looking at its most inclusive production suite to date. Here we look at the toolsets that can be employed to further improve front-end web aesthetics.
We’ll not only be concerning ourselves with the ‘pretty bits’ but also professional upgrades to existing tools, which look to advanced automated options to operate far more intuitively.
Sure, we’ve only cherry-picked some of the best bits to suit our web-design needs, but there’s always more you can do in Photoshop, with much still to explore in this latest iteration. For more information you can head to www.adobe.com.

New interface

Fresh frontends with Photoshop CS6

First establish the colour theme of your Photoshop interface, which is easily done by pressing Shift+Fn+F2 to lighten the Photoshop UI or Shift+Fn+F1 to darken interface elements. This ranges from Dark Gray to Light Gray. You can also apply these in the Preferences>Interface settings. Dark Gray is our preferred choice, as it creates a more immersive working environment.

Shape tool settings

Fresh frontends with Photoshop CS6

Of course, the Photoshop Shape tool is nothing new, but in CS6 it has been radically evolved. For instance, applying a Rectangle Shape tool to your layout grid, you’ll notice that the above menu has changed, now with applicable Fill and Stroke options. These effects are live at all times, so are instantly editable.

Shape Fill options

Fresh frontends with Photoshop CS6

Select your Swatches palette and then, from the fly-out menu, choose Replace Swatches>Onepager Swatch.aco, included on the cover disc. Next, click the Shape Fill options. The new options menu lets you apply solid colours, patterns and gradients, as seen here. We’ve set a Charcoal to Milky Gray colour scheme, from the Onepager Swatch swatch.

Shape layer options

Fresh frontends with Photoshop CS6

In the Shape Fill options you set the basics for your gradient, but by double-clicking your shape layer you can tweak effects further – in this case in the Gradient Fill dialog. Here we’ve evenly spread our gradient more by upping the Scale to 190%, with Style set to Linear, using the Move tool to reposition.

Stroke settings

Fresh frontends with Photoshop CS6

Use the Rectangle Shape tool to create a navigation bar at the foot of the first grid section. Select the Fill options, choosing Solid colour>Charcoal. This replaces your previous gradient, making the following effect clearer. Select Stroke, where you have a choice of three styles. We’ve applied a white solid line, at 0.10pt in size, with Align set to the outer shape icon.

Cut in effects

Fresh frontends with Photoshop CS6

Back in your navigation bar Shape Fill options, select Gradient again. Set your colour from Charcoal to Black. Open the layer Gradient Fill dialog and change the Scale to 200% before moving up your gradient to create an inner shadow. This effect, popular across the web, is now so much faster to apply with the new CS6 Shape options rather than with previous bitty layer style techniques.

Switch on the lights

Fresh frontends with Photoshop CS6

We’ve applied a 100px Radius Rounded Rectangle Shape tool, with Gradient Fill options, to add our button to the navigation bar. Next, duplicate the background layer, Ctrl/right-click>Rasterize and go to Filter>Render>Lighting Effects. This is another option set that is much simpler to use than before, now with intuitive handle-based settings and full-screen renders.

Fresh frontends with Photoshop CS6In the Spot light

In your settings, set the light type to Spot, Color to Blue and its Intensity to 55. We’ve also increased the Hotspot, which is the central line area, to 95. Use the control handles to Scale Length and Scale Height as per the screenshot. Once you’re satisfied, hit OK.

Filter settings

Fresh frontends with Photoshop CS6

This applied lighting effect is to create a drop backlight. To finish the effect, reduce the layer opacity to around 50%, Fill to 70% and select Filter>Blur>Motion Blur; set the Distance to 1,350px. Next, apply Filter>
Noise>Add Noise, setting the Amount at 12% and Distribution to Uniform. This will now give you a really good base from which to present your logo and text.

Lines and fonts

Fresh frontends with Photoshop CS6

Understanding the Shape tool’s options you can apply your text, and produce some interesting line design with the Stroke settings. We’ve applied the Line tool with a solid Milky Gray fill and Charcoal stroke, at a size of 5pt, with a dotted-line style. The next new option may not seem wholly relevant to web design, but when working with text and especially logo types the CS6 3D options can be very advantageous.

Another dimension

Fresh frontends with Photoshop CS6

The 3D option isn’t one that might immediately spring to mind for web design, but in Photoshop CS6 it’s very easy to pick up and can be a great aesthetic asset. Select 3D>New 3D Extrusion from Selected Layer to open the 3D plane interface. You may just want a standard effect, so the Extrusion Depth in the Properties settings is useful, as is Bevel in the Cap settings.

3D controllers

Fresh frontends with Photoshop CS6

The X and Y Move handles are also great for rotating, rescaling and repositioning items in your design. Each section of your green, blue and red arrow controls a single function, so it’s best to scroll over and check out the screen prompts to see which does what. There’s also an Infinite Light Source that can be repositioned once activated, so it’s super-easy to sync with any prior lighting effects.

Ray-trace render

Fresh frontends with Photoshop CS6

Choose the 3D>Render option, which – with ray-tracing technology – will produce a very high degree of visual realism. Such outstanding automation is frequent throughout all Photoshop CS6 tools, leading us to our next example: Paragraph Styles. With our visual hook established in the opener, we’ll use this option to lay down our site’s body text fast.

Type made easy

Fresh frontends with Photoshop CS6

The Paragraph Styles options is easily activated through the Workspace preset option in the interface. Select the Type tool, dragging and creating an area, then select Type>Paste Lorem Ipsum. This throws down dummy text to work with. Next, Click on the Create a New Paragraph icon. Here you can set leading, indents, spacing after, plus many more structural options.

Perfect presets

Fresh frontends with Photoshop CS6

All you need to do is experiment with the layouts you want, all saveable to presets. This enables web designers to repurpose text templates in existing and subsequent projects, simply by activating a preset and re-applying Paste Lorem Ipsum. Character Styles presets complement Paragraph Styles, for rapidly changing the font or colour of headings, logos, etc.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.fmrwebdesign.com Raja

      Nice overview! I haven’t used CS6 yet, hopefully I’ll get it soon. I’m excited about the 3D features.

    • mina

      it’s seems really great features that I haven’t used yet. thanks for tutorial

    • http://www.wowapic.com/ Leah

      WoW ! This really looks amazing, thanks for the wonderful tutorial. Thanks a lot for sharing