Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout Splash Page
rss

Splash Page

Author: WebDogPro More by this author


I've noticed more so these days that more and more people are using splash screens on their websites, so I've decided to write a tutorial on how to make your own splash screen. I'm going to make this very light/professional but you can use any color scheme you want. This tutorial is quite complex as far as using tools is concerned.

Start by making a new document I've created mine as I always do 720x540 with a background of #EBEBEB and a foreground of #FFFFFF

Grab your Rounded Rectangle Tool and draw yourself a nice sized rectangle on your screen and add the following settings to it:

Now I have something that looks like this:

Now we're going to go a little more complex and add some technical stuff which should look great once we're done.

Get your Polygonal lasso Tool. At the top of your rectangle start drawing out an upside down trapezium like shape. Be sure to keep your finger on your shift key as you're doing it to keep the lines straight and once you have completed the shape, it should be highlighted (little moving dashes). Make a new layer and fill it with black.

I know that bit will be the bit people struggle on because there's no easy way to explain it, here's what I came up with anyway. Hopefully if you didn't understand that you will see what I mean by the diagram.

Now you have filled the shape, you can CTRL+D to deselect the layer. Now on this layer, set the following properties:

*NOTE* This is a custom gradient, below are the colors I used to create it:

Now we have this, done CTRL+CLICK the custom shape layer we just made and make a new layer above it. Name this layer Shine. go to Select>Modify>Contract and set the contract to 2px and fill the layer with white.

This is how it should look:

On the shine layer, set the Opacity to 20% then get your Rectangular Marquee Tool and make a selection half way through the shine as shown below:

Once you've done this simply press delete and it should delete hold of the shine and give it a tech kind of shine look. Here's mine:

Now we have done this we can get on and make the rest of the splash. Grab your Rounded Rectangle tool again and make a new shape in the middle of your original shape, once you've done this, set the following styles:

Again, this is a custom gradient, here's the colors to make it:

Ok now here's how mine looks:

Looks good!

Now we're going to add the same kind of shine to this shape as we did with our custom shape, so CTRL+CLICK the shape and make a new layer above it. Again, Select>Modify>Contract and 2 pixels again. Fill the layer with white and make a selection along the top just like we did with the top shine.

Here's how mine ended up after adding another shine:

Now that's about it really, you can do what you want from here, here's what I came up with after a bit of playing:

Splash Page Tutorial: Final Result



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Read/Add comments to "Splash Page"

comments  Rakib December 30, 2005 says:
Splash Page
It is very nice. Can you plz tell me which fonts have u used here?
comments  peter44 June 15, 2005 says:
Splash Page
Hi, JJ thank you for the info, i will try this tutorial and work a bit more on this issue thank you........peter
comments  JJ June 15, 2005 says:
Splash Page
Hi Peter, the initial layer does not have two colours, unless it's a gradient layer mixture. In this tutorials case it is not, what they are telling you to do is to set the foreground colour to #FFFFFF and the background to #EBEBEB.
comments  peter44 June 14, 2005 says:
Splash Page
Sad could anybody give me some advice, a lot of those tutorials start with a new layer , i cannot see that this single layer has a background and a foreground to put on two different colors, so i just see one sheet to work with . thankx for your patience .....peter