Dreamweaver, BBEdit, or another favorite editor).
#Photoshop mockups code#
Otherwise, let’s take things a step further by converting these divs to relative positioning.įirst, make a copy of the ImageReady-generated HTML file and open it in your code editor (e.g. Maybe absolutely positioned divs are just what you need-if so, grab a cup of coffee and relax. We now have slices consisting of absolutely positioned divs, with the CSS contained directly in the HTML file’s head.
Jump back and forth between designing in Photoshop and ImageReady until you’re ready to test out your design in a browser. The same goes for the content area, any side columns, the footer, and other areas you may want to define. You will use this later on when editing your CSS. ImageReady would really like to call this “Yourfile_1_01,” but you’ll save yourself some work by giving it a logical name from the start, like “header”. For example, you may have a header that will become a div tag later on. Once you’re finished use the Slice Select tool to select and rename each section. Use the Slice tool to create your slices. (For a production layout, you would probably shy away from Adobe rollovers and actions in favor of your own JavaScript or CSS rollovers, but for mockup use, these rollover states should suffice.) Slice it up #section4 Using ImageReady, you can style your navigation menu items (unless you’re doing that with pure text / CSS) and set rollover states. You’ll want to be sure that your layout is aligned to the top left don’t try to center it just yet-that’s a job for CSS later on. This means you can start off in Photoshop to do all your complex masking, fades, Illustrator vector art, filters, etc., and then switch to ImageReady to slice up your layout.
Using ImageReady, you can export slices as absolutely positioned divs, which can be easily transformed into relatively positioned divs. Conversely, ImageReady is perfectly suited for raster work, but less so for vector work (although that’s changing). Adobe Fireworks is great for vector applications, but less so for raster work. Make ImageReady CSS-ready #section3Īdobe Photoshop CS ships with a web-focused sidekick: ImageReady CS. These days, this is surprisingly straightforward with ImageReady. So why start off with a sliced table at all? What I needed was a way to generate clean relatively positioned divs-or, barring that, code that was close enough that it wouldn’t take aeons to make it play nice with W3C standards.
Only with ridiculous hours of coding and copious quantities of caffeine could you convert such a table to relative divs, and this just steals more time from when you could have been designing more mockups or sleeping. The problem I ran into was that I could only export HTML code using tables, when what I really wanted was relatively positioned div elements. I must admit, Fireworks was a major part of my design arsenal until I started taking accessibility and standards compliance seriously, and I don’t think I’m alone here. I’ll show you an easy way to produce mockups with Photoshop, prepare them for the web with ImageReady, and clean up the code afterward. So what, then, can these programs do in terms of producing valid and useful code? More than you think.
WYSIWYG graphics editors such as Fireworks, GoLive, and ImageReady allow you to generate HTML code, but the exported code tends to use tables or absolute positioning. Creating structural, semantic markup, as A List Apart and most standardistas recommend, still takes time, thought, and hand-coding. This is not a production technique for people who want to get the most benefit out of (X)HTML by creating structural, semantic markup. Brief books for people who make websites.Ĭaveat: This article is for people who need to produce valid, standards-compliant mockups quickly, with the graphics tools they already use.
0 kommentar(er)
