      
Introduction
This is a large tutorial with 40+ images, they have been split up over several pages but load times may be long. Don't forget to download the layout : So to begin with I guess you will want to see the finished result.  Support If you require support for this tutorial then please don't hesitate to PM me on the p2l forums. Contact me via my blog or send me a email  File Download: Pixel LayoutTutorial Step 1 - Setting up. Open up a new image 800 x 600  You then need to select the paint bucket tool and change your foreground palet colour to #DBD7C5.  Step 2 - Header Text Create a new folder and name it header  You can then create a new layer and put it in that folder. Select the Text Tool and then set it to the following settings, the font is AG ForeignerULB-Plain, its in the tutorial pack.  The text colour is #989589. Type in whatever you please and position it like this.  We now need to give the text its layer styles, select the drop shadow option and enter the following settings.   The Colour is #BAB999. It may be difficult to copy the custom contour however the psd is avaliable in the tutorial pack. This is what you should have so far  Now we need to give the text its glossy look, we are going to achieve this using a bevel and emboss effect   Click the image to view the custom contour You should have something which looks like.  Step 3 - Display Area. Make a new Folder called background and then make a new layer. Select the rectangluar marquee tool from your tool pallet and switch to fixed size.  Make a selection like this.  Select the paint bucket tool and then change your colour pallet to #F9F8F4. Fill the selection with the colour and fill the layer with the colour. Now zoom in 1600% and look at one off the corners, select the eraser tool, set it to pencil and the opacity to 30%. Click 3 times on the furthest out pixel and once on the pixels either side off it. You should have something like this  Do this in each corner. Zoom out and you should have something like this.  We are now going to add a drop shadow on this layer.   You should have something that looks like this.  Step 4 - Navagation Bar Create a new folder called Navagation and then select the rectangular marquee tool and change the top bar to the following settings.  Make a selection like this  Create a new layer and then right click on the selection.  Click Fill and then this menu will come up.  You will then a menu like this come up, you want to enter this Colour: #DBD7C5 and then click ok.  Hit ok agian and then right click the selection box agian.  Click stroke and then you'll get a menu like this, click on the colour and enter #989589 as the stroke colour. Make sure the opacity is set to 100% and then press ok.  Press CTRL + D to deselect and then zoom in to the corner at 1600% times zoom. Then select the eraser tool, set it to pencil, and set the eraser tool to 30% opacity. Click 3 times on the furthest out pixel and one on the pixels next to it, just like with the main content box. You should get something like this, please note this is zoomed in more than 1600% thats why its so big.  Do this in each corner of the navagation background and then create a new folder inside the Nav folder and call it Button. Create a new layer and select the rectangular marquee tool and change the settings to the following.  Make a selection inside the navagation area like this.  Select the paint bucket tool and set your foreground pallet to #CECAB9. Now right click the selection and you'll get this menu Set the colour to #BFBBAC and press ok. You can add some pixel art or icons to the button if you want. I added an arrow, made it using the pencil tool. Now we are going to add some text to the button. Im using the font 04b09 its quite well known and is provided in the tutorial pack however most pixel fonts will go with this. Set the font size to 10pt and the colour to #78766F. Type in whatever you want, I typed in Home. You can then duplicate the buttons by duplicating the folder button by right clicking and pressing Duplicate layer set and then pressing ok. Here's what you should have so far.  Step 5 - Main Content Area Create a new folder called Content and make a new layer called back. Select the rectangular marquee tool and give it the following settings.  Then select an area like this.  Select the paint bucket tool and fill it with the colour #DBD7C5. We then need to round off the corners so zoom in to 1600% and select the eraser tool. Make sure its set to Pencil, 30% Opacity, 1px Then click the outermost pixel in each corner 3 times and the pixels next too it once.  Do this in each corner and you should get something like this.  Create a new layer called front, make sure its higher than the layer back. Select the rectangular marquee tool and set it too the following.  Make sure the selection in as far in the centre off the other box as you can. You need to select the paint bucket tool and then set your foreground colour to #FBFBF9. Fill the layer and then right click the selection, this menu should appear. Set to the following. Colour: #989589 Size: 1px Opacity: 100% After you've done that we need to round the borders off, zoom in 1600% and select the eraser tool make sure the settings are. Pencil 30% Opacity 1px Click three times on the pixel in the corner and once on the two pixels either side off it. It should look something like this.  Do this in each corner. Then zoom out.  The layout is now finished. Time to slice. Step 6 - Slicing Make sure any slices across the layout start and end in the same place, im only showing partial images here. Now you need to save the layout and select the slice tool. In this tutorial we arn't going to slice the layout and then save it as html in Image Ready, we are going to slice it and get the images we want and then save it code it ourselves in CSS. So we are looking to make sensible slices which we can use. Here is an image off the slices i've made.  You may want to bring up the grid for this. View -> Show -> Grid. When slicing you want to be working at about 800% zoom so you can be precise. For the banner you want to make a slice like this.  Then select the slice selection tool, you can do this by holding down the slice tool untill the tab opens and selecting it or by pressing and holding CTRL to swap between the two. Then right click on the banner slice and press edit slice options.. and give it a sensible name like banner. We need to name the slices we want so we can discard the ones we don't need when we save the slice.  Now you need to make a really tricky slice, you need to take the top off the content box after it bends round, like so.  Make sure its from one end off the box to the other, this is only a snippet off it. Call this layer main_top. Time for the next slice. We then need to Get the end off the navagation bar and the content box. We can do this by making a square slice directly underneath the slice we just made.  We need to do this on the other side as well.  Name the slice on the left navagation_left and the one on the right navagation_right. Then you want to slice round all the buttons like so. You then need to do the repeat section so you need to take a tiny slice off the navagation bar like this  and then name that navagation_repeat.  Slice round each and call them button1....button9 etc. We now need to slice the top off the text box, just like before with a content box we need to slice before the top and after the bend like so, name this content_top.  Now we need to slice something that can repeat and be part off our content area, this means we can have a content box with could be any height, content_mid.  Make sure the slice goes all the way across the content box just like all the other slices. We are now going to make some slices at the bottom off the layout, we need to get the bottom off the content box and the main box.  The top slice is content_bottom and the bottom mainend. Now we need to save the slices as images. So go to File -> Save for web -> Save. When you've save it, delete all the images which arn't user slices and open up your html editor. Step 7 - Coding the layout (CSS) I am using Dreamweaver 8 to do this but you can use anything html editor you want, if you don't have one then you can just use notepad or register at the forums and download one of the ones we have listed. Make sure that your images are saved in the directory images inside the directory your saving this html file. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">You need to start by putting the headers, you can edit what I've made bold. We now have all the styles data that control the look off the site. I'm going to explain most off it in this step and then show you how to use it to code the layout in the next step. body { We start by setting the background colour to the same colour as the background off the layout. I'm using the margins to set the position off the layout on the users page as well as setting a generic font type, font size and font colour.#banner{ #banner is simply telling the banner to display as a block and float to the left off the display area. #navleft{ These two define the position off the two nav ends, notice that i've used the float to make it so that they can appear opposite each other without using div align's. The width and height data is to stop the images coming away from the repeating part. The bottom two id's are also positioning data so i won't get into that. #navrepeat{ The background image has been set as the navagation_repeat slice which looks like this. This code is designed to make it so that you can set the navagation bar so go all the way across from one off the end to the other. The background repeat is set to repeat-x that means it only repeats across the x axis or horizontally, the background image is also in bold, this is to show you the structure off the background image, if you want more information on it there is a tutorial on background images in css in our tutorial section. I've set the width and height off the bar so that it doesn't go on infinitly.The last two sides are for the content area. #main_repeat{ #main_repeat is just some positioning data and telling you what the background image is and what it does, notice that the background repeats on the y axis or vertically only, you can define the way it repeats depending on the type off slice you make.#main_repeat_inside is very important because it prevents your text from overlapping onto the repeated borders buy padding it, however it will work inside #main_repeat so that it doesn't distort it. Well thats all the css. You can copy and paste everything so far from here. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">We are now going to use this data to make the layout. !--My copyright, please don't remove it if you use the layout. We are setting how wide we want the div tag to be and its alignment. <img src="images/banner.gif" alt="banner" id="banner" />We are now putting the banner up and the top off the main box. <div style="width: 470px;">Here we are making the navagation bar the right size and then inserting the left image. We then start the repeat and but the buttons in it, we will then close the navagation. Notice that the id tags on the images are being used to point at style data in the style sheet. <img src="images/content_top.gif" alt="contenttop" id="contenttop" border="0" vspace="0" hspace="0" />We are now starting the content box. Notice how i've placed the main_repeat_inside after the main_repeat your content will go inbetween the main_repeat_inside tags. </div>Just closing the tags and adding the final images to the end. Arutha 
Dig this tutorial?
Thank the author by sending him a few P2L credits!
Arutha
As much as i love the default message i want to just say hello and to tell you to visit my blog :) 
|
