Register Advertise with usHelp Desk Today's Posts Search

Closed Thread
Thread Tools Search this Thread
Unread 4th Nov 2012, 03:39 AM   #1
Offline Consultant
War Room Member
 
Dexx's Avatar
 
Join Date: 2007
Location: Alberta, Canada
Posts: 1,918
Thanks: 674
Thanked 664 Times in 334 Posts
Default
How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

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
Dexx is offline  
Unread 4th Nov 2012, 08:45 AM   #2
HyperActive Warrior
War Room Member
 
d0rhk's Avatar
 
Join Date: 2008
Location: Toronto, Canada
Posts: 356
Thanks: 88
Thanked 78 Times in 50 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

There's a bunch of people selling stuff like this in the WSO section.

Also this might help: Let me google that for you
d0rhk is offline  
Unread 4th Nov 2012, 08:53 AM   #3
Senior Warrior Member
War Room Member
 
Steve Solem's Avatar
 
Join Date: 2008
Posts: 1,164
Thanks: 170
Thanked 405 Times in 298 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

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

Steve Solem is offline  
The Following User Says Thank You to Steve Solem For This Useful Post:
Unread 4th Nov 2012, 09:21 AM   #4
HyperActive Warrior
War Room Member
 
ppc4profit's Avatar
 
Join Date: 2007
Location: London, United Kingdom.
Posts: 167
Thanks: 12
Thanked 33 Times in 25 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

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
ppc4profit is offline  
The Following 2 Users Say Thank You to ppc4profit For This Useful Post:
Unread 4th Nov 2012, 09:23 AM   #5
Offline Consultant
War Room Member
 
Dexx's Avatar
 
Join Date: 2007
Location: Alberta, Canada
Posts: 1,918
Thanks: 674
Thanked 664 Times in 334 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

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!
Dexx is offline  
Unread 4th Nov 2012, 01:35 PM   #6
Senior Warrior Member
War Room Member
 
Steve Solem's Avatar
 
Join Date: 2008
Posts: 1,164
Thanks: 170
Thanked 405 Times in 298 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

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.

Steve Solem is offline  
The Following User Says Thank You to Steve Solem For This Useful Post:
Unread 4th Nov 2012, 01:58 PM   #7
FreebieCow.com
War Room Member
 
resellrightsandplr's Avatar
 
Join Date: 2011
Posts: 40
Thanks: 38
Thanked 45 Times in 17 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

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


resellrightsandplr is offline  
Unread 4th Nov 2012, 02:47 PM   #8
Active Warrior
 
Join Date: 2011
Posts: 33
Thanks: 16
Thanked 6 Times in 5 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

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.
Shmigola is offline  
Unread 4th Nov 2012, 03:16 PM   #9
Warrior Member
 
Join Date: 2012
Posts: 2
Thanks: 0
Thanked 2 Times in 2 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

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.
ignatius9 is offline  
The Following User Says Thank You to ignatius9 For This Useful Post:
Unread 4th Nov 2012, 06:39 PM   #10
Offline Consultant
War Room Member
 
Dexx's Avatar
 
Join Date: 2007
Location: Alberta, Canada
Posts: 1,918
Thanks: 674
Thanked 664 Times in 334 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

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
Dexx is offline  
Unread 4th Nov 2012, 11:18 PM   #11
Active Warrior
War Room Member
 
Join Date: 2009
Posts: 74
Thanks: 5
Thanked 14 Times in 13 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

iOS Simulator + iOS Simulator Cropper. All with a click of a button:
Moxil is offline  
The Following User Says Thank You to Moxil For This Useful Post:
Unread 6th Nov 2012, 12:08 PM   #12
Warrior Member
 
Join Date: 2012
Posts: 13
Thanks: 2
Thanked 6 Times in 3 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

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
Rockt is offline  
The Following 4 Users Say Thank You to Rockt For This Useful Post:
Unread 6th Nov 2012, 12:58 PM   #13
Offline Consultant
War Room Member
 
Dexx's Avatar
 
Join Date: 2007
Location: Alberta, Canada
Posts: 1,918
Thanks: 674
Thanked 664 Times in 334 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

That's wicked Rockt! Thank you!
Dexx is offline  
Unread 7th Nov 2012, 03:08 PM   #14
Warrior Member
 
Join Date: 2012
Posts: 13
Thanks: 2
Thanked 6 Times in 3 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

Originally Posted by Dexx View Post

That's wicked Rockt! Thank you!
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.
Rockt is offline  
Unread 9th Nov 2012, 05:48 PM   #15
Banned
War Room Member
 
Join Date: 2012
Location: Ocala, FL
Posts: 24
Thanks: 22
Thanked 10 Times in 8 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

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
Roberto F Carrera is offline  
Unread 12th Nov 2012, 11:39 AM   #16
HyperActive Warrior
War Room Member
 
Steve1776's Avatar
 
Join Date: 2009
Posts: 101
Thanks: 79
Thanked 28 Times in 24 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

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.
Steve1776 is offline  
Unread 12th Nov 2012, 12:22 PM   #17
Advanced Warrior
 
Join Date: 2006
Location: , , .
Posts: 736
Thanks: 33
Thanked 144 Times in 119 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

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

4webmaster is offline  
Unread 14th Nov 2012, 06:15 AM   #18
Alburyboy67
War Room Member
 
Join Date: 2009
Posts: 25
Thanks: 3
Thanked 4 Times in 4 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

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.

Last edited on 14th Nov 2012 at 06:18 AM. Reason: I forgot to add some information...
djhislop is offline  
The Following User Says Thank You to djhislop For This Useful Post:
Unread 18th Nov 2012, 06:42 PM   #19
HyperActive Warrior
War Room Member
 
Join Date: 2009
Posts: 123
Thanks: 33
Thanked 48 Times in 36 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

This is a great tool for demo-ing a mobile site and you could grab a screen shot from it ... Blackbaud Labs - Labs Article
S3Ware is offline  
Unread 19th Nov 2012, 12:24 AM   #20
Digital Marketer
War Room Member
 
WillR's Avatar
 
Join Date: 2010
Location: Australia
Posts: 12,475
Thanks: 1,984
Thanked 8,187 Times in 4,079 Posts
Default
Re: How do you do a mobile site screenshot inside..
Share on: 
fb share twitter share gplus share more share

Originally Posted by baib21 View Post

This is a great tool for demo-ing a mobile site and you could grab a screen shot from it ... Blackbaud Labs - Labs Article
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

WillR is offline  
The Following User Says Thank You to WillR For This Useful Post:
Closed Thread


Bookmarks

Tags
inside, mobile, screenshot, site


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




All times are GMT -6. The time now is 05:48 AM.