Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Imaging and Design for Online Environment


Published on

It could be useful. Must read it.

Published in: Internet
  • Be the first to comment

Imaging and Design for Online Environment

  1. 1. - There are certain things that you need to consider in order to get your message across. Basic Principles of Graphics and Layout 1. Balance - The visual weight of objects, textures, colors and space is evenly distributed on a screen. 2. Emphasis – An area in the design that may appear different in size, texture, shape or color to attract the viewers attention. 3. Movement - Movement guides the viewer’s eye around the screen. 4. Pattern, Repitition and Rhythm - Visual
  2. 2. elements that are repeated to create unity in the layout or image. 5. Proportion - Visual elements create a sense of unity where they can easily find one another. 6. Variety – This uses several design elements to draw a viewers 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 viewer’s attention. Infographics make complex data become more vissually appealing.
  3. 3. Creating Infographics Using Piktochart 1. Create a piktochart account by going to and click Sign In on the upper right corner of the page. 2. Fill up the information on the sign up page; alternatively, you can connect with Google+ or Facebook. 3. Once you have created an account and logged in, select a template for your infographic. Since your data relates to marketing or sales, simply hover over the Presenta Board theme under Free Themes then select Create.
  4. 4. 4. The Piktochart editor will open. The Presenta Board theme consists of three blocks or parts. Select the blocks and input the information as you see fit. 5. While editing a block, you can use the variation tools on the left side of the page. a. Graphics – allows you to insert lines, shapes, icons and even photo. b. Uploads – allows you to upload images for your infographics. c. Background – changes the background of a selected block.
  5. 5. d. Text – allows you to insert text to your infographic with the option to add text frame. e. Styles – allows you to modify the color scheme of your infographic. f. Tools – allows you to create charts and videos. 6. To save your work, click on Save on the top right of the page. To save it in your computer, click on Download. In the Download options, select the medium-sized and the PNG file type.
  6. 6. Here are common image file formats used on the web. We will look at their use in the web. Name File Extension Use Supports Transparency Supports Animation 1. Joint Photographics Experts Group .jpeg or .jpg Real - life photographs, high compression No No 2. Graphics Interchange Format .gif Computer - generated graphics Yes Yes 3. Portable Network Graphics .png Screenshots, high compatability Yes No
  7. 7. 1. Choose the right file format - Try to make a real - life photograph into GIF to see the difference between PNG, GIF and JPEG. Knowing the purpose is the key to find out the best file format. 2. Choose the right image size - A camera with 12 megapixels conctitutes to a bigger image size. Monitors have a resolution limit, so even if you have a millin megapixels, it will not dispayeverything. Thus, it is not always wise to make our image big, most specially in a website. Know how much space you want the image to consume. Or have a “preview” image where the audience has the option to “see full size.
  8. 8.  3. Caption it - Remember to put a caption on images whenever possible. If it is not related to the web page, then remove it.  - On PhotoScape’s main screen, you will see the may features it has that you can use for creating web content as follows:  1. Viewer - as the name implies, is a picture viewer with features the same with most image viewers like changing image orientation.  2. Editor - alters the appearanceof a single image  3. Batch Editor - alters the appearance of
  9. 9. multiple images. 4. Page - arranges several photos to create a single one; similar to a mosaic 5. Combine - links several images together to form a bigger image 6. Animated GIF - allows you to create an animated GIF from several pictures 7. Print - readies pictures for printing 8. Splitter - diveides a single photo into multiple parts 9. Screen Capture- captures the screen and save it 10. Color Picker - grabs a pixel from your screen
  10. 10.  11. Raw Converter - converts RAW images (uncompressed images usually from digital camera) to JPEG  12. Rename - allows you to rename a batch of photos  13. Paper Print - useful tool for printing your own calendars, sheets, lined paper, graph paper, etc.