We recently had to put up 2 notices for maintenance to websites, and the sad state of our current template got us designing. This is a 2 part tutorial the first being the design of the template in Photoshop, and the second part the coding of the template and implementation in a live environment.

Design elements

For this tutorial we’ll use a truck icon from Icons Land. You can visit the site here. The download link for the demo icons is at the bottom of the page. We’ll also be using the Satisfaction font from Fonts101 here.

The Setup

In Photoshop open a new file [PC: CTRL + N /  MAC: Cmd + N] with dimensions 1600px wide by 1200px high, and a background color #1E1E1E.

We need to port the design to the web so adding guides to assist  in mapping the size is a necessity. First add a vertical guide at 320px as in the picture below. I also add a vertical guide at 1280px. Next add a horizontal guide at 700px. Lastly divide the design space in two columns with a vertical guide at 800px.

Add noise

To assist with extra visual interest for the background add some noise. Click on filter, noise, add noise and select 2 in the amount box.

Sunburst

The sunburst will be in the left column, but we do want it to spill over the guides as to create added visual interest. Start by selecting white as foreground color. The easiest way to do this is via shortcuts [PC and MAC: D and X]. Open up the info window [PC and MAC: F8]. Select custom shapes [PC and MAC: U]. Now select the sunburst shape as in the picture below and draw a shape 550pixels by 550pixels.

Open the layer tool [PC and MAC: F7]. Add a new layer [PC: SHIFT + CTRL + N / MAC: Shift + Cmd + N]. Now press down CTRL (MAC CMD) and click to select the sunburst shape in your layer tool. Select the bucket tool and then from the tool select the gradient tool and ensure that the radial gradient is selected.

In the new layer that you have created draw a gradient from the center of the sunburst shape almost to the edge. You can now delete the sunburst shape, and your left with a neat sunburst. Decrease the opacity of the layer to 15% and change the size and position until you are happy.
You can now add the tow truck to the center of the sunburst shape.

Text

The fonts we’ll be using is Impact and Arial. Select the color #FFA814 as foreground color and type your sites name using the Impact font at 60px in capital letters.  Just below that in the color white (#ffffff) type “Maintenance Mode” using the Arial font at 48px.

To create added visual interest, we’ll underline Maintenance mode. Click on the Marquee tool and keep the mouse button down until you get the secondary menu for the marquee tool and then select Single row marquee tool. Add a new layer [PC: SHIFT + CTRL + N / MAC: Shift + Cmd + N]. Click just below the Maintenance mode text and a single line is selected. Fill the line with black (#000000). Deselect [PC: CTRL + D / MAC: Cmd + D].

With the marquee tool [PC: M / MAC: M] make a selection of the single black line the same width as the maintenance mode text. Invert the selection[PC: SHIFT + CTRL + I / MAC: Shift + Cmd + I]. Press the delete key on your keyboard, and your left with a line the width of the maintenance mode text. Deselect [PC: CTRL + D / MAC: Shift + Cmd + D]

We will now create an inset for the line. Select the layer with the single black line, right click your mouse and click on duplicate layer. Move the new layer down one pixel. Select layer style, and select color overlay. Select white (#ffffff) for the overlay color. Afterwards change the opacity of the layer to 7%.

Select the text tool, and type in your main message in white (#ffffff) and size 18px. Our message is “We are currently conducting scheduled maintenance and should be back in:”

Countdown timer

Now we’ll design the countdown timer. Select the custom shape tool [PC and MAC: U] and select the rounded rectangle tool and change the radius to 9%.

Create a rectangle 95px wide by 60px high in black and decrease the opacity to 30%. We will now add a new layer style to the shape. Click on add layer style and select stroke. Copy the settings in the screenshot below.

Add the countdown timer text in the box. We used the color #FFA814 for the numbers in Arial font size 24px. For the description in each box we used the color color #C5C5C5 in Arial font size 18px.

You have to make one box each for : days, hours, minutes and seconds.

We follow the countdown timer up with a last message, appologizing for the convenience in color #FFFFFF font Arail and size 18px.

Last step

To round off the design we add a footnote as if someone was signing the note in his or her personal handwriting. We use the satisfaction font for that in size 30px and color #FFA814. We also decided to tilt it 10% to the left.

Only one thing left to do and that is to add a line below the handwriting. When a person signed his name with a ballpoint pen and draws a line below, you can often see that the pen point has run out of ink, and that the pressure on the line starts from little pressure to more pressure. We are trying to emulate that.

Select the marquee tool: [PC and Mac: M]. Create a new layer [PC: SHIFT + CTRL + N / MAC: Shift + Cmd + N]. Reset your colors [PC and Mac: D]. Create a new rectangle about 200px wide and 20px high. Select the gradient tool [PC and Mac: D] and fill the rectangle that you’ve just drawn from right to left so that the solid color is at the right hand side and no color at the left. Deselect [PC: CTRL + D / MAC: Cmd + D] and select the move tool [PC and Mac: D]. We need to re size the rectangle that we just drew until it is still 200px wide, but only 1px high. the rest of the process, is exactly the way we did with the line above. Duplicate the layer. Move one pixel down. Overlay with white. When decreasing the opacity though, we will only decrease it to 25% instead of 15%.

Lastly we will merge the two lines [PC: CTRL + E / MAC: Cmd + E]. Next move it to below the message and tilt about 8 degrees to the left.

We’re done. We will follow this tutorial with a tutorial to create a countdown timer, and finally will create a website out of the design.