Making Slices

Watch the tutorial now.
This tutorial will talk about how to make slices of your design in photoshop. I’ve already talked about this in the Web design section, but here it is again:

Photoshop has a knife tool that allows you to chop up all of the pieces you want so you can translate them into html terms and have it look exactly like you designed on the web. The easiest way to do this is to think of your site in terms of squares. You have to cut your design up into several small pictures, then you will re-align the pictures in the HTML code so that they fit together seamlessly. This is how it looks when it’s chopped up:

Watch the video on how I sliced this website
You may feel like this looks complicated. I can see where you’re coming from. The reason why it looks complicated is because I chopped it up in a way that would allow me to re-size the page to any size that I want later on depending on the content of the website. I do this because I design pages for clients and give them a CMS that I designed so they can put the content in themselves. If, then, they insist on putting a huge picture in there, I don’t have to worry that we website is going to look horrible because it will automatically re-size perfectly to the size that it needs to be. If this is for your own personal use, you may just chop it up in a simpler way so that the HTML code is easier for you to write, however, if you’re up for a challenge go ahead and follow my example, you’ll probably thank me in the long run.

Let’s take a closer look at how I chopped this part up on top. this picture shows the right edge of the top left slice. Notice how I made one slice 1px wide in the middle. This allows me to have a begin cap, an end cap, and a slice in the middle that will be duplicated in between. This is how I did all of the cuts for the entire layout.