Creating a Nighttime Layout in PhotoShop
In this tutorial we are going to be using PhotoShop to create a simple nighttime layout for a webpage. The tutorial should take around 15-20 minutes to complete and when finished will look like the image below.
So lets get started…
The first step is to open up photoshop and create a canvas, the size I set mine to was 900px by 742px.
Next I selected my two colours for the gradient background which will act as the night sky;
The first colour was #0b3972.
The second colour was #1771de.
You should then select the gradient tool and drag it from the top to bottom of your canvas, it should then all look like what I have below or something similar.
Next I added the stars in the sky, to do this I just the basic photoshop brushes in white and then just sparadocally dotted them around the page changing sizes every few.
This is what I ended up with.
Now I added the text ‘Night Layout’ to the header using the font Brush Script Std, I then added an outer glow and a stroke to text the settings for both are shown below.
Outer Glow
Stroke
This is how it now looks.
Next, using the rectangle shape tool I added an area for the content to go, the colour I used was #e8e6e6.
Now I am going to add the moon, to do this I used the moon shape from custom shapes and added an outer glow.
Outer Glow Settings
This is how my moon now looked.
Next I added a navigation with the home text in white and the rest in black.
I then added a black box behind Home and added outer glow to it.
Outer Glow Settings
Now this is how my navigation looked.
Next I added an image of a night skyline and added a stroke.
Stroke Settings
Finally I added some text to the content area.
You should now have a layout which is similar to the first image of the tutorial.
If you enjoyed this post you might enjoy these:
3 Comments to “Creating a Nighttime Layout in PhotoShop”