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

Flash Page Intro

Author: amitk More by this author


Open a new document in photoshop
Size 600 X 600 pixels
Background color: dark grey - #333333

Grab Rounded Rectangle Tool, set the radius to 30, set the foreground color to white and make a simple rectangle

image 1

Then go to Filter > Blur > Gaussian Blur
Photoshop will ask you if you want to rasterize the shape. Choose yes

Then in the Gaussian Blur window enter the following value

image 2

Then lower the opacity to 15 %

image 3

Then Create another Rectangle

image 4

For this rectangle add the following layer styles

image 5

image 6

image 7

image 8

image 9

This is the result

image 10

Select one more time Rounded rectangle tool ( this time set the radius to 15 pixels ) and create 2 rectangles like in the following image

image 11

Next step is to add a layer style for both rectangles

image 12

image 13

image 14

image 15

image 16

This is the result

image 17

Next step is to add some text. In the next image you will see the text "ENTER "
I have used the same layer style as above ( used for the blue rectangle )

image 18

Select Rectangle Tool and create another shape with a black color

image 19

Then go to Filter > Blur > Gaussian Blur and set the value to 7
After you will press Ok you have to change the layer opacity to 40 %
This is the result

image 20

Now we will need a pattern. open a new document 5 x 5 pixels with a transparent background
Zoom your document to 1600 %
Select Pen Tool and create the following drawing

image 21

Then go to Edit > Define Pattern , select a name for your pattern then press ok

Now we will come back on our splash page
Select Rectangular Marquee Tool, and make a selection under the 2 blue shapes

image 22

Create a new layer ( press Ctrl+Shift+Alt+N ) , then select Paint bucket Tool
be sure you have selected the pattern we have created in our last step

image 23

Then press One time inside your selection
This should be the result after you will deselect ( Ctrl+D to deselect )

image 24

With this doted layer selected, press on " Add layer mask "
Select Gradient Tool, and be sure you have this settings

image 25

Then make a line from the center of your doted line to the exterior

image 26

Then with the same technique you can add also some lines
You will see a zoomed image
You must add 2 lines. one with a black color, and the second one with a light grey, or white

image 27

Then i will add more text

image 28

Then i will add a text logo, i will use the same layer blue style

image 29

Duplicate this text layer ( with Talk-mania )
Go to Edit > Transform > Flip Vertical , then place the second text layer under the first one with your arrow keys

image 30

The next step is to change the opacity to 20 % for the second text layer.
This is my final result

Flash Page Intro Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: www.talk-mania.com

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

Add comments to "Flash Page Intro"