Apps

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.

About

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...

9 comments
JasonATCITD
JasonATCITD

Seems to me you'd be much better off using Fireworks. It can do everything in this tutorial and you have the benefit of exporting to a flattened PNG file. With Photoshop, even after you merge the layers and reduce the quality, you still end up with a huge JPG file (you really don't want to save as a PNG with Photoshop). But yeah, I get it that more people have access to Photoshop than Fireworks....

lastchip
lastchip

A subject that has interested me for a while and I'm no further forward to understanding how you implement a search functionality on a site without using 3rd party applications. It would be useful information (and education). Many say use the CGI - but how?

rrtsilva
rrtsilva

Link download with error...

dougreid
dougreid

Will this tutorial extend to showing how to code the HTML?

RJBoudreaux
RJBoudreaux

I use Photoshop only because it's been in my toolbox for years, and I am comfortable with the photo edit tool, but I have just begun working with Fireworks and hope to get up to speed on it's advantages soon!

RJBoudreaux
RJBoudreaux

Such as PHP, ColdFusion, and others can process form submit requests including "search" functionality that is built into the code without outside applications, and I am currently working on a piece to address your specific question. It should be published in this blog within the next two weeks.

RJBoudreaux
RJBoudreaux

Yes, in fact one of the first Photoshop tutorials early last year was a similar subject. Essentially the PSD is broken into individual background images and then pieced back together with HTML and CSS. I am currently working on the next segment which takes the "wireframe" layout and transforms it from PSD to HTML. Part 1 http://www.techrepublic.com/blog/webmaster/backgrounds-in-web-design-creating-a-theme/183?tag=content;siu-container Part 2 http://www.techrepublic.com/blog/webmaster/backgrounds-in-web-design-going-from-psd-to-code/196?tag=content;siu-container

lastchip
lastchip

for your reply Ryan. I'll look forward to reading it.

Editor's Picks