Tips For Working with Photoshop & DreamweaverPosted on 21
This article was originally written for Computer Arts magazine, Issue 165. It has been republished here with permission.
Knowing Photoshop is one thing, but knowing how Photoshop can be used across the whole Adobe Creative Suite is another. In this three part series, we will be focusing on the features that will help you become more productive when using Photoshop in conjunction with InDesign, Illustrator & Dreamweaver (a great website builder).
By looking at the features that often get overlooked and by demonstrating how you can use them with the other CS programs, it will make you much more efficient, thus helping you become a better designer.
- Week 1: Tips For Working with Photoshop & Indesign
- Week 2: Tips For Working with Photoshop & Dreamweaver
- Week 3: Tips For Working with Photoshop & Illustrator
As designers we are often required to present multiple variations of designs to clients and a great way to do this is via the use of layer comps, one of the most underused features of Photoshop. With layer comps, you can create, manage, and view multiple versions of a layout in a single Photoshop file. A layer comp is basically a snapshot of a state of the Layers panel. You can export layer comps to separate files, to a single PDF, or to a web photo gallery. Open the Layers Comp panel by going Window > Layer Comps. From there, click the snapshot button for each new layer comp. You can then export the layer comps in a few clicks by going to File > Scripts > Layer Comps to Files.
Pixel perfect design is required on the web and a great way to achieve this is by the use of Absolute Positioning – this allows you to place objects to the exact pixel and is much more accurate & less time consuming than using rulers. For example, if you are trying to create a menu of hyperlinks and you want each link to have equal spacing between each other, all you need to do is select each of the objects, select the move tool (V) and click the “Align Vertical Centres” button found at the top of the Photoshop window. If it were a horizontal menu, you would click “Align Horizontal Centres”.
Smart Object Work Flow
Rather than working out of Photoshop directly, you can work in Dreamweaver via the use of Smart Objects which is a very productive way of working. A Smart Object in Dreamweaver is an object placed on a web page that has a live connection to an original Photoshop (PSD) file. To use a smart object, go to Insert, then select your PSD file. Ensure you have the PSD files saved in the sites directory so if you share the file, it does not link to your hard drive.
Copy & Paste Optimised Images
Did you know you can copy all or some of a Photoshop image and paste the selection into your Dreamweaver page as a web-ready image? Not only can you do single layers, but even whole sets of layers or even a slice of an image however if you do this, you must remember that Dreamweaver does not create a Smart Object. To do this, it is as simple as placing the cursor where you want the image to be inserted and pasting – this works in both Design and Code view. Information about the image, such as the location of the original PSD source file, is saved in the Design Note section for future reference.
Save for Web
You should be well aware of the “Save For Web” feature found in the File menu of Photoshop, however, it is always good to get a reminder of the basics. Jpegs should be kept to photos or “busy” images with many colours. GIFs and PNGs should be kept for less complicated files, such as line work, logos and images that need transparency. If you are unsure of what will be the best optimisation, ensure you use the ‘2 Up’ or ‘4 Up’ options to make direct comparisons. Click on each variation and then change the settings to view the comparisons. Ensure you zoom into to see exactly what is happening to your images.
Stay tuned for next week’s tips on working with Photoshop and Illustrator.