Layout for osCommerce or CRE Loaded

admin · #1 (**permalink**) 10-22-2006, 08:45 PM

Hello

This is the Tutorial number 29 from the 100 Marathon Tutorial
As i have told you i will try to add a tutorial each day.

Today i will show you how to create a layout for OS Commerce or Cre Loaded Websites

Create a new document with a white background.the size should
be 760 x 770 px.
Create a new Layer ( press SHIFT+CTR+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 folowing 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.

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:

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:

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.

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 symple 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 yout 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 .

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.

If you want to add extra details on this layout then you might be interested in Talk-Mania Big-Pack

sherman · #2 (**permalink**) 10-22-2006, 09:13 PM

Oh
What a tutorial. To be honest i have seen a lot of websites with tutorials but talk-mania is one of the best tutorial websites.

Thanks for your time. I am really happy to be a member of this comunity