Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Splash Page

Splash Page


Open a new document in photoshop
Size 600 x 600 pixels
Color #333333 ( or a dark grey )

Select ellipse tool and make one simple circle

image 1

then add the following layer styles

image 2

image 3

image 4

Then be sure you have selected this layer, then go to Edit > Transform > Warp

then choose Shell Upper from the custom drop down menu

image 5

Then hit Enter on your keyboard, and you will have this result

image 6

Duplicate this layer one time, then resize it

image 7

Then with your arrow keys place the second layer in the middle of the initial one

image 8

For this second layer please add the following layer styles

image 9

image 10

image 11

image 12

image 13

image 14

image 15

This is my result

image 16

Now Select Ellipse Tool and create another circle

image 17

As you have noticed i have used the same settings for the layer styles:

image 18

image 19

image 20

Nov with this layer selected go to Edit > Transform > Warp, and select Inflate

image 21

Do not forget to hit Enter

Then duplicate this layer, and change the size one more time ( make it smaller ) and place it with your arrow keys in the middle ( you can use the alignment tool )

image 22

Then add the following layer styles for the top layer

image 23

image 24

image 25

image 26

This is my result

image 27

Then add some text " ENTER "

image 28

Select The Line Tool ( set the weight to 1 pixel ) and make a simple line like in the next image

image 29

Then with the line layer selected, press on Add layer mask

image 30

Select Gradient Tool ( set to reflected gradient )

image 31

Then draw a line following the blue arrow from the next image

image 32

Duplicate this layer ( with the thin line ) and place it like in the next image

image 33

Now select all the layers ( without the background layer ) and drag all the layers to the " create new layer " button from your layer palette
This will duplicate all the layers

image 34

Now press on Ctrl+E ( this will merge the duplicate layers into a single one )
now go to Edit > Transform > Flip Vertical

image 35

With your arrow keys place this layer like in the following image ( we will create a reflection )

image 36

be sure you have the reflection layer selected, then press on " Add layer mask "

image 37

Grab the Gradient Tool one more time, and make a vertical line ( following the blue arrow )

image 38

Now reduce the opacity for this layer

image 39

This is my final image

Splash Page Tutorial: Final Result



Author's URL: amitk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Splash Page"

Only registered users can write comment

Reader's comments
comments Rakib December 31, 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
:( 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