Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
7th November 2012

Create a one-page website

Discover the techniques and styles needed to maximise the impact of landing pages linking to your online portfolio

Create a one-page website

Download Tutorial Files

The one-page website is so hot right now. In a time where social media sites are peaking and web-design costs are not always kind to new designers, these creative landing pages are a godsend. The one-page website allows readers to learn everything they need in one friendly soundbite. Of course, limited space comes with its own set of obstacles, but there are several tools that will ensure a successful outcome.
Photoshop does its utmost to complement web design, and in this tutorial we’ll show you the essential tools and palettes to produce cool results. You, as the designer, have the power to direct the visitor’s eyes. People naturally notice big things first, so your use of font style and scale is also fundamental; here is where you can marry the Type tool with layer masks and the Brush tool to create visual impact. Colour swatches let you apply unifying tones, and all other effects are geared to help you make a professional first impression.

Template guidelines

Create a one-page website
We will be working with some detailed Photoshop effects, so we’ll start with a template two times larger than the standard 1,200px width x 1,650px height, using 2,400 x 3,300px instead. We could go through all the ruler measurements, but to save time, simply open the ‘Section template.psd’ from the cover CD and match them up personally. To activate your rulers press Cmd/Ctrl+R. Double-click the ruler to open the Units & Rulers preference, setting Rulers to Pixels, understanding clearly set measurements in relation to image size.

Super-clean styling

Create a one-page website
Every good one-page website needs a visual anchor, be it photo, logo or type based. For this example, we’re aiming for a postmodern style, introducing a Mac screen we photographed ourselves. This will inspire additional visual elements, co-ordinating within our super-clean space. Simply select your monitor with the Pen Path tool and copy and paste into a new layer (Cmd/Ctrl+J). You may find a few haloes appearing on your screen’s edges, so Ctrl/right-click your monitor copy layer thumbnail, create a new layer and paint to the edges with a 5% soft black brush

Maximise exposure

Create a one-page website
Merge effects and copy and paste your monitor into your image. Before re-scaling make this ‘monitor’ layer a Smart Object, as this allows you to transform without losing the original image resolution quality. This is a general rule we’ll adhere to with all our floating elements. To do this simply Ctrl/right-click your layer, selecting Convert to Smart Object. Once you’re done resizing, make a selection of your Main Slide (see ‘Sections template.psd’) area using the Rectangular Marquee tool, and centralise using Align Vertical and Horizontal Centres options (in the Move tool).

Replace the screen

Create a one-page website
Open your Smart Object window to find a new monitor document. Here we can apply layers and updates to our main image. Start by pasting in an image that will replace your rather bland-looking monitor screen, testing the visual space. Select the monitor screen using the Rectangular Marquee tool and apply a layer mask to your image layer. Now deactivate the link layer lock and, with your image layer thumbnail active, reposition and scale within the boundaries of your mask. Next apply two separate Curves adjustment layers.

Painting with Curves

Create a one-page website
Set your first curve layer with Output 30, Input 85 values, naming this ‘Shadows’. Then set the second curve with Output 90, Input 70 values, naming this ‘Highlights’. Invert both of these masks and then paint them with 5-20% soft white brushes to create the effect of a stronger exposure on the shell of your monitor. We’ve also applied a Hue/Saturation layer, decreasing the Saturation to -65, hereby eradicating the blue colour cast of our photo. Set the blending mode of the highlight curve layer to Screen, at around 80% Opacity.

Gradient texture

Create a one-page website
Create a new layer beneath your monitor layer, then open your Swatches palette and load the Charcoal Hot Blue preset from the magazine resource CD. Select the Color Picker and click Swatch 2 (#e6e6e5) making it your set foreground colour, then Swatch 3 (#272827) making it your set background colour. Select the Gradient tool, set to Radial and apply from the top to the middle of your new layer. Reduce Opacity to 50% and Fill to 70%. Go to Filter>Texture>Grain, applying an Intensity of 11 and Contrast of 40, with the Grain Type set to Regular.

Complementary effects

Create a one-page website
Create a new layer called ‘Glow’, placed in behind your monitor Smart Object layer. With your foreground colour active, set your brush blending mode to Screen at 40% Opacity. Use a large soft brush and apply several times to create a glow effect, though nothing too harsh. If banding arises, remedy by erasing with a layer mask. Open your monitor Smart Object and duplicate your Monitor layer, applying a Color blending mode and the same Grain settings as in step 6.

Pages: 1 2

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.