Tutorial: Add finishing touches to minimalist web design using Photoshop

Ryan Boudreaux finishes up his tutorial on creating a minimalist web design in Photoshop by adding a banner image, content blocks, and a footer area.

This is the second part of our tutorial; in the first segment we established what defines and makes up a minimalist website design, and then we began with creating a canvas, a background layer, header section, navigation, search and submit buttons, and wrapped up with a banner image area.

In this segment of the tutorial, we will add in a sample feature image to complete the banner image area. We will also add in several feature content titles and paragraph block areas just below the feature image area, and finish with creating a footer area at the bottom of the canvas.

Banner image area

The featured banner image area is where we left off in our previous segment; now, let's add in an image.

#1 We will add in an image by going to File then Place , and selecting a background image; once selected, click the Place button, and then place the image.

#2 Next, make sure the image layer is just above the background layer, and then right-click over the image layer and select Create Clipping Mask.

Figure A

#3 Select the Move Tool (V) and nudge the image to the location you wish to highlight within the clipped mask layer.

Figure B

Feature content block areas

#4 Next, we will add in two more horizontal guides before we create our featured content block areas. One horizontal guide will be set to 650px, and the other horizontal guide will be set to 900px. The featured content will be contained within this 250px by 725px area.

#5 After that, we will add in a title text area using the following settings with the area on the canvas starting from the top left corner of the content block:

  • Font Family: Tahoma
  • Font Size: 22
  • Font Weight: Regular
  • Anti-Aliasing: Strong
  • Color: #4b6262

And add in the following styling:

  • Drop Shadow
  • Blend Mode: Multiply
  • Opacity: 27%
  • Angle: 125 degrees
  • Distance: 3px
  • Spread: 0%
  • Size: 2px
  • Inner Shadow
  • Blend Mode: Multiply
  • Opacity: 75%
  • Angle: 125 degrees
  • Distance: 5px
  • Choke: 0%
  • Size: 5px

Figure C

#6 Next, we will add in a paragraph content area just below the title area with the following settings:

  • Font Family: Veranda
  • Font Size: 14
  • Font Weight: Regular
  • Anti-Aliasing: Smooth
  • Color: #091414

Figure D

#7 Next we will copy (Ctrl+C) both text areas and paste (Ctrl+V) them just to the right of the current text areas. You can also right-click over each text area layer and select Duplicate Layer; rename the second area to Featured Content Title 2 and then use the Move Tool (V) to slide both duplicates over as shown in Figure E.

Figure E

Create footer

#8 Next we will add in the footer area and create one last horizontal guide set to 1000px.

Figure F

#9 Using the Rectangular Marquee Tool (M) create an area the entire width of the canvas and follow the two horizontal guides for the top and bottom, and then fill it with white background as shown in Figure G.

Figure G

#10 Next, create a gradient style with the following settings as displayed below.

  • Foreground Color: #63706f
  • Background Color: #748f8f

Figure H

#11 Next, we will add in the footer content with several text areas and icons for social networking and typical disclaimer and copyright information using the following styling:

  • Font Family: Lucinda Sans Unicode
  • Font Size: 12
  • Font Weight: Regular
  • Anti-Aliasing: None
  • Color: #ffffff
The first text block will be drawn as shown below in Figure I:

Figure I

#12 Next, we will add in several social media site icons, a set of interaction icons along with textual headings in all caps with the same font family settings for the footer area, along with a participation paragraph, and copyright and disclaimer notations as displayed in Figure J below.

Figure J

Our final minimal website layout is displayed in Figure K below with the guides removed. Figure K

If you wanted to take the design to bare bones and create an extreme minimalist website you could eliminate the featured content areas and bring the footer sections up to just below the featured image section, and crop the canvas to eliminate the extra space from the bottom. The template PSD file is included in the download along with the PSD image files which were used in this tutorial. Feel free to use the template as a starting point and modify it to fit your needs and requirements.

By Ryan Boudreaux

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...