NounsCanvasLayout Basics
Today we’re going back to the basics, and explore the fundamentals of layout in Nouns’ superflat pixel style. NounsCanvas is your hub for tutorials and resources for nounish-style pixel art beyond trait design. We use Figma, a free browser-based tool, for all the tutorials. For more tutorials and other resources visit nounscanvas.xyz or join our Farcaster channel. Let's create pixel art together! The example I'm gonna take you through is a cover image for X. To get started first plo...
NounsCanvasBasepaint Background Blur
Everyone has seen people sharing their BasePaint contributions recently with their drawings all sharp with the background nicely blurred but still pixelated somehow? Let’s take a look at how to that in Figma. NounsCanvas is your hub for tutorials and resources for nounish-style pixel art beyond trait design. We use Figma, a free browser-based tool, for all the tutorials. For more tutorials and other resources visit nounscanvas.xyz or join our Farcaster channel. Let's create pixel art tog...
Everything you need to start pushing pixels with Nouns. →www.nounscanvas.xyz
There are plenty of pixelart style fonts available out there so why not use them in your pieces? Some are added as style presets to the library so let’s take a look at them.
NounsCanvas is your hub for tutorials and resources for nounish-style pixel art beyond trait design. We use Figma, a free browser-based tool, for all the tutorials. For more tutorials and other resources visit nounscanvas.xyz or join our Farcaster channel. Let's create pixel art together!
First a confession: going so all-in with pixelart rules that you even want your fonts to perfectly align to the grid is admittedly overkill and designers OCD. You can make amazing looking things by throwing it all out the window but taking the time and effort to craft a pixel perfect piece will give give it a super coherent and charming feel.
That said, each of these styles are set up with size and spacing to align with the 10px grid used by every other asset in the library as much as possible.
You can always double (or triple or quadruple) size them with the Scale tool (K), or pimp them up with a stroke or a drop shadow, or both!
Suggested uses: Title on a banner, flyer, ad
Not recommended: Text that's longer than a few words and takes up less than ~25% of your design. These are just rules of thumb, just remember that these usually not the most legible fonts.
If you didn't find the perfect font for your pixel design here check out my previous tutorial on pixelating any font.
Hope you created something today! Come show it, give feedback or just say hi on our FC channel /nounscanvas.
There are plenty of pixelart style fonts available out there so why not use them in your pieces? Some are added as style presets to the library so let’s take a look at them.
NounsCanvas is your hub for tutorials and resources for nounish-style pixel art beyond trait design. We use Figma, a free browser-based tool, for all the tutorials. For more tutorials and other resources visit nounscanvas.xyz or join our Farcaster channel. Let's create pixel art together!
First a confession: going so all-in with pixelart rules that you even want your fonts to perfectly align to the grid is admittedly overkill and designers OCD. You can make amazing looking things by throwing it all out the window but taking the time and effort to craft a pixel perfect piece will give give it a super coherent and charming feel.
That said, each of these styles are set up with size and spacing to align with the 10px grid used by every other asset in the library as much as possible.
You can always double (or triple or quadruple) size them with the Scale tool (K), or pimp them up with a stroke or a drop shadow, or both!
Suggested uses: Title on a banner, flyer, ad
Not recommended: Text that's longer than a few words and takes up less than ~25% of your design. These are just rules of thumb, just remember that these usually not the most legible fonts.
If you didn't find the perfect font for your pixel design here check out my previous tutorial on pixelating any font.
Hope you created something today! Come show it, give feedback or just say hi on our FC channel /nounscanvas.
NounsCanvasLayout Basics
Today we’re going back to the basics, and explore the fundamentals of layout in Nouns’ superflat pixel style. NounsCanvas is your hub for tutorials and resources for nounish-style pixel art beyond trait design. We use Figma, a free browser-based tool, for all the tutorials. For more tutorials and other resources visit nounscanvas.xyz or join our Farcaster channel. Let's create pixel art together! The example I'm gonna take you through is a cover image for X. To get started first plo...
NounsCanvasBasepaint Background Blur
Everyone has seen people sharing their BasePaint contributions recently with their drawings all sharp with the background nicely blurred but still pixelated somehow? Let’s take a look at how to that in Figma. NounsCanvas is your hub for tutorials and resources for nounish-style pixel art beyond trait design. We use Figma, a free browser-based tool, for all the tutorials. For more tutorials and other resources visit nounscanvas.xyz or join our Farcaster channel. Let's create pixel art tog...
Everything you need to start pushing pixels with Nouns. →www.nounscanvas.xyz
Share Dialog
Share Dialog
Subscribe to NounsCanvas
Subscribe to NounsCanvas
<100 subscribers
<100 subscribers
No activity yet