Web slices photoshop how to#
Web slices photoshop code#

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

Web slices photoshop how to#

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.

Web slices photoshop code#

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).