IVN - TASK 2: COMPOSITION

 2025-2025(week - week)

FANN WONG JING EN｜0382237

Design Principles | Bachelor of Design (Honours) in Creative Media

Illustration and Visual Narrative COM61304

---

TABLE OF CONTENT

MIB        Task 2      Techniques Applied       Reflection

---

MODULE INFORMATION BRIEF (MIB)

---

LECTURE NOTE

WEEK 05 – Collectible Card Design

• Standard card size: 2.5 x 3.5 inches, add bleed for printing.

• Emblem creation using Ellipse Tool [L], Rectangle Tool [M], Pathfinder, and Align tools.

• Border with Rectangle Tool: set 2 x 3 inches, align to artboard, corner radius = 0.35 in.

• Corner details: duplicate and align square boxes, group using Ctrl+G.

• Name plate: create rectangle, curve with Pen Tool [P], align center.

• Background import: Clipping Mask using Ctrl+C, Ctrl+F + Right Click > Make Clipping Mask.

• Gradient fill: use Gradient Tool [G], apply to full background.

• Export: File > Export > Export for Screens, 4x scale, no bleed.

⸻ 

WEEK 06 – Composition Techniques

• Composition includes Foreground (FG), Middle-ground (MG), Background (BG).

• Techniques: Rule of Thirds, Golden Ratio, Radial Composition.

• Arrange assets (trees, house, mountains, bushes) to emphasize focal point.

• Shape Manipulation:

 - Free Transform Tool [E] for warping mountains/trees.

 - Warp Effect: Effects > Warp > Arc (e.g., -15% bend on clouds).

 - Warp Tool [Shift+R]: reshape elements like the ground with brush settings.

• Unite FG elements with Pathfinder > Unite; adjust color to #052C35, set Multiply 60%.

• Final step: Make Clipping Mask for cleanup and export artboard.

⸻ 

WEEK 07 – Text Appearance & 3D Effects

• Type Tool [T] + Appearance Panel [Shift+F6] for styling text.

• Customize Fill, Stroke, and add multiple Fills with gradients and opacity.

• Typesetting: Character Panel [Ctrl+T], Paragraph Panel [Alt+Ctrl+T], adjust size, leading, tracking.

• Apply 3D Effects:

 - fx > 3D > Inflate (set depth to 4mm).

 - fx > Warp > Arc (Bend: 8%).

 - fx > Stylize > Outer Glow (Color: #FAB48A, Opacity: 75%, Blur: 0.05in).

• Save as Graphic Style: Window > Graphic Styles [Shift+F5] > [+] to save current style.

• Apply saved style to other elements using Direct Selection Tool [A].

---

TASK

---

Mood-board

BACKGROUND

Style reference: 

• Color application: Inspired by dark blue, orange, and purple tones, a dark background with bright pumpkin lanterns was used.

• Scene design: Tombstones, bats, dead trees, and hanging lights were added to create a Halloween forest atmosphere.

• Composition style: The central composition is used to make the character the visual focus and enhance the overall atmosphere.

COLLECTIBLE CARD

Style reference: 

• Decorative frame design: Moodboard uses a lot of plant, flower and vine decorative frames (Art Nouveau style). I changed it to surround the frame with dark elements such as thorny vines, bats, candles, etc., making the overall look closer to the vampire setting while maintaining the decorative aesthetic.

• Background processing method: The background in the original reference picture is expressed with soft gradient + plant patterns, with a fantasy atmosphere. My background refers to this type of composition, but it is changed to the gloomy cemetery + black forest outline lines, which is more in line with the Halloween vampire theme.

Sketches 

I first used Sketchbook to draw the line art, then imported it into Adobe Illustrator to do the tracing and the next steps

Final Output 

Environmental sketch: 

• The forest full of pumpkin lanterns, bats, and tombstones creates a strong Halloween atmosphere and strengthens the background setting of "weird at night".

• The dark tones are matched with the bright pumpkins in the foreground to form a light and dark contrast, highlighting the three-dimensional sense of the characters.

Composition skills:

• Use the foreground, middle and background layers, with the character’s most prominent in the middle ground. The pumpkins in the foreground and the woods and bats in the background strengthen the depth of the space.

• The light strings are used as guiding lines to create visual dynamics and guide the viewer's focus

Collection card design: 

• Elements such as candlesticks, bats, skulls, and tombstones are used to decorate the four corners, such as the visual totem of the "summoning magic circle" to build a magical world.

• The border uses thorns and vine-like decorations to echo the "vampire" setting, while creating a sense of surrounding and sealing.

Consistency of composition and style:

• Use symmetrical composition and balanced arrangement of image elements to imitate the style of Tarot/magic cards and unify the visual focus.

• Dark tones + reddish brown tones enhance the sense of mystery and echo the character’s hair color. Evidence of Composition Principle

Documentation

---

Techniques Applied

What are the techniques you learned in class that you have applied in your works?

In this work, I used a lot of skills I learned in class, such as line drawing, layered coloring, and basic light and shadow processing. I drew the lines of the entire background first, and then slowly added colors and shadows. For example, the light of the pumpkin lantern, the outline of the branches, and the flight direction of the bats were all layered one by one.

Did you include additional techniques that you researched on your own?

In addition to these, I also tried to combine two scenes into the same picture, that is, the forest on the left and the card frame on the right, to make the picture look more complete and story-like. I also added some gradient backgrounds and small details to create a mysterious atmosphere of Halloween. Although there are many details in the whole, it is really satisfying to complete it.

---

REFLECTION

1. What did you like the most in the assignment?

I really enjoyed designing the character and combining cute and spooky elements together. It was fun to give the vampire girl a strong attitude while keeping the overall style playful and decorative. I also liked experimenting with the border design inspired by the reference cards — it made the final piece feel more like a collectible card or storybook page.

2. What can be improved based on your submission?

I think the background can be more detailed or have better depth to match the richness of the frame and character. Also, the contrast between the background and character could be improved to make her stand out more clearly. In future versions, I’d also like to explore more texture and shadow layering to give the overall image more visual interest.