tania

Blush Design App

Illustration pack I am building for @pablostanley's Blush Design Web App
39 outputs

Creator

add bookmark

My illustration pack "Basic Apparel" for blush.design is complete. Demo for this will be live on blush.design in a few weeks.

Basic Apparel - Mix and match illustrations of humans using the “Basic Apparel” pack. You can combine hair, clothes, poses, and backgrounds. This pack is perfect for any professional or personal project use.

Creating a modular design system in Figma was super fun, and I want to continue to make more.

I am super grateful to have received this opportunity from @pablostanley, one of my favourite designers!

add bookmark

Illustrated another background on Figma

add bookmark

Humans social distancing outdoors scene

add bookmark

Designed some plants and lightbulbs for these two characters

add bookmark

Creating some background/scenes for users to play around with.

add bookmark

More progress for the illustration kit to be done tom.

add bookmark

Next steps:
- create background and scenes for the characters
- facial hair?
- more accessories
- finish illustration kit by May 7th, 2019

add bookmark

Testing the modular illustration kit. It's coming along!!!

add bookmark

Close up of one of the seats

add bookmark

Designing some seats/stool components for my humans to sit on! I tried to incorporate some diversity by creating a wheelchair for those with accessibility needs.

Going to incorporate these seats into my future backgrounds soon

add bookmark

Next Steps:
- finish full-body clothing
- design stools/seats so the lower parts of the characters can rest on an object
- design some backgrounds and settings

add bookmark

I am experimenting with creating full-body clothes such as overalls and dresses. At first, I put the overalls on the upper body set and attached legs to it, but this was not the right way to do it.

Pablo advised me to create another master for just full-body clothing. As a result, it does not get mixed up with the upper/lower set.

add bookmark

After staring at a bunch of colors for a very long time they all start to seem the same…

https://coolors.co: a tool that generates color schemes super fast. This tool really help me put together a palette that I was pleased with.

add bookmark

Pleased with this palette.

add bookmark

Struggling to build a finalized color palette that includes skin colors, hair colors, and clothing color.

Using procreate to help me pair analogous and split complementary colors together using the color wheel.

add bookmark

Top & bottom components are almost done. Spent 4+ hours completing the bottoms and tops.

Also started creating some full-body clothing components(overalls, dresses).

add bookmark

Standing + sitting poses for my character designs.

add bookmark

Creating more bottoms. I'm planning to create some seats for these humans to sit on.

Also contemplating changing the color of the clothing to be more vibrant.

add bookmark

Custom character position I designed using the Pose App. This helped me conceptualize where the foreground is in relation to the foot in the front.

add bookmark

I made my first sitting position. Super happy with it!

add bookmark

Feedback from Pablo!!! 🤩

add bookmark

Doing some testing today of all my components (hairstyles, tops, and bottoms). Going to start working on making 5 more bottoms with a sitting position to have some variety and more tops.

add bookmark

Testing components with my Master character!!

add bookmark

Problem: Components weren't fitting together perfectly because elements were not aligning in the same X and Y-axis. Specifically, the neck and waist needs to be aligned in the same plane.

Using a rectangle as a guide to help me figure out where I need to move the neck and waist so all the elements fit together perfectly.

add bookmark

The current issue I am having and the technical aspects I am missing to ensure the system works together.

Although the clothing seems to align with one another because I have manually moved all the components to fit. After Pablo's review session from my first iteration, he advised that I ensure important components such as the neck and waist are aligned in the same X and Y plane. In Figma when I tried replacing different tops on a human, they kept shifting to a different axis.

I also forgot to include body parts to my clothing components. For example, each top must be grouped in a component with the upper body on Figma. This is the only way a modular system can work.

Feedback from Pablo
- The Hairstyle components need to have the head/face too. They're the Head component.
- The Upper Body components should have the rest of the body, not just the clothes.
- The Lower Body components should have the rest of the legs and feet, not just the clothes.
- Decide where you want to put the neck. The head or the upper body?
- The positions of the neck and waist have to be the same. This is crucial since this helps make all the pieces fit together.

add bookmark

Iteration 1 complete including 5 tops and 5 bottom components.

Throughout this process, I switched my technique of creating clothes. Instead of creating in Procreate, I started building clothing using the Pen Tool and using basic shapes in Figma. I found it to be a much easier process.

Designing clothes in Figma eliminated the step of converting files and components from raster to vector. In Figma, I was easily able to create a variety of clothing (used ellipses, rectangles, and the pen tool to create curves).

