Illustration & Visual Narrative -Task2 Composition

-

May 20, 2025


Illustration & Visual Narrative

||    Low Xin Er (0374596) 
||    Week 5-Week 8  ( 19/5/25 - 28/5/25 )

________________________________________________________________________________

Table of Contents

1.0 Lectures
1.1 Composition
1.2 Types of shots
1.3 Chiaroscuro

2.0 Tutorials
2.1  Cards Design  
2.2 Appearance panel & Effect function 

3.0 Pratical
3.1  Research& Reference
3.2 Sketch & Exploration
3.3 Digitalize
3.4 Final Background Design
3.5 Card Design exploration & sketch
3.6 Final card design

4.0 Reflection

________________________________________________________________________________

1.Lectures

Composition & Types of shots & Chiaroscuro

Composition in art is the way in which different elements of an artwork are combined.​

​

Every zone of space/plane in a composition is divided into 3:​

  • Foreground (FG) – Closest to view​
  • Middle-ground (MG) – Transition between FG and BG​
  • Background (BG) – Furthest/most distant visible area​

​

Traditionally, the object closest to view (foreground) would appear darker/more saturated, and the furthest (background) is the lightest/brightest/muted.











________________________________________________________________________________

2.Tutorials

2.1 Using Adobe Illustrator to create a Card Design for character Mubito

Creating the emblem
Ellipse Tool, Pathfinder, Alignment. 4scale in high resolution


Using the Pathfinder tool [Shift+Ctrl+F9] or Window > Pathfinder

  • We can punch a hole between the two circles above.
  • combine all of the shapes into one object.


Alignment

  • Using the Selection Tool [V], click on the border we’ve just created​
  • On the Control bar, make sure the alignment is set to: Artboard​
  • Click on the corresponding buttons:​
  • Horizontal Align Center​
  • Vertical Align Center
  • can also change the Border Type to Round, Inverted Round, or Chamfer [Optional]

Duplicate

  • Duplicate the border by Right Click > Copy [Ctrl+C] AND Right Click > Paste > Paste In Front [Ctrl+F]​
  • ​With the newly pasted object, hold Shift and click on the background​
  • ​Right Click on the background and select “Make Clipping Mask”​
  • If this doesn’t work, it means that you don’t have the border selected. Make sure you select BOTH border and the background.​
  • ​Send the image to the back again.


Brief：Task 2:Exercise（Composition）-20% （Deadline：week7）
  • Exe 01:Collectible Card Design-10%
  • Exe 02:Composition Design-10%


Requirements: 

Using the guidelines from "Framed Ink: Drawing and Composition for Visual Storytellers", you will explore how to arrange elements within your environment to guide the viewer's eye, create depth, and tell a compelling visual story. The composition of your world should emphasize balance, contrast, focus, and flow.​

​

Submission:​

  • Sketches​
  • Vector Illustration of the Environment​
  • Illustration included in Collectible Card Design​
  • Evidence of Composition Principles


2.2  Appearance panel & Effect function


Introduction to Type Tool [ T ] & Appearance Panel [Shift + F6]​

  • Setting the Stroke, Fill & Gradient for our object​

​

Typesetting for Illustration & Comic​

  • Type Tool [ T ]​
  • Character Panel [ Ctrl/Cmd + T ]​
  • Paragraph Panel [ Alt + Ctrl/Cmd + T ]​

​

3D and Materials​

  • Applying basic 3D effects for text​
  • Saving a style in the Graphic Style Panel [ Shift + F5 ]



________________________________________________________________________________

3.Pratical

Choose one character to design a background for it.
Fig.Kungfu Owl


3.1 Research& Reference

 



3.2 Sketch & Exploration

Fig.Sketch on paper

Fig.Sketch the depth of the background by using different brightness


3.3 Digitalize

    


3.4 Background Design- Before Adding Effect



3.5 Final Background Design- After Adding Effect 



Fig. Rules: Golden Ratio


3.6 Card Design exploration & sketch



 

3.7 Final card design



________________________________________________________________________________

4.Reflection

WEEK 5
In addition to continuing to familiarize myself with the operation of Adobe Illustration, I also learned some very useful and time-saving functions. The process of designing game cards is actually not difficult, but if you want to improve the quality of your work, you can't avoid spending more time to refine it.

WEEK 6
I chose to use the golden ratio as a rule for my background design and decided to start with a rough draft on my iPad. I enjoyed the layout according to the rule and the dynamic effect and balance of the final picture were very pleasing to me.

WEEK 7
I learned about the text design functions of Adobe Illustrator, such as the ability to add 3D effects and glow effects, which are very practical. In addition, I also tried to adjust the color and add hazy special effects in the background design to make the finished product look like an animation. Designing game cards can use many different functions and give free rein to my creativity, which has benefited me a lot.


Comments

Post a Comment

Popular posts from this blog

Typography - Task 1:Exercise

-
Image
April21,2025 TYPOGRAPHY｜Task 1:Exercises ||    17 /04/25 – 30/05/25 (Week 1-Week 6)  ||    Low Xin Er , 0374596 ||   Typography ||    Exercises / Type Expression & Type Formatting .  TABLE OF CONTENTS 1.0 Instruction 2.0  Lecturers 2.1  Introduction and Typo_1_Development 2.2 Typo_3 Text part 1 2.3 Typo_4 Text part 2 2.4 Typo_2 Basic 2.5  Typo_5 Understanding    2.6  Typo_6 Screen & Print 3.0  Progress of Work 3.1  Research and ideation (Exe 01-Typography) 3.2  Exploration and sketch 3.3 Adjustments 3.4  Final Sketch Design   3.5  Digitalize    3.6  Final Digital Design 3.7 Animation 3.8  Kerning,Tracking,Leading  3.9 Text Formatting 3.10  Reference (Exe 02-Text Formatting) 3.11 Exploration & Draft 3.12 Top 5 Selections   3.13  Final Design 4.0  Feedback 5.0 Reflection 6.0 Futher Reading 1.Instruction <iframe src="https...
Read more

Typography - Task 2: Typographic Exploration & Communication

-
Image
 May  25,2025 TYPOGRAPHY｜Task 2:Typographic Exploration & Communications  ||    19 /05/25 – 08/06/25 (Week 5-Week 7)  ||    Low Xin Er , 0374596 ||   Typography ||    Typographic Exploration & Communication/ Type Expression & Type Formatting .  TABLE OF CONTENTS 1.0  Instruction 2.0  Lecturers 3.0 Progress of Work 3.1 Research and ideation   3.2 Exploration & Sketch 3.3 Digitalize  & Final 3.4 Layout explore  3.5 Adjustment 3.6 Final Design 4.0 Feedback 5.0 Reflection 6.0 Futher Reading 1.Instruction 2.Lectures The complete notes can be viewed at Task1 Blog 3.Progress of Work Task-2_Editorial 3.1 Research and ideation     FIG.1,2,3 Research on Pinterest (19/05/25 week5) 3.2 Exploration & Sketch   FIG.1,2,3 Sketches of Title PUNK   (19/05/25 week5)   FIG.Sketches of Layout Design   (19/05/25 week5) 3.3 Digitalize  & Final ...
Read more

Typography - Task 3: Type Design and Communication

-
Image
  Jun, 9 ,2025 TYPOGRAPHY｜Task 3:Type Design and Communication ||    0 9 /06/25 – 28/06/25 (Week 8-Week 10)  ||    Low Xin Er , 0374596 ||   Typography ||   Type Design & Communication TABLE OF CONTENTS 1.0 Instruction 2.0 Lecturers 3.0  Progress of Work 3.1 Research and ideation 3.2 Exploration & Sketch 3.3 Digitalize  & Final 3.4 Layout explore  3.5 Adjustment 3.6 Final Design 4.0 Feedback 5.0 Reflection 6.0 Futher Reading 1.0 Instruction 2.0 Lecturers The complete notes can be viewed at  Task1 Blog 3.0 Progress of Work Progress Sketches Fig3.1.sketches of a,b,g,t ( 09/06/2025 week 8) Fig.3.2.  4 types designs （11/6/2025 week 8） Fig.3.3. sketches of final design series (16/6/2025 week 9) Fig.3.4.detail dissection of the letters (16/6/2025 week 9) Observation: Since font designs have a certain balance and symmetry, the circles or lines used in the ins...
Read more