Video-Based Tutorial: Page (1) of 1 - 07/27/10 Email this story to a friend. email article Print this page (Article printing at page facebook

Web Site Planning and Wireframing: Part 9 of 12

Merging the screen captures in Photoshop By Laurie Burruss

In Web Site Planning and Wireframing: Hands-On Training, Laurie Burruss, director of digital media at Pasadena City College, demonstrates the essentials of creating a web site with a polished, professional appearance and a compelling user experience. The goal of this hands-on course is to deconstruct a web site's home page in order to identify its structural elements and feature set. Using Acrobat Pro and the web developer's toolkit, Laurie shows how to capture a homepage and create, in another layer, its visual framework (wireframe).

Topics include:

  • Seeing, scanning, and reading a web page
  • Understanding naming conventions
  • Creating file structures
  • Understanding page hierarchy
  • Using Acrobat and Photoshop with wireframes
  • Building a professional wireframe from scratch
  • Identifying and using web standards in site design
  • Usability Testing

Merging the screen captures in Photoshop

Inside of Photoshop we will open the two screen captures that we made, put them into one image layer and save it out as a PDF. So let's get going on this. Let's go up to the File menu, scroll down to Open, which would be Command+O or Ctrl+O, navigate out to our Desktop, and select Picture 1 and hold down your Shift key and select Picture 2, and click on Open.


Notice in this version of Photoshop it opens in tabbed view, just click on one of the tabs, and pull that off. You want to be able to work with them as unique side-by-side images. I always use my top screen capture as the main image and the bottom one, I'll add to this. So I know that I need to have the canvas size be better. I'll go up to Image, scroll down to Canvas Size, and anything that we're doing inside of web design or for screen design for that matter, should not be using inches but pixels. Inches is of no value to us, so let's click and make that pixels. Keep in mind whatever you do for web design or screen design, any kind of interactive multimedia screen design, game design, use pixels. We want to add space to the bottom, so I'm going to put the anchor up at the top and I don't know exactly what size this image is going to be, but I'm going to just guess-timate and put 1500 pixels here. Click OK. So now we have got a nice big picture with a lot of white space at the bottom.

I am going to click on the second screen capture at the bottom and click and drag it over to the first image. We don't need the second picture right now. I'm just going to close that out. And inside this document, the PNG one, the first screen capture, I'm going to select the Layer 1. At the bottom of the image, I'm going to put the Opacity down to 50%. This will allow me to match up the documents just exactly. Just give myself a little bit more space here so I can see what I'm doing, and drag this right down, where I want it to be.

Click PLAY or press spacebar to start or stop video


And I'm going to use my Arrows keys just to nudge this a little bit, to get a just popping on there, just exactly the way it should be. That looks pretty good to me. Once I have that looking like it's all lined up and it doesn't look fuzzy to me anymore. I'll go back over to the Opacity, pull back up to 100%, and make sure that it's matching up and that there are no glitches anywhere. It looks good. I have to do a little bit of cropping, but I'm pretty happy.

Now I wouldn't normally recommend to do this inside of Photoshop, but because I'm trying to create just one unique complete image, I'm going to click on the Options in the Layer panel and choose to Merge Down or Merge Visible. So now I have one complete image.

I am going to select the Crop tool to make this image look clean and to be exactly the size of the homepage. Start in the upper-left corner, and then drag down. Remember I made the document much longer than it needed to be, so I'm going to bring that back up, so it looks visually about how I remember it. And Snapping is on so notice that it wants to snap to the side right there.

But I don't want that little edge at the browser window to show, so I'm going to click on that and use my left arrow key to pop that in just a little bit and then I'll bring this one over here. That looks pretty good to me, and then usually if you just double-click, you get your crop and now I've got a nice complete page.

There are two things I do at this point, it's right now saved with no name and you know I like names that have meaning and it's saved as a PNG. So the first thing I want to do is say File > Save As and call it screen_capture. And I want to save this as a Photoshop file, in case I want to come back and do anything with layers or need to show it to my client. And I'll save it out to the Desktop.

So now I've got a nice Photoshop file. The second thing and this is the most important thing if you are going to be using Adobe Acrobat Pro, go to File > Save As, and this time choose PDF, Photoshop PDF as your file format. Click on Save. It's going to bring up all these dialog boxes, just go ahead and say OK, don't get scared by this, just say Save PDF, it means you will be able to come into Photoshop in case you want to edit it, just click on Yes.

And now we've created - I close this image out, and we close out of Photoshop, you will see that on our Desktop we've our two screen captures, which are PNG files, we have our Photoshop file and we have our PDF file ready to open inside of Acrobat Pro. We're ready to start making our wireframe.

About is an award-winning provider of educational materials, including Hands-On Training instructional books, the Online Training Library, CD- and DVD-based video training, and events for creative designers, instructors, students, and hobbyists.

The Online Training Library and CD-ROM titles include such subjects as Photoshop, Flash, Dreamweaver, Illustrator, Office, digital photography, Web design, digital video, and many others.'s all-star team of trainers and teachers provides comprehensive and unbiased movie-based training to an international membership of tens of thousands of subscribers. Considering the speed at which technology evolves, the Online Training Library is a great solution for keeping your skills current. Library subscriptions begin as low as $25 a month, with no long-term commitment required.

Page: 1

Laurie Burruss serves as the director of digital media at Pasadena City College, where she has also been design professor for the past 15 years. Laurie is a professional digital storyteller, and she has developed a rich curriculum in digital and new media, which includes Flash, ActionScripting, web design and development, motion graphics, digital video editing, 3D modeling and animation, and environmental graphics design. As director of the Digital Media Programs at PCC, she has established many partnerships and collaborations in interactive multimedia, with companies such as Warner Bros., Disney Imagineering, Industrial Light and Magic, and Apple. Laurie has served as project director for grants from the National Science Foundation, the Department of Labor, and more. Laurie received a BFA and an MFA in fine arts from the University of Southern California.
Related Keywords:website planning,wifeframing,web design,web developer,page hierarchy,acrobat,photoshop,web standards,usability

To Comment on This Article, Click HERE

Most Recent Reader Comments:
  • Web Site Planning and Wireframing: Part 9 of 12 by DMN Editorial at Jul. 27, 2010 8:40 pm gmt (Rec'd 2)

    Click Here To Read All Posts
    Must be Registered to Respond (Free Registration!!!, CLICK HERE)
  • -->

    Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved