Empowerment Technologies Q2 Reviewer PDF

EMPOWERMENT TECHNOLOGIES 1ST SEMESTER - QUARTER II | A.Y. 2024-2025 Online WYSIWYG Platforms LESSON I ★ creating a website using a WEB DESIGN...

EMPOWERMENT TECHNOLOGIES 1ST SEMESTER - QUARTER II | A.Y. 2024-2025 Online WYSIWYG Platforms LESSON I ★ creating a website using a WEB DESIGN drag-and-drop interface or changing ★ process of creating visually appealing in an editor, that is how your finished and user-friendly websites by product will look arranging elements ★ You have control over what your ★ focuses on both aesthetics and website looks like without having to functionality to enhance user pay a professional to handle the experience coding for you Basic Elements of Web Design 1. Layout ➔ simple, familiar, intuitive, clean, and accessible 2. Color ➔ combination of colors used in a layout ➔ consider factors in choosing color palette; topic, industry perspective, demographics LESSON II 3. Navigation WEBPAGE ➔ how users move through the website ★ A document available online that is ➔ not a space for creativity viewed using a web browser. 4. Font ★ Usually comprises several web pages ➔ easily readable connected under a single domain ➔ body copy should be at least 16 pixels name. ➔ complementary font is ideal for ★ The term "web page" is a metaphor, headings or accents, but don’t go likening the pages to those in a book beyond three typefaces bound together. ➔ contrast between your text and the WebPage Components site’s background colors 1. Header - top part of a website 5. Content containing the logo and usually (but ➔ information should be easy to read not always) the site’s navigation and digest menu. Web Template ★ pre-designed webpage on set of HTML webpages that anyone can use 2. Navigation Bar - links at the top of to “plug- in” the page to help you find what ★ a catchall name for several types of you’re looking for. The navigation templates like HTML, PSD, Flash, and links are usually in the header or Flash intro templates just below it. ★ Grande, Del Rosario, Mandigma (11 Lim-Sylianco) 1k EMPOWERMENT TECHNOLOGIES 1ST SEMESTER - QUARTER II | A.Y. 2024-2025 3. Feature Image - large, LESSON III attention-grabbing image at the top Video that sets the tone for the rest of the ★ From the Latin verb “videre,” – to see page. 4. Slider - used to display pictures ★ the recording, reproducing, or that slides from right to left or vice broadcasting of moving visual versa images. – Oxford Languages Characteristics of a Good Video 1. Video Length: Keep it short 2. Video Script: Make your message clear 3. Video Content: Support the script. 4. Video Format: Match the channel. 5. Web Content - all elements used 5. Video Sound: Don’t scrimp on quality. to communicate your message 6. Video Lighting: Even and natural. 6. Slidebar - narrow vertical column 7. Video Editing: Less is more. right next to your website content, 8. Captions: Use them. often containing advertisements, links to other content, calls to Factors to consider action, or a search box ★ Audience ★ Topic Focus ★ Type of Website Sample video editing tools: 7. Footer - functions as header too (often contact info, privacy policy, terms of use, sitemap, socmed icons and links, etc.) LESSON IV 2D & 3D DESIGN 8. Landing Page - provide a destination page for the person to 2D DESIGN land on when they click the ad. ★ the composition possesses the The primary goal is getting the dimensions of length and width but visitor to take action (i.e. download does not possess depth. a report, sign up for an email list) Elements of 2D Design 9. Homepage - best practice to link 1. Line your logo to the homepage as the ➔ path of a point, or the connection “escape” or “reset” if visitors get lost between two points Grande, Del Rosario, Mandigma (11 Lim-Sylianco) 2k EMPOWERMENT TECHNOLOGIES 1ST SEMESTER - QUARTER II | A.Y. 2024-2025 ➔ can be made on their own, or they ◆ Hue - name of the color can be created where two shapes ◆ Saturation - purity or intensity meet. ◆ Value - relative lightness or ➔ “implied line,” where a line doesn’t darkness really exist, but appears to be present 2. Shape / Space Principles of 2D Design ➔ Shape is a perceivable area. Shapes 1. Balance - equalizing of the visual can be created by lines or by color or weight of elements value changes that define edges a. Symmetrical - one half ➔ The shape itself is the positive space, mirrors the other and the space around the shape is b. Asymmetrical - dissimilar the negative space. items balance 2. Repetition / Rhythm - a repeating visual element (pattern); rhythm - its 3. Value / tone following & regular occurrence ➔ Is the relative lightness or darkness of an area 3. Focus / Emphasis - the object or 4. Texture element which first catches our ➔ Is the perceived look, feel, or quality of attention the surface a. Rule of thirds -a compositional tool that makes use of the notion that the most interesting compositions are those in 5. Color which the primary element is ➔ Human perception of different off center wavelengths of visible light ➔ Component parts include; Grande, Del Rosario, Mandigma (11 Lim-Sylianco) 3k EMPOWERMENT TECHNOLOGIES 1ST SEMESTER - QUARTER II | A.Y. 2024-2025 b. Visual Center - just slightly 6. Contrast - the relative difference above and to the right of the between elements; Bright vs Dark, actual (mathematical) center Heavy vs Light, Rough vs Soft. The natural placement of visual greater the difference, the more focus referred to as “museum attention the area attracts. height” 7. Movement / Hierarchy a. Movement - visual path our eye follows c. Golden Rectangle - based on b. Hierarchy - manipulation of golden ratio (1:1.618) elements to create movement through a work. 4. Unity / Harmony - visually satisfying 8. Depth - overlapping forms suggest effect of combining similar, related depth, changes in scale, illusionistic elements. perspective, atmospheric perspective, can suggest depth 5. Scale / Proportion a. scale - overall size of something 3D DESIGN b. proportion - relative size of ★ represents objects or concepts in objects within a work (ex: three dimensions, incorporating caricature) length, width, and height Elements of 3D Design Grande, Del Rosario, Mandigma (11 Lim-Sylianco) 4k EMPOWERMENT TECHNOLOGIES 1ST SEMESTER - QUARTER II | A.Y. 2024-2025 1. Space ➔ relative lightness or darkness of an ➔ A continuous area or expanse area surrounding or enclosed by mass. ➔ help provide a sense of space and ➔ 3D in 2D plane paper uses 2-point depth around an object. perspective 2. Form/Mass Principles of 3D Design ➔ enclosed volume or 1. Balance - equalizing of the visual three-dimensional body of matter weight of elements. making up the area of an object a. Symmetrical - one half ➔ solids - 3D shapes mirrors the other ➔ used to study the interplay between b. Asymmetrical - dissimilar light and shadow in 3D space items balance each other out c. Radial - elements are spread out circularly from a central point 3. Line ➔ the path of a point, or the connection between two points 4. Plane 2. Repetition/Rhythm ➔ flat surface a. repetition - repeating visual ➔ literal surfaces that make up the form element 5. Texture b. rhythm - flowing and regular ➔ is the perceived look, feel, or quality of occurrence a surface 3. Focus/Emphasis - object or element 6. Color that first catches our attention ➔ Human perception of different 4. Unity/Harmony - visually satisfying wavelengths of visible light effect of combining similar, related ➔ Component parts include: elements. ◆ Hue - name of the color 5. Scale/Proportion ◆ Saturation - purity or intensity a. scale - overall size of ◆ Value - relative lightness or something darkness 7. Light/Value Grande, Del Rosario, Mandigma (11 Lim-Sylianco) 5k  EMPOWERMENT TECHNOLOGIES 1ST SEMESTER - QUARTER II | A.Y. 2024-2025 b. proportion - relative size of 3. Lighting - Setting up lights to objects within a work (ex: enhance the mood, realism, and caricature) depth of a scene 6. Contrast/Variety 4. Rendering - The process of a. Contrast - relative difference generating the final image or between two or more animation from a 3D model elements b. Variety - relative diversity and change throughout a piece 7. Movement/Hierarchy a. Movement - visual path our eye follows b. Hierarchy - manipulation of elements to create Applications of 3D Design movement through a work a. Film & Animation LESSON V b. Game Development 3D DESIGN c. Architecture d. Product Design e. Virtual Reality (VR) & Augmented Key Stages of 3D Design Reality (AR) 1. Modeling - process of creating the 3D 3D DESIGN SOFTWARE TOOLS shapes that form the base of your design 3D Design a. Polygonal Modeling - Using polygons to construct shape b. NURBS Modeling - Using curves to create smooth, flowing shapes c. Sculpting - used for highly LESSON VI detailed organic models SKETCHUP ★ a 3D modeling software used primarily for creating architectural designs, interior layouts, landscape plans, and even more detailed models of objects or scenes ★ Originally developed by @Last 2. Texturing and Shading - Applying Software and later acquired by materials, colors, patterns, and details Google to the 3D model ★ Now owned by Trimble Inc. Main Features and Uses Grande, Del Rosario, Mandigma (11 Lim-Sylianco) 6k EMPOWERMENT TECHNOLOGIES 1ST SEMESTER - QUARTER II | A.Y. 2024-2025 3D Modeling and Design a. Entity info - provides detailed Component and Material Libraries information about selected Integration and Compatibility objects in your model Applications in Various Fields Free and Paid Versions COMPONENTS OF SKETCHUP 1. Drawing Space/Modelling Area b. Components - allows you to insert, manage, and reuse pre-made 3D components c. Instructor - offers guidance 2. Menu Bar and tips on using different tools within SketchUp 3. Toolbox d. 3D Warehouse - online library where users can download and share 3D models e. Materials - allows you to apply textures, colors, and 4. Status Bar finishes to surfaces in your model f. Styles - lets you control the 5. Measurement Tool appearance of your model g. Tags - help organize and 6. Default Tray control the visibility of different parts of a model Grande, Del Rosario, Mandigma (11 Lim-Sylianco) 7k EMPOWERMENT TECHNOLOGIES 1ST SEMESTER - QUARTER II | A.Y. 2024-2025 LESSON VII ORTHOGRAPHIC PROJECTION ★ Orthographic Projection is a method h. Shadows - tool allows you to for representing a three-dimensional turn shadows on or off and object in two dimensions by adjust the angle and intensity projecting multiple views of the object based on the time of day and onto a perpendicular plane. year Six Principle Views 1. Front 2. Right Side 3. Top i. Scenes - let you save specific 4. Bottom views or configurations of 5. Left Side your model 6. Rear [Front, Right and Top are views that simply represented by rotating the object] Sample Orthographic Projection j. Display - provides options to Isometric: show or hide various elements of the model k. Soften/Smooth - helps in adjusting the appearance of Orthographic: edges in your model l. Model Info - contains settings and options that apply to the entire model Grande, Del Rosario, Mandigma (11 Lim-Sylianco) 8k  EMPOWERMENT TECHNOLOGIES 1ST SEMESTER - QUARTER II | A.Y. 2024-2025 ★ Glass Box STEP 2: Lightly construct the top view and - Most powerful technique to place 25-40mm above the front view. Extend understand orthographic the lower side of the top view to intersect a projections vertical line drawn to the right of the front - Suspend the object with view transparent strings inside a glass box - Freeze the view from each direction and unfold the box Line Types ★ Visible lines – used to represent features that are SEEN in the current view ★ Hidden lines – used to represent STEP 3: Project the features of the front view to features that CANNOT BE SEEN in the the right of the vertical line. Draw a line at 45 current view degrees from the point of intersection. ★ Centerlines – used to represent symmetry and to mark the center of circles and the axes of cylinders STEP 4: Where the horizontal projection lines of the top view intersect with the meter line, Steps on Drawing the Orthographic Views draw vertical projection lines to the side view STEP 5: Erase all unnecessary lines. Complete the finished linework to complete the required orthographic views. STEP 1: Lightly construct the front view first Grande, Del Rosario, Mandigma (11 Lim-Sylianco) 9k