0

I need a tool which allows me to upload an image with a device(like this) and then to upload my app screenshot on the screen. What can I use? I don't need a tool like placeit, I need to upload my own image and my own screenshot. And also I don't want to use Adobe Photoshop.

Placeit.net allows me to put my screenshot in many preset device images; however, i want to use my very own device image and on top of that to add an app screenshot. I can't do it in PS because it's quite time consuming (my images are rotated, skewed, in perspective etc.) and I need to do multiple images so I'm looking for something a bit more automated.

  • Alright, now I get it. I highly doubt that there is a service like that. If you want to use your own photo of a phone and place a screenshot on the screen, you should either take the photo with the screenshot on the screen to begin with or photoshop the screenshot in place manually. – Joonas Nov 3 '15 at 11:38
  • In cloud, on a website. Placeit.net allows me to put my screenshot in many preset device images; however, i want to use my very own device image and on top of that to add an app screenshot. I can't do it in PS because it's quite time consuming (my images are rotated, skewed, in perspective etc.) and I need to do multiple images so I'm looking for something a bit more automated. – Diana Alexescu Nov 3 '15 at 13:04
  • Diana, for service like placeit.net to accept user uploaded images, it would not only have to automatically detect the device screen, but to also skew, rotate the image to fit the screen and mask out any possible fingers that are blocking the screen. That's why they have multiple image "templates" to choose from (probably). You could try and automate your own process though. If you're using the same photo for all the screenshots, it wouldn't be too hard to automate the process of replacing the smart object and saving it with a different name (in photoshop). – Joonas Nov 3 '15 at 13:51
  • @DianaAlexescu you shouldn't say you cant use Photoshop because you think its a lot of work. It does not need to be more work than 4 clicks in any system. If you need to do a LOT of these consider After Effects. There is no magical way the computer can know where to put the image without user input. Once the 4 points are described its no more work than drag and dropping images in place. – joojaa Nov 3 '15 at 17:36
1

I am very sorry to say but the best way of doing this is actually by using Photoshop.

But the process is so simple that (with a little more dedication) you can use even Paint to do something like you described. You just need to find an image with a phone, it doesn't matter if it already has a screen. You will add your own image over the screen with a little bit of resizing and crop.

Depending on how realistic you want it to be you will need to add reflections and shadows to it.

An advantage in using Photoshop is that you will find a lot of free mock-ups out there that will simplify your work.

0

There are many tools you could use. I am not aware that such a service does exsist, but it might, as this is extremely simple to do. You dont even need to know much anything as you can find these ready made for several software and even in photoshop its no more work than drag and drop when you have that template loaded.

Software (Other than photoshop) that can do this include:

  • Imagemagick
  • Gimp
  • Inkscape
  • Your browser
  • ...

If i was paid to do such a service I would turn to imagemagik. And have a passable service up and running within a hour.

New information in comments

There is no reason why you can not automate Photoshop. All you need is to know where the corners of your screen are. Whether or not this will work for you is another thing. All you need to do is bring in a suitably sized smart object. then

  • Hit Ctrl+t with the smart object selected
  • Hold control down and drag each corner to position.

Now all you need to do is replace the image in the smart object for all images you want to display on the image. This is easy to do. Wether or not you do thsi in Photoshop is up to you you could equally easily do it in imagemagick the complexity per image is the same. After the template is done its no more work in either software. 10 or 10000 images not much more work.

The biggest issue is that if you have one screenshot but 10000 template images to process. Then no method really helps. Manually doing the corner pin takes about 1 minute per picture. So 100 images would take a few hours max.

Automagically detect corners

It is possible to automagically (pun intended) detect corners? Yes it is, but only if you planned the shots very carefully. You could put a cyan/magenta/clearly visible different chekerboard on the screen before shooting. This would let you search for the selected area for corners and you could detect this.

Second if its always the same phone you could detect the phones features and compare it with something like FLANN to detect the position. But given the phones, and their lack of features, we have its better if you have a fixed image in the screen to detect.

Look into using open CV

If you have a video

If you have a video then you should use corner pin with corner tracking. This is not very hard to set up in say after effects, or say syntheyes. But important here is that the object corners should be easily detectable and more trackable. Again plan before you shoot shoving static image makes it MUCH easier,

0

If you check out some more advanced mockup templates for Photoshop you will learn that you can do all rotation, skewing etc. in layers or actions, which - after an initial setup - will allow a very quick replacement of your screenshot without much manual work.

Another option might be https://www.getscenery.com/ where you could add your own backgrounds but you will need to use the hand/device photo of the software.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.