bernhard Posted June 20, 2018 Share Posted June 20, 2018 Hi everybody, has anybody here ever created some kind of mockup tool? Something where a user can upload an image and the image is placed on a product to show a preview of the final result? I know those kind of mockups from photoshop... you upload your file and the file is placed eg in a print magazine or a tshirt or the like. Simple image overlays would be possible via PHP, but I wonder what the best solution for more complex mockups would be? Can I somehow automate Photoshop to create such mockups? Or can I even do that with GIMP? Or are there some libraries for such tasks? Thanks for any hints ? Link to comment Share on other sites More sharing options...
wbmnfktr Posted June 20, 2018 Share Posted June 20, 2018 So... you want to build something like that or want to use this for showing your work? There are already several of those services, tutorials and PSDs out there. Like: https://smartmockups.com/ https://placeit.net/ https://en.99designs.de/blog/tips/creating-professional-mock-ups/ https://covervault.com/ https://colorlib.com/wp/magazine-mockups-templates-psd/ Link to comment Share on other sites More sharing options...
bernhard Posted June 20, 2018 Author Share Posted June 20, 2018 5 minutes ago, wbmnfktr said: So... you want to build something like that or want to use this for showing your work? Yes, i want to build something like those services you linked to. It's for a webshop of a possible client that sells customized products so the visitors should get a preview of their customized products (eg tshirt with logo, bottle with custom design etc). Link to comment Share on other sites More sharing options...
wbmnfktr Posted June 20, 2018 Share Posted June 20, 2018 Ok... I get it. Well creating those previews like logos on shirts might be the easy part but when you want to place a logo on a bottle or cup things will become tricky. I created mockups in the past with custom actions for Photoshop or those free generators. Ask Google for those Photoshop actions and you will get lots of results. Maybe this will work for you in any kind. Maybe there are even ready-made solutions out there. Re-inventing that mockup-wheel might be lot's of work. https://photofunia.com/de/ for example does similar things but I really don't know how they did it. Link to comment Share on other sites More sharing options...
bernhard Posted June 20, 2018 Author Share Posted June 20, 2018 thx @wbmnfktr what you are telling where exactly my thoughts and that's exactly my current status. I know that there are (or where?) "Droplets" in Photoshop that you could create to do all kinds of custom actions. So maybe I could create such a droplet (or gimp equivalent) for every product, place it on the server and when a user uploads an image i call the droplet to perform the mockup actions... Link to comment Share on other sites More sharing options...
wbmnfktr Posted June 20, 2018 Share Posted June 20, 2018 You want to trigger GIMP/Photoshop server-side? That might get out of control. ? 1 Link to comment Share on other sites More sharing options...
bernhard Posted June 20, 2018 Author Share Posted June 20, 2018 29 minutes ago, wbmnfktr said: You want to trigger GIMP/Photoshop server-side? That might get out of control. ? Photoshop has the ability to create droplets. That are small .exe files that perform predefined actions to images that are dragged on them. So i thought maybe one can create such droplets for a mockup and execute it with uploaded images programmatically. Meanwhile i found out that imagemagick should be able to do that kind of thing: https://www.imagemagick.org/Usage/distorts/#summary Looks a bit complex, but maybe it would be worth the effort. Don't know the client's budget yet, so I'm waiting for that info (or better ideas from you guys here) ? thanks for your input so far @wbmnfktr Link to comment Share on other sites More sharing options...
Tom. Posted June 20, 2018 Share Posted June 20, 2018 I would honestly tackle this using server-side JavaScript canvas. I can help you with that if you want? 1 Link to comment Share on other sites More sharing options...
horst Posted June 20, 2018 Share Posted June 20, 2018 @bernhard Using "droplets" seems to be very ugly and may lead into loosing control and render your PS unusable. If you really want to use PS on the serverside, you should use one of the PS scripting interfaces, depending on your platform: apple-script or VB-script, or you go with *.JSX. Oh wait, now after thinking of it a minute more, I think it isn't doable at all, as you ever only can run ONE instance of PS, not multiple. How do you want to handle multiple parallel requests? Waiting Queue? Also, if you opt for server side, I think this can be done with imagick or other CLI image libraries much faster. 1 Link to comment Share on other sites More sharing options...
bernhard Posted June 20, 2018 Author Share Posted June 20, 2018 thx @horst, I think my explanation was not the best ? I don't want to use Photoshop - I just mentioned photoshop to explain what I am trying to do and asked for the best solution for what I already know can be done by hand with photoshop. Do you understand? The imagemagick link I posted above looks quite promising - though I have no idea how hard that would be in real life. The plan is to have a product image on the server, let the website visitor upload his logo/design, place this file on the background image, transform it and place it properly, maybe place an overlay above with some shadow or other effect (just dreaming) and save the final image and output it as preview to the website visitor. 1 Link to comment Share on other sites More sharing options...
Marc Posted June 21, 2018 Share Posted June 21, 2018 My company developed a website where we sell greeting cards and gift products that our customers can customize and apply their own designs to. The designs can then be previewed in interactive 3D. We use a software package called Taopix 3D Designer for this. Taopix are using three.js to render the preview, so you may want to look into that javascript library as well. 2 Link to comment Share on other sites More sharing options...
joshuag Posted July 5, 2018 Share Posted July 5, 2018 https://codecanyon.net/item/easy-product-designer/20894137?s_rank=8 http://preview.codecanyon.net/item/fancy-product-designer-pricing-addon-jquery/ 1 Link to comment Share on other sites More sharing options...
Recommended Posts