Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The most powerful feature of Photoshop Smart Object integration is the ease and efficiency with which you can make full site image updates. As you will see, if you edit the original image in Photoshop, Dreamweaver will indicate that the current image does not contain the most recent version. In addition to keeping tabs on the status of your Smart Objects, Dreamweaver also gives you the opportunity to edit your Smart Object in Photoshop, re-save the Web version of it, and update it in Dreamweaver, all in one round-trip workflow. We'll explore the round-trip functionality first, and then discover how Dreamweaver monitors Photoshop Smart Objects once they've been updated.
So here I am the gallery.htm. I'm going to scroll down to find my banner graphic. There it is on the page and notice that it still synced to the original Photoshop file. Now I want to give you guys doing the Exercise_ Files at home a little heads-up here. If you open up this file and you see a little green and yellow arrow here or a red and yellow arrow here, that means that it's not in sync anymore. Dreamweaver and Photoshop have a very tight integration. If that file is moved at all, sometimes just copying it over to your hard drive can do it, Dreamweaver wants to update the most recent version of it, and sometimes that can be a little tricky.
Now we're going to show you guys how to update it and get the most recent version of it in just a little bit, but occasionally, a bug surfaces. They do happen. If that bug surfaces, and it just does not allow you to update that image, then just go ahead and replace it to get a fresh one in there. You won't be experiencing this within your site. The only reason that you might experience it within this particular exercise file is because of the fact that Exercise_Files are copied and moved in so many different places throughout the process. That may throw Dreamweaver little bit.
But if that does happen to you, just go ahead and get rid of this one, place the Photoshop file again, just like you did in the last movie, and you should be able to pick right back up that point in the lesson. So what I'm going to do is I'm going to go ahead and select this banner graphic. Again, it's current. The image is doing fine. There is no problem there. But what I need to do now is make a change, maybe the seasons are changing. It was winter when this banner was graphic. It was placed first place on the page, but we got summer coming up now. So maybe we need to change it to reflect that. So to do that, I'm going to explore the round-trip editing features that Photoshop and Dreamweaver offers us.
So with that selected, I'm going to go right down to my Properties Inspector. I'm gong to click the Edit in Photoshop icon right there. That's going to switch me over to the Photoshop. Notice that it opened up the source Photoshop file and not the flattened JPEG. So if I go over here in the Photoshop and look at my Layers panel - I'm just going to close the Brush Presets panel here - I can see that I've got a fully layered Photoshop file now. So it took me back to the original PSD document, not the JPEG. Well this is going to be a very easy change for us to make, because I'm just going to turn off the visibility of the winter layer folder group and turn on the visibility of the summer layer folder group. Perfect.
So it's a quick and easy update to our banner graphic, but really at this point, you can make any change that you want here. You can add layers. You can add text. You can add effects. You can brighten things. I mean it's whatever change you want to make. All right. So now I'm going to go up and Save this file, and as soon as that is saved, I can close it. I can move back into Dreamweaver. Now when I move back into Dreamweaver, Dreamweaver has a little bit of message for me. You'll notice that now my arrow is no longer green and green. It's now green and red.
What this is saying is, "Hey. This Original Asset has been Modified since the last time you were in Dreamweaver." Well, yeah, we know because we just did that, right? So Dreamweaver's basically saying, "Look, do you want the modified version of this? Do you want me to go ahead and update it?" Yeah, we do want that. So there are two ways to do this. With the image selected, we can go down to the Properties Inspector, and you can see right here, we have a little graphic that says Update from Original. So clicking on that would go out, find the most recent version of it from Photoshop, and overwrite our banner JPEG.
Now the second way to do this is to simply right-click. We could right-click our graphic, and we could choose Update from Original. As soon as we do that, it's going to go out, get the most recent version of that, and it's going to overwrite our banner.jpg. Now that's really cool because in Photoshop we didn't have to do Save for Web and Devices. We didn't have to browse out and find this banner.jpg. We didn't have to overwrite it. All we needed to do is come right back into Dreamweaver and say yes, give me the most recent modified version of that Photoshop. That also means that you're not required to go get the most recent version of it.
If you've modified that banner, but it's going to be say, a month or two away, before you have to use it live on your site, then you just wait till that point to modify it. Now the really good news is this is going to be updated in your site no matter how many times it's used within your site. For example, go ahead and open up the mission.htm as well. If I scroll down there, I see that the change has automatically been made there, and the graphic is synced up as well. So Photoshop and Dreamweaver are going to go ahead and sync this site-wide, and wherever you've used the Smart Object, you're going to get the most recent version of that graphic as soon as you update one of them.
So from a strictly timesaving standpoint, the Dreamweaver Photoshop Smart Object integration makes very extremely compelling workflow. When you add in the functionality of being able to create the graphics upon insertion, for many users, this workflow will quickly become the standard workflow. Now one size doesn't fit all, of course, and you need to consider carefully whether you want to adapt this workflow for some or all of the images in your site. As we will see, this isn't the only integration that Photoshop and Dreamweaver shares. It ignores working with Fireworks, which is another powerful Web graphics creation tool entirely.
In the end, it's simply one of many options that you have available when editing the images on your site. A choice is a good thing. This is a great choice to have.
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.