Use Photoshop with Dreamweaver

Don't tell anyone we told you this, but designing and building stunning websites can be easy - if you've got the right kit: the powerhouse combination of Photoshop and Dreamweaver. Several years ago who would have thought that Photoshop and Dreamweaver would grow to love each other? Photoshop's web capabilities were limited to say the least; Dreamweaver was lambasted by most developers and renamed 'Dreamdiva' due to its fits and pouts when confronted with major coding tasks. But this has all changed.

Photoshop and Dreamweaver are essential for designers making web pages. No other method is as intuitive and designer-friendly; you can switch between programs with ease, change artwork and update it immediately from web versions back to Photoshop, keeping clients happy, saving you valuable time and helping you retain your sanity. Here we show you the tricks and skills you need to maximise your use of these magic apps.

PHOTOSHOP

Wireframing in Photoshop
When it comes to laying out elements, Photoshop's grid, rulers, guides and Snap To features are blessings hidden behind the View menu. By enabling the Snap To feature, a wireframe can be created without you having to worry that your content elements are not lined up to the edges of your guides.

Shape layers are great ways to draw out 'dummy' wireframe content holders. These will snap to the grid when you draw them out, ensuring accurate positioning without the need to push the element to line it up. This is a great time saver when you've minimal time to update and send that wireframe over to a client!

Power tip You can adjust the Grid preferences by going to Edit>Preferences> Guides, Grid & Slices. Here you can customise your own grid with a different colour, style and gridline spacings.

Navigation
Navigation sections need to be a consistent style across your site in order to act as signposts that direct your visitors to other content areas. Photoshop enables smart designers to group the layers for these buttons together, and convert them to a Smart Object. Smart Objects are great when you have multiple instances of an element (as in a navigation section) as they enable you to transform, re-scale or warp your graphics without losing the original file information. What's more, you can even duplicate the Smart Object and turn the layer on and off to show your client multiple options without the extra work.

Power tip When your client decides they want to change the background for each navigation button, all you have to do is double-click the original Smart Object, edit the button colour and save the file. This then updates all the instances of the button across the webpage design.

Building a template
Using Photoshop's Animation panel enables you to create all your dummy pages in one file and then save them out individually.

Consistent elements such as the website header, navigation, background and footer can all be created in individual folders within the Photoshop Layers panel. In the Animation panel, create three frames and, in each, turn off the folder for each content page you need. You'll be left with three frames with three different content areas but with the same consistent site architecture. It's then easy to save a copy of each as a JPEG to send to your client.

Power tip If you need to edit a frame in Photoshop's Animation panel, Ctrl/Cmd+click the frame in the Animation panel and turn off the visibility of the extra layers. You can then edit and save a new frame without disrupting the others.

Slicing images and preparing for web
Photoshop has a Slice tool with a crafty knife which can be used to accurately slice and dice your website into a series of images and 'holes' where your Photoshop text can be replaced by live HTML text when you bring it into Dreamweaver. Photoshop can also produce HTML from the 'Save for Web and Devices' command. Once your layout is finished and you've sliced the website into sections, Photoshop will create an HTML table with these in. These can then be further edited in Dreamweaver to substitute the image file text with live text.

Power tip Once a website is sliced and diced, you can export it as an HTML file directly to Dreamweaver, grouping the images ready for the site structure. If you specify the resulting folder as your Dreamweaver site root, everything will be ready for you when you come to work in Dreamweaver.

DREAMWEAVER

Image importing and linking
New to CS4 is the option to import a PSD source file, convert this to a JPEG and then link it back to the original PSD. A graphical arrow symbol lets you know if the file has been updated, giving you the chance to update the file in Photoshop with the edits reflected directly in Dreamweaver.

Alternatively, the Copy Merged command in Photoshop enables you to select the entire Photoshop canvas and paste this into a new HTML document using the Edit command in Dreamweaver. An image preview box enables you to enter optimisation settings to create a web-friendly version of the file before pasting it into the document.

Power tip Keep file sizes down when choosing optimisation settings for your images. On import, select the format you want to use (GIF, PNG 8 or JPEG) and add a compression amount in the 'Quality' setting. As a rule, 80% works well for most prominent JPEG elements.

CSS tagging and styling
CSS (Cascading Style Sheets) comes in handy to accurately replicate your style and positioning rules for headlines, body text, images, background elements and pretty much everything else that makes up your design. Simply put, this is a document containing a grouping of styles for these elements.

With Dreamweaver, you don't even have to see the actual CSS file. A highly intuitive CSS rules definition dialog box makes it easy to enter font family, size, font and more, replicating those used in your Photoshop file. Using rulers and guides in both Photoshop and Dreamweaver makes it easy to position images using absolute, fixed, relative or static values.

Power tip Generate a CSS file from Photoshop by opening 'Save for Web and Devices', then opening the Output Settings menu from the right-hand panel and selecting Slices. Now tick 'Generate CSS' and reference by Div. Your CSS styles will then be applied to the name of each exported slice, ready for quick referencing in Dreamweaver.

Site testing
Designers usually stifle a yawn when it comes to testing a website, although Dreamweaver CS4 makes the task easy and less time consuming. Dreamweaver CS4 has a feature called Live View, which effectively enables you to view interactive features as they would be seen in a browser without leaving Dreamweaver. It does this by using the WebKit rendering engine, and saves you valuable time by not having to launch a browser to test elements that use AJAX or other such interactivity. Using Live View, you can always be sure that what you see on the authoring screen is what your site visitor will see in their browser.

Power tip Next to the Live View button is a down arrow that enables you to freeze JavaScript when you are editing dynamic elements. Use it, as you otherwise risk breaking your code. It's a bit like a mechanic switching a car engine off momentarily so they can make adjustments to the engine, then switching it back on to test!

Editing elements back in Photoshop
Once a PSD has been used to import a graphic file, two green circular arrows appear in the top-right corner that indicate the file used in Dreamweaver is the same as the one currently saved as a PSD. To edit this, select it and press the Photoshop icon in the Edit section of the Properties panel. This opens the original layered PSD. Make your changes, save the file and switch back to Dreamweaver. The bottom circular arrow has turned red, meaning the compressed JPEG is now out of sync with the PSD. It's easy to update this by pressing the 'Update from original' button in the Properties panel.

Power tip Look out for any yellow warning symbols in Smart Object icons. This means the HTML and image values don't match up. To fix it, ensure you hit 'Update from original' every time you edit an image back in Photoshop.