Show HN: Smartmockups – Create product screenshots with just a few clicks | Hacker News Reader

Show HN: Smartmockups – Create product screenshots with just a few clicks

smartmockups.com

67 pointsiamlukaszajic58 comments

Hello guys, I'd like to show you our new project. It's a curated collection of product mockups for all designers, marketers and developers. All mockups are free and ready for personal and commercial projects. No Photoshop needed, you just pick one mockup, upload your image and download the final image in high resolution. Everything is processing in your browser so your files are safe.

Not working on Chrome,please fix it.

Works in Chrome here (OS X, Chrome Version 48.0.2564.116 64-bit)

Hi, everything should works just fine. What OS do you have?

Works here (48.0.2564.109 / W7) - fix your setup.

I think this is a great idea. Unfortunately, several of the images have alignment issues and other problems. One of the mockups thumbnails covers up the user's thumbs with the screen, for example: http://smartmockups.imgix.net/47_bg.jpg?fit=crop&w=360&h=270...

Also, have you thought about doing some basic colour balancing on the uploaded images to match the environment in the image, or overlaying some subtle alpha-channel reflections? (Both of which would greatly increase the realism)

Seems that on the actual page for that mockup, the thumbs display correctly: http://smartmockups.com/mockup/47

Well, the thumb is actually bent but you're right it looks like that from the small thumbnail :)

No, it's a problem with the thumbnail. Compare with the full size one, which is correct: http://smartmockups.com/mockup/47

Great idea, keep working on it!

Do you have plans to add mockups with multiple devices in a single image? I make those the most to show the flexibility of responsive design

The phone is eating this man's thumbs! http://smartmockups.imgix.net/47_bg.jpg?fit=crop&w=360&h=270...

Well, you're right it looks like that from the small thumbnail, but the thumb is actually there, it's just weirdly bent

https://www.dropbox.com/s/0cu50g59r7ys1ce/Screenshot%202016-...

Well perhaps I should include a screenshot because when I view the link I included the screen image is clearly going over the thumbs. Your screenshot is not the same as how it appears in my browser.

I see it too. There's another one a few images previous with a similar issue. (titled "Woman holding Nokia Lumina")

And did you try to refresh the browser? Sometimes there is a PNG layer (with the thumb) missing but after refresh everything should be fine :)

would be really cool if it just accepted a url and showed the rendered version of the page on all the images available...

That's a great idea! We plan to add the possibility to add screenshot from URL in near future, but capturing multiple screen sizes and rendering them all at once would be pretty cool! We're adding it to our todo list :)

Typo on "How It Works" page: "choose the rosultion". Also maybe change the wording of "You can also upload a new image if you were wrong." seems a bit odd as it is.

Also, it'd be nice if at Step 3 you actually showed some mockup on a device rather than the same "Your Design Here" image seeing as it's supposed to demonstrate a sample finished product.

I've been thinking of creating something similar (actually more like a grunt workflow). I seem to make the same mockups for all web-apps I create.

Does this service have a Photoshop instance running in the backend? I was basically thinking of a way to pro-grammatically insert images into the smart objects of my product mockup templates.

Any suggestions from HN?

Image Magick will probably be able to do the trick: http://www.imagemagick.org/script/index.php

We render mockups in the browser (using the html canvas). We've been exploring the ways, how to edit or switch PS smart objects, but we haven't found anything useful for our needs.

This is really great. Can you distinguish yourselves from placeit.net somehow in the long run?

What are its advantages over placeit.net?

placeit requires attribution

The main advantage is probably the price. Placeit is really expensive and I'm not sure if it's bearable for all freelance designers. Another may be the speed, processing in your browser and connection with already made mockups - that means we support the original authors

Thats a great question:) Smartmockups is a result of our personal frustration. When you need to send a design to a client or to put together a quick presentation, you don’t want to go through hundreds of mockups and to deal with a lots of features. Also Placeit can became quite expensive.

With Smartmockups we want to put quality of mockups over their quantity and make the process seamless and fast. It will remain free and we plan some other revenue streams (to cover the costs) like bundles or Mac app with some advanced features etc.

Looks cool, but then as I scrolled I was bummed to see that it was only white hands (with maybe one that wasn't white? Or a good suntan?). Any plans to build up a more diverse hand collection?

Sure, it's just a first collection of mockups. We're going to release 5 new mockups every week via our newsletter and social media so stay tuned!

It would be cool if you had transparent backgrounds.

We plan to add mockups every week and some simple devices with transparent background coming in upcoming days

Very nice. Does it work with animated GIFs? I'd love to upload a motion graphic to it and have it in the placeholder.

Great! In the google developer console where you can configure the android play store entry for your app, some special pictures require a fixed size:

1024 x 500 (functional graphic) 180 x 120 (advertisement graphic) 1.280 x 720 (TV banner)

It would be immensely useful if I could directly download them in that size.

This is great - used it right away (the white iPad mini landscape view using a screenshot taken from my own iPad mini) on agendashift.com and credited/recommended you in our LinkedIn group. Thanks for sharing!

This looks really cool. I'll definitely try it again, but there is an error in the images I download.

http://imgur.com/AdXVBDs

Ubuntu 14.04 Chrome 46

All the lowercase letters 't' on your page looks weird for me. They're a little bit smaller than all other letters.

Using Firefox on Win10.

We use webfont Montserrat. The render of some letters may seem wierd on some screen resolutions :(

Looks nice, the only thing that I noticed is the facebook button - it's not in a language I recognise, "to se mi libi"

Seems like placeit.net, very much so. Any connection?

Nope, it's a free alternative available for all designers for free with less useless features and better UX.

Do you employ 'hand models'?

Hi! We're gonna release 5 new mockups every week so there will be some hands for sure!

Does anyone not in the manufacturing or retail sectors ever use the term "Notebook"? I've never heard anyone utter it in normal conversation and every time I read it I have to mentally translate it to "Laptop". Is it a UK thing? Do people in the US habitually refer to portable computers as "Notebooks"?

I've probably heard the term and used it once and a while, but laptop or just computer/PC is much more common, at least around NYC. Or "my Mac" if it is a mac.

I don't know about the U.S. but here in Turkey we used to (4-5 years ago) refer to the portable computers as "Notebooks". Nowadays most people call it "dizüstü bilgisayar" which directly translates to laptop computer.

Your comment made me think about that. Wonder how the usage in daily language changed... Maybe because notebook was English. Not sure.

Definitely a regional thing. In Germany both terms appear as loanwords (I don't think there is a "real" German word for it) and they're used interchangeably.

One of the two was a trademark leading to the other one being pushed as an alternative. But I can't even remember which one -- at this point I couldn't even tell you which phrase is more widely used.

EDIT: IIRC at some point "Notebook" was used to refer to laptops that were smaller and/or lighter than the regular (rather heavy and bulky) laptops at the time. There's also a major online discounter called notebooksbilliger.de (literally "cheaper notebooks"). In day to day language I would err towards "Laptop" being the more widespread term but not by much.

You're not referring to netbooks are you?

No, netbooks were a separate category in sizes that are now common with tablets (i.e. around 10 inches). There's also "subnotebook" but I never understood the exact distinction of that category.

I like the German word "Klapprechner" (something like "foldable computer").

I've always seen it as more like an age gap thing. Youngsters usually refer to those as "notebooks", and older people (or those that work in an enterprise setting) call 'em "laptops".

I think that word is a very EU thing. I'm originally from the US and never heard it used anywhere there. Having lived the last 7 years in continental Europe I can say that its used in Poland (notebooki/ultrabooki) and Germany on most websites and in the spoken languages, but I'd still say Laptop is the more general term and pops up more often.

In Soviet Russia... ahem... in Russia we too use the term "notebook" ("ноутбук", often shortened to just "ноут").

I think they started to move away from the term laptop because of the health risk of frying one's parts by using a hot machine on your lap[1]. So a notebook is a safer way to refer to it.

[1] https://en.wikipedia.org/wiki/Laptop#Possible_effect_on_fert...

Well, maybe we could try some poll and find what most people use :)

Google already did the work for you:

https://www.google.com/trends/explore#q=laptop%2C%20notebook

https://books.google.com/ngrams/graph?content=laptop+compute...

Awesome!

It's a regional thing. Amazon.com usest "laptop", Amazon.de uses notebook.

Brilliant! Kickstarter fraud just got even easier. Now you can fool your customers into thinking you have a working prototype in record time!

Reply on news.ycombinator.com