Website Layout Slice Adobe Photoshop Tutorial
Open the image or images you want to slice such as buttons or a website layout I will be teaching you how to slice buttons and designs in adobe Photoshop just using the slice tool.
1. Once you’ve opened the layout with the buttons you will want to select the slice tool this is located on the moveable tool bar as shown below if you’re not sure which is the slice tool.
2. Now with the slice tool selected you will want to place it the little area’s first to we can get them out of the way so I will be showing you how to slice buttons so they will work with css and mouse over’s. Zoom in the area to get a better view on what you’re slicing.
3. Now with the buttons sliced we might have some advertisement area’s that want slicing. A word of warning if your website layout contains of content boxes you need to remove them and place them in another psd file to slice later on this will mean you won’t have to use iframes or anything like that. I have a few advertisement areas’ so am going to show you how to slice these area’s with slice tool.
You slice two boxes this Is because when it comes to editing the area’s you can and a little tip when the background is the same colour through out without using the image you can use the colour code such as if I removed the Your ad here image when I come to coding the design I can remove it and place #ffffff this will save you space and will help with your website speed so keep that in mind.
4. Now for some people who might have content boxes in there design I will show you how to slice them so they won’t without broken images. Keeping your slice tool selected zoom in on your content boxes and start at the top and work down as shown below.
Tip when slicing you will notice a blue line that appears when you slice this helps you keep a guide line on were your slicing.
Now let’s start to work on the rest of the content box lets slice the sides and the middle and the bottom and then were done with the content box. So then we can work on the header area and if you have ads in the header I will show you how to slice that area.
5. Now let’s slice the header area so I can show you how to slice headers and other objects that might be in a website header.
As you can see ive sliced up to the beginning of the advertisement box this will help when it comes to putting your website online. Now with the advertisement box unsliced we will need to slice it so it works when coded. So lets zoom into the advertisement area if you have one and lets slice if you ever think the slice is not big enough you can right click and go to edit slice settings this will tell you the height and width of the slice as shown below.
Now lets start to finish the header off and come to the end of our tutorial on how to slice.
Now if you have sliced your website design and ready to save it all as a webpage click on file save for web and choose your image type as shown below.
This will save the images as a JPEG format with the quilty at 100% this will save your document as images and webpage such as html format. This is the end of our tutorial I hope its been very useful.
