Create a Welcoming "Hero Unit" in Photoshop
Blurred background images are a hot trend in webdesign at the moment and can add depth and interest to any website design. In this 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.
In this tutorial we'll be focusing on using non-destructive, editable and scalable photoshop techniques wherever we can including smart filters, masking and vector shapes. While it can be a little more work, taking the time to ensure that your final product can be fully edited to respond to future changes is well worth the effort.
Ready to jump in? Fire up Photoshop and let's get started.
We'll be using a number of resources that are not included in the source files.
- Toronto City Hall (1024px x 768px) by Paul Bica
- Wisdom Script by James T. Edmonson
- League Gothic by The League of Movable Type
- The "retro_hand" .csh file in the source files was adapted (unmodified) to Photoshop from the Free Retro Icon Set by Designmoo
Note: Photoshop CS6 was used to create this tutorial, however it's not required to achieve the final result, you can use previous versions without any problem.
I'm also on a Windows OS, so I'll be sticking with Ctrl and Alt to describe shortcut keys. On a Mac, Ctrl → Command and Alt → Option.
Step 1: New Document
Let's start by setting up a new document and setting our global light for all of the layer effects.
Set the Global Light to an angle of 90° and an altitude of 45° (Layer → Layer Style → Global Light).
Note: In user interface design, you'll find that the Global Light is often set at 90°, so changing the global settings before you start with a new UI project a good habit to get into!
Create a new document with dimensions of 960px x 568px (a 16:9 ratio) and Background Contents of transparent.
Step 2: Background Image
Next, we'll import our background image and resize it to fit the new document.
Open the Toronto City Hall image in a new document and change the image size to 960px x 720px (Image → Image Size).
Select the entire image (Ctrl + A), and copy it to the clipboard (Ctrl + C). Return to our new document and paste the image into a new layer (Ctrl + V).
Using the move tool (V), drag the image up to align the bottom edge of the image to the bottom of the document.
Name this layer 'city hall'
Step 3: Add Smart Filter
Duplicate the 'city hall' layer by right clicking the layer in the layers panel and selecting 'Duplicate Layer'. Rename this new layer 'city hall blur'
Next, we'll be adding a smart filter to the layer. To do this, we need to convert the 'city hall blur' layer into a smart object.
Right click the 'city hall blur' layer and select 'Convert to Smart Object' from the menu.
Let's add a Gaussian Blur to our background image to give it that 'through the coffee shop window' look: (Filter → Blur → Gaussian Blur). Give it a radius of 14.0 pixels.
Note: This is the first of our non-destructive techniques that we'll be using today. You'll note from the image above that the Gaussian Blur has been added as a 'Smart Filter' and is not applied to the image itself. That means that we can change the settings, add additional smart filters or remove the effect altogether — all without damaging the original image.
Another thing to note is that if you toggle the visibility of the 'city hall' layer, you'll notice some transparency shining through at the edge of the image due to the blur effect on the 'city hall blur' layer. Leaving the 'city hall' layer visible smooths out the edges nicely.
Step 4: Lighten up!
As it is, the image is a little dark. Let's lighten things up and give it a luminescent feel by adding a new Curves adjustment layer (Layer → New Adjustment Layer → Curves) and dragging the center handle up and slightly to the left, as shown above.
Great work — that's the background all finished. Let's take a moment to move these layers into a new group (Ctrl + G) called "Background" to keep the Photoshop document nice and neat.
Step 5: Bottom Glass Panel
Create a new layer called 'bottom glass panel' and use the marquee tool (M) to create a rectangular selection 960px wide and 120px high. Fill the selection with white (#ffffff) (Ctrl + Bkspace).
Double-click the layer to open the layer effects and apply the following settings:
In Blending Options, set Opacity to 27% and Fill Opacity to 0%
Set an inside 1px stroke, color #cecece.
Set a white (#ffffff) inner shadow with a Blend Mode set to Linear Dodge (add) and an opacity of 15%. Set the distance to 1px and the size to 6px.
Set a 90° linear Gradient Overlay that ranges from #787878 at 0% to #ebebeb at 100%. Change the blend mode to Luminosity and set the opacity at 55%.
Step 6: Vector Mask
The glass panel looks good, but we need to take a portion away from the top to allow room for our call-to-action button. To do this, we're going to be using a vector mask — another non-destructive and editable photoshop technique.
Open the Paths window (Window → Paths) and click the 'Create New Path' icon at the bottom of the panel.
Rename the new path 'panel mask'.
Using the shape tool (U) set to Path, create a rectangle 960px x 120px at the bottom of the document, covering our 'bottom glass panel' layer.
Now, set the shape tool to 'Subtract Front Shape' and draw a rounded rectangle 420px x 100px with a 50px radius.
Once you have the two paths, select them both with the direct selection tool (A) and holding Shift as you click each path. Use the alignment tool to align the horizontal centers, and nudge the rounded rectangle into place so that its vertical center points meets the top edge of the rectangle, as shown above.
Make sure that both the 'bottom glass panel' layer is selected in the layers panel and our 'panel mask' path is selected in the Paths panel.
At the bottom of the paths panel, click the 'Create New Mask' icon once to create a layer mask and then click it again to create a vector mask that takes a scoop out of our bottom glass panel. Your layers panel should look like the image above.
Note: Because we've taken the time to use vector paths to create our mask instead of using a raster image, we've given ourselves the ability to change, edit, add, delete and scale our mask at any time without losing quality at any stage.
If everything has gone to plan, your work-in-progress should look something like the image above.
Step 7: Button Background
Next, we'll create a background for our button.
Create a new layer (Ctrl + Shift + N) and name it 'button background'. Using the shape tool set to 'Shape', create a rounded rectangle 410px x 90px with a corner radius of 45px. Set the fill to #ffffff.
Center the shape in the middle of the 'scoop' — leaving 6px between the bottom of the shape and the top edge of the 'bottom glass panel'.
Open the layer effects panel for the 'button background' layer and set the following layer styles:
In Blending Options, set the Opacity at 20%, the blend mode to Normal and the Fill Opacity to 30%.
Set the inner shadow to a Linear Burn blend mode (#000000) with an opacity of 9%. Set the Distance to 1px and the size to 0px.
Set a drop shadow with a blend mode of Linear Dodge (Add), (#ffffff) and the Opacity at 34%. Set the distance at 1px and the size at 0px.
Step 8: The Button
Next, we'll start work on the button itself.
Create a new layer called 'button main'. Draw a rounded rectangle using the shape tool set to 'Shape' 390px wide by 70px high and a corner radius of 35px. Set the fill to #007dba.
Align the vertical and horizontal centers of the 'button main' and 'button background' layers.
Open the layer effects panel and apply the following settings:
Set a 1px inside stroke with a blend mode and a 90° linear gradient that runs from #000000 at 0% to #ffffff at 100%
Set an Inner Shadow (#ffffff) with a Blend Mode of Linear Dodge (Add) and an opacity of 7%. Set the distance at 2px and the size to 1px.
Add a #ffffff Color Overaly set to a Linear Dodge (Add) Blend Mode and dial the opacity down to 13%.
Set the Gradient Overlay with a Blend Mode of Linear Burn, an opacity of 24% and a 90° linear gradient with #000000 at 0% and #ffffff at 100%.
Set the Drop Shadow with a Blend Mode of Multiply, an opacity of 30%, #000000 and set the distance at 2px and the size at 4px.
Note: You may have noticed that we didn't set the gradient overlay as dark blue to light blue (which would have resulted in a similar effect). The reason for using a shape and the black to white linear burn gradient is that we can now change the color of the button very easily by changing its fill. Try it now and experiment changing the fill to another color.
Step 9: Make Some Noise!
To add some texture to the button, we will add a noise overlay.
Create a new layer and name it 'noise'.
Select the entire document (Ctrl + A) and fill the background with #ffffff (Ctrl + Bkspace).
Ensuring that your foreground is set to black and your foreground is set to white (D), add 200% Uniform noise, ensuring that the 'Monochromatic' check box is ticked (Filter → Noise → Add Noise...).
Select the 'Noise' layer and set it as a Clipping Mask (Layer → Create Clipping Mask), which confines the noise only to the button shape.
Set the Blend Mode of the clipping mask to Multiply and the Opacity to 5%.
Step 10: Highlight
The next step is to add a small highlight to the top of the button (it's the little things that count).
Duplicate the 'button main' layer and drag it above the noise clipping mask. Set the fill to 0%.
Right click the new 'highlight' layer and clear the layer styles by selecting 'Clear Layer Style'.
Open the layer effects panel and apply the following settings:
On the Blending Options screen, tick the "Layer Mask Hides Effects" checkbox.
Set a 2px inside stroke set at 0% opacity.
Note: This effectively 'insets' the following layer style away from the edge of the button.
Set an Inner Shadow with a Linear Dodge (Add) Blend Mode, set to 18% Opacity and using #ffffff.
Set the distance at 4px and the size at 4px.
Select the 'highlight' layer and add a new mask (Layer → Layer Mask → Reveal All).
Using the gradient tool, draw a linear gradient across the button, as shown above. Set the gradient using three #000000 stops, with the 50% stop set at 0% opacity.
If you've followed closely, your button should now look something like this:
Step 11: Glow Effect
Without a light source, our highlight looks a little out of place. We'll add in a nice glow effect to lift the button and the background.
Create a new layer and name it 'glow'.
Using the gradient tool (G) set to radial and white to transparent, draw a large white gradient over the button as shown in the image above.
Make a marquee selection by Ctrl + clicking the 'button background' thumbnail in the layers panel.
Create a layer mask (Layer → Layer Mask; → Hide All).
Finally, change the blending mode of the 'glow' layer to Linear Dodge and 50% opacity.
Step 12: CTA
Now that the button shape has been created, let's add in some call-to-action text.
Using the handles of the button shape as reference points, drag out three guides as shown to help you position the text and icon shapes of the button.
Using the Type tool (T), enter in your text in the League Gothic font with a kerning of 60, font size of 14pt and a color of #dce2e5
Set the text to the left guide and align the text to the vertical center of the button shape.
Open the layer effects window and apply the following effects:
Set a white Inner Shadow (#ffffff) with a Blend Mode of 'Lighten' and an Opacity of 100%. Set the distance at 1px and the size at 0px.
Set the drop shadow to a Blend Mode of 'Color Burn', a color of #00022a and an Opacity of 24%.
Set the distance at 2px and the size at 1px.
Step 13: Button Icon
To finish the button, we need to add the icon and a dividing line. Let's start with the icon.
Select the custom shape tool (U), click the settings button and select 'Load Shapes'.
Navigate to the 'retro_hand.csh' file supplied in the resources and load it to your current shapes list.
Create a new layer and name it 'hand icon'.
With the hand shape selected, and ensuring that the 'Defined Proportions' setting is applied, draw out a shape 19px high and 34px wide.
Fill the shape with the color #dce2e5.
Open the layer effects panel and apply the following effects:
Set an inner shadow with a blend mode of Lighten (#ffffff) with a 100% opacity. Set the distance at 1px and the size at 0px.
Set the Drop Shadow with a Blend Mode of Color Burn using a color of #00022a and an opacity of 24%. Set the distance to 2px and the size at 1px.
Step 14: Button Line Detail
The next step is to add a line that separates the icon from the text.
Draw a 1px x 70px black line using the shape tool (U) and position it in the center of the space between the text and the hand icon (use the info panel to help you here).
Apply the following layer styles:
Set the Fill Opacity of the shape at 0% and tick the 'Layer Mask Hides Effects' checkbox.
Set the Color Overlay to a color of #044b71, a Blend Mode of Overlay and an Opacity of 73%.
Set the Gradient Overlay to a 90° linear gradient with #000000 at 0% and #ffffff at 100%. Set the Blend Mode to Linear burn and reduce the Opacity to 9%,
Set the Outer Glow to #ffffff, the Blend Mode to Screen, the Opacity to 26% and the Size to 1px.
Next, we need a layer mask to fade out the harsh edges of the line.
Add a layer mask to the 'line separator' layer by clicking the 'Layer Mask' icon at the bottom of the layers panel.
Using a soft black brush (Size ~55px and 0% hardness), paint away both ends of the line. You'll be looking to create a subtle fade effect. The areas in red in the image above can be used as a reference.
Great! We've now finished our button. Let's take a look at what we've created so far:
Before we move on to the final steps of the project, let's take a moment to ensure that all of our layers are nicely named and grouped.
Your layer panel should look something like this:
Quick Tip: Want an easy way to collapse all of the layer effects for each layer? Group the layers and on the topmost layer, Alt +Click the arrow next to the fx icon. All the layers effects beneath it will also collapse — a great way of keeping your layers panel manageable!
Step 15: Typography
Let's move on to the typography component of the project.
Using the Type tool (T), enter the text as two separate layers with the settings shown above.
Draw out two guides, one at 130px from the top of the document and the second at 258px. Position the top edge of the text layers to the guides.
Select both layers in the Layers Panel (Ctrl + Click), make a selection of the whole document (Ctrl + A) and align the horizontal centers (Layer → Align Layers to Selection → Horizontal Centers).
Now, open up the fx panel for the 'Professional Services' layer and add the following effects:
Set the Inner shadow with a Blend Mode of Multiply, a color of #585858 and an Opacity of 54%.
Set the Angle to 135° (making sure that Global Light is unticked), and set the Distance at 1px, Choke to 100% and the Size to 0px.
Set an Inner Glow with a Blend Mode of Screen, an Opacity of 59% and a color of #ffffff. Set the Choke to 100% and the size to 1px.
Set the Gradient Overlay with a Blend Mode of Linear Burn, an Opacity of 18% and an Angle of 90°. The gradient itself is black → transparent black.
Set a Drop Shadow with a Blend Mode of Linear Burn, a color of #000000 and an Opacity of 24%. Set the Distance to 2px, the Spread to 8% and the Size to 3px.
In the layers panel, hover over the fx icon of the 'professional services' layer, hold Alt + Click and drag the icon onto the 'exceptional prices' layer to copy the layer style.
Step 16: Finishing the Type
We're on the home stretch now! Let's complete the typographical element of the project.
Create a new layer and add the word "At" with the Type tool. In the Character panel, set the font to Wisdom Script AI, the font size to 12pt and the color to white.
Select all three text layers in the layer panel (Ctrl + Click), switch to the Move tool (V), and use the alignment options in the properties bar to center the layers (Align Horizontal Layers) and then add an even amount of space in between the three lines of text (Distribute Vertical Centers).
Open up the layer effects panel and apply the following effects:
Change the Fill Opacity in the Blending Options panel to 42%.
Add a white (#ffffff) Inner Shadow with a Blend Mode set to Screen and an Opacity of 22%. Set the Distance to 1px and the Size to 0px.
Add a 90° linear Gradient Overlay (#ffffff → #dedede) with a Blend Mode set to Linear Dodge (Add). Wind down the opacity to 16%.
Add a black drop shadow set the Linear Burn and an opacity of 8%. Set the Distance to 1px and the Size to 0px.
Step 17: Tie Things Together
Now, let's add some decorative shapes to the text section of the project to tie together all of the elements.
Drag out four new guides from the ruler (If you can't see the ruler, select View → Rulers) and align them to the edges of the text, as shown above.
These will help us align our bars in the following steps.
Create a new layer called 'left bars'.
Center-aligned to the cross-bar of the 'A' in the 'At' text layer, draw out a rounded rectangle 275px wide by 4px high with a corner radius of 4px. Set the fill to white (#ffffff).
Ensuring that the shape components setting is set to 'Combine Shapes', draw out two more identical shapes and set one above and one below the first rounded rectangle as shown above.
Nudge the shapes into position using the arrow key to put a 2px gap in between each of the shapes. Use the zoom tool (Z) and the pixel grid (View → Show → Pixel Grid) to help you here.
Ensure that the group of shapes is positioned 10px to the left of the guide at the left edge of the 'At' layer, as shown above.
Zoom in close to the left edge of our shape group (Z). Using the Direct Selection tool (A), select the three end handles of the middle rectangle and, holding down Shift, press the left arrow key twice to reduce the width of the shape by 20px (Shift + Arrow key moves any element in 10px increments).
Repeat this process for the bottom rectangle, this time reducing the width of the shape by 30px.
Tip: The easiest way to select the handles is to drag a box around the end of the shape with the direct selection tool, as shown in the image above.
Open up the layer effects panel for the 'left bars' shape and apply the following settings:
In the Blending Options panel, set the Fill Opacity to 20%.
Set an Inner Shadow with a color of white (#ffffff), a Blend Mode of Screen and an Opacity of 22%. Set the Distance to 1px and the Size to 0px.
Add a 0° linear gradient set to Linear Dodge (Add) and an opacity of 16%. Set the gradient with the values #ffffff at 0% and #dedede at 100%.
Add a Drop Shadow with a distance of 1px, a color of #000000 and a Blend Mode of Linear Burn. Set the Opacity to 9%.
Duplicate the 'left bars' layer (Right Click → Duplicate Layer...) and name the new layer 'right bars'.
Flip the layer horizontally (Edit → Transform → Flip Horizontal) and position the layer to the right side of the 'At' layer as shown above.
Step 18: Conclusion and Review
Congratulations for making it all the way through this tutorial! Turn off your guides (Ctrl + H), resize the zoom to 100% (Ctrl + 1) and admire your work:
Let's take a moment to review some of the key techniques that we covered in this tutorial:
- Smart Filters: For the background image, we converted the image to a smart object and applied the 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. (See Step 3).
- Vector Masks: To allow non-destructive editing, we used 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 could easily make the changes to the vector mask to accommodate the new button shape (See Step 7).
- Layer Masks: We used 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 — take the time to master this technique!* (See Steps 10, 11 & 14)*
- Color Independent Layer Styles: When creating the button, instead of controlling the color of the shape with a gradient overlay, we set the color of the shape with the fill itself. This allows us to change the color of the button in one place only (See Step 8).
Thanks for staying with me right to the end, and I hope that you've picked up some photoshop tricks and workflow tips that will help you with your next project. If any of the steps have left you scratching your head, please leave a comment below — I'll be sure to address any questions that you may have.