Design a Cool Pixelated Website Layout
Resources Used In This Tutorial
Final Image
As always, this is the final image that we’ll be creating:
Step 1
Create a new document (1000X1000px).
Now create some guides to help lay out your design. Set out vertical guides at 50px and 950px and a horizontal guide at 500px.
Step 2
Create a new layer called ‘header’. Now select the top 500px of your design, and fill it with a linear gradient ranging from hex code ebeaeb to f5f5f5.
Now create a new layer called ‘dark footer’. Select the bottom 500px of your canvas and fill it with 1c1c1c.
Step 3
Now create a new layer called ‘clouds pixelated’.
With this layer active, option+click on your ‘header’ layer in your layers palette. This will select the header area. With your selection in place, go to filter>render>clouds (ensuring your foreground color is black, and the background is white).
Now reduce the opacity of your cloud layer to 20%.
Now go to filter>pixelate>mosaic. Now apply a cell size: 25 square. Hit ok, and you should have a nice pixelated header effect:
Step 4
Now select your lasso tool, and ensure it has a 50px feather. Then make a selection in the bottom right of your canvas.
Then apply some clouds to this area, and then repeat step 3 to create a nice pixelated footer area:
Step 5
Now download our clouds brush set (see the resources section for this tutorial).
Create a new layer called ‘clouds’. Apply the clouds using a black paintbrush over your header area.
Now reduce your cloud layer’s opacity to around 20%:
Step 6
Cut out and paste in a photo of a jumping dancer.
Now duplicate your dancer, moving the duplicate layer beneath the original.
Resize the underlying layer to make it slightly smaller than the original, and then apply a mosaic filter (15 square strength) to achieve a cool pixelated effect:
Finally, reduce this pixelated layer’s opacity to 35%. This creates a subtle backdrop effect.
Step 7
We want to make our dancer really pop, so create a layer beneath both dancer layers called ‘highlight’. Drag out a white to transparent radial gradient from the side of your dancer. This should help push the dancer forward.
Step 8
Now apply some text in the top left of your canvas, using your guides. This will act as your logo text.
Logo Font Settings:
Font Face: St Atmos Free
Size: 72pt
Color: 000000
Kerning: 0
Styling: Normal
Size: 72pt
Color: 000000
Kerning: 0
Styling: Normal
Now apply a couple of blending options to your text to make it more interesting.
Inner Shadow Blending Option Settings:
Blend Mode: Multiply
Color: 000000
Opacity: 50%
Angle: 120
Distance: 1px
Choke: 0%
Size: 1px
Color: 000000
Opacity: 50%
Angle: 120
Distance: 1px
Choke: 0%
Size: 1px
Gradient Overlay Blending Option Settings:
Blend Mode: Normal
Opacity: 100%
Gradient: 000000 to 444444.
Opacity: 100%
Gradient: 000000 to 444444.
Step 9
Now apply some text under your logo, including menu text, header text, and welcome area text. I’ve laid out the text settings for each area below:
Menu Text Settings:
Font Face: Georgia
Size: 18pt
Kerning: 50
Color: 000000
Size: 18pt
Kerning: 50
Color: 000000
Headline Text Settings:
Font Face: Georgia
Size: 36pt
Kerning: 50
Color: 515151
Size: 36pt
Kerning: 50
Color: 515151
Welcome Area Text Settings:
Font Face: Georgia
Size: 18pt
Kerning: 0
Color: 505050
Size: 18pt
Kerning: 0
Color: 505050
Step 10
Now apply a button behind your ‘want to work with me?’ text.
I chose a rounded rectangle shape (35px radius) filled with a gradient ranging from 24a9da to 00729d.
Now option+click on your button in your layer’s palette, and with your selection in place create a new layer called ‘pixels button’.
Repeat your pixelated cloud technique, first applying a cloud render, and then a mosaic effect. Finally, change this layer’s blend mode to ‘overlay’ to create a cool lighting effect for your button:
Step 11
Now create a new layer called ‘arrow’. Use your lasso tool to create a dark gray arrow coming up from the footer area:
Step 12
Now apply some watermark style text at the top of your footer.
Footer Text Settings:
Font Face: Georgia
Size: 60pt
Kerning: 50
Color: 313131
Size: 60pt
Kerning: 50
Color: 313131
Step 13
Now use your guides to paste in some examples of your best design work:
Step 14
Finally apply some text beneath each screenshot, as well as a general copyright notice.
Also use your line tool to create a 1px line above your copyright notice.
And We’re Done!
You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome.
Download Source File for this Tutorial
copied from
No comments:
Post a Comment