CEEL Reviewer Introduction to Computer Graphics PDF

CEEL REVIEWER 1ST Semester | A.Y. 2024-2025 INTRODUCTION TO COMPUTER GRAPHICS modeling and animation. Learn about 2D- Graphics software like Adobe Photoshop, What is Computer Graphics?...

CEEL REVIEWER 1ST Semester | A.Y. 2024-2025 INTRODUCTION TO COMPUTER GRAPHICS modeling and animation. Learn about 2D- Graphics software like Adobe Photoshop, What is Computer Graphics? Illustrator, and GIMP.) 5. Study and Practice (Take online courses and ➔ including digital images, animations, and tutorials, many institutions offer Computer interactive graphics used in various sectors Graphics course like Coursera, Udemy, and such as entertainment, education, scientific Khan Academy) visualization, and virtual reality. 6. Create a portfolio of your own 7. Apply for jobs in computer graphics ➔ can be used in UI design, rendering, geometric objects, animation, and many more. In most areas, computer graphics is an abbreviation of CG. OVERVIEW OF DESIGN PRINCIPLES What is Graphics and Design? APPLICATION OF COMPUTER GRAPHICS ★ Computer Graphics – are used for the ➔ Graphic design is the process and art of aided design of systems engineering and combining text and graphics and architectural systems communicating an effective message in the design of logos, graphics, brochures, ★ Computer Art – MS Paint newsletters, posters, signs, and any other ★ Presentation Graphics - used to type of visual communication. summarize financial statistical scientific or economic data. For example – Bar charts What is a Graphic Designer or Graphic systems and line charts. Artist? ★ Entertainment – used in motion pictures, music videos, and television gaming. ➔ plan, analyze, and create visual solutions ★ Education and Training – used to to communications problems. They decide understand the operations of complex the most effective way of getting a systems. It is also used for specialized message across in print, electronic, and systems such as framing for captains, film media pilots, and so on. ★ Visualization – to study trends and ★ GRAPHIC DESIGNER DEVELOP patterns. For example- Analyzing satellite photos of earth. Magazines, newspapers, and journals ★ How to get started in Computer Graphics Corporate reports and publications Promotional displays and packaging 1. Understand the basics (rendering, shading, Commercial displays and Billboards animation, and modeling, basic concepts of Brochures mathematics like linear algebra, geometry, Company logos and signs and calculus as well as basic principles of Web pages and multimedia project physics that support computer graphics. 2. Choose Your Area of Interest (2D-Graphics, 3D-Graphics, Animation, and special effect (VFX) 3. Learn Programming (Python, C++, and JavaScript, Graphics Libraries and APIs like OpenGL, Vulkan, DirectX, and frameworks like WebGL that is used in web-based graphics. 4. Use Graphics Software (modeling and animation tools such as Blender, Autodesk Maya, or 3ds Max for 3D CEEL REVIEWER 1ST Semester | A.Y. 2024-2025 INTRODUCTION TO DESIGN PRINCIPLES AND ➔ The elements of design such as text, VECTOR GRAPHICS colors, images, shapes, and patterns, carry visual weight Graphics Design ➔ Determined by weight, position and arrangement of elements. ➔ is a form of visual communication to deliver a message for an audience. THREE (3) TYPES OF BALANCE ➔ it is the practice of combining visual material, such as text, images, shape, color ★ Formal Balance – A symmetrical balance, and the other elements. this type of balance places elements with equal distribution to convey trustworthiness What Graphic Designers Produce and integrity - stimulates feeling of formality ➔ The outputs produced by graphic and elegance. designers can include two-dimensional ★ Informal Balance – asymmetrical balance, spaces and three-dimensional objects. uses elements that counterbalance one ➔ Graphic designers are tasked with giving another to create a harmonious form to content that is intended to be composition. viewed on devices including computers, - One (1) side of the composition smartphones, and another console. might contain a dominant element, which could be ★ What Graphic Designers Produce? balanced by a couple of or lesser elements on the other Social Media Content side. Website design - This type also gives the 2D and 3D animation appearance of being casual, Application Design energetic, and popular. Virtual Reality Platforms ★ Radial Balance – This arranges elements Game Design around a central point and is used to Kiosk Interfaces promote unity or teamwork. User Interfaces Motion Graphics Emphasis Print and Online marketing materials Logos ➔ This design principle directs various elements in a given design to make an Design Principles element stand out or draw attention. ➔ This means the most important information ➔ Fundamental guidelines for combining the design is intended to convey. individual elements to make consistent and ➔ It is also used to reduce the impact of satisfying design. certain information. ➔ This involves taking various elements and ➔ Contrast the elements of design, such as providing proper balance, adding selective color and shape, by changing the size of emphasis to create a focal point, using the focal point or subject. rhythm to set mood, and establish unity. ➔ Emphasis in a design can be achieved by contrasting the elements of design, such as Balance color and shape, by changing the size of the focal point or subject and/or by isolating ➔ Arrange elements within an area. the subject to focus the attention on it CEEL REVIEWER 1ST Semester | A.Y. 2024-2025 ★ Types of Emphasis ➔ Balance, rhythm, type, imagery, and tone to evoke a particular emotion from the Color viewer. Shape ➔ Can be achieved by using repetition, Size and dominance proximity, alignment or contrast. Detail Contrast Isolation TYPES OF UNITY ★ Unity – Repetition – Through repetition of Rhythm color, size, orientation, texture, font, shape etc., the elements on the design will appear ➔ Visual pattern of repeating elements that more related to create unity. creates a sense of movements. ★ Unity – Proximity – The elements in a ➔ Built from elements and the intervals design that are close to each other are between them. perceived to be more related that elements ➔ Variation in rhythm can be adjusted by that are spaced farther apart. changing the shape, size, color, spacing, ★ Unity – Alignment – Refers to aligning and position of elements in design. design elements on common axis. ➔ This change in arrangement helps to promote the mood of design ★ Unity – Contrast – This implemented whether using color, typography, alignment, or other variation THREE (3) TYPES OF RHYTHM VECTOR AND BITMAP GRAPHICS ★ Regular Rhythm – This occurs when the intervals between elements are predictable Vector and Raster Graphics or the elements themselves are similar in size, length, and/or color. ➔ Digital images, graphics can be ★ Progressive Rhythm – This occurs when categorized as either vector graphics or the sequence of forms or shape is shown bitmap graphics through progressive stepped changes in size, length, and or/ color. Raster Graphics or Bitmap Graphics - Some characteristics of elements might have stepped ➔ Generated based on an array of pixels of changes, or the interval might various colors, which together form an have stepped changes. image ★ Flowing Rhythm – This occurs when the ➔ Raster-based image is scaled, the size of elements or interval are organic. This the pixel is reduced or enlarged. creates natural patterns that evoke a feeling of the organic movement. VARIOUS FORMATS FOR SORTING IMAGES Unity BMP Bitmap ➔ It allows the designer to view individual components as (1) cohesive design. JPEG/JPG Joint Photographic Expert Group ➔ Establishes continuity with a variety of elements and promotes consistency within PNG Portable Network Graphics piece. CEEL REVIEWER 1ST Semester | A.Y. 2024-2025 ★ Common Software for Creating Raster ➔ Formal design elements are the basic Graphics building blocks of design, which are color, line, shape, value, texture, size, and type. Photoshop ➔ These visual elements are used as Gimp communication tools; knowing when and how to use these elements is essential to Vector Graphics build a successful design. ➔ These formal elements are interdependent ➔ Based on mathematical equations of basic and interact to complement one another geometric shapes such as lines, points, and function as a team. circles, and polygons. ➔ Vectors type Color ➔ composed of mathematical formulas and can be infinitely scaled without losing ➔ is a powerful communication tool in design quality and the most influential design element. ➔ Color is used to draw attention. COMMON FILE FORMATS FOR VECTOR ➔ Color is based on wavelengths of light and contains a wide range of visual differences.svg Scalable Vector Graphics and contrasts. ➔ A designer needs to understand which colors are appropriate to complement the.cgm Computer Graphics Metafile message. ➔ The digital colors seen in computer.odg OpenDocument Graphic displays are known as additive colors. ➔ Additive colors are a mixture of light.eps Encapsulated PostScript colors—the RGB colors ➔ In contrast to combining additive colors,.xml Extensive Markup Language subtractive colors are colors used to work by masking certain colors from white. ➔ These are four (4) colors for a printing ★ Software used for creating and editing process that uses CYMK colors: cyan, vector magenta, yellow, and black colors. CorelDraw ➔ In CYMK, “K” stands for the key, which is Inkscape the black color that is used to increase the Adobe Illustrator contrast. CYMK color model is used in printers to control the amount of red, green, and blue lights that are reflected from white VISUAL ELEMENTS paper. Elements of Design Colors divided in three (3) categories Visual Elements Hue The name of the colors ➔ are the building blocks of composition in red, green, and blue design. (RGB) colors. ➔ The placement of elements within a design, user interface, or website will have an Value This refers to the shading, tonality, or tint of a color impact on what kind of message is perceived by that kind of market. CEEL REVIEWER 1ST Semester | A.Y. 2024-2025 lightness or darkness ➔ A shape is essentially flat and measured by (e.g., light blue or dark height and width. red) ➔ Its quality is determined by how it is drawn. ➔ Shapes are used to create visually Saturation This is the intensity or brightness pleasing, eye-catching visual design and of color add interest to the design. bright red or dull red and ➔ Viewers tend to identify objects by their bright blue or dull blue shapes and only focus on the details, such as lines, values, colors, and textures, on closer inspection. Line ➔ For this reason, shapes are crucial elements that designers use as effective ➔ Line is the most basic element of design. communication. ➔ It is a mark between two (2) points and is needed to produce typography and Three (3) types of shapes construct boxes and borders. Geometric These are the basic geometric ➔ It plays many roles in visual composition Shapes shapes and communication. Line essentially circle, square, triangle, indicates a direction, divides space, and etc. leads the viewer’s eyes. These shapes suggest organization and efficiency. ➔ A line’s visual quality is determined by how the line is drawn, whether delicate or bold, Natural or These typically represent shapes thick or thin, broken or smooth, and so on. Organic that are found in nature Shapes ➔ A point or dot is the smallest unit of a line. leaves, clouds, and trees In computer displays, a point is a visible, These are free form and convey single pixel that is square rather than feelings of spontaneity. circular. Organic shapes tend to add interest and reinforce themes. ★ Basic functions of Lines Define shapes, edges, and forms. Abstract These are shapes that have Shapes recognizable form but are not Create images, letters, and pattern. real. Allocate boundaries and define areas within a composition. They are stylized or simplified Assist in visually organizing a composition. versions of organic shapes. Assist in creating a line vision For example, a stick figure is an Establish linear mode of expression abstract shape depicting a Lines are associated with movement and eye person. flow. Icons are abstract shapes to Lines can be used to control the viewer’s eye represent ideas and concepts. movements to convey information as well as evoke emotion. Value or Tone Shapes ➔ refers to tones or shadings that determine depth and dimension by the range of ➔ a closed form or closed path lightness or darkness of an element. ➔ It is a configured or delineated area created ➔ The use of shading can help provide a partially or entirely by lines or colors. three-dimensional value to an image. CEEL REVIEWER 1ST Semester | A.Y. 2024-2025 ➔ Value creates a focal point or center of Size or Scale attention. ➔ Values in color and contrast can provoke a ➔ In design when we talk about scale we’re variety of emotional responses. usually talking about the quality of size, ➔ Low contrast or closely related values can bigger and smaller, and the relationship of evoke a sense of calmness, while high- different design elements at different sizes. contrast graphics can create a sense of We’re also talking about proportion, which excitement or conflict between elements. tells us how well we’ve scaled our design. ➔ In between black and white, the varying ➔ Size and scale are all related concepts shades of gray can be found. This range is called grayscale. Mixing increasing Size the physical dimensions of amounts an object Web designers make significant decisions about Value Scale page size, including the size of the sidebar, header, ➔ shows a range of lights and darks. footer, and main content area. They also size images, text, and build the perception of mass. Size is an absolute measurement, and every element on the page will display at some size. Texture These measurements may change as the browser is ➔ Relates to the surface of a design or its resized or from one person appearance. to another. The size of an element is ➔ This can be applied graphically in the form more interesting when of a pattern or through the choice of compared to another printable surface. measurement. ➔ Visual textures are illusions of real textures Scale the relative size of different created by hand, scanned from actual objects or of an object to a textures, or photographed. common standard ➔ Using texture in graphic design adds depth Scale is a relative level or degree, used in visual and visual interest. This can be applied design to measure quality graphically in the form of pattern or through like size, amount, the choice of printable surface. importance, or rank. ➔ Visual textures are illusions of real textures It is used to compare created by hand, scanned from actual objects and measure their relative measurements. textures, or photographed. Scale is essential for ➔ Repeating shapes can also give a visual demonstrating contrast impression of texture. This is called and similarity between pattern, which is a consistent repetition of elements, as it communicates a single visual unit or element within a relationships between given area. elements. In visual design, scale is typically concerned with size, but color and contrasting terms are also CEEL REVIEWER 1ST Semester | A.Y. 2024-2025 considered scales. Scale is used across design principles to convey relationships between elements. Typography ➔ is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader Why is Typography important ➔ Typography is so much more than just choosing beautiful fonts; it’s a vital component of user interface design. ➔ Good typography will establish a strong visual hierarchy, provide a graphic balance to the website, and set the product’s overall tone. Typography should guide and inform your users, optimize readability and accessibility, and ensure an excellent user experience.