Not only have watercolor brush strokes become a popular trend in modern web design, but so have advanced layers of transparency (or what I call, translucence). The new Envato design has received a lot of kudos for using this effect, and this tutorial will show you how to create a similar effect, while combining it with other popular web trends.
Final Image Preview
Take a look at the image we'll be creating.
Tutorial Details
- Program: Adobe Photoshop CS3+
- Difficulty: Intermediate
- Estimated Completion Time: 2 hours
Step 1 - Set up the Template
Let's set up our document. I tend to create my sites with a fixed 960px width and variable height. For this tutorial, I chose a height of 800px to ensure we have enough room for all of the content sections we would like to include. Creating the original document at the exact size you want the site to be makes it easier for creating the guides.
Next, we'll set up our guides. Drag guidelines from the document rulers to the four edges of your document.
Now we need to allocate some space for the background we'll create. Go to Image > Canvas Size and expand the document to 1100 pixels by 1000 pixels. This should give us plenty of area to fill in our unique background.
Fill the bottom layer with white (Shift + F5). Rename this layer as "background." Your document should now look like the image below.
Step 2 - Create the Gradient Background
Right-click the "background" layer, and choose Blending Options. We'll be adding a Gradient Overlay to our "background" layer. I chose a three color gradient with some blues and tans, however you can essentially choose any colors you want. The beauty of using the Blending Options for the background is that at any time, you can easily switch out colors and adjust the gradient to taste.
Your document should now look like this:
You may want to skip this step, however I feel the sharp gradient is a little too glossy for this design. We'll add some noise to tone it down a bit.
Create a New Layer. Rename this layer "noise." Next, fill the layer with white (Edit > Fill). Once you have the layer filled with white, we need to add some noise by applying Filter > Noise > Add Noise. Set the Amount to 400%, with a Uniform Distribution and non-Monochromatic. All of the colors of the noise will give us much more depth in our background.
Set the "noise" layer to Multiply, and set the Opacity to 5%. This should give us just enough graininess to tone down the gradient.
Step 3 - Add the Texture (Brush Strokes) to the Background
First, you'll need to download some Brush Stroke brushes, if you don't already have them. Here is some I've used in the past: "Brush Stroke."
Create a new layer, above your "background" and "noise" layers. Rename this layer to "brush1" (we'll be creating multiple layers like this). Set this layer to Multiply. Choose a warm foreground color (to offset the cool tones) in our blue gradient background. I chose a warm brown: #996726. Select the brush you wish to draw, and place it in the top left of the document, ensuring that the brush stroke is outside the bounds of your guidelines (we want the background to expand outside).
Adjust the layer Opacity to 50% (so the graininess shows through). Repeat the previous two steps for multiple brushes to suit your taste. Your background should now look like the image shown below.
Congratulations, your custom, unique background is complete. Since you placed the brushes randomly, it will differentiate you from those designs that bought a similar stock background.
Step 4 - Create the Inner Opaque/Translucent Container
First, we'll need to grab the Rounded Rectangle Tool, and set the radius to 20px. Above all of your background layers (brushes + noise + gradient), drag and draw a rounded rectangle within the original guidelines we set up. Your rectangle should be 960px by 800px. Rename this layer "container," and Right-click the layer, and select Rasterize Layer (we'll be making some changes to this layer later, so we might as well get this out of the way now).
To make the "container" layer look opaque, we'll need to do a few things:
- Set the "container" layer's Fill to 0% (we'll be using the Color Overlay layer style to give it some color).
- Add a Drop Shadow: Opacity of 41%, Angle at 90, Distance of 0, Spread of 1, and Size at 10
- Bevel and Emboss: Style of Inner Bevel, Technique set to Smooth, Depth at 100%, Direction of Up, Size at 20px, Soften of 0px, Angle at 135, Altitude at 58, Highlight Opacity at 27%, and Shadow Opacity set to 15%
- Color Overlay: White with an Opacity of 73%
- Stroke: Size of 1px and Opacity at 100% (to give it that extra bit of depth)
Once you've set all the layer styles, your "container" layer should look like this:
Step 5 - Set Up the Inner Padding Guides
To ensure that we stick with consistent padding on the "container" layer (assuming we don't want to count our pixels each time we place an element), let's add guides at 40px inside our original guide box.
Step 6 - A Cutout Navigation
As you saw in the Final Preview, we want to make the navigation look like it is sunken or cut out of the "container" layer. To do this, we'll just remove some of the "container" layer and let the Layer Style's do their magic.
To create the selection for the cutout, we'll create a new rectangular shape in the space that we want the navigation cutout to be. Use a radius of 10px here (which is half the radius of the "container" layer), to ensure that the corner has consistent spacing where it is rounded.
If necessary, move the shape to the top right of your inner padding guide lines. Once you have the layer in place, Command-click the layer in the Layer's Palette so it is selected. Choose the "container" layer and hit Delete. You can now hide your 10px rounded rectangle for the navigation, and your "container" layer will now show a cutout as seen below.
Notice how smooth the rounded corners are. If we would have just selected a square area and rounded the selection, the cutout corners would have looked very choppy. Also, isn't it nice how the Layer Style's are automatically applied to the layer, and all of the beveling and shadows we added look great.
Now we need some text. I chose Rockwell as my font (it comes standard with MS Office, but can also be purchased). Evenly space your navigation elements within the cutout as shown.
We want to give the text an etched in stone effect, and to do this, we add a drop shadow to the text (we could also add an inner shadow, however it makes the text appear thinner than it actually is). Here are the drop shadow settings I generally use.
Step 7 - Active Navigation Woven through the Page
To achieve the desired effect, we'll create a new layer just below the text we added for the navigation. Rename this layer "active nav." Fill this selection with any color (it doesn't matter).
Next, we'll need to add some Layer Styles to the "active nav" layer. I've provided them below (you'll need a Drop Shadow, Gradient Overlay, Stroke, and Inner Glow).
Duplicate your "active nav" layer (Command + J), and flatten all of the layer styles. Rename this layer "active nav flattened." We're going to be applying some crops to this layer, and we don't want the layer styles any longer.
Use your Selection Tool to delete the Stroke and Inner Glow from the top and bottom of the "active nav flattened" layer.
Now we need to add the shadows to make the "active nav" layer look like it's woven through the "container" layer. We'll create these shadows using the Ellipse Tool.
Create a black ellipse that is 20px wider than the width of the "active nav flattened" layer and roughly 5px tall. Center your ellipse on the top edge of the "active nav flattened" layer. Right-click the layer and select Rasterize Layer. Rename this layer to "top active shadow."
We need to blur the ellipse a bit, go to Filter > Blur > Gaussian Blur and apply with with a radius of 2px. Now that the ellipse looks more like a shadow, we'll go ahead and delete the top 50% of the shadow.
Adjust the Opacity of the "top active shadow" layer to 75%. The top shadow is done. To create the bottom shadow, duplicate the layer (Command + J), apply Edit > Transform > Flip Vertical, and move the shadow to the bottom of the "active nav flattened layer."
Step 8 - Finish Out the Header With a Logo
Before we get to the logo, let's finish out our header a bit. First we'll add a couple more guides. Draw a horizontal guide 40px below the bottom of the navigation cutout as shown.
We're going to create our separating line, which will give the impression that the "container" layer has an etching or is folded at this spot. To create this effect, draw a 1px heigh horizontal line on a new layer running the width of the "container" layer. Fill your horizontal line with a dark green (I chose mine from the background). Rename this layer "separating line."
To get the etching feel, duplicate the "separating line" layer and fill this layer with white. Move this layer 1px down so the top of it touches the original "separating line" layer.
Now we need to add our logo. I'm not much of a logo designer, so I just chose a cool font (Gill Sans) and wrote some big text in the top left corner. Just as we did the cutout for the navigation, make a selection of the logo text and then delete it from the "container" layer. Once again the Layer Styles will adjust to the new shape, and update to it.
The asterisk was done using the exact same technique as the active navigation element, to make it appear like it is sticking out of the "container" layer.
Step 9 - Featured Portfolio Items
Once again, we're going to use the same cutout technique that we used for the navigation section.
Create a rounded rectangle with a border radius of 10px. Make sure to allow for 40px spacing on all sides (we created the guides earlier to help with this).
Command-click the rounded rectangle layer to select it, then select the "container" layer and hit Delete. You can remove the rounded rectangle as we won't use it any longer.
We then need to create the arrows on each side, so you can have multiple portfolio items on the front page and toggle through them in a sort of slideshow. To do this, create a 40px diameter circle with the Shape Tool. Move the circle in place on the left side, centering it on the edge of the cutout.
Duplicate the circle for the other side, and once again center it on the other edge of the cutout (horizontally and vertically).
Important
Since we aren't working with vector masks here (and our Fill is set to 0% on the "container" layer), we need to momentarily adjust this to ensure we can add on to the "container" layer.
So, let's set the Fill of the "container" layer to 100%. Now Merge Down (Command + E) both of the circles we created for the arrows into the "container" layer. Once you have merged down, you can then set the Fill of the "container" layer back to 0%. Here is your desired effect:
Notice how the two circles have now become part of the "container" layer.
Next we'll need to add some arrows. You could easily create them using brackets, however I chose to create my own.
Create a rounded rectangle with a Border Radius of 3px, Width of 20px, Height of 6px; and place it right above where you want the arrow. Transform and Rotate (Command + T) the rounded rectangle by 45 degrees counter-clockwise so it is tilted. This is how we will make the point to the arrow.
Duplicate the rounded rectangle (Command + J), and Edit > Transform > Flip Vertical. Move the layer in place, such that the left corners are lined up producing a bracket. In the Layer Palette, select both rounded rectangles and merge the layers together (Command + E). Rename the layer "left arrow." Here is how your arrow should look:
We need to add some Layer Styles to the arrow to make it fit with the rest of the design as follows:
- Fill: 0%
- Inner Shadow: Opacity of 50%, Angle at 120, Distance of 2, Choke set to 0, Size of 3, and Noise at 0
Duplicate the "left arrow" layer (Command + J), and Edit > Transform > Flip Horizontal. Rename this layer "right arrow," and move it to the right side of the cutout.
One last thing we need to add for our featured portfolio items area is a shadow to give it some depth. Add a transparent to black gradient at the bottom of the cutout as shown.
To trim off any excess gradient outside of the cutout, simply Command + Click the "container" layer and hit Delete. We'll be placing our screenshots below this layer to give the illusion of depth.
Step 10 - Adding a Portfolio Item
Take a screenshot of your favorite site (I used one of my own portfolio, ryanscherf.net). Rename this layer "screenshot."
Add a Stroke and Inner Shadow to the "screenshot" layer use your Layer Styles:
Duplicate the "screenshot" layer, and flatten all of the layer styles (merge the "screenshot copy" layer with a new, blank layer). Rotate the "screenshot copy" layer 45 degrees counter-clockwise, just as you did for the arrows in Step 9.
Place the screenshot at the bottom left of the portfolio cutout, ensuring that the top of the screenshot sticks out of the cutout (we're going to be giving it some depth) and making it look like it's tucked behind the "container" layer. Crop any excess of the "screenshot copy" from the bottom as shown.
Now that we have our screenshot in place, let's add a short description to the right. Nothing too fancy here, but still trying to stick with our theme of depth and layers.
Create some text with an almost white (or very light blue/green) color. Use the same drop shadow etching technique from the navigation (Angle at -60 degrees, Distance of 1px, and Size of 1px).
Create an opaque square behind the text. I used an all black layer, at 30% opacity. The effect should look like this:
We need some navigation dots like the iPhone views. We'll create one active dot, that will use the exact same Layer Styles as the "active nav" layer (hopefully you didn't delete it), and an inactive dot which uses the Layer Styles from the "left arrow" layer.
Note: Reusing Layer Styles is important not only because it saves time from having to recreate similar styles, but also because it will keep your design consistent throughout.
Create a circle using the Shape Tool, with a diameter of 20px (I like my navigation dots large, as I find sometimes they are too hard to click and navigate through). Right-click the "active nav" layer and select Copy Layer Style. Select the circle from your Layers Palette, Right-click, and select Paste Layer Style.
Repeat these steps for as many inactive dots as you'd like, making sure to use the layer style from the "left arrow" layer.
Step 11 - Label it With a Ribbon
We need to let our visitors know exactly what we are showcasing here. We'll create a ribbon using the exact same technique as we used for the "active nav" layer, which was outlined above in Step 7.
The only difference here is that I added a bit higher opacity for the drop shadow to ensure that it looks like it's resting far above everything else.
To finish off this section, we want to duplicate (Command + J) our "separating line" layer we created in Step 8 and move it 40px below the portfolio items cutout. That's it!
Step 12 - Create the Main Content Area
We'll first create more guides to ensure we have three equal columns. Don't be scared, but we'll have to do some math here:
960px wide site - 80px of inner padding = 880px of available space for our columns. We'll also want to add 40px padding between the columns, so in essence we have 800px available for our 3 columns.
800px divided by 3 equals 266px per column (I chose my columns as 267px, 266px, 267px from left to right to maintain the balance). So, draw the guides at these intervals, ensuring that you account for the 40px padding on each side of the center column.
Step 13 - Latest from the Blog Column
Create a New Group in your Layer's Palette named, "Latest from the Blog." This is where we'll keep all layers pertaining to this section.
Create some text for the heading. Once again, I used the Rockwell font with the same Layer Styles for etching as I used on the navigation. In case you forgot, it is outlined in Step 6.
Select a custom shape to anchor each side of the text. I chose a standard Photoshop custom shape, but there are literally thousands of custom shapes you could add to your library.
We need to add some Layer Styles to the shapes to make them look a bit more 3D:
- Color Overlay: #0e696a
- Inner Shadow: Opacity at 63%, Angle at 120 degrees, Distance of 1px, and Size of 1px
The final product should look something like the following image.
We need some text below for our blog posts. Make sure that your text color is a light shade of the blue/green of the background. We can use as many different shades of this blue/green as we like, and it will surely make our text stand out.
To make the text look etched once again, we're going to try a little different spin on the earlier technique. Before we added a black drop shadow to the top left of the text, however since we're using a little lighter text, we're going to add our drop shadow to the bottom right, using white. You can see the effect below:
I used the custom, round shape for the bullets, and reused the layer style from the custom shapes we added in the header of this section.
Step 14 - Most Recent Twitter Updates
This section should be fairly easy. Duplicate the "Latest from the Blog" group and rename the duplicate to "Twitter Updates."
Adjust the text to be more indicative of a Twitter update (links, mentions, timestamp, etc). Move this group to the center column — and you're done!
Step 15 - Newsletter Sign Up Form
Duplicate the "Twitter Updates" group, and rename it to "Newsletter." Move this group to the far right column.
Adjust the content to be more like a descriptive paragraph, as well as remove all of the bullets (introductory paragraphs generally don't need bullets).
To create the e-mail form, we'll create a rounded rectangle with Border Radius of 10px, and Height of 40px. The width should be 266px (or whatever you chose as the width of your right column). Rename this layer to "input form," and set the Layer Styles as follows:
Lastly, we need a button to submit the form. We'll use our Layer Styles from the "active nav" layer for the button, as we would like to keep that consistent look to all of our elements.
Create another rounded rectangle, Height of 40px, Width of 140px and a Border Radius of 20px. Rename this layer to "button."
Copy the Layer Style from the "active nav" layer and paste it onto the "button" layer.
Duplicate the text from the navigation (Command + J) and change it to say "Subscribe." Move the text to be centered within the button. The result should look like the image below.
Step 16 - Add Copyright Information
Clients will always request it, and you should always add it. Outside and below your "container" layer, add some copyright information. Using the etching technique again to give it some depth.
Conclusion
I hope this helps everyone explore some new boundaries with their own designs. As you saw, many of the techniques discussed here are simple, yet elegant; and should be easy to implement in your own designs.
