Dreamweaver CS4 New Features
Illustration by John Hersey

Integrating with Photoshop


Dreamweaver CS4 New Features

with James Williamson

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: Integrating with Photoshop

Dreamweaver CS3 presented us with the first round of Dreamweaver and Photoshop integration. In CS4, this integration is improved and expanded to present you with a fully functional round-trip workflow that you're going to love. In this video we'll explore Dreamweaver's use of Smart Objects and how they can make working with images in Dreamweaver much more efficient. So I'm working in the 07 folder, 07 directory, and you want to open up taggings.htm. Taggings is a monthly newsletter and we need to fine- tune it by adding some graphics to it.
please wait ...
Watch the Online Video Course Dreamweaver CS4 New Features
1h 57m Intermediate Sep 23, 2008

Viewers: in countries Watching now:

In Dreamweaver CS4 New Features, Adobe Master Instructor James Williamson focuses on the improvements that benefit typical workflows in this popular web design and development tool. James demonstrates how to make efficient use of the new user interface, including the workspace manager, code navigator, Live view, and Property inspector. He also explores the capabilities of the Spry AJAX framework, including validation, tooltips, and datasets. Exercise files accompany the course.

James Williamson

Integrating with Photoshop

Dreamweaver CS3 presented us with the first round of Dreamweaver and Photoshop integration. In CS4, this integration is improved and expanded to present you with a fully functional round-trip workflow that you're going to love. In this video we'll explore Dreamweaver's use of Smart Objects and how they can make working with images in Dreamweaver much more efficient. So I'm working in the 07 folder, 07 directory, and you want to open up taggings.htm. Taggings is a monthly newsletter and we need to fine- tune it by adding some graphics to it.

Most notably at the top of the page we need to have our newsletter banner, which is what we're going to be adding. So I'm going to click anywhere sort of at the top of the page. Top left corner is fine. You just want to make sure that you're inside the DIV #banner and if you look at your tag selector you can see whether you're inside that or not. So just make sure you're inside that. I want to add an image to the page and it's an image that I really haven't created a JPEG or a GIF file for. It's just a regular Photoshop file. Well now that's not a problem. You can just drop a Photoshop file directly into Dreamweaver and Dreamweaver will add it as a Smart Object. I can add this image any way that I want. Notice if I go over my Files panel, I can open up the assets directory and there I see the newsletter banner.PSD. I can certainly also go over to the Assets panel itself and find the Photoshop file here.

However, I'm going to save myself a little bit of screen real estate. I am going to once again sort of collapse those down so the panels are just a series of icons. And then using my Insert toolbar, I'm going to go to my Common objects and I'm going to insert an image using that and that way I can browse for this. So I'm going to go ahead and Insert Image. I'm going to make sure that I'm in the 07 directory, and I'm going to go not in the images directory, but the assets directory because that is where our newsletter banner.PSD is located. So I'm going to go ahead and highlight the newsletter banner.PSD and click OK. Because we're trying to place a Photoshop file directly into Dreamweaver, Dreamweaver's going to say, "Wait a second, we need to optimize this and save it out as a web graphic beforehand." We're seeing the exact same Save for Web And Devices dialog box as I would see inside Photoshop, which is great. I'm going to make sure that I'm using a JPEG and I'm just going to set my quality to 80. Now the file itself looks huge and if I click in the upper left-hand corner, these two tabs, I click on the File tab, I can see that indeed it is huge. It's 1556 pixels wide. That's much wider than I need it. I'm going to make sure my width and height are constrained and I'm just going to change the width to 750 pixels. So we'll just go ahead and do 750, and we see that it shrinks down a little bit. I'm just going to click OK and again I get another prompt from Dreamweaver because now we're saving this out as a JPEG. I put it in the 07 directory. And this time we're going to save it in the images directory so your assets and your images do not need to be in the same folder.

Now it keeps the same name, newsletter_ banner. We're certainly free to change that but I'll just leave it as newsletter_banner.jpeg and I'll hit Save and it then prompts me for some alternative text. So I'm just going to say newsletter banner, click OK. And hey! There's our banner! Now, I didn't get the size quite right. It's sized are 750 pixels and obviously that is not exactly the width, but that's OK because this a nice Smart Object. Take a look in the upper left-hand corner and we're going to see an icon that we hadn't seen before in Dreamweaver. This indicates that this is indeed a Smart Object. Now if you've used Photoshop before you probably know what a Smart Object is. If you haven't, a Smart Object is a graphic that retains all the information pertinent to the original graphic. In fact, if we look in our Properties inspector, down at the very bottom we can see that it has a link to the original file. Now if you move that source file, make sure this link also knows where that file's going to be so that it can always find it. Now let's go ahead and do a re-sizing here. So I'm going to make sure that the graphic is selected and then using the Properties inspector, I'll give it a width of 778 pixels and I'm going to give it a height of 200 pixels. Now in an earlier version of Dreamweaver that would've been a really, really bad idea. Because at this point, we'd be scaling the image up and the browser would be responsible for resizing it and that typically would give us really bad image quality, but now using Smart Objects, it's not a big deal. Remember our Photoshop file was 1500 pixels wide. It was a much higher resolution. Really all we need to do is re-optimize it at this brand-new size. This is really easy to do since we're using Smart Objects. So take a look at your Smart Object icon in the upper left-hand corner of the element. It says, "Hey, you've change something since last time. Do you want me to update?" So we can simply right- click that icon and when we right-click it, we get a contextual menu that comes up and Update from Original so about halfway down and we can just say, "Hey, Update from Original." And when we do that it's going to overwrite our external JPEG with the brand-new size. So it re-optimizes it. We're not continually compressing it; we're just simply re-optimizing and overwriting it at that size. Perfect. That's exactly what we want. Now when I was designing this banner, I didn't pay attention the fact that the menu is sitting down here at the bottom of our banner div so Random Taggings is sort of falling behind it a little bit and that is not what I want at all. So I need to move that up so it's a little more readable. Now again, this is where the round-trip integration between Dreamweaver and Photoshop is really going to come in handy. Now there are a couple of different places that allow us to edit this image. First off, we can go to our Smart Object and right-click that and we can choose Edit With, or Edit Original With and choose the program we want to use. But probably a quicker way to do this is to select it, go down to the Properties inspector and notice that on your Properties inspector on the right-hand side we have an Edit icon and it shows us editing with Photoshop. If you're seeing a different icon show up there like Fireworks or something like that, just need to make sure that your .PSD file type is mapped to Photoshop and we'll see that icon. So I'm going to click on Edit With Photoshop and it's going to launch Photoshop. Now it's going to launch whichever version of Photoshop you have installed so if CS4 is your latest one, it'll have that. If it's CS3, it'll go back and open up CS3. So it doesn't really matter which version you have; it's going to open up what is your most current version. Now I'm going to go ahead and open up my Layers panel and as I open up my Layers panel, I'm going to grab my Move tool and I'm going to select the Random taggings layer, which is the top layer, and I'm just going to move that up a little bit. So I'm just going to... move it on up here. So that's a little higher up. And I don't know the exact positioning. I could have got maybe some guidelines out and helped out and all of that. But it's fine the way it is. So I'm just going to move it up a tad bit. And I'll go to File and I'll choose Save. As soon as I do that, I'm going to switch back over to Dreamweaver and when I'm in Dreamweaver, again the Smart Objects icon is letting me know, hey, the original asset has been modified. So it's going to give you one icon if you've modified the file here in Dreamweaver. It's going to give you another icon or another warning message if you edited the file outside of Dreamweaver.

So we want to go ahead and update that again so I'm going right-click that, choose Update from Original and it updates it and notice that Random Taggings is now moved up. So this round-trip feature's really going to speed up your workflow. Notice that in the space of just flipping back and forth between the products we have updated a Photoshop file and overwritten a JPEG file without really having to explicitly to tell it to do that. It just knew to do that because of the workflow. So that is really going to speed a lot of things up. Well, in the previous version of Dreamweaver you were able to copy and paste sections of Photoshop files into Dreamweaver. You can still do that and that workflow's been modified slightly. It still doesn't have all the power of using Smart Objects, but it still gives you some interesting capabilities. So let's take a look at that. I'm going to scroll down to the bottom of the page and down at the bottom of the page, I want to place an accent graphic down here. So I'm going to click right after my last paragraph and I'm just going to do a quick copy and paste. Let's switch back to Photoshop. And I still have that newsletter banner file open so if you closed that, just open that back up again. Now I'm going to hide all these top level layers, the Random taggings, the logo layer. I just want to leave the underlying graphics there. And what I'm going to do is grab the Rectangular Marquee Selection tool and I'm just going to find an area that I find visually appealing and I'm going to highlight a, say, small horizontal version of that. I'll find that and I'll go to Edit and I'll say Copy Merged. When I come back into Dreamweaver and if I place my cursor where I want this graphic I can go right up to Edit and choose Paste.

Now when I do that, I still get the prompting to save. It's like hey, what do you want to save this as? So I'm going to go to my File, and once again, I'm going to make this a little bit smaller, maybe around 700 pixels and again I'm going to constrain it so that it doesn't distort it, and I'll click OK. Now it again wants to know hey, what do you want me to name this? So I'm going to go in the Chapter 7 or in the 07 folder in the images directory. Now I don't want to overwrite my newsletter banner. It picks up the name of the image by default, so I'm going to call this newsletter and this is going to be the accent file, so newsletter accent. Save that and place it and again, we'll have to give it a little bit of Alt tag. And when I do that, it drops the image in.

Perfect. So when I click on this, again it sees the original file. It knows where this is, it's the banner.PSD, but you'll notice that I don't get the Smart Object icon up here and if I right-click that, Update from Original is grayed out. I don't really get that option anymore. However, I still can copy and paste and replace this file, and re-optimize it. So if I come back in, so let's just say I want to move my selection up a little bit, to say this area, and then I'll go back to Edit and hit Copy Merged again. If I move back into Dreamweaver and select this graphic and choose Paste, it replaces that graphic with the new one. Now notice what it did not retain. It did not retain the sizing information. So the last one I'd optimized it at 700 pixels wide and it didn't remember that. There's definitely a reason to use the Smart Object workflow. So let's just say 700 pixels wide and hit Return and there we go. So now we've replaced that. So the Copy Merged and Paste still works. It just doesn't give you the same full- featured functionality that using the Smart Objects workflow does. So the improved Photoshop and Dreamweaver workflow will save a lot of time when updating and placing graphics. I should add that dragging and dropping images from Bridge into Dreamweaver will give you the same functionality and can speed up finding the right image and organizing your files. So if you're used to using Bridge I would recommend adopting that workflow and if you've never used Bridge before, you definitely need to check it out. Well, next up we'll examine a few of the new Spry form validation objects.

There are currently no FAQs about Dreamweaver CS4 New Features.

Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Dreamweaver CS4 New Features.

Return to your organization's learning portal to continue training, or close this page.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.