Hello EZ,
Since I’m relatively new here, not many of you are aware that I do freelance website design for extra money on the side. I do it with a graphic design partner, and the process of creating a website usually begins with my partner creating the full design in Photoshop. After the design is approved by the client, I go ahead and slice the design into several pictures to use with HTML/CSS to create the design. I’m writing this tutorial on splicing the images based on my experiences. My partner and I don’t use any frameworks – our designs are 100% unique and customized to the clients’ requests. This means that every time we create a website, I have to go through this process.
This is a living document. Right now I’m submitting explanations on how to splice the images in certain situations, but every design is different. If there is a certain aspect I have not covered, feel free to comment and I will eventually get to updating the tutorial. Also, this was my best bet for a forum section that fit this topic. If a moderator/admin disagrees, feel free to move it.
This tutorial is about slicing Photoshop templates into images in order to recreate the template with HTML/CSS, but it does not cover the HTML/CSS required (as of now). It assumes some basic background knowledge in those two subjects as well (Javascript w/ Jquery will also be beneficial). It also assumes
very basic familiarity with the Photoshop UI. The Photoshop version I use is a portable version of CS5. Location of buttons, dialogues, etc. may be different on other versions of Photoshop. Search around.
The Main Objective:Anyone can slice a bunch of images up and set it as the background of a DIV element in order to recreate Photoshop templates. However, that’s not the point of the process. The idea behind the process is to use the least amount of images, and the smallest images possible to minimize the time it takes to load the page. Believe me, the time it takes to load a webpage increases exponentially with each large picture you add to the design.
The techniques used to slice images in this tutorial are also recommended for maximizing the ability to modify the design without having to use Photoshop. If you do it right, you can edit box sizes, add more navigation items, etc. without having to re-slice any images. So, let’s dive in!
HTML5/CSS3 Disclaimer:I assume that use of CSS3 or HTML5 techniques are not an option in this tutorial because they are not always backward-compatible with older browsers, which is very important as a freelance website designer. However, there are libraries/techniques you can find online that replicate HTML5/CSS3 capabilities for older browsers. I've been forced to use them in some cases, and they've worked for my needs at that time. But that was only in the case that I could not achieve what I needed with these techniques. I recommended sticking with these techniques as far as they take you since they are guaranteed to work all the time. However, I also encourage you to experiment with those libraries if you're interested in doing so.
How to Slice:Before I can teach you the best ways to slice the correct images, you must first know how to slice. “Slicing” is selecting different sections of a Photoshop template to be saved separately, as their own image. In order to slice a section out of a template, you must use the Slice Tool:
Using the Slice Tool is pretty self-explanatory. But you should know that, when slicing, it’s very important to be accurate to the exact pixel. Zoom in to 2000% if you have to. Trust me, being exact really reduces stress/annoyances later.
After you slice your selection, you can use the Slice Select Tool (also shown in that picture) to select your slice. Right click your slice and choose “Edit Slice Options.” In this dialogue, you can change the name of the slice, the x,y coordinates, and it’s height and width. You should definitely change the name of the slice, as this is the name that the separate image file will be named after you save it.
You may do as many slices as you want. Once you want to save all your slices, choose “File -> Save for Web & Devices”. Use this dialogue to save all your slices. You can select each individual slice and change the file type it should be saved as (JPEG, PNG, etc.), and choose a destination folder for all the images. Use the dialogue, see how it works, and get used to it.
Backgrounds (Body, Div, etc.):Every design has a background, whether it’s a simple color, a gradient, a pattern, etc.
Simple Color: If it’s a simple color, you’re in the clear! Here’s what you do:
- Click the color chooser in Photoshop.
- Move the color chooser dialogue out of the way and, while it’s still open, click the background color.
- The color’s hex code and RGB code should now be displayed in the color chooser dialogue. Use one of those codes in CSS to set the background-color of the div, body, or whatever element you want.
Gradient: Gradients are a bit more complicated. Actually, if the gradient is not completely vertical or horizontal, you must skip to
giving up and saving the whole picture. Otherwise, you can use the technique I’m about to explain.
Know your repeat-x and repeat-y. In CSS, when you define a background image for any element, you can also specify its background-repeat attribute. By default, the image is set to repeat vertically and horizontally until it fills the height and width of the element. Setting this attribute to
no-repeat results in the image not repeating at all. Setting this attribute to
repeat-x results in the image only repeating horizontally, and setting this attribute to
repeat-y results in the image only repeating vertically. This is very advantageous in certain situations. Repeat-x is most commonly used, and it can be used in navigation menus, div elements, body backgrounds, whatever. With repeat-x, the width of the box can be edited by simply editing the width of the element in CSS. With repeat-y, the same is true for the height.
The repeat-x/repeat-y technique:This technique is very simple, actually. If the background of the body of your website is a vertical gradient/pattern, and using a repeat-x technique applies to it, all you have to do is slice a picture of the background that is 1px wide and the height of the background. So, if your Photoshop template’s canvas height is 1000px, you will save a slice of your background that is 1000px tall and 1px wide.
What if your actual webpage is taller than the repeat-x image?This is a common issue with the repeat-x/repeat-y technique. Here’s what you do:
- Create a separate div element inside the body tags to be the “background” of your web-page. Have it be as wide as the whole page, and as tall as the template. So, in our example, it would be 1000px tall, and the width would be 100% (*).
- Then, use the color chooser dialogue (like we did earlier) to get the color code of the color at the VERY bottom of the 1px wide image.
- Set the background-color attribute of the body element to this color. That way, if the document is taller than 1000px, it will just continue on with the gradients last color.
*Sometimes certain browsers don’t bode well with width:100% in CSS. In this case, what I do is use JQuery to create a method for whenever the browser window resizes. This method calculated the total width of the document, and sets the width of the background div to this width. This method should also be ran on document.load().
If the situation calls for a repeat-y instead of a repeat-x, do everything you did with width, but with height (1px tall image, 100% height).
Pattern: If the background is a pattern (one that you can’t use a repeat-x or repeat-y technique with), then your only option is to attempt to slice a square image that will work with a default repeat. This could be anything. If you have a pattern of flowers that repeats every 50px, slice out a 50px by 50px square and keep the repeat settings defaulted. If this type of pattern exists, it’s very likely the graphic designer behind the template (if not you) used a pattern to create it. If you cannot come up with the square to slice, it might be a good idea to contact the designer to see if they can manage something. If not, the only other option is to
give up and save the whole picture.
Transparency:Although this is a very small topic to cover, it’s used enough to deserve its own section. Transparency in images is a very common problem – after all, you can only slice images in the shape of a box. What happens when you have a different shape in your template? Well, you need to find the section of Photoshop that displays all of the layers with checkboxes (although the “checks” are eyeballs):
One of those layers contains the shape that you want to slice, and other layers probably provide background for that shape. Find those layers and uncheck them until all you see is the shape with the checkered Photoshop background behind it. From there, you may slice the image and go to “File -> Save for Web & Devices…” and save the slice as a PNG. It’s important that you save it as a PNG – PNG is the only format that supports transparency (besides GIF, but GIF sucks in comparison). There are two options in the menu under file type for PNG: PNG-8 and PNG-24. Choose PNG-24. You can experiment with GIF and PNG-8, but I’ve always found they come out with much less quality than PNG-24.
There are two ways to slice the image in this case. Once the background is gone, you can use the select tool (which is what I call it, it has some other fancy name):
Use the tool to just roughly select the shape you want to save.
Make sure the correct layer is selected. Then, right click the selection, and click “Layer via Copy.” This will create a new layer with just your selection in it. Find that layer in the dialogue that displays the layers, right click it, and click “Duplicate Layer.” Once the dialogue pops up, under “Destination,” select “New.” This will create a new canvas with just your layer on it. If the background is already transparent (and it should be), you can then go to the menu, click “Image,” and find “Trim…”. Click that, and make sure all these boxes are checked:
Press OK, and then your image should be reduced to its minimum size. You can then save it as a PNG.
Your other option is to skip all of the “Layer via Copy” crap and use the Slice Tool on the same document. But if this is your choice, you must zoom in enough to make sure your slice is accurate and concise to the very pixel. This will reduce annoyances later.
Fonts:Fonts are a big issue in converting a Photoshop template to HTML/CSS. Photoshop has such a large variety of amazing and artistic fonts available for download, while there are very few web-safe fonts available. By “web-safe fonts,” I am referencing fonts that will be visible by everyone, no matter what fonts they have installed on their system. This is actually a big issue. Many clients are picky about fonts, and some designs require specific fonts to look just right. If you use font in your CSS that is installed on your system, the browser will display it; however, if it’s not installed, it will default to a different font. If you’re using some special Photoshop font, I really doubt everyone that visits your site will have it installed. In the case that you have a non-web-safe font in your Photoshop template, you have two options: either settle with a web-safe font, or search GoogleFonts or sites like
http://www.fontsquirrel.com to safely import other fonts. Since the issue of fonts has been around for so long, Google Fonts and sites like the one I just linked to are dedicated to providing the capability of using their free services to
safely use fonts that are not officially declared “web-safe.” Google Fonts hosts the fonts on their servers and allows you to import them. That way, the font is server-side (taken from the web server), not client-side (taken from the browser’s computer). Font Squirrel does the same thing, except instead of just allowing you to link to their server, they give you all the font files you need. All you need to do is link to the CSS file they give you, and then reference the font as you would normally in your CSS. Both are great. If you cannot find your font on any websites like those, give up and settle for a similar font, or slice a picture of the words you’re using. Slicing a picture of the words you’re using is very inconvenient if you ever have to change the words or anything, though.
Rounded Corners:Rounded corners are one of the most popular topics asked about when converting Photoshop templates to HTML/CSS, and I’ve seen it done multiple ways. The way I’m about to explain has always worked best for me. Of course, with CSS3, it’s possible to create boxes with rounded corners and shadows without Photoshop. Hell, it’s even possible to create gradient backgrounds in CSS3. But I usually refrain from using HTML5/CSS3 because I know 90% of the world hasn’t upgraded their browsers enough to support those. This isn’t important if you’re just creating a website for your own personal needs, but if you’re creating a website for an older client that still uses IE 8, they will be very particular about the design being exactly correct. Using Photoshop to slice images and create the rounded corners yourself will be the most cross-browser compatible and backward-compatible technique.
Since I’ve already explained saving transparent images and using the repeat-x technique, then all you need to know is this:
- Make sure that behind the box is only a transparent area (no other layers).
- Slice the left edge of the box. Make sure to get all of the curved sections in that slice.
- Do the same with the right edge.
- Slice a repeat-x 1px wide image anywhere in the middle of the box.
- Make sure to save the edges as PNG-24 for transparency in the corners.
- In HTML, create a div with the repeat-x image as the background. Before and after the div, place the rounded images and use relative positioning to position them correctly. Or, you can do whatever else you want to position them. You could also maybe put the images inside the div and relatively position them using negative left and right values or something. Experiment with the CSS. As stated at the beginning of the tutorial, I’m not writing this to show you how to do that part.
If you need the box to have a varied height, you could also slice the top and bottom edges of the box, and use a repeat-y.
Drop Shadows:The use of drop shadows (or any kind of outer shadows) is a very common design technique to give off a nice 3D effect. Since I've already covered transparency and the importance of zooming to the exact pixel, all you need to know is this:
- You will need to zoom in a lot in order to be exact with the pixels and how far outward the shadow extends when you slice.
- Seeing how far the shadow goes outward is a little harder with the checkered background. If it helps, you can slice it with other layers behind it and later remove the other layers.
- As I just explained, before you save, make sure no other layers are behind the shadowed shape you want to slice. You should see the checkered background behind it.
- As with all transparent images, save the slice as a PNG-24.
Navigation Menus:Using HTML/CSS/JQuery to create navigation menus is probably the hardest task in converting a Photoshop template to a webpage. The CSS and HTML of each navigation menu is sort of different. That subject is beyond the scope of this tutorial, but slicing the images for it is not. Take a look at a simple yet good-looking navigation menu I converted from a Photoshop template:
Slicing the images for a navigation menu is probably the easiest part. I’ve already covered all the techniques required:
- If the template has a navigation menu that uses rounded corners (like the one above does), use the same techniques I explained above.
- Make sure to always use the repeat-x technique. This way, your menu items can be a varied character length, and you can even add/remove menu items by just adding another item in HTML.
- For hover/onclick events, simply save a modified/darker (whatever you want) slice of the repeat-x image and use the a:hover or a:active CSS selectors to change the background-image attribute of the menu item. More information on that can be Googled.
- Also save a slice that contains a separator in the menu, used to visually separate each menu item (refer to the menu above).
Of course, all of this is optional and depends on the template you’re using. If you’re template just uses a regular horizontal list with no special effects, so be it. Slicing the images isn’t your main worry, the CSS is.
When dealing with navigation menus or boxes with rounded corners (or any slices that are required to be the same height or width), right click the slice with the Slice Select Tool. Click "Edit Slice Options" and make sure all the slices are the height or width needed. If you mess this up, it'll probably end up fucking you when you go to do the CSS.The reason it’s important and better to use repeat-x images instead of just taking separate pictures of the full menu items is more of an issue of flexibility than load speed. Sure, the images will be smaller and that’s great. But imagine finishing a navigation menu, only for your client to ask you to either add a link, or change the words of a link. You would have to go through Photoshop, change everything up, possibly resize/reposition the slices, and re-save the images. It’s just a pain that should be avoided. With the repeat-x technique, you can simply change the HTML and solve the issue in a matter of seconds.
Giving Up and Saving the Full Image: Sometimes, when all of the methods I mentioned above (or any other methods you can think of) fail, you just have to save a full image and deal with it. Just accept the loss of load time (maybe compress the file to be smaller?) and the loss of flexibility. This option should only be used if there’s absolutely no other option.
Well, that’s all I have for now. As I said in the beginning of this tutorial, this is a living document. This is just version one. If you have any suggestions for additions I can make, let me know. If you have anything you would like me to elaborate on, let me know. If you would like to contribute to the tutorial yourself, you can PM me and I’ll give you credit in the section you contributed. Also, if you spot any typos or anything, please let me know. I haven’t read over this draft at all, so I’m sure there will be some. Thank you! Look for more website design tutorials in the future.
