Create a Welcoming “Hero Unit”: New on Premium

Blurred background images are a hot trend in webdesign at the moment and can add depth and interest to any website design. In this Premium tutorial, I’ll be walking you through all the steps to create a striking visual hero unit (read: your key marketing message) perfect for a slideshow or banner region of your next website.

Become a Tuts+ Premium member to gain access to the whole tutorial, as well as hundreds of other advanced videos, tutorials, and courses.

You’ll Learn How to:

Let’s take a moment to review some of the key techniques that we’ll cover in this tutorial:

• Smart Filters: For the background image, we convert the image to a smart object and apply a Gaussian Blur as a smart filter. This allows non-destructive manipulation of the image and allows the filter to be completely editable at any time.
• Vector Masks: To allow non-destructive editing, we’ll use a vector mask to remove a section from the ‘glass panel’ that the button is nested in. Now, at any stage if we decided to change the size or the shape of the button, we can easily make the changes to the vector mask to accommodate the new button shape.
• Layer Masks: We’ll use layer masks several times throughout the tutorial, including to mask the glow layer and the line separating the call-to-action text and the hand icon. Layer masks are one of the key techniques that you will use all the time in interface design!
• Color Independent Layer Styles: When creating the button, instead of controlling the color of the shape with a gradient overlay, we’ll set the color of the shape with the fill itself. This allows us to change the color of the button in one place only.

..and a whole load more besides..

Tuts+ Premium

The recently re-launched Tuts+ Premium is a service that provides top-tier training in a variety of creative fields. Whether you prefer books, visual training, or in depth tutorials, we have you covered. While we unfortunately can’t afford to provide the service for free, it’s only $19 a month – less than you’d spend on dinner.

We hope you’ll consider checking it out! In addition to learning a huge variety of new skills, it’s also a fantastic way to say thank you to Webdesigntuts+.