Online Phone Case Designer ...

[webtrekker]

Just returning to programming to fill in some self-isolation time!

Thought I'd make a phone case designer, not necessarily to produce product mockups (although it could be used as such) but to help in checking out new ideas for cases quickly and without the need for bloatware, such as Photoshop. This will run in any modern browser, on any computer, laptop, tablet or mobile phone.

Below are some examples I made. I've made many more, it's addictive!

[Click an image to enlarge]

dsf1_phone.jpgcdmbar.jpgtiger_phone.jpgwonkabar_mockup.jpgpencils_phone.jpg


The image manipulation is done using the excellent Cloudinary setup - https://cloudinary.com/ and the FREE version is more than adequate for most purposes. Basically, you register for free, then you can apply complex transformations to any of your uploaded images and display them using a single URL. I added a bit of Javascript myself to handle the Cloudinary Upload Widget and my front-end user interface.

You can try it out here - [User Deleted]

Because Cloudinary hosts everything as well as applies the transformations and delivers the content I will eventually have to clean out some space in my account, but for a while at least you can try it out yourselves if you are interested. It's very simple to use ...

1. Go to my page linked above.

2. Set a size for your mockup. (Note that this size applies only to the image that will be displayed on my page. I have set all mockups to be 2000 pixels square so right-clicking and 'Saving' the returned mockup will always save it at full size).

3. Click the orange Upload button to display the upload widget, where you can browse for an image on your device, or enter a web address for any image you see on the web (I use this a lot).

3. When your image appears you can Crop it or Skip the cropping process. A few seconds later your mockup will appear on my page.


As stated, I will evevntually be clearing out all uploaded images (proably in a week or two) so save anything you'd like to keep.

PLEASE - NO OFFENSIVE OR RISQUE IMAGES! Keep it clean while checking out the generator or Cloudinary may remove my account.

Have fun folks!

[webtrekker]

A few more examples (for inspiration! ) ...

sorted_phone.jpgphone_bg (1).jpgphone_bg.jpgnokia6300_phone.jpgkarate_phone.jpgwood_phone.jpgalnwick_phone.jpg

I used an iPhone 6S base image but obviously other base mockup images could be used: coasters, lighters, t-shirts, keyrings, ... you name it!

Once you have the base image and image distortion coords set in Cloudinary (along with any highlighting or shadow layers) it's simply a matter of choosing one image after another to see what they would look like in real life. No more mucking around with Smart Objects in Photoshop!

You can also, of course, design your own original images in Photoshop or whatever and apply those to the mockups.

For the curious, here's a typical url sent to Cloudinary to return my Wonka Bar mockup image...

[User Deleted]

Want to quickly try out a web address but can't be bothered to look for anything? Copy & Paste this link into the Upload Widget web address location field and it will produce a Union Jack flag mockup on the phone ...

[User Deleted]

[Justin]

Looks excellent, good work! Phone cases like this are our main stay of work. We wanted to offer customers the chance to design their own case online, we've had a custom built engine built in the past but not very successful. Also tried all of the 'off the shelf' options which have also proved less than useful. Maybe something like this could be used, certainly looks to have great promise.

Obviosuly we also have to produce a huge number of mock ups for our own products so again this may prove useful thank you :-)

[webtrekker]

Have a play around with it Justin and let me know what kind of features you'd need. I could probably code a custom designer but it would be purely for customers to upload and view their own designs on the product of their choice, possibly with some text and font options for further personlisation, but wouldn't include anything related to the ordering side of the business other than to allow the business owner to retrieve the customers designs and print them.