Dexx

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

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

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

Need Offline Leads? Get them more easily with two great Lead Gen reports and 65 pages of quality PLR PLUS flyers, postcards and other marketing materials. Starting at under $5!

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.

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

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!

Steve Solem

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.

Need Offline Leads? Get them more easily with two great Lead Gen reports and 65 pages of quality PLR PLUS flyers, postcards and other marketing materials. Starting at under $5!

resellrightsandplr

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

Shmigola

I have some template for that purpose. PM me.

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.

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

Moxil

iOS Simulator + iOS Simulator Cropper. All with a click of a button:

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

Dexx

That's wicked Rockt! Thank you!

Rockt

I think I cried tears of joy when I first found it

SparkPage.com - Publish Mobile Landing Pages in Minutes. Perfect for PPC, SMS or QR campaigns.

Roberto F Carrera

That just makes things soooo much easier. Thanks again

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.

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.

4webmaster

You can use a desktop simutalor like Mobilizer | Springbox
Hit print screen and paste/edit in photoshop using action scripts.

https://stevesuard.com

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.

S3Ware

This is a great tool for demo-ing a mobile site and you could grab a screen shot from it ... Blackbaud Labs - Labs Article

WillR

That's the first tool I used when trying to take screenshots, etc.

Then Mobilizer came along and I found it much better.

With Mobilizer you can take the screenshots right from within the same program.

It's much easier... and it's also free.

Mobilizer | Springbox

.

➨ Here's How to Make Your First $177 Online
This Week Using the Piggyback Method...

.