add bookmark

Experimenting with different hair components. I also adjusted the paths of my clothing components so it would be straight rather than wavy, making it easier to fit with bottoms.

add bookmark

I made these humans using the Pose App template as a guideline to design my components over. Some feedback I received from Pablo is that the human on the left isn't an accurate representation of how humans actually walk
In the left human, the feet are sort of floating in the air and are not aligned to the ground.

I wanted to make it seem like the character is walking, so Pablo helped me to ensure that one of the feet of the character is flat, and one is lifted off the ground.

add bookmark

I started drawing some more clothing components in Procreate. Later, I brought the file to Figma and adjusted components ensuring they fit and are aligned with my character.

The feedback I received from Pablo:
- See how things are organized
- How the elements are cut, so they all fit together
- How Master components are put together with the pieces (you only need some masters, not everything needs to be a master)

I had to iterate and fix my tops for clothing so they are all cut straight, being able to fit with the bottoms easily.

add bookmark

Using procreate to draw components like hair was convenient. I was able to create a diverse amount of components for hairstyles (long, short wavy, curly, buzz, bun, long with bun, etc.)

Technical component:
Export PSD file from Procreate into Illustrator > Image trace + ignore white in Illustrator, then expand. This method allows all layers to expand into separate components and become their own vectorized layer.

add bookmark

I started designing my first character with separate layers in Procreate. When drawing on procreate all illustrations and drawings are raster images. For this project, all components need to be vectorized.

The technical process I was using: Procreate > Illustrator (to vectorize all layers) > Figma to build components.

I realized that you cannot image trace/convert layers to vector in Illustrator unless all layers are black. I spent many hours drawing on procreate with colors, only to realize I have to make them black again. This was very time consuming and tedious.

For this project, I wanted to add shadows and textures on my clothing, but it was too difficult to image trace and vectorize those little details in Illustrator.

add bookmark

The pose I chose for my walking avatar to start with

add bookmark

Recommended by Pablo, I used the Pose App - a web app to create character poses. The app lets you export pngs that can later be used as a guideline to design the human.

The Pose App is an interesting tool that lets you create custom positions/poses by rotating different body parts, adjusting height, angles, and more.

add bookmark

Before designing things to keep in mind
1. Modular System:
- All components (shirts, bottoms, body parts) can be combined without any problems. Everything has to fit like lego.
- The pieces must be anchored in the same X and Y positions. (the neck and waist has to always in the same place since it is where the head and body connect).
- Create separate pieces so people can edit them. Arms(L/R), Legs (L/R), torso, head, neck, etc.
2. Gender-Neutral
- Loose clothing
- Bodies with simple figures
- Optional: focus on groups like LGBTQ, Latino culture, people with different abilities, and more.
3. Use a restrained color palette, so they can be easily changed.
4. Make sure all the elements are in different layers.

Components to draw: head/hairstyles (long, short, bob, buzz, ponytail, curly, bangs, etc, accessories, upper body variations, low body variations, sitting poses, facial hair, backgrounds.

add bookmark

I've really been admiring pastels, soft colors, and nudes lately. Put together some shades I might incorporate into the clothing of my character illustrations.

Images are from Pinterest.

add bookmark

As a feature artist for Blush, my first step to creating an Illustration pack for Blush is to curate a mood board with images of the kind of style I am going to be approaching.

I gathered a bunch of images from Pinterest and Dribbble of humans walking/doing some kind of movement. Two of the illustrations in the mood board are designs I have made in the past of characters walking. I want to design my characters so they are looking to the side/ in a walking pose.

My idea for this illustration is to depict themes such as diversity, minimalism, and fashion.

add bookmark

Pablo Stanley is one of my favorite designers and illustrators. I admire his open-source illustration kits available on the internet for individuals to use. Currently, Pablo is working on developing a web app called "Blush", where users can download illustrations for personal use.

"Blush is a plugin that brings illustrations for everyone. Our vision is to connect illustrators and other creators, offering a breadth of options in style and composition that can quickly adapt to a brand and context."

Pablo has hired various Illustrators to create illustrations for Blush. On April 22, 2019, I reached out to him via Twitter to see if I could provide him with value in any way possible. Following this, he hired me to create an illustration pack for Blush.

The first step to creating an illustration kit was creating a Moodboard for the types of designs I want to create. Pablo had already sent him his Moodboard and what his visions are for this project.

lucas
Wow! This is so cool. Very handy. Thanks...
lucas
Is this online yet?
00:00
tania
tania Blush Design App