Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.
Your file was successfully uploaded.