Imaging and Design for Online Environment PDF

Imaging and Design for Online Environment OBJECTIVES At the end of the lesson, you should be able to: 1. Understand the basic principles of graphics and layout; 2. Create a simple infographic using web tools; 3. Understand and use several file formats used on the web; 4. Easily manipulate i...

Imaging and Design for Online Environment OBJECTIVES At the end of the lesson, you should be able to: 1. Understand the basic principles of graphics and layout; 2. Create a simple infographic using web tools; 3. Understand and use several file formats used on the web; 4. Easily manipulate image using a image-editor; Graphic Design It is an artistic way of communicating ideas and messages through visual expressions using texts, images, and symbols.  DESIGN VS LAYOUT Design is a plan of creating an idea through a combination of texts, images, and other elements that are placed together artistically. Layout is a term used as the process of organizing and arranging these elements in a design as you plot it in a paper.  DESIGNER VS ARTIST ❑The Expressionist - to create visuals that facilitate an idea or story ❑The Problem Solver - is a professional within the graphic design and graphic arts industry who assembles images, typography, or motion graphics to create a piece of design.  WEB DESIGNER is someone who creates the design of a website BASIC PRINCIPLES OF GRAPHICS AND LAYOUT  1. BALANCE A distribution of visual weight on either side of the vertical axis. Symmetrical balance uses the same characteristics. Asymmetrical uses different but equally weighted features. Symmetrical Balance Asymmetrical Balance  2. EMPHASIS Used to make certain parts of an Artwork stand out. It creates the center of interest or focal point. It is the place in which an Artist draws your eyes first. 3. MOVEMENT How the eye moves through the composition; Leading the attention of the viewer from one aspect of the work to another. Can create the illusion of action. 4. PATERN The repetition of specific visual elements such as a unit of shape or form. A method to organize surfaces in a consistent regular manner. 5. REPETITION Repetition can be done in a number of ways: via repeating the same colors, typefaces, shapes, or other elements of a design. 6. RHTYHM Regular repetition of, or alternation in elements to create cohesiveness and interest.  There are five basic types of visual rhythm that designers can create: random, regular, alternating, flowing and progressive. Random Rhythm Regular Rhtyhm Alternating Rhythm Progressive Rhythm Flowing Rhythm 7. PROPORTION Visual elements create a sense of unity where they relate well with one another. 8. VARIETY This uses several design elements to draw a viewer’s attention. INFOGRAPHICS Information graphics or infographics are used to represent information, statistical data, or knowledge in a graphical manner usually done in a creative way to attract the viewers attention. Infographics Editing App Canva for Education. Create, collaborate, and share with versatile design tool Infographic Maker The Infographic Maker app provides a comprehensive suite of tools and editable templates to help you visualize your ideas and data in a visually appealing way. Adobe Illustrator is a vector graphics editor and design software developed and marketed by Adobe. Originally designed for the Apple Macintosh, development of Adobe Illustrator began in 1985. VistaCreate is a cool app for making infographics. AI-Powered Infographic Generator ▪ Piktochart - https://piktochart.com, Piktochart AI's free infographic maker crafts custom infographics from any topic in seconds.  Principles of Visual Message Design Using Infographics 1. Clarity: Ensuring the Message is Easy to Understand ▪ Simple Language: Use clear and concise language that anyone can understand. Avoid jargon or technical terms unless they are essential. ▪ Minimal Text: Limit the amount of text to the most important information. Too much text can overwhelm the viewer. ▪ Clear Typography: Choose a font that is easy to read and that contrasts well with the background. Avoid overly decorative fonts that can be difficult to decipher. 2. Conciseness: Using the Fewest Words Possible While Still Delivering the Full Message ▪ Bullet Points: Use bullet points to break down information into smaller, digestible chunks. ▪ Data Visualization: Use charts, graphs, and other visual elements to represent data in a clear and concise manner. ▪ Strong Headlines and Subheadings: Use clear and concise headlines and subheadings to guide the viewer through the infographic. 3. Coherence: Ensuring All Elements (Text, Visuals) Work Together Harmoniously ▪ Consistent Style: Use a consistent style throughout the infographic, including fonts, colors, and layout. ▪ Related Visuals: Ensure that all visuals are relevant to the message and support the overall narrative. ▪ Logical Flow: Arrange the elements in a logical sequence that guides the viewer through the information.  How These Principles Guide the Choice of Text, Colors, and Icons ▪ Text: Choose clear and concise language, use bullet points and data visualization, and ensure consistency in font and style. ▪ Colors: Use colors that are easy to distinguish and that complement each other. Avoid using too many colors, as this can be overwhelming. ▪ Icons: Use simple and recognizable icons that are relevant to the message. Avoid using too many icons, as this can clutter the design.  Online Image File Formats Website images has a more compressed image because data travels over the internet and not everyone has a fast internet connection. Consequently, we have to use compressed images on our websites.  Why image file formats matter? All graphics online are image files. These files come in many formats and while you can often convert the initial file format into a different type, doing so is not always good. They render the same images in different ways and have different file sizes. Common image file formats used on the web: a..JPG/JPEG ▪ This is pronounced as “jay-peg“ and is the short form of.jpeg or Joint Photographic Experts Group. ▪ Unfortunately, it does not support transparency and therefore, images of this file type can be difficult to integrate in terms of blending with other materials or elements in your document. b..GIF ▪ This stands for Graphics Interchange Format. ▪ This type of image file is capable of displaying transparencies. ▪ It is also capable of displaying simple animation. ▪ Apparently, this may not be too useful on a printed document but if you are sending documents electronically or through email, or even post documents into a website, then this could be quite impressive. c..PNG ▪ This is pronounced as “ping“. It stands for Portable Network Graphics. ▪ It is also good with transparencies but unlike.GIFs, it does not support animation. Principles and Basic Techniques of Image Manipulation Image manipulation, or photo editing, is the process of altering an image using software to achieve a desired effect. It can range from simple adjustments like cropping and color correction to more complex techniques like compositing and retouching.  Principles of Image Manipulation ▪ Preservation of Quality: Always strive to maintain the original image quality as much as possible. Avoid excessive manipulation that can lead to pixelation or artifacts. ▪ Harmony with Content: Any changes made should complement the original image and enhance its overall message or aesthetic. ▪ Ethical Considerations: Be mindful of ethical implications when manipulating images. Avoid altering images in ways that could be misleading or harmful. Basic Techniques 1.Cropping 6.Blurring 2.Resizing 7.Layers 3.Rotating 8.Compositing 4.Color Correction 9.Retouching 5.Sharpening 10.Filters Software Tools 1.Photoshop  Adobe Photoshop is a raster graphics editor developed and published by Adobe for Windows and macOS. It was originally created in 1987 by Thomas and John Knoll. 2. Canva Canva has some limitations with basic photo editing, it's still an excellent product for a picture app. 3. Adobe Lightroom Adobe Photoshop Lightroom, usually called Lightroom, is an image organization and processing application developed by Adobe. It is licensed as a standalone subscription or as part of Creative Cloud. 4. Picsart  PicsArt is one of the most widely used picture editing apps for android. PicsArt contains lots of exciting image editing capabilities 5. Pixlr Pixlr is a group of AI-powered creative tools including Pixlr.com, Designs.ai and Vectr.com. Pixlr.com is a cloud-based set of image editing tools and utilities, including AI image generation and enhancements. Inserting, Uploading and Sharing Photos over the Internet In today's digital age, photos are an essential part of our online lives. Whether you're sharing vacation snaps, documenting special moments, or creating visual content, knowing how to insert, upload, and share photos over the internet is a valuable skill.  Inserting Photos Word Processing and Presentation Software: Most word processors (like Microsoft Word or Google Docs) and presentation software (like PowerPoint or Google Slides) allow you to insert images directly into your documents. Webpage Design: If you're creating a webpage, you'll use HTML code to insert images. The basic structure is:. Email: Most email clients have a feature to attach images to your messages.  Uploading Photos Social Media Platforms: Platforms like Facebook, Instagram, Twitter, and TikTok have built-in features for uploading photos. Photo Sharing Websites: Dedicated websites like Flickr, Imgur, and 500px are designed specifically for storing and sharing photos. Cloud Storage: Services like Google Photos, Dropbox, and OneDrive offer storage for your photos and allow you to share them with others.  Sharing Photos Direct Links: Once you've uploaded a photo, you can usually generate a direct link to it. Share this link with others, and they can view the photo without needing to visit the website where it's stored. Embedding: Some platforms allow you to embed photos directly into other websites or blogs. This means the photo will appear as part of the content, rather than just a link. Social Media Sharing: Many platforms have built-in features for sharing photos directly to other social media networks. Uploading and Photo sharing websites ▪ Flickr ▪ Picasa ▪ Facebook ▪ Instagram  Tips for Sharing Photos and Videos Online Quality Matters: Ensure your photos are of good quality and resolution. Respect Copyright: Avoid sharing copyrighted photos without permission. Privacy Settings: Be mindful of privacy settings when sharing photos online, especially if they contain sensitive information. Image Compression: If you're sharing photos online, consider using image compression tools to reduce file size without significantly affecting quality.