Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Join Justin Seeley as he reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Adobe Photoshop. The course covers creating a custom web workspace for maximum efficiency; drawing, coloring, and optimizing web graphics; creating vector shapes and text that scale seamlessly; mastering transparency; building navigation bars and buttons; and speeding up these tasks with the Photoshop automation tools.
One of the great things about working with a suite of products like the Adobe Creative Suite is the fact that all of the apps seem to integrate seamlessly with one another. This holds true for Photoshop as well. Photoshop works in tandem with many of the Creative Suite applications, like Dreamweaver for instance, to offer something called Smart Object integration. Let's take a look at what I'm talking about. So I've got a file open inside of Photoshop right now which is called robot_ad.psd and I want to take this file and place it into Dreamweaver and use it inside of that Dreamweaver layout. So let's jump over into Dreamweaver for a second, and once I'm inside of Dreamweaver, I'm just going to create a brand-new HTML document.
So I'll just click HTML and then I'm going to go File > Save As. Select where to save this, and basically, I'm just going to go out to my desktop, into my exercise files folder, and I'll go to chapter 12, and I'll just save this as test.html, and I'll hit Save. So once I do that, I've got this ready to go. And now let's say that I wanted to place this into my Dreamweaver layout. All I have to do is go up to the Insert menu, go down to Image. And in my chapter 12 exercise files folder is robot_ad.psd, I'll hit Open.
Dreamweaver comes up for image optimization for me and says, okay, how would you like to optimize this? Do you want it as a JPEG, do you want it as a PNG, a GIF? What do you want? Well, this object here has a slight drop shadow around the outside and I want that drop shadow to be semi-transparent so no matter what color the background is, it's always shining through. So I'm going to switch this to be a PNG24 for sharp details, as you see. It's only 15 K. That's not too bad. And so when I hit OK, it's going to also ask me to save that PNG as well. So I'm going to go my desktop, find my exercise files folder, and go into chapter 12.
Let me expand this box out a little bit so we can see it. Chapter 12 and I'll just save it right in there. And it's going to ask me for Alternate text. So in this case, I'll do robot ad and hit OK. So now once it's placed in there, it's actually a PNG file, but you'll also notice up here in the top that I have this little Image synched icon going on, which tells me that this is a Smart Object that I can then work with. If I right-click on this image, I can go down to Edit Original With and I can choose Adobe Photoshop CS6.
Once I do that, it's going to jump me back over into Photoshop and it's going to have this file open for me. So now anything I do to this, I can save and jump back into Dreamweaver and it should update accordingly. So let's say for instance that my tagline changes from THE FUTURE IS NOW to something else. Let's go ahead and change that to ROBOTS ARE COOL, something like that. I'll move it back into the center like so, and now I'll save this. Once I do that, I'll jump back over into Dreamweaver. You can see here that I have a little red icon, indicating that this has been modified outside of Dreamweaver. And I should be able to right-click and choose Update From Original and it now switches to say ROBOTS ARE COOL.
The image is still optimized as a PNG and I can keep working each and every time I go. So this is a great way to work between Photoshop and Dreamweaver while maintaining the original file and being able to update it anytime you want. So the next time you're working inside of Dreamweaver, try using these Photoshop Smart Objects and see if doesn't save you a little bit of time. If you'd like more information about Dreamweaver and how it integrates with Photoshop, be sure to check out James Williamson's Dreamweaver CS6 Essential Training course, which is available in the lynda.com online training library.
There are currently no FAQs about Photoshop for Web Design.
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.