Posts Tagged "web layout"

Step 1. Create a new canvas, we used 430*300px, but you may want to use a different size depending on your layout size.

Step 2. Select the gradient tool and using two colours – #000000 and #454545, draw a line from top to the bottom, making your background gray fading to black.

Step 3. Choose the elliptical marquee tool, and draw an ellipse, as shown on the picture below.

Step 4. Make a new layer (Shft + Ctrl + N) and using the bucket tool with any colour, fill the ellipse.

Step 5.

Go to Layer >> Layer styles >> Blending Options and apply the following styles to your ellipse.
Drop Shadow
Inner Glow
Bevel and Emboss
Color Overlay – (colour used: #4cd302)
Gradient Overlay (black #000000 and white #ffffff)
Stroke

After having applies these settings, this is what you should get:

Step 6. Duplicate the ellipse layer (it would automatically have same Layer style settling). Make sure the upper layer is selected, and click Ctrl + T (to transform the layer). Hold the Shift button (in order to keep the ellipse’s proportion and re-size the upper layer a little.

Press ‘Enter’ to apply the modifications.

Step 7. While the upper layer is still selected, move the smaller elipse towards the edge of the bigger ellipse.
Then, reduce the opacity of the smaller layer to about 60%.

Step 8. Make a new layer.
Go to Custom Shapes and select Arrow 6 shape (comes default with Photoshop CS2. Draw an arrow as shown on the illustration below. If you are not managing to make both arrow’s ends to meet the sides of the ellipse, just draw a bit bigger arrow and then using the Ctrl + T option, resize it and move to the desire position.

Ok, today you will be making this incredible web layout.. i personally think it’s one of the most professional tuts I have made recently but that is for you to judge.. anyway, here is your result:

Before you get started, you need some resources, such as grungy texture and photos for the background. We used two images and blended them, first was a fabric texture taken from here .

Create a new canvas, 750*602. Paste your fabric texture unto the canvas.

Since our canvas is very brights, go to Image >> Adjustment >> Brightness / Contrast and reduce both Brightness and Contrast, as shown on the picture below.

Take some grungy texture. We used a dark paper provided by nighty.

Paste it unto the existing fabric canvas, and set the new layer’s opacity to about 30%.

Opacity may vary, depending on the desired effect. so far, out template’s background interface looks like this:

Select the Rectangular marquee tool, and draw a rectangular as shown on the illustration below:

Now, select the gradient tool, select the gradient – “black to transparent” and draw a line from right to left, so that your box will have a mild gradient as shown below:

Make a new layer. Using the marquee tool again, draw a box at the upper left corner, like this:

Go to Layer >> Layer styles >> Stroke and apply these settings:

For the gradient effect we used these colours: #603f16 … #c4843a … #603f16

This is the template we are going to make…

OK, lets get started…
Make a new canvas, 650 * 550 and fill it with #cff3f5

Press Ctrl + A on your keyboard to select the canvas fully.

Go to Select >> Modify >> Border and add decide how many pixels from each side do u want your template body to be.

If you wish, you can also smooth your border, but this step is option, yet if you want to do it, do it now.

Make a new layer, and while the frame around the template’s body is still selected, and smooth mode is on, paint the borders with the #b8e0e1 colour. It will smoothed and automatically create the effect of brighter border around the main body’s edges.

Make sure you switch to the new layer you have created, and go to Layer >> Layer Styles >> Blending Options. When the styles window is open, apply this border (stroke) effect:

This is how the canvas will look so far (our final result will be without rounded borders.

Take a girl’s photo, make sure it is of an excellent quality, otherwise your final result will be terrible, this is the girl we used…

(Wanna know who is she, eh?) Well, we used Hannabeth’s photo by Cherie Roberts kind permission. If you wanna use her material, remember its HER copyright photo, we use it here for demonstration of the technique only.)

Copy the girls photo to a clipboard and paste it unto the template canvas.
Press Crtl + T to rotate the photo, and rotate it leftwards in about 20-30 degrees… (see pic below)

Select the eraser tool with round sharp edge (not soft!) and remove the girl’s picture from outside the border. make sure you do not remove too much or, on the contrary – not enough.

Make a new layer.

T

So, get started by creating a new canvas, 900*700px.
Make a new layer on your canvas and fill it with any wood-like pattern. If you have no wood patterns, download our PSD file.

Next, using the rectangular marquee tool, select a strap at the upper part of the template, lets say 140 or 170 pixel high. Make a new layer and fill your selection with any hue of brown.

Go to Layer >> Layer Styles >> Gradient and using #000000 … #FFFFFF … #000000 colours, apply the gradient effect with 28% opacity. Make sure to set the Fill of the layer itself to about 30% as well.

Next step. Using the rectangular marquee tool again, select a box under your previous layer, also from side to side, but about two times higher.

Make a new layer and set your primarily colour to #013814 and your secondary colour to #005e29. Using the Gradient tool, draw a line from the bottom to the top, so that the darker hue will be below.

While this layer is still selected, go to Layer >> Layer Styles >> Blending Options and apply the following settlings:
Stroke
Drop Shadow

This is how your canvas should look thus far.

Using the Rectangular Marquee tool, select a box at the left upper corner of your template, as shown on the picture below:

Make a new Layer, and switch to Gradient tool again, this time, using the same green hues as before, draw a line from top to the bottom, so that the darker green hue will be above. This will give the layout a better balance.

While the later is still selected, go to layer >> layer styles and apply the following settings (same as with the previous box).