Steve Schoger Profile picture
Mar 11, 2022 7 tweets 4 min read Read on X
💡 An experiment you can try on your next web/app project to get a more interesting color palette is color grading your design.

🧵
[1/6] To try this, it will be easier to experiment if your design is finalized with your color palette defined up front.

I’m using @tailwindcss colors here but we talk about building a color palette in this Refactoring UI chapter:

refactoringui.com/previews/build…
[2/6] Once you’re satisfied with your design, in your design tool (I'm using Figma), draw a rectangle layer on top covering the entire design.

Experiment by changing the layers colors, blending modes and opacity — I find it’s best to keep things subtle by using a low opacity.
[3/6] Once you’re happy with the results, overlay a layer with the same color/blending mode/opacity values on top of your already defined color palette and sample the new hex values with the eye dropper to create your new color palette.
[4/6] If you’re working with images, you can also add a colored layer with reduced opacity on top to give it a similar tint as the rest of the design.

HT to @hanspagel for this idea 🙌
[5/6] Just experiment!

The results may be subtle depending on the original palette and adjustment levels you made, but the overall effect may add a bit more emotion to your design and make things feel more “glued” together.
[6/6] Overall, this is a pretty basic method and you might get more interesting results by using Photoshop and working with the adjustment layers. @JustinMezzell goes more in depth on that technique in this article he wrote that inspired this thread:

medium.com/@JustinMezzell…

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Steve Schoger

Steve Schoger Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @steveschoger

Mar 4, 2022
Designing for dark mode as an afterthought can be really tricky. Here are a few things you can try that might help you be more successful 🧵
It’s a popular opinion that you simply just need to invert the colors.

Instead, try using the same visual cues as the light version — close elements should still be lighter and distant elements should still be darker.
With dark mode, it’s harder to create depth because shadows aren’t as visible.

Instead of relying on the absence of light, try creating reflective surfaces to add depth. This can be achieved using a combination of light borders and light inner shadows.
Read 5 tweets
Feb 12, 2021
How to make a "Briefcase" icon in @figmadesign.

🧵 thread 👇
In a 24 x 24 pixel artboard, use the rectangle tool (R) to draw a 18 x 10 pixel rectangle positioned horizontally centered and 6 pixels from the top of the artboard.
Using the ellipse tool (O), draw a 96 x 96 pixel circle and align the top to the center/top of the rectangle. Select both shapes and use the boolean tool to intersect the group.
Read 13 tweets
Feb 10, 2021
How to make a "Megaphone" icon in @figmadesign.

🧵 thread 👇
In a 24 x 24 pixel artboard, use the rectangle tool (R) to draw a 13 x 18 pixel rectangle.
Using the ellipse tool (O) draw a 48 x 48 pixel circle and position the bottom/center of it on the left side of the rectangle 5 pixels from the top.

Duplicate the circle (command + D) and position the top/center of it 5 pixels from the bottom of the rectangle.
Read 15 tweets
Feb 8, 2021
How to make a “Question Mark” icon in @figmadesign.

🧵 thread 👇 Image
In a 24 x 24 pixel artboard, use the ellipse tool (O) to draw a 18 x 18 pixel circle with a centered stroke.
💡 Making the icon smaller than the artboard is so it looks optically balanced next to other icons in the same set that have a differently proportioned shape. Image
Read 10 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(