Masanting Sastreria Standards Manual

Brand DNA

Verbal Identity

Brand Signatures

Visual Elements

Key Visual Elements

Explore

Key Visual Elements

Illustrations

⁠

Download Illustrations

⁠

Overview

Like embroidering delicate patterns on one’s special clothes, the illustrations of Masanting are used to embellish brand materials with different flora and imagery related to the art of suit tailoring.

The style has a foundation of old academic ink illustration but with a sewn treatment to allude to the nature of the brand’s business.

Single Illustrations

⁠

Masanting Sastreria - Illustrations - Sampaguita - Full Flower.png

⁠

Masanting Sastreria - Illustrations - Sampaguita - Flower 1.png

⁠

Masanting Sastreria - Illustrations - Cutter.png

⁠

Masanting Sastreria - Illustrations - Buttons.png

⁠

Masanting Sastreria - Illustrations - Sampaguita - Flower 2.png

⁠

Masanting Sastreria - Illustrations - Iron.png

⁠

Masanting Sastreria - Illustrations - Scissors.png

⁠

Masanting Sastreria - Illustrations - Sampaguita - Pedicel.png

⁠

Masanting Sastreria - Illustrations - Sampaguita - Bud 1.png

⁠

Masanting Sastreria - Illustrations - Sampaguita - Bud 2.png

⁠

Masanting Sastreria - Illustrations - Sampaguita - Bud 3.png

⁠

Masanting Sastreria - Illustrations - Sampaguita - Leaf.png

⁠

Grouped Illustrations

⁠

Masanting Sastreria - Illustrations - Grouped Illustration - 1.png

⁠

Masanting Sastreria - Illustrations - Grouped Illustration - 5.png

⁠

Masanting Sastreria - Illustrations - Grouped Illustration - 2.png

⁠

Masanting Sastreria - Illustrations - Grouped Illustration - 6.png

⁠

Masanting Sastreria - Illustrations - Grouped Illustration - 3.png

⁠

Masanting Sastreria - Illustrations - Grouped Illustration - 7.png

⁠

Masanting Sastreria - Illustrations - Grouped Illustration - 4.png

⁠

Masanting Sastreria - Illustrations - Grouped Illustration - 8.png

⁠

Patterns

⁠

⁠

⁠

⁠

⁠

Construction

The Adobe suite is highly preferred when creating your own illustrations. Photoshop and Illustrator are used in tandem to develop the foundation of the illustration and applying the treatment.

In Adobe Photoshop, the .psd for the Sampaguita, Cutter, and Button illustrations have been provided as a direct reference. Included in the .psd is the texture used to create the Halftone effect.

Drawing the base

Starts with thick ink illustration. Begin drawing the outline of the subject with a thick, ink-like brush.

Using a soft brush, give the subject shading. The shading layers may be duplicated to get a darker shade. A darker yet even shading will translate better when the halftone filter is applied.

Afterwards apply a halftone filter over the shading to mimic more mechanical ink shading as opposed to a clean gradient. This also makes it easier to render it in Illustrator afterwards.

⁠

⁠

⁠

⁠

Applying sewing treatment in Illustrator

Import the image to Illustrator.

Apply Image Trace with the Logo setting and Expand the ink illustration.

⁠

Duplicate the traced shape. The copy will be used for the later step when fill will be added.

Invert the fill and stroke so the whole vector shape is now composed of outlines.

⁠

Adjust the size and stroke thickness to match those of the sample illustrations in the library. Matching it to the scale of the sample illustration: the stroke is at a width of 1 pt, with rounded caps and corners, dashed line with line length of 5pt and a gap of 2pt.

Screenshot 2024-05-28 at 8.47.57 AM - v2.png

⁠

If needed, you may Image Trace the raw ink version of the illustration and use elements to fill in dark gaps and sections in the illustration, depending on the subject. The button holes were filled in for this example.

⁠

Adding fill

Get the duplicated traced shape from Step 3 of Applying sewing treatment in Illustrator.

Close all gaps so it becomes one solid shape solid shape using Unite. Set it to the desired color. The color Sampaguita has been used in this example.

⁠

Simply place it behind the sewn stroke shape.

⁠

Final export

Once you’re good to go with your illustration either filled or outlined, select the entire shape and under Object, choose Expand. This renders all the vector paths into individual, filled vector shapes.

Merge all the vector shapes of the outlined illustration. This helps with your computer’s bandwidth as it reduces a bit of the number of paths Illustrator has to load.

⁠

Usage

As spot illustrations

You may use them as is as spot illustrations for brand materials. This works well with lots of negative space to allow the illustration space to shine. You may group the different shapes together to create more elaborate compositions.

⁠

As embellishments and decorative details

They may also be used to decorate layouts. Here they can be used on their own or grouped together. Treat them like flourishes in formal certificates and documents.

⁠