Can the sample size be done in percentage points (of the source image)? I think some of your example images are higher resolution than others so it takes a lot of fiddling to find similar results.
That's a good idea, I'll add it soon. Yes, example images vary in resolution, I scaled them to have a dense visual complexity. The idea is a bit revolving around chaos, you never know what you discover :)
Lovely app, I like this type of gradient backgrounds.
Came to my mind the decision you made to not be able to generate a custom link for uploaded images, and I wonder, is there a way to achieve this? Considering that the base64 length hits the URL size limit.
Thanks :)
It can be done, but the because of URL limits, the image should be saved. I plan to allow full scale downloads and I might just store custom uploads too.
This is a really great idea. In addition to using existing images, would it be possible to create interesting patterns and textures procedurally using canvas.toDataURL()?
This is really nice. It could be interesting to also add a thumbnail of the chosen image on the page. That would instantly give the effect that the background color/gradient had been chosen to match the image (which of course it had :) ).
Clever idea to use a dramatically zoomed image to allow for a variety of "stops" in the gradient!
I've used random CSS gradient backgrounds on my personal blog for some time [1]. The "background options" at the left includes a couple grays and a random colors option. The randomness is recomputed each time you click on one of the options.
In IE 10 and 11, the only browsers that I am aware of that do gradient transitions, they slowly animate.
It's actually a very low resoluton image (3x7 by default), stretched using the bilinear filtering provided by the browser.
Chrome and Safari produce smooth images. Firefox for Mac produces a mosaic (source each pixel gets a ~10x10 grid, it looks pretty good IMO). Firfox for Android may not do any smoothing.
I don't think there's a way to control how the browser does the filtering.
i often shoot pictures of the sky, a forest canopy, or
other natural phenomenon, to get this kind of gradient.
but this is even better, in many ways.
one suggestion is to feather the edges into each other,
a la the "seamless" background patterns of yesteryear,
to soften them if/when the background repeats, because
background-size:cover doesn't handle very long elements,
like "body", without having the background-image repeat.
This used to be a well known technique by windows users to save memory and resources, back in the day when the desktop background could have an impact on system performance. The trick was to have a background of an image of a few pixels square and use the "Stretch to fit" option, which created beautiful soothing backgrounds, but only take a few bytes of memory.
The image is a derivative work; it's derived from the original stock image.
If the stock image is protected by copyright, and you don't have a license to use it (for anything), is it copyright infringement to use it like this on your website?
Indeed, but it is derivative, not fair use. If the source can be used and modified freely (public domain, appropriate Creative Commons subtype), then it is also the case for the gradient.
If the source image is copyrighted, then the gradient can't be used without a license from the original owner.
The "title" attribute of each image contains a link to the source. The second image (lightning) that I've randomly followed is licensed CC0.
(It's an interesting question, though, whether copyright protection can be expected to "scale" down to a 3×7 pixel subset of an image. At what point does it stop being a derivative?)
Not completely on-topic, but I wish more designers would consider using some kind of gradient or custom vector graphics for their landing page designs instead of defaulting to multi-megabyte stock images that, for the most part, don't even add anything of value to what they're trying to convey.
They do convey something very important: credibility.
Or, at least, they coerce the fast pace internet viewer into having that first impression.
I know its silly, but the average viewers mind will subconsciously attribute more effort and quality - thus, credibility - to a polished photo than to any gradient.
It sadly does not make a difference if its merely a stock photo bought for a few bucks. It still works.
Also, a photo gives a more "real", less abstract impression, so the target customer can relate. You can't relate to a gradient.
So the photo should be chosen according to the target customer.
I agree though that some effort should also be put into technical aspects, e.g. making the photo file size as small as possible.
Correct. They say "If truth was self evident, eloquence wouldn't be needed." Unfortunately most websites could be reduced to just text and no images, external css files, jquery, and more. However when the average consumer lands on such website they will not trust it or take it seriously.
I personally believe credibility at first impression has more to do with the overall polish and quality of your design than the existence of a photo.
Sure, adding a photo might be an easy shortcut to fabricate the illusion of quality, but it's a shortcut that also has severe adverse effects on UX in bandwidth constrained environments, which actually has the opposite effect on perceived quality, and thus credibility, than the designer intended. This is why I believe it's worthwhile to explore alternative designs that don't rely on photos, at least once you're past that MVP phase where you just want to put something together as quickly and easily as possible.
RE: You can't relate to a gradient. This is true enough, but there's no reason why you need to make users relate to a background image, when you can have them relate to something in the foreground like some kind of feature showcase of your app/service (with screenshots and such). A busy stock photo in the background is actually detrimental to this kind of design compared to something simple like a gradient. And in my opinion, this kind of design is much more directly relatable for users because you're presenting your value proposition to users explicitly rather than relying on your users being naive enough to fall for some subliminal mind trick.
Stripe's landing page is one good example I can recall of such an approach: https://stripe.com
Sure, but now look at Highrise's visual approach. We know that they have A/B tested in the past, so I am going out on a limb to say that they continue to do so. They have a human element in their hero image on their homepage, and they include an image of a smiling influencer near the top. I'd reaffirm what others have said and test for your audience! I am not affiliated with business of the case study in the link you posted.
https://highrisehq.com/
Stripes target group is developers. Developers, designers etc are special groups, predispositioned in certain way that may make them assess the trustworthyness of an offering differently, i.e. more analytically than most other users.
"Normal" users buy more in the spirit of "no one was ever fired for buying Microsoft": since they lack other means of assessment, or have no time to carefully read the actual content, they fall back on things like nice photos.
And they are a good proxy, as they compare it to advertisements of their local shops or yard sales.
They dont know about stock photos. They just see a professional photo.
And to be clear: Even me as developer would take such things into account. I have incomplete information, so I use proxies. Especially if I am in a hurry.
I'm not sure an arbitrary gradient would add much value either, at least without another image or graphic (e.g. https://www.mapbox.com/).
A splash image doesn't add much either, I agree, unless you layer other pieces on it so it looks more sophisticated and sets a mood (e.g. https://www.onelogin.com/).
But yes, just a simple splash image with centered tagline text and CTA buttons is very cliche at this point. My mind is too warped by being a developer to know whether average consumers care or not, but most techies will assume it's a weekend prototype, not a serious project.
In the meantime, you can always just load the html and delete the div elements for text and controls (to take a screenshot). Obviously this makes the "arbitrarily sized" part harder but now I have a nice wallpaper for my phone.
Good job on this- very cool. I think it'd be a nice addition to have a "randomize settings" button, or perhaps allow a "travel" mode where the x/y positions change in smaller increments (so the background changes a bit slower).
The x/y increment resolution is a limit of the technique used. It uses overzoomed images, you scroll one source pixel at a time. Since it uses `background-size: cover;` for rendering, you cant scroll by fractions of pixels.
Ah, that makes sense. I thought it was just that the dat.gui step was set to '1' not '0.01'. Didn't realize the step was set that way puposely due to a limitation of the technique being used.
Trying to add a randomize() function that edits topX, topY, and sampleArea. Might add a button to dat.gui or maybe just call it based on pressing the 'r' key.
I just tried this adding it to a page. When I drag the window so the width is not very large compared to the height the image clips/repeats. Is that the intended behavior (Chrome)? Added the CSS directly to the body of the page. Example here: https://jsfiddle.net/r1ueprrz/
I've read about that before, so there's a chance it planted a seed in my brain, but the idea for the tool came from a codepen experiment I did a few months ago.
99 comments
[ 3.3 ms ] story [ 170 ms ] threadCame to my mind the decision you made to not be able to generate a custom link for uploaded images, and I wonder, is there a way to achieve this? Considering that the base64 length hits the URL size limit.
(It's a ThemeForest template.)
[1] https://www.agitraining.com/sites/default/files/PSE3793.png
I've used random CSS gradient backgrounds on my personal blog for some time [1]. The "background options" at the left includes a couple grays and a random colors option. The randomness is recomputed each time you click on one of the options.
In IE 10 and 11, the only browsers that I am aware of that do gradient transitions, they slowly animate.
[1] http://tiamat.tsotech.com/
I always thought the staff had, for some reason, decided that mobile users didn't need to know which comment was part of which thread.
Chrome and Safari produce smooth images. Firefox for Mac produces a mosaic (source each pixel gets a ~10x10 grid, it looks pretty good IMO). Firfox for Android may not do any smoothing.
I don't think there's a way to control how the browser does the filtering.
https://css-tricks.com/almanac/properties/i/image-rendering/
i often shoot pictures of the sky, a forest canopy, or other natural phenomenon, to get this kind of gradient. but this is even better, in many ways.
one suggestion is to feather the edges into each other, a la the "seamless" background patterns of yesteryear, to soften them if/when the background repeats, because background-size:cover doesn't handle very long elements, like "body", without having the background-image repeat.
good work.
-bowerbird
If the stock image is protected by copyright, and you don't have a license to use it (for anything), is it copyright infringement to use it like this on your website?
Or is it fair use?
If the source image is copyrighted, then the gradient can't be used without a license from the original owner.
(It's an interesting question, though, whether copyright protection can be expected to "scale" down to a 3×7 pixel subset of an image. At what point does it stop being a derivative?)
So it doesn't survive noscript? Without scripts the OP is just a black background. Call me old, but I'd rather be sent the png.
Rather scroll through 1KB than 2MB.
Or, at least, they coerce the fast pace internet viewer into having that first impression. I know its silly, but the average viewers mind will subconsciously attribute more effort and quality - thus, credibility - to a polished photo than to any gradient.
It sadly does not make a difference if its merely a stock photo bought for a few bucks. It still works.
Also, a photo gives a more "real", less abstract impression, so the target customer can relate. You can't relate to a gradient. So the photo should be chosen according to the target customer.
I agree though that some effort should also be put into technical aspects, e.g. making the photo file size as small as possible.
Sure, adding a photo might be an easy shortcut to fabricate the illusion of quality, but it's a shortcut that also has severe adverse effects on UX in bandwidth constrained environments, which actually has the opposite effect on perceived quality, and thus credibility, than the designer intended. This is why I believe it's worthwhile to explore alternative designs that don't rely on photos, at least once you're past that MVP phase where you just want to put something together as quickly and easily as possible.
RE: You can't relate to a gradient. This is true enough, but there's no reason why you need to make users relate to a background image, when you can have them relate to something in the foreground like some kind of feature showcase of your app/service (with screenshots and such). A busy stock photo in the background is actually detrimental to this kind of design compared to something simple like a gradient. And in my opinion, this kind of design is much more directly relatable for users because you're presenting your value proposition to users explicitly rather than relying on your users being naive enough to fall for some subliminal mind trick.
Stripe's landing page is one good example I can recall of such an approach: https://stripe.com
https://signalvnoise.com/posts/2991-behind-the-scenes-ab-tes...
"Big photos of smiling customers work"
"Normal" users buy more in the spirit of "no one was ever fired for buying Microsoft": since they lack other means of assessment, or have no time to carefully read the actual content, they fall back on things like nice photos. And they are a good proxy, as they compare it to advertisements of their local shops or yard sales. They dont know about stock photos. They just see a professional photo.
And to be clear: Even me as developer would take such things into account. I have incomplete information, so I use proxies. Especially if I am in a hurry.
A splash image doesn't add much either, I agree, unless you layer other pieces on it so it looks more sophisticated and sets a mood (e.g. https://www.onelogin.com/).
But yes, just a simple splash image with centered tagline text and CTA buttons is very cliche at this point. My mind is too warped by being a developer to know whether average consumers care or not, but most techies will assume it's a weekend prototype, not a serious project.
Would you be able to generate an arbitrarily sized PNG or JPEG download from them?
I'd like to add something like this to: http://projects.skratchdot.com/infinite-gradients
I'll at least add a link to https://github.com/tiborsaas/unique-gradient-generator in the README...
Readme will improve and I'll certainly link to your project, I like it a lot.
I'll submit a PR after editing this (if you wanna accept it): https://github.com/tiborsaas/unique-gradient-generator/blob/...
Trying to add a randomize() function that edits topX, topY, and sampleArea. Might add a button to dat.gui or maybe just call it based on pressing the 'r' key.
If you need cross browser solution and if you don't mind using JS, then you can use canvas to blur images. Its not good as this.
Demo: http://premii.com/ (Refresh the page to see a different background).