6 Replies Latest reply: Jul 25, 2010 12:41 PM by Noel Carboni RSS

    How to create professional image of multiple screenshots

    gunderj

      I have Adobe Photoshop CS5.

      I want to create one image of 3 screenshots of web pages with transformed perspective so they can all three fit into a small rectangle and throw proper shadows in relation to eachother.  I have seen very profeessional samples of something like this, but no matter how hard I try I cannot seem to acheive a really polished professional look.  For example, once I use the transform tool to alter their perspective it seems the edges loose their streightness (a little bit of fuzz is now part of the edge), which takes away from the polished professional look of the image.  Also there must be a proper way to have the three layers throw their shadows to each other so as to be near picture perfect?

      I am asking the experts on this forum if they can point me to some guide on how to accomplish this with professional look.

      I would upload a sample of what I am trying to accomplish but the file upload is disabled for this site - hope the alternate explanation above is enough.

      Thanks,

      Jay

        • 1. Re: How to create professional image of multiple screenshots
          Noel Carboni Community Member

          Might be best if you could show a small sample...  Use the little camera icon just above where you type; it does work.  You can upload images even though they say you can't.  That's an old message.

           

          -Noel

          • 2. Re: How to create professional image of multiple screenshots
            gunderj Community Member

            sample_images_with_perspective_jpeg.jpg

            Thanks Noel.

            Above, the top piece shows the polished professional look I am going for.  On the bottom I have my screen shot with perspective added.  I created a high quality jpeg to upload but the quality is reduced when uploading the image to this forum.  See how the edges of the screenshots look wavy?  Well, prior to uploading to this forum, the top screenshot's edges are perfectly straight.  The bottom edge on the bottom screen shot (my image with my perspective added) looks wavy even before I upload.  Also, the top piece how I am trying to throw shadows correctly between the screenshots.

            Any advise on how to achieve "picture perfect"?

            Thanks,

            Jay

            • 3. Re: How to create professional image of multiple screenshots
              Noel Carboni Community Member

              There's always more than one way to do things, but here's how I'd do it:

               

              MultipleScreens.jpg

               

              Basically, you'll want to paste your multiple screens into a single document as separate layers.  Make your Layers palette visible; you're going to need to select different layers to do things to them.  Layers nearer the top of the stack show "in front" of layers below.

               

              You might want to expand the canvas to give you room around the windows.

               

              Use the Transform tool to give the screens perspective, and move them around with the move tool..

               

              Create a backdrop with a couple of runs of the gradient tool with rectangular selection.

               

              Create some new layers in between the screens to make shadows.  You can use a selection made with the Polygonal lasso tool to create straight-edged selections to limit where you paint into the shadows layer, and a big brush with partial Opacity or Flow to make the shadow partially transparent.

               

              Your layers will look something like this:

               

              MultipleScreensLayers.jpg

               

              Here's a .psd file you can load to see how the above is put together:

               

              http://images.prodigitalsoftware.com/MultipleScreens.zip

               

              -Noel

              • 4. Re: How to create professional image of multiple screenshots
                Noel Carboni Community Member

                As an exercise, as an added touch add reflections on the table. 

                 

                MultipleScreensWithReflection.jpg

                 

                Hint:  Copy the layers containing the screens, flip them and distort them to match the bottom of the existing window using the various Transform tools, and use a layer mask and gradient to make the reflections partially transparent and fade away.

                 

                -Noel

                • 5. Re: How to create professional image of multiple screenshots
                  gunderj Community Member

                  Wow, that is great work you do Noel.  Any chance you would be willing to produce

                  my image on contract?  Hopefully we could agree on  some price, then you could

                  deliver the photoshop design file (including the layers), for payment.

                  Interested?

                  Thanks,

                  Jay Gunderson

                  Preparelink.com

                  • 6. Re: How to create professional image of multiple screenshots
                    Noel Carboni Community Member

                    It certainly wasn't my intent to solicit business, but please eMail me if you like (click on my avatar for my address).

                     

                    -Noel