Don’t worry if they’re not exact, we’ll adjust them in the next step.ĥ. If Preview is turned on in the Divide Slice dialog, you’ll be able to see where your slice lines will appear in the image. In my layout, I’ve divided the image into three slices horizontally: one for the header area, one for the main area, and a third for the lower, footer area. Remember, each slice will wind up being saved out as an individual graphic, so you may want to create slices for each button in a menu, for example. This is where the craft of image slicing comes in. Turn on either Divide Horizontally Into or Divide Vertically Into (or both) then enter in the number of slices you’d like to create. In the Divide Slice dialog that appears, decide how you’d like to break that single slice that you just drew. Right-click (or Ctrl+click on the Mac) anywhere inside your design, and choose Divide Slice.Ĥ. I think you’ll find this to be the easiest and most accurate way to slice images.ģ. This creates a single, large slice that encompasses your entire layout. With the Slice tool, click and drag a box all the way around your entire design. From Photoshop’s Toolbox, select the Slice tool.Ģ. There are a few different ways to slice apart layouts and page components, but I’ll show you my technique.ġ. This means you’ll be isolating buttons, logos, and background areas on your page by slicing them away from the rest of the layout. What you’re doing is taking your overall layout and cutting it into smaller pieces. Once your page design is complete, you’re ready to begin slicing it apart. Later on in Dreamweaver, you can drop in the content. What you’re after is the overall look of all the pages in your site. Imagine instead that you’re building a template. If you’re building a page as I am here, don’t worry about actual page content-the text and other objects that would appear on the individual pages of your site. Often times, I’ll even cook things up in Illustrator, then drop them into my layered Photoshop layout as Smart Objects, just to make the process go faster. Use whatever tools, commands, and options you’d like. Design and lay out all your buttons, background graphics, logos, and so on, building up your page’s design. Once your dimensions are set, it’s simply a matter of building your design. Now in the case of creating a page object like a menu or header, you’d have to know the dimensions of the object before creating it in Photoshop. As for the height, that’s usually determined by content, so you might want to give yourself lots of space to work inside. This means that starting off in Photoshop, I create a new file with a canvas size of 990 pixels wide. There’s quite a bit of debate as to how wide one can design inside a width of 1024 pixels, but I personally go with 990 pixels as my maximum width. In my example, I’m building an entire page, and because I don’t want any horizontal scrolling in my layout, I build for the most common monitor resolution, 1024×768. So obviously, the first thing you’ll need to do is create a layout in Photoshop. Part 1: Designing Your Page ‘n Slicin’ it Up The following sections describe how to take a created layout, slice it up in Photoshop, save it out, and then pull the whole thing into Dreamweaver to finish it off. It’s a very cool process, and one of the most popular methods for building web pages. Sounds awesome, huh?įinally, once everything’s saved out, you can pull everything into Dreamweaver and finish off your layouts with any necessary tweaks. Then, when you save everything out, Photoshop saves each slice as an individual graphic, and (and this is the icing on the cake for the code-leary) all the necessary code will automatically be written as well. Then you cut out all the page components-title bars, buttons, navigation menus, and so on-using Photoshop’s Slice tool. Well, you’d first design a page in Photohsop exactly as you want it to look when it goes live on the web. No doubt you’ve heard about image slicing, but do you know what it is and how it works? Image slicing is a technique for creating a web page (or a component of a web page, like a header or navigation menu) visually in Photoshop (Fireworks and Illustrator also allow you to slice images, too).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |