Smooth, multi-color gradients?

Question

I've browsed around and can't find what I'm looking for. I am experienced in Photoshop and Illustrator both to a certain degree, but would prefer something in Illustrator (scaling vector image).

How do you go about designing and creating such a smooth gradient as in the following image? Are there any tools or methods for helping with color selection? Also, the subtle "blocking" or "sectioning" throughout where there a little slice of similar, but different colors? Just looking for an overall methodology in the design and creation of these commonly popular designs.

Bonus: Anyone seen any HTML5- or CSS-only implementations?

Thanks as always, geniuses!

Answer 1

1. Draw a gradient.

---

2. Convert it to a smart object.

---

3. Apply Filter → Pixelate → Crystallise.

---

4. Add a Gradient Map adjustment layer on top

---

5. You can now adjust the Crystallise values, if you’d like.

---

Sure, it’s not using HTML or CSS, but the technique does use a gradient map. Gradient maps are the best.

Please note that this example could have been built many ways. It could have just been a bitmap layer with a gradient, then the filter applied. That would give the same result, but not allow for easy editing later. The gradient map was used for precise control and flexibility.

Answer 2

I ran across this resource: http://williamngan.github.io/kubist/ It's a web app that generates cubist-like artwork in SVG format. Reading the creator's "How it works" article is also quite fascinating. While this is not a direct answer to your question, it does provide some ideas on how to accomplish the smooth "mosaic"-like gradient effect you're looking for. And,as the Kubist web app demonstrates, it can be done in HTML with the use of SVG graphics.

Answer 3

I've used an app called Dmesh http://dmesh.thedofl.com/ for creating very custom triangulation gradients and images. Its a free app for windows and mac (and iphone). Launch the app and drag and drop any image onto it and wherever you click it will form a vertices. You can then export the final image as a SVG and open it up in illustrator for further editing. Great tool!