|
Hey Harry, Yesterday, I wrote about typography tips I noticed doing some copywork of Valley’s beautiful landing page 😍 A designer friend asked about the mesh gradient on their site, which I was able to re-create in just a couple minutes. As a beginning designer, I would’ve been STOKED to know how to do this, so I’m sharing it here 😎 [📣 Note: Learn UI Design, Learn UX Design, and Landing Page Academy open for new enrollments at midnight tonight 🎉] Here's the Valley original gradient section: And here's my copy: Cue Obama meme, but... not bad, eh? Here's a step-by-step 😎 1/ Create a mesh gradientFirst, I used my new Mesh Gradient Generator tool to create a mesh gradient with roughly the same colors as are on the Valley website: (By the way, I just launched this tool, so I’d REALLY appreciate if you share it on social, or with someone who’d benefit from it ✌️) 2/ Remove the noiseMy mesh gradient tool allows one-click copy for pasting into Figma. But Figma can’t import all SVG features... like noise. So the Figma noise is a bit wonky – and I removed it here (will add it again in a future step). So let’s compare to the original again. I want to (1) add a little more density to the colors, then (2) soften them a bit, then (3) add some larger noise. Let’s do those things 🫡 3/ Move/resize color blobsFor fine-grained editing of the blobs of color, that’s best done in Figma. I adjusted the blobs (adding a few more) to get an effect a little closer to the original. 4/ Add soft light white for pastel effectOverall, these colors are too rich/dark. Adding white will make them brighter & less saturated... but opacities of no-blend-mode white quickly become washed out 😬 For example, here's an overlay of plain white at 60% opacity. Adding soft light white is a great way to tinker towards high-brightness, low-saturation pastels 👍 5/ Add larger noise with Noise & Texture pluginThe most noticeable feature of the noise on the original was its size. The grain feels larger than 1px. Fortunately, I know Rogie’s excellent Noise & Texture plugin allows you to adjust the noise size. So here’s a zoomed-in sample of the final result: Nice! And the final, zoomed-out result: Add on a screenshot, and voila: If you like step-by-step breakdowns of visual design techniques, check out Learn UI Design – which opens tonight at midnight for new enrollments. All students get instant and lifetime access to its 53 hours of video lessons on every aspect of gorgeous web/app design:
And Landing Page Academy, my course on designing beautiful, high-converting landing pages, goes even deeper on landing page-specific topics, like:
Any last questions before enrollment opens? I’ll answer all ✌️ Cheers, |