How do you do a mobile site screenshot inside..

by Dexx
19 replies
Hey guys,

I'd like to take a mobile website screenshot, and place it inside an image of an actual smartphone...similar to this:



Anyone know of a Photoshop script or template I can download to make a realistic representation of a smartphone actually displaying a mobile website?

(I plan to use this to showcase example websites etc. vs just a screenshot of the mobile site)

~Dexx
#inside #mobile #screenshot #site
  • Profile picture of the author d0rhk
    There's a bunch of people selling stuff like this in the WSO section.

    Also this might help: Let me google that for you
    {{ DiscussionBoard.errors[7288123].message }}
  • Profile picture of the author Steve Solem
    Hey Dexx - check out Mobilizer | Springbox if you want to do the work yourself and want to be able to display in various phones.

    It you want to automate the processing and prospecting, this new WSO will let you compare a client site to a demo site and works as a Wordpress plugin http://www.warriorforum.com/warrior-...t-getting.html

    Cheers,

    Steve
    {{ DiscussionBoard.errors[7288150].message }}
    • Profile picture of the author ppc4profit
      Dexx,

      Here is a simple way if you have an iphone and plan to do this with several sites.

      1. Visit the site using an iphone.
      2. Briefly hold the on/off button and immediately press the Home button
      3. The screen should briefly go white then return to normal, it has taken a screenshot of the page which is now in your camera roll.
      4. Export the image to your pc and using any graphics program that has layers :-
      a. import blank image of iphone into the background layer
      b. import this screenshot into a layer above the background.
      c. export your composite image

      An example of the final image is here.



      More examples can be seen here.
      Signature

      Checkout Our Fully Responsive Wordpress Templates
      Mobile Enable Your Wordpress Website Today - With This Plugin
      Online Marketing - We Help With PPC, SMS and QR Code Campaigns

      {{ DiscussionBoard.errors[7288231].message }}
      • Profile picture of the author Steve Solem
        Originally Posted by ppc4profit View Post

        Dexx,

        Here is a simple way if you have an iphone and plan to do this with several sites.

        1. Visit the site using an iphone.
        2. Briefly hold the on/off button and immediately press the Home button
        3. The screen should briefly go white then return to normal, it has taken a screenshot of the page which is now in your camera roll.
        4. Export the image to your pc and using any graphics program that has layers :-
        a. import blank image of iphone into the background layer
        b. import this screenshot into a layer above the background.
        c. export your composite image

        An example of the final image is here.

        More examples can be seen here.
        I was doing that too recently, and using dropbox to sync the screenshots with my pc was a big time saver. You can find iphone graphics just about anywhere online (including a wso or two) and to add that glossy look if needed, all you really need to do is select the area and reduce the opacity to simulate that effect.
        {{ DiscussionBoard.errors[7289162].message }}
  • Profile picture of the author Dexx
    Ah yes, I had thought about that as well, but the reason I was looking an easy photoshop action was to get that glossy effect to make it look like it was a 3D version of an actual phone. I may just go with your idea tho, thanks!
    {{ DiscussionBoard.errors[7288242].message }}
    • Profile picture of the author Shmigola
      Originally Posted by Dexx View Post

      Ah yes, I had thought about that as well, but the reason I was looking an easy photoshop action was to get that glossy effect to make it look like it was a 3D version of an actual phone. I may just go with your idea tho, thanks!
      I have some template for that purpose. PM me.
      {{ DiscussionBoard.errors[7289451].message }}
  • Hi Dexx,

    Is this what you're looking for?

    iPhone 5 screenshot action script with Photoshop | 10 Minute Photoshop

    It's Pay With a Tweet

    ~Karen
    Signature

    {{ DiscussionBoard.errors[7289240].message }}
  • Profile picture of the author ignatius9
    Do a search for photoshop mobile mockups there are a lot of them about which will let you drop your image onto it crating images like the one you posted.
    {{ DiscussionBoard.errors[7289553].message }}
  • Profile picture of the author Dexx
    I wasnt sure what search term to use, I ended up finding what I was looking for for $5:

    Graphics - New Phone 5 Mock-up | GraphicRiver

    Thanks for the responses everyone!

    ~Dexx
    {{ DiscussionBoard.errors[7290220].message }}
  • Profile picture of the author Moxil
    iOS Simulator + iOS Simulator Cropper. All with a click of a button:
    {{ DiscussionBoard.errors[7291061].message }}
  • Profile picture of the author Rockt
    Hands down the simplest way.....

    1. Take screenshot
    2. Email it to smartphones@mailchimp.com

    They'll send you back an image of your screenshot inside an iPhone.

    It works for most major smartphone devices and it just an all-around awesome service Smartphones@ – Tool for Generating Better Smartphone Screenshots | MailChimp Email Marketing Blog
    {{ DiscussionBoard.errors[7299800].message }}
  • Profile picture of the author Dexx
    That's wicked Rockt! Thank you!
    {{ DiscussionBoard.errors[7300009].message }}
    • Profile picture of the author Rockt
      Originally Posted by Dexx View Post

      That's wicked Rockt! Thank you!
      I think I cried tears of joy when I first found it
      {{ DiscussionBoard.errors[7305858].message }}
      • Profile picture of the author Roberto F Carrera
        Banned
        Originally Posted by Rockt View Post

        I think I cried tears of joy when I first found it
        That just makes things soooo much easier. Thanks again
        {{ DiscussionBoard.errors[7317494].message }}
  • Profile picture of the author Steve1776
    There is an app for Blackberry called Cool Shot that will take a screen shot of your phone. Its free in the Blackberry App World.
    Signature

    You can get anything you want if you help enough other people get what they want.
    Losers fail and quit. Winners fail until they succeed.
    Indecision is worse than the wrong decision. You can fix a wrong decision, you can't fix indecision.

    {{ DiscussionBoard.errors[7327990].message }}
  • Profile picture of the author 4webmaster
    You can use a desktop simutalor like Mobilizer | Springbox
    Hit print screen and paste/edit in photoshop using action scripts.
    {{ DiscussionBoard.errors[7328167].message }}
  • Profile picture of the author djhislop
    Many mobile emulator programs may allow you to do this, however; I have noticed a few such programs have vertical and horizontal scroll bars to run the emulator program. Although my method may not be common, this is how I do it...

    I have purchased an image of an iphone or other phone from a photo stock agency - make sure the image is larger than what you need because you can always down size it later...

    Then I upload the image into Snagit Editor and play around with the sizing to make it about the size of an actual iphone or other...

    Then, open the URL of the website I need the image from and decrease the size to about the same size as you would see on your smart phone when you view the site.

    Then, I use Snagit to capture this image and in Snagit Editor I can overlay the image onto the screen area of the iphone image that I purchased.

    Here are two images I made yesterday:



    It's pretty easy and doesn't take too long to do, and; this is a cheaper alternative if you can't afford Photoshop...

    NOTE: This method only works thru Snagit on Mobile Device images that are not on an angle because I don't think it is possible to change the angle of images using this program

    Cheers
    Dean.
    {{ DiscussionBoard.errors[7336752].message }}

Trending Topics