Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the benefits of working within a suite of software, such as Adobe's Creative Suite, is the powerful integration between programs within the suite itself. Dreamweaver features a number of integrated workflows with Photoshop, which can make working with images in your site much easier. The most powerful integration between the two programs is Dreamweaver's support of Photoshop Smart Objects. Smart Objects allow you to insert a Photoshop file directly onto your page in Dreamweaver, and then makes editing and updating the image between the programs, a snap.
In exploring the integration between Dreamweaver and Photoshop, we'll first look at working with Photoshop Smart Objects, explore editing and updating our Photoshop images, and then look at alternative workflows between Dreamweaver and Photoshop. So, here we have our gallery.htm file open, and this is from the 08_06 explorers folder. I've got a banner graphic that I want to place on the page just below all of my photos. Now, currently the banner graphic is simply a Photoshop file, and it's a layered Photoshop file, because occasionally, we're going to need to have different seasonal banner graphics, maybe a spring, a summer, a winter, that sort of thing.
So, in a non-integrated workflow, I would be forced to go into Photoshop, export this out as a JPEG, come back into Dreamweaver, import the JPEG in. Then if I ever needed to change the banner graphic, I would have to go back out into Photoshop, open the Photoshop file up again, overwrite my other JPEG, come into Dreamweaver and verify that the proper JPEG was on my page. So obviously, Smart Objects is going to make that workflow considerably more efficient. So let's take a look at how this works. What I'd like you to do is to go ahead and scroll down to the very bottom of the page, find the last sentence, Yes, we did, and hit Return.
That's going to give you an empty paragraph just below all that. Now, if your cursor jumps up to the top of the page, don't worry. We are doing some floating here with some of these objects. When we place the layer Photoshop file on the page, we'll be okay. All right. what I'd like you to do is go up to Insert and choose Image. So, we're going to use the menu to do this, although really, any of the techniques that we covered earlier about placing images on the page would work just fine. Now, when your Select Image Source dialog box comes up, you need to browse to the 08_06 directory and instead of going into the _images directory, this time, I'm going to go into the _assets directory.
Inside there, I should find that banner.psd file that we're looking for. So, banner.psd, this is a fully layered Photoshop file. It's not been flattened at all. We are going to insert that directly on the page. Go ahead and click OK. Now what Dreamweaver is going to do is it's going to say, "Okay. You need to take this Photoshop file and export that out as a Web graphic." So, it's going to be doing this step for us. We get the Optimization window from Photoshop that opens up. We get to choose our file type, any optimization settings that we want.
We could modify this file even further by changing the size of the file, really anything that we wanted to do to it. Well, the JPEG format is probably going to work the best for this. So, I'm going to leave the Format as JPEG. The 80 Quality is going to work just fine. Notice that it's giving me a preview of what size this file is going to be. 36K for this graphic will be fine. You're free to change those if you'd like. You can change the format. If you look over in the File tab, you could change the size of this graphic if it wasn't the size you needed it, that sort of thing. All right! So since it's the way we want it to be, I'm just going to go ahead and click OK.
Now, this is going to prompt me to save the graphic. So, I want to go into the _images directory of the 08_06 directory. I'm just going to call this, banner.jpg. Now, when I save this, I might be prompted to overwrite one that already exists. And that's okay because the old banner that we had in there, we want to get rid of that and replace it with this brand -new one that we've got. So, I'm going to click Yes. Then it's going to ask me to alt text this image. So, I'm just going to type in book now and click OK. Okay, so there is our image on the page. But right off the bat, something about this seems a little different than what we saw before.
We now see these little green arrows in the upper left-hand corner. Anytime that you see that in an image, this tells you that this is a Photoshop Smart Object. The other clue that something is a little different about this particular image is found in the Properties Inspector. In the Properties Inspector, we now have a value right here for Original. That's letting us know which Photoshop file this JPEG came from and explains the link between the JPEG and the Photoshop file. But we're going to take advantage of that in just a moment as we show the editing process of this.
But those are two clues for you that this is indeed a Smart Object and not just a regular image. Now, Dreamweaver remembers that that JPEG was created from a Photoshop file. Anytime you place it on another page, it's going to link it to that source file. Let me show you what I mean. I'm going to go ahead and save the file we've got now. What I want to do is I want to go into my Files panel and find mission.htm. I'm going to open up my mission page. I'm going to scroll down to the very bottom of that and give myself a blank paragraph down there for my banner ad to show up at and I'm going to insert the same image down.
You can use any technique that you'd like to do this. I'm just going to go to my Files panel, open up my _images directory and find that banner.jpg. I'm just going to go ahead and drag and drop that right into that location on that page. Once again, I'm going to alt text that as book now. Now, when that comes in, notice that it still has the Smart Object indicator. So, Dreamweaver tracks that image, and it knows that when you place it on the page, that more than likely you want to link back to that original Photoshop file to take advantage of the round-trip editing that this integration gives us.
So, we're now using a Photoshop Smart Object on multiple pages in our site. Not only does this workflow make it easier to create the Web graphics, as this workflow goes ahead and optimizes and exports the graphics during the insertion process, but it also makes our banner ad easier to update. Now, we're going to tackle the update process in our next movie.
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.