| Layout Tutorial |
|
BEFORE YOU DO THIS TUTORIAL IT IS ADVISE YOU READ ALL THE INSTRUCTION THROUGHT ONCE. CLICK ALL IMAGES FOR THE LARGER VERSIONS.
1- Open a blank canvas depending on what sort of size you want for your website layout, my basic size is usually around 650 x 550 2- Choose the pictures you want on your layout and open them in yout program. Add any colouring effects you want. I have used the following colouring. Then resize them to fit your canvas, I have resized mine to 500px height. Picture I used: LINK 3- Using you picture choose 2 oppropriate background colours and make a gradient on your layout canvas using the following settings.  Drap a gradient from the bottom of the canvas to the top. 4- Next I want to add texture to the layout background. The first texture I want to use is a lined paper one. Drag it onto your canvas (it will probably need resizing), then set it to whatever layout style you want. I used Color Burn.   5- Next I wanted to add a scratch texture, I used the following texture.  Drag it onto your canvas and set it to either lighten or screen. You may want to sharpen the testure depending on how much you want the scratched to show. 6- Next I add a pattern to the canvas. Create a new layer and make a selection about 300px height, and then using a pattern, fill the selections. I used the following pattern. Deselect the selection (select>>deselect), then set that layer to whatever style your want, I choose lighten. Next to blend it into the background I add a layer mask. then using the following gradient settings I dragged a gradient out from the the middle of the pattern, to just above it. Use the line texture as a line guide.  7- Now drag your first picture onto you canvas. Take the polygon lasso tool and set the feather to 20. Draw around the person in your pictures leaving a gap (see below).  Then select the inverse and press delete. This should get rid of most of the background, but if not use the eraser 100 and feathered. You need to make sure your image doesnt go to see through. A slight see through at the edges is fine. Mine so far:  Alternatively at this step you could use a psd instead, or cut round you image. 8- Create a new layer under your image. Next we need to add a big brush to the background, a light burst brush or a spiral brush is perfect. Here is the brush I used, you may need to resize it. You can set it to whatever layer style you want to, I chose overlay.  9- Next using the same brush but full size, I chose a red shade FF0000, and stamp the brush onto the canvas on a new layer. I set the layer style to softlight. Mine so far:  10- Next taking a smaller brush (see one below), stamp it on a new layer behind your person, with some of it sticking out see the example. Set the layer to whatever style you want. I chose Color Dodge.  Mine so far:  11- Now youve got your basic layout its time to add text. It doesnt matter what colour for now. Use whatever styles and fonts you like. I used Aharoni Italic in 36pt. (if you havent got aharoni, use arial) Next add a gradient overlay using the following settings.  Also add a drop shadow using the following settings.  I also added a tag line in text just below the site name. This is your basic layout from here you can add whatever else you like. Add links, text boxes, more picture, here are some more examples.  |