Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Incorporating Photoshop Smart Objects

  • Instead of inserting a jpg or gif, I can insert a PSD, the native Photoshop image format
  • You can only do this if you have Photoshop installed on your system
  • When I use a Smart Object on the page, Dreamweaver maintains a link to the Photoshop file to make it easier for me to edit the image
  • Open the destinations.html file
  • We will delete the 2nd image on the page, and replace it with a Photoshop Smart Object
  • Open the psds folder in the Files panel and drag the mur-river.psd file onto the page
  • Note the icons in the upper left corner, both arrows are green and circular
  • Click the Photoshop icon in the Properties area within the Edit section
  • When I do this, DW opens the optimize panel to allow you to optimize or reduce the file size
  • Choose an optimization & size for your image
  • When I insert this image, I get the icon in the left side
  • Now go out to Photoshop to edit this image
  • Modify the image within Photoshop
  • You cannot change the image size using a Smart Object, just edit something else about the image
  • Save the image
  • You will see in Dreamweaver it says the original image has been modified
  • Right click the image and choose Update From Original to update the image within the page
  • You will see the image on the web page update to look like the Photoshop PSD file

Incorporating Photoshop Smart Objects

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Photoshop Smart Object Explanation 0:09
  • Inserting Image from Files Panel 0:27
    • Image Optimization
    • Editing with Photoshop
  • Update from Original 5:20
  • Summary 5:53

Transcription: Incorporating Photoshop Smart Objects

We're now going to take a look at how to work with a Photoshop Smart Object from within Dreamweaver.0000

What is a Photoshop Smart Object?--good question; what it is, is: it is actually just a Photoshop native format image that you place into your web page.0008

And Photoshop and Dreamweaver work together to assist you in keeping that image up to date.0021

I'll show you what I mean.0028

I have the specials.html file open, and if I scroll down, my Prague clock here is a bit large.0030

So, what I want to do is make a new image that is a little bit smaller.0039

So, I'm going to delete this; and I actually have a Photoshop PSD file, which is a native Photoshop format, available in my Files panel.0045

It's located in the "psds" folder within your course files; and it's this one right here.0057

What I'm going to do: instead of inserting an image through the Assets panel, I'm in the Files panel, which is another method for inserting an image.0067

I could pull images straight out from my Images folder; but this time, instead of using a native format for the Web, I'm going to pull out my Photoshop native format.0079

So, I'll pull my Prague clock out onto the page; and this is a resized image of that Prague clock.0093

Now, I can optimize that, because this is a PSD; the difficulty with optimizing this way is: I really can't see what it looks like before I choose my settings.0103

That is the one downside of this method, in terms of optimization.0116

But I want to show you the Smart Object piece; so I'm going to keep it...since the file size or the actual image size is quite a bit smaller than my old one, I'll stick with the quality of 80, and let's see how it turns out.0122

I'll click OK; what actually happens is: Dreamweaver is going to go out to my files here for my Wanderlust Travel website, the same folder that I have here defined as a site, and it's going to save that and optimize it for me.0138

I'll open up my Images folder; this is where I want to save my Prague clock, and I'll say -optimized, so I know that this is an optimized version.0160

Now, the JPEG should tell me that, but I just want to be very clear in what we are doing.0174

And I'm going to just have this say Prague Clock as my alternate text.0180

I'll click OK, and there is my image; now what is interesting about this image is: if you look in the upper-left corner, you will see some little icons, and there is a little green circle within this area.0187

Now, that green circle tells me that this image matches my original Photoshop image.0205

But what if it doesn't?--let's take a look at that.0212

What I want to do is click on this image, and I'm going to click Edit with Photoshop.0216

When I do that, it is going to open up Photoshop for me, provided I have that little icon (that means I have Photoshop on my system).0224

Notice, it went right out to my prague-clock.psd file; so this is that file; and what I want to do is make some kind of an edit to this.0234

And you can see, there is a little date down in the bottom-right corner; so what I am going to do in Photoshop is enlarge that area, and I am going to use the brush here, the Spot Healing brush tool (and it's a bit large right now, so let me sink that down a little bit in size), and I'll just brush over this image; and you can see, this does take away the red in the image.0246

Now, it did make it just a little bit fuzzy, but this is a small image; I have zoomed in on it; so you can see, it's barely noticeable here.0280

Now, my brush was a little bit too big, but I don't want that to be the focus of what we are doing; I just needed to make a visible change.0291

Let me do a save of my original PSD, and I'll close up Photoshop.0299

Now, when I go back to my image in Dreamweaver, you can see there is a little red mark; and if I hover over this, it says "Original asset modified."0308

So, what I could do now is right-click and say "Update From Original"; what that is going to do is update this image--you can see, I have the red date in the image right now; let's see if it updates to pull in the correct image without my date in it.0320

I'll right click and say "Update From Original," and notice, it is gone.0339

Also, my little circle--it says "Images synched," and I don't have any red in that little circle.0345

That is how you can work with Photoshop native PSD images within your Dreamweaver files.0353

You just have to watch that upper-left corner and pay attention to if it's red or not.0362

Just in case you modified that original PSD file, and you open up your web page, and you didn't realize or remember that you had, Dreamweaver is going to prompt you with that little red item here.0368

You can just hover over it and determine if that image is up to date or not; if not, right-click and say "Update From Original."0382

That is how you work with a Photoshop Smart Object from within Dreamweaver.0392

Thank you for watching Educator.com; see you in the next lesson!0399