MengChi Chang
@mengdesigntw.bsky.social
Freelance product designer. Based in Taiwan.
Work inquiry -> [email protected]
Work inquiry -> [email protected]
This is a simpler version of making a gradient texture, if you like it to be used in the background, I teach other techniques to soften it out further in the tutorial here, go check that out!
https://youtu.be/AY7IAbFThBc
https://youtu.be/AY7IAbFThBc
- YouTube
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
youtu.be
August 4, 2025 at 4:00 PM
This is a simpler version of making a gradient texture, if you like it to be used in the background, I teach other techniques to soften it out further in the tutorial here, go check that out!
https://youtu.be/AY7IAbFThBc
https://youtu.be/AY7IAbFThBc
That’s your liquid gradient.
- Sketch with pencil
- Blur and liquify
- Add noise and remap with color
Simple flow, endless outputs.
- Sketch with pencil
- Blur and liquify
- Add noise and remap with color
Simple flow, endless outputs.
August 4, 2025 at 4:00 PM
That’s your liquid gradient.
- Sketch with pencil
- Blur and liquify
- Add noise and remap with color
Simple flow, endless outputs.
- Sketch with pencil
- Blur and liquify
- Add noise and remap with color
Simple flow, endless outputs.
Then use a gradient map plugin to remap the grayscale values to colors you like. I use Gradient Mapper.
I like to limit the color stops to 3-4, but you can play around.
I like to limit the color stops to 3-4, but you can play around.
August 4, 2025 at 4:00 PM
Then use a gradient map plugin to remap the grayscale values to colors you like. I use Gradient Mapper.
I like to limit the color stops to 3-4, but you can play around.
I like to limit the color stops to 3-4, but you can play around.
Add noise, then copy again.
- Add subtle grain to the blurred image
- Copy as imagery again
‼️ This helps the grains to be mapped to the gradient later. And it will look drastically different, trust me on this one.
- Add subtle grain to the blurred image
- Copy as imagery again
‼️ This helps the grains to be mapped to the gradient later. And it will look drastically different, trust me on this one.
August 4, 2025 at 4:00 PM
Add noise, then copy again.
- Add subtle grain to the blurred image
- Copy as imagery again
‼️ This helps the grains to be mapped to the gradient later. And it will look drastically different, trust me on this one.
- Add subtle grain to the blurred image
- Copy as imagery again
‼️ This helps the grains to be mapped to the gradient later. And it will look drastically different, trust me on this one.
Time to distort it.
- Use the Liquify plugin
- Brush size: 200–500 (no smaller than 200)
- Rate 50 , Density 100 (play with your liking, this is what I like)
- Use long strokes to move things around, go crazy here
This gives the shape a liquid, painted texture.
- Use the Liquify plugin
- Brush size: 200–500 (no smaller than 200)
- Rate 50 , Density 100 (play with your liking, this is what I like)
- Use long strokes to move things around, go crazy here
This gives the shape a liquid, painted texture.
August 4, 2025 at 4:00 PM
Time to distort it.
- Use the Liquify plugin
- Brush size: 200–500 (no smaller than 200)
- Rate 50 , Density 100 (play with your liking, this is what I like)
- Use long strokes to move things around, go crazy here
This gives the shape a liquid, painted texture.
- Use the Liquify plugin
- Brush size: 200–500 (no smaller than 200)
- Rate 50 , Density 100 (play with your liking, this is what I like)
- Use long strokes to move things around, go crazy here
This gives the shape a liquid, painted texture.
Apply a strong blur.
- Select all strokes and Max out the layer blur
- Cmd + Shift + C to copy as image
You’ll end up with a soft, misty abstract shape—this is your base.
- Select all strokes and Max out the layer blur
- Cmd + Shift + C to copy as image
You’ll end up with a soft, misty abstract shape—this is your base.
August 4, 2025 at 4:00 PM
Apply a strong blur.
- Select all strokes and Max out the layer blur
- Cmd + Shift + C to copy as image
You’ll end up with a soft, misty abstract shape—this is your base.
- Select all strokes and Max out the layer blur
- Cmd + Shift + C to copy as image
You’ll end up with a soft, misty abstract shape—this is your base.
Start with grayscale strokes.
- Make a 1024×1024 frame
- Use the pencil(or brush) tool to sketch wide strokes ( I use 100)
- Stick to grayscale—white, grey, black
Don’t worry about precision. You’ll blur it all next.
- Make a 1024×1024 frame
- Use the pencil(or brush) tool to sketch wide strokes ( I use 100)
- Stick to grayscale—white, grey, black
Don’t worry about precision. You’ll blur it all next.
August 4, 2025 at 4:00 PM
Start with grayscale strokes.
- Make a 1024×1024 frame
- Use the pencil(or brush) tool to sketch wide strokes ( I use 100)
- Stick to grayscale—white, grey, black
Don’t worry about precision. You’ll blur it all next.
- Make a 1024×1024 frame
- Use the pencil(or brush) tool to sketch wide strokes ( I use 100)
- Stick to grayscale—white, grey, black
Don’t worry about precision. You’ll blur it all next.
Watch the tutorial here: https://youtu.be/XpUWE00w4Ws
- YouTube
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
youtu.be
July 28, 2025 at 4:00 PM
Watch the tutorial here: https://youtu.be/XpUWE00w4Ws
And that’s your design. Clean, dimensional, and easy to drop into any layout. Let me know if you give it a try.
July 28, 2025 at 4:00 PM
And that’s your design. Clean, dimensional, and easy to drop into any layout. Let me know if you give it a try.
Apply the skew.
- Select all the cards
- Use the Skew plugin
- Set vertical angle to around 25°
This gives the whole stack a subtle, forward tilt—feels a little more alive.
- Select all the cards
- Use the Skew plugin
- Set vertical angle to around 25°
This gives the whole stack a subtle, forward tilt—feels a little more alive.
July 28, 2025 at 4:00 PM
Apply the skew.
- Select all the cards
- Use the Skew plugin
- Set vertical angle to around 25°
This gives the whole stack a subtle, forward tilt—feels a little more alive.
- Select all the cards
- Use the Skew plugin
- Set vertical angle to around 25°
This gives the whole stack a subtle, forward tilt—feels a little more alive.
Make the overall stacks is design-ready
- Draw a 1px line
- Outline it (Cmd + Opt + O)
- Use linear repeat with 10-unit gap and 30 count
- Rotate the group to span diagonally across the card
- paste and replace (command option shift V) designed cards into the stacks
- Draw a 1px line
- Outline it (Cmd + Opt + O)
- Use linear repeat with 10-unit gap and 30 count
- Rotate the group to span diagonally across the card
- paste and replace (command option shift V) designed cards into the stacks
July 28, 2025 at 4:00 PM
Make the overall stacks is design-ready
- Draw a 1px line
- Outline it (Cmd + Opt + O)
- Use linear repeat with 10-unit gap and 30 count
- Rotate the group to span diagonally across the card
- paste and replace (command option shift V) designed cards into the stacks
- Draw a 1px line
- Outline it (Cmd + Opt + O)
- Use linear repeat with 10-unit gap and 30 count
- Rotate the group to span diagonally across the card
- paste and replace (command option shift V) designed cards into the stacks
Use the Vector Blender plugin.
- select 2 cards and generate 4 copies in between
Now you’ve got a nice layered stack to work with.
- select 2 cards and generate 4 copies in between
Now you’ve got a nice layered stack to work with.
July 28, 2025 at 4:00 PM
Use the Vector Blender plugin.
- select 2 cards and generate 4 copies in between
Now you’ve got a nice layered stack to work with.
- select 2 cards and generate 4 copies in between
Now you’ve got a nice layered stack to work with.
Setup the card
- Size it (e.g. 200x125)
- Duplicate and position the second card slightly offset
These two shapes define the start and end of your stack.
- Size it (e.g. 200x125)
- Duplicate and position the second card slightly offset
These two shapes define the start and end of your stack.
July 28, 2025 at 4:00 PM
Setup the card
- Size it (e.g. 200x125)
- Duplicate and position the second card slightly offset
These two shapes define the start and end of your stack.
- Size it (e.g. 200x125)
- Duplicate and position the second card slightly offset
These two shapes define the start and end of your stack.
Watch the tutorial here:
https://youtu.be/2dOqUeAZ1Zg
https://youtu.be/2dOqUeAZ1Zg
- YouTube
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
youtu.be
July 21, 2025 at 4:00 PM
Watch the tutorial here:
https://youtu.be/2dOqUeAZ1Zg
https://youtu.be/2dOqUeAZ1Zg
Time to harvest!
- Now select every group and align everything to center
- Tada! Add a gradient fill to finish off.
That’s your vector blend. Calm, layered, and super flexible.
Let me know if you try it out.
- Now select every group and align everything to center
- Tada! Add a gradient fill to finish off.
That’s your vector blend. Calm, layered, and super flexible.
Let me know if you try it out.
July 21, 2025 at 4:00 PM
Time to harvest!
- Now select every group and align everything to center
- Tada! Add a gradient fill to finish off.
That’s your vector blend. Calm, layered, and super flexible.
Let me know if you try it out.
- Now select every group and align everything to center
- Tada! Add a gradient fill to finish off.
That’s your vector blend. Calm, layered, and super flexible.
Let me know if you try it out.
Manual Clean up:
- Select the curves that pairs together and group to move it aside
- Repeat this action until all is grouped
- Select the curves that pairs together and group to move it aside
- Repeat this action until all is grouped
July 21, 2025 at 4:00 PM
Manual Clean up:
- Select the curves that pairs together and group to move it aside
- Repeat this action until all is grouped
- Select the curves that pairs together and group to move it aside
- Repeat this action until all is grouped
Use the Vector Blender plugin.
- Select the two shapes
- Add around 30 steps
it looks messy, don't panic.
- Select the two shapes
- Add around 30 steps
it looks messy, don't panic.
July 21, 2025 at 4:00 PM
Use the Vector Blender plugin.
- Select the two shapes
- Add around 30 steps
it looks messy, don't panic.
- Select the two shapes
- Add around 30 steps
it looks messy, don't panic.
Now create a flipped version of that shape.
‼️Important: Go into vector editing mode to flip the vector points, Not just the object itself. Otherwise the plugin won't blend it.
‼️Important: Go into vector editing mode to flip the vector points, Not just the object itself. Otherwise the plugin won't blend it.
July 21, 2025 at 4:00 PM
Now create a flipped version of that shape.
‼️Important: Go into vector editing mode to flip the vector points, Not just the object itself. Otherwise the plugin won't blend it.
‼️Important: Go into vector editing mode to flip the vector points, Not just the object itself. Otherwise the plugin won't blend it.
Start with a circle.
- No fill, center stroke
- Add tangent lines to both sides
- Add anchor points at tangents
- Delete unnecessary segments
- ‼️ No bezier handle in the contact point
The plugin will not blend the bezier handle.
- No fill, center stroke
- Add tangent lines to both sides
- Add anchor points at tangents
- Delete unnecessary segments
- ‼️ No bezier handle in the contact point
The plugin will not blend the bezier handle.
July 21, 2025 at 4:00 PM
Start with a circle.
- No fill, center stroke
- Add tangent lines to both sides
- Add anchor points at tangents
- Delete unnecessary segments
- ‼️ No bezier handle in the contact point
The plugin will not blend the bezier handle.
- No fill, center stroke
- Add tangent lines to both sides
- Add anchor points at tangents
- Delete unnecessary segments
- ‼️ No bezier handle in the contact point
The plugin will not blend the bezier handle.
More graphics explained in the tutorial here: https://youtu.be/D6M9ehlBmVI
- YouTube
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
youtu.be
July 14, 2025 at 4:00 PM
More graphics explained in the tutorial here: https://youtu.be/D6M9ehlBmVI
That’s it.
- One arc
- Gradient stroke
- Smart transformation
A simple swirling pattern, built entirely in Figma.
Let me know if you try it out.
- One arc
- Gradient stroke
- Smart transformation
A simple swirling pattern, built entirely in Figma.
Let me know if you try it out.
July 14, 2025 at 4:00 PM
That’s it.
- One arc
- Gradient stroke
- Smart transformation
A simple swirling pattern, built entirely in Figma.
Let me know if you try it out.
- One arc
- Gradient stroke
- Smart transformation
A simple swirling pattern, built entirely in Figma.
Let me know if you try it out.
Now open the Transform Me plugin.
- Set scale to 96%
- Add around 40 copies
- Adjust the anchor point to bottom right
- Tweak the rotation angle until it feels fluid.
This will give the spiral its motion.
- Set scale to 96%
- Add around 40 copies
- Adjust the anchor point to bottom right
- Tweak the rotation angle until it feels fluid.
This will give the spiral its motion.
July 14, 2025 at 4:00 PM
Now open the Transform Me plugin.
- Set scale to 96%
- Add around 40 copies
- Adjust the anchor point to bottom right
- Tweak the rotation angle until it feels fluid.
This will give the spiral its motion.
- Set scale to 96%
- Add around 40 copies
- Adjust the anchor point to bottom right
- Tweak the rotation angle until it feels fluid.
This will give the spiral its motion.