How to Create a Textured Website in Photoshop

Websites with texture have become extremely popular now. The reason is that textures add a a tactile look and feel to a site and really sets the mood that a flat design just can’t do. Minimal websites have their own level of popularity, because they lack texture and go for the clean look. Minimalism doesn’t work well for every company or product though, so when a website utilizes texture, it really stands out.

We are going to create a mockup of a clothing website. Create a new document. Set the size to 1024px x 2000px. Fill the background layer with blue (#2a365f). Download the sample fabric texture, found here. It should fill the entire canvas easily, as it is a large texture. Change the blend mode to Luminosity.

Screen Shot 2012-10-04 at 4.01.25 PM

Next, we will want to create an area for our content to go. Create a new layer.  Select the Rectangular Marquee Tool and in the options, choose Fixed Size and type in 900px x 2000px. Click once on the canvas to create the selection, then drag it around 150px downward and fill it with white. Make sure that it is centered within the canvas.

Screen Shot 2012-10-04 at 4.09.54 PM

The lines of the white rectangle that we made are just too harsh. Create a layer mask on the white rectangle layer that we just created. Select the Brush Tool, and in the brush selection menu at the top, click the flyout menu and choose Dry Media Brushes. Select the Rounded Fan With Texture brush. On the mask, begin painting around the edges of where the rectangle meets the fabric texture. This should create a textured mask effect. Be sure to leave plenty of room at the bottom of the canvas.

Screen Shot 2012-10-04 at 4.17.30 PM

Screen Shot 2012-10-04 at 4.44.29 PM

For the text, I selected Bevan To give a big, bold header, I made it 70pt type. Then, right-click on the text layer and choose Create Work Path. Select the path with the Path Selection Tool. In the Paths Panel, click the flyout menu and choose make selection. Go to Select> Modify> Contract and contract your selection by 2px.

Screen Shot 2012-10-04 at 6.21.19 PM

Screen Shot 2012-10-04 at 6.41.12 PM

Before we do anything else, we need to create a brush that will act as stitching. Select a brush that is around 10px. Click the Brush Panel. Set the size to 4px and squish the brush to make it a flat line shape. You can do this by clicking and dragging the points in the preview window. Set the spacing to 978%.

Screen Shot 2012-10-04 at 6.45.27 PM

Go into Shape Dynamics and go down to Angle Jitter. Leave all of the settings at 0, but set the control to direction.

Screen Shot 2012-10-04 at 6.45.50 PM

Under Texture, set the texture to Weave 2 and set the scale to 15-20%.

Screen Shot 2012-10-04 at 6.46.25 PM

Now, we will go back to our selection and click the flyout menu and choose Make Work Path. With the path selected, select the Brush Tool. Make sure the blue from our background layer is selected as the Foreground color. In the Paths Panel choose Stroke Path with Brush.

Screen Shot 2012-10-04 at 7.32.28 PM

Keep Bevan as your typeface and select the same blue as your background layer. Set the size at 24pt. Type out the different buttons for your site. For our clothing site, we will choose Home, Men, Women, and Clearance. Space them equally apart.

Screen Shot 2012-10-04 at 8.39.18 PM

Next, download this leather texture from here. Place it in your document and lower the size until it is around 2/5 the width of your content area. Next, select the Type Tool again and create some sales promo text. Stack it on top of each other. Then, double-click the text layer to bring up the layer styles options.

Screen Shot 2012-10-04 at 8.46.39 PM

Choose Bevel & Emboss. Select Inner Bevel and set the depth to 100%. Set the direction to down and the size to 5px.

Screen Shot 2012-10-04 at 8.47.13 PM

Next, select Inner Shadow and set the distance and size to 5px. Hit OK. Then, on the type layer, lower the Fill to 5%.

Screen Shot 2012-10-04 at 8.47.39 PM

Screen Shot 2012-10-04 at 8.55.09 PM

Download the jeans model image from here. Place it within the canvas so that her entire body fits nicely within the vertical space provided. Move the leather and the model layers just above the white content layer and clip them to it by Alt/Option-clicking between the layers.

Screen Shot 2012-10-04 at 9.28.49 PM

Next, our menu needs some help. Download the jeans tag image from here. Place it within the image. Use the Quick Selection Tool to select the white areas. Click Refine Edge and choose Smart Radius. Set the value to around 8-10%. Click ok. Then, hit Command/Ctrl + T to transform the tag and scale it to be the same width as the rest of the content. Clip it to the content layer as well. Double-click the layer to bring up the layer styles and select a drop shadow. Set the angle to 90°, the size to 0 and the distance to 3px.

Screen Shot 2012-10-04 at 9.53.21 PM

Hit Command/Ctrl + J to duplicate the tag layer and move the duplicate to the bottom of the canvas. The top of the tag is different from the bottom, but reusing this element will help to tie the whole piece together. The bottom of your site should look similar to the example below. With the drop shadow, uncheck Global light and set the angle to -90°.

Screen Shot 2012-10-04 at 10.14.45 PM

Download the plaid texture from here. Select the Custom Shape Tool and choose the Tabbed Button shape from the options. Draw the tabbed button the entire width of the content area. Hit Command+T to transform the shape and rotate it 180°. Select the Direct Selection Tool and choose the top 2 anchor points of the tabbed button and hit the down arrow key until the shape is much thinner. Fill the shape with white. Place the plaid texture on the canvas and resize it so that it is the same width as the content area. Clip it to the rounded shape.

Screen Shot 2012-10-04 at 10.46.57 PM

Next, we need to show off a couple of products. Download the sample jeans image from here. Use the Quick Selection Tool to remove the jeans from the white background. We are going to use the same pair of jeans for 3 different product shots. Hit Command/Ctrl + J twice to make 2 duplicates of the jeans. Hit Command/Ctrl + L to bring up the levels options. Slide the left and middle sliders to the right to darken the pair of jeans. Select the third jeans layer. Bring up the levels Dialog Box again and this time move the right and middle sliders to the left to lighten the third pair of jeans. Space them evenly so that each pair takes up 1/3 of the horizontal space of the site.

Screen Shot 2012-10-04 at 11.32.05 PM

Select the Rectangle Tool and draw a rectangle with no stroke or fill that spans the width of the content. Select the Pen Tool and draw 2 vertical lines. Create a new layer, making sure the paths are active. Select the Brush Tool, making sure to select the stitch brush that we created earlier. Then, go to the Paths Panel and choose Stroke Path with Brush with the blue color from the background layer chosen as your foreground color.

Screen Shot 2012-10-04 at 11.51.34 PM

Now it’s time to place some text around our products to promote the current sales. Select the Text Tool and type out 3 separate headlines above each image of jeans. Center the text and center each set of text above each image.

Screen Shot 2012-10-04 at 11.55.32 PM

Next, select the Text Tool again and choose a strong red as your foreground color. Type some promo text under each pair of jeans, within each stitched box.

Screen Shot 2012-10-04 at 11.56.56 PM

Choose the original blue from our background layer and select the Type Tool once again. Increase the text size until it almost fills the blank space below the stitched areas. I types “Don’t Miss Out!” and centered it in the space left.

Screen Shot 2012-10-05 at 12.03.53 AM

Conclusion

It doesn’t take much to integrate texture into your website designs. Selecting the right images and placing them in key places throughout your website can really make it stand out. Our main navigation really stands out with the jeans tag as its background. The denim texture immediate lets you know that it is a jeans store, and instead of a completely square content area, we’ve used a textured mask to blend it it with the jeans while still implementing contrast. I would finish out the site by adding link text to the footer, and your mockup is done.

Screen Shot 2012-10-05 at 12.21.27 AM

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote