Layout for osCommerce or CRE Loaded

Create a new document with a white background. The size should be 760 x 770 px.

Create a new Layer ( press Shift+Ctrl+Alt+N )

Start by applying a gradient to the background:

Set the Foreground color to #3a6ed3
Set the Background color to #04005e

With the Gradient tool draw a line from top to bottom.

Then create 3 rounded rectangles using " Rounded Rectangle Shape Tool "

Like in the following image ( i will use 3 different colors - so you can see better what i am doing )

Now we will apply a layer style for the White rectangle:

Gradient color for Gradient Overlay settings:

Gradient color for Stroke settings:

Please go on Layer palette and drag the Green Rectangle under the Orange Rectangle.

Now add the following layer styles for the Green Rectangle:

Gradient color for Gradient Overlay settings:

Gradient color for Stroke settings:

And for Orange Rounded Rectangle add the following layer style settings:

Gradient color for Gradient Overlay settings:

The result should look like mine: ( next image is resized )

Now select the Rectangle Tool and create a rectangle like in the following image:

Then apply this layer style for the rectangle:

You should have something like that.

Click to enlarge

We will add now another details but first you need to create a pattern:

Now Create another document:

Zoom this document to 1600% and with the Pencil Tool Draw 3 points:

After that go to Edit > Define Pattern...

Choose a name for your pattern and press OK

Now let's come back to our layout.

Create a new layer ( press Shift+Ctrl+Alt+N ) and with the Rectangular Marquee Tool make a selection under the Orange rectangle:

Select Paint Bucket Tool and choose your pattern:

Press one time with Paint Bucket Tool inside your selection.

Then Deselect ( press Ctrl+D to deselect )

This is the result:

Now Duplicate this layer and place it like on the following image. To duplicate a layer , first you need to select it and then press Ctrl+J

Then with the arrow keys place it on the bottom of your layout:

Click to enlarge

You can notice that my line is smaller. To do it so you can delete the with the Erase Tool.

Now create a new Layer ( Shift+Ctrl+Alt+N ) and one more time with the Rectangular Marquee Tool make a another selection:

Click to enlarge

And fill this selection with #5b5b5b

Now i will add some text. You can see in the following image what text and where i have placed the text.

Click to enlarge

Now we will add some images on our layout.

Then with Rounded Rectangle Tool Create one small rectangle and use this setting for layer style:

Then change the Blend Mode to HUE

Then i have duplicate this layer a few times and i have moved with my arrow keys like in the following image:

Then I will add a simple text logo with a few circles near text.

Create another document 12 x 12 px with a transparent background , zoom the document to 1600 % and with your Pencil Tool draw a small arrow

Select the Move Tool and Drag this small arrow near the text buttons:

Now With youth Type tool write a few minus signs " --- --- "

Use the font Lucida Console ( size 9 pt )

Then go to Layer > Rasterize > Type

After that go to Edit > Transform > Rotate 90 CW

Duplicate this layer a few times and place it between the text buttons:

Please create a new document ( 10 x 10 px with a transparent background )

Zoom it to 1600 % and with the pencil tool draw some points like on the following image: i will use a white color on a dark blue background. i will use the dark blue color just to show you better what i am going to do:

Then go to Edit > Define Pattern

Now return to layout

Create a new layer and make a selection with Rectangular Marquee Tool .

Click to enlarge

And fill the selection with this pattern. then reduce the opacity for this new layer to 25 %.

This is the result:

Then with this layer selected press on Add Vector Mask

Now press "D" and " X "

Select Gradient Tool and draw a line inside your selection from bottom to top. ( Keep Shift pressed while you draw this line )

This is the result:

Then i will add another text and a image with a computer on the header.

This is my final layout , and i hope you like it.

Click to enlarge