Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Prior to CS4, copying and pasting from Photoshop into Dreamweaver was the only integrated workflow available between the two products. Now that might not seem too efficient and in many ways it isn't, but depending upon your needs, this might be the perfect workflow for you, or it might be the one that you can turn to in certain situations. Now put simply, you can copy artwork in Photoshop and paste it into Dreamweaver as a Web graphic. Like the Smart Object workflow, optimization is done as the file is inserted on the page.
A link is created to the source file. Unlike Smart Objects, there is no indicator that tracks the source file, or any way to automatically update once the source graphic has changed. That doesn't mean you can't update the graphic, as we're going to see in this exercise. So I have the mission.htm file open. If I scroll down a little bit, I can see that I need a mission-accent graphic right there. Now this is an Image Placeholder. If you've never dealt with Image placeholders before, I think you're going to find them pretty useful.
You can find them by going up to the Common Objects > Image grouping, and there is Image Placeholder right there. If you're making a mockup or maybe working with a team and you need to hand a few pages off to folks, Image Placeholders essentially allow you to choose a size and a color. Then you can name it. You can alt text to it. You can do all sorts of really cool stuff to this and your fellow designers, or you at a later date, will know exactly where the images need to go in your page. So they are a pretty neat little feature. So what we're wanting to do is go out to a mockup that we've done in Photoshop of the original page, and determine which accent photo that we really want to use on this page.
So I'm going to go over to my Files panel. I'm going to open up the _assets folder. Inside that, I can find mockup_secondary.psd. I'm just going to double- click the icon for that. That's going to launch Photoshop and open the mockup in Photoshop. Okay, so here we're seeing a full-page mockup of this page as we were designing in. I'm going to zoom up on this and kind of move up, so that I can see these accent photos. When the designer was doing this, they were deciding between either the California street image, the image of this person on the beach, or another image of that person on the beach.
So we've got three images there that we just couldn't make a decision for. So we left them all in there. So now maybe we want to see what they would look like inserted into the finished page. So what we're going to do is we're going to select just that portion of the image, copy it, and paste it onto the page. So to do that, I'm going to go find this photo3 layer over my Layers panel. I'm going to hold down the Ctrl key. That'd be the Command key on the Mac. I'm going to the click of the layer thumbnail. That's going to make a selection around just that photo. It's a lot easier and certainly more precise than trying to do that by hand.
Now in order for this to work properly, I'm going to go up to the menu. I'm going to go to Edit, and choose Copy Merged. Now the reason that I want to do Copy Merged there is that Copy Merged is going to give me everything from every single layer that's inside the selection. So in this case, it's maybe not as important because we are only copying off of a single layer, but for a layered Photoshop file, you might have a text layer. You might have some layer effects going on, and maybe have an adjustment layer. You'd want all of those to be combined into your copied selection.
So just as a general rule, remember to use Copy Merged for this particular workflow. So I'm going to choose Copy Merged. Now all I need to do is switch back into Dreamweaver. Now back in the Dreamweaver, I want my new image exactly where this accent image is. It would be tempting to just keep that selected and paste it in, but if you do that, then you might pick up a few unwanted attributes from this particular image. So what I'm going to do is delete the image. Then very carefully, I'm not going to move my cursor. You can see your cursor is blinking right there in front of the O. That's where I want it.
Now I'm going to go up to Edit and choose Paste. Now at this point, Dreamweaver says "Okay. "You want to place this image on the page. That's fine. What we need to do now is go ahead and optimize it." So where you're seeing our Image optimization dialog box here, we can choose from any graphic Format that we want. We want a JPEG. I'm just going to leave the Quality at 80 as a default. Now if I click over in the File section of this, I want to point something out about this particular workflow. We are free to resize this image. We could Scale it up. We could Scale it down, really whatever we needed to do here.
But there is one thing that you need to understand. Later on, if we choose to update this image by going back to Photoshop, and copying and pasting again, any sizing information that we do here at this stage will not be retained. So you're going to have to write it down or remember it, so that the next time you do this, you get exactly the same size image. So I'm just going to go ahead and click OK. Then next, we're going to be prompted to Save the file. Now I browse to the 08_08 _images directory. Notice that it picks up the same name as your Photoshop file.
Sometimes that might be acceptable, but for this one, it's kind of not. So what I'm going to do is I'm going to type in mission_accent.jpg. So that's the name I want for this one, mission_accent. I'm going to Save that into the _images directory. Now we're tasked to alt text this image. So I'm just going to call this one California street. It places the image on the page. Now we need to go ahead and make sure the image is aligned to the right-hand side. So I'm going to select the graphic. Using the Class pulldown menu, I'm going to choose articleImage from the Class.
That's going to align it and position it where we want that image to be. Okay. Well, that looks pretty good, not a bad little workflow. Notice that if you select the image, it does remember that the mockup_secondary image is the source graphic for that. But this is not a Smart Object. So if I go back and make a change to the Photoshop file and comeback in the Dreamweaver, Dreamweaver is then going to automatically say to me. Oh, should I update that graphic. It's going to have no knowledge of that whatsoever. So what if you do make a change, or in the case of this mockup that we've got, what if we decide that we wanted to use one of the other images? Well, the workflow is still there.
It's just a little bit more manually labor intensive. Let me show you what I mean. Let's say we click the Edit button here now. Because of the fact that our mockup was listed as the Original source file, it is going to open that backup in the Photoshop. Now we still had it open, so it just switches right back in the Photoshop, but if you had closed this file, it would reopen it. I'm going to turn off the visibility of the photo3 layer, and have the photo2 layer visible. Again, if for whatever reason, your selection wasn't loaded, remember, you can just hold down the Ctrl or the Command key, and click the thumbnail for layer that you want to select, in this case, photo2.
Once again, I can go right back up and say Copy Merged, so Edit > Copy Merged. Then switch back to Dreamweaver. Now here in Dreamweaver, this gets a little easier. I can simply select the image that I already have on the page and go up to Edit and choose Paste. You'll notice we didn't have to go through the optimization settings again. You'll notice that we did not to save the graphic again. It still saved it as mission_accent. Now that is a big point. It did overwrite that previous graphic, so if you wanted to create a separate version of this, you would need to copy and paste it again.
Also, it retained the alt text. So now, I'm just going to type in looking out the ocean as my alt text. So be sure to check out those minor details. Also, any resizing information that you use previously, you're going to have to reenter that as this is brought in. So it's a nice workflow. It's maybe not quite as thorough as Smart Objects, but it might suit your task, because although some of the information like resizing isn't retained, it's going to work great, if you're using things like mockups or wireframes or images that you don't want to slice or split up into multiple images.
This process also allows for a lot of creative exploration. Since updating the images is simply a process of copying and pasting, so that part of it is really, really fast. Now regardless of exactly which workflow you use, the integration between Photoshop and Dreamweaver gives you powerful options when working with images in your sites. It's just going to give you a lot more creative flexibility overall.
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.