Empowerment Technology: Lesson 6 PDF

EMPOWERMENT TECHNOLOGY LESSON 6: Imaging and Design for Online Environment EMPOWERMENT TECHNOLOGY BASIC PRINCIPLES OF GRAPHICS AND LAYOUT 1. BALANCE. The visual weight of objects, texture, colors and space is evenly distributed on the screen. When visiting a website...

EMPOWERMENT TECHNOLOGY LESSON 6: Imaging and Design for Online Environment EMPOWERMENT TECHNOLOGY BASIC PRINCIPLES OF GRAPHICS AND LAYOUT 1. BALANCE. The visual weight of objects, texture, colors and space is evenly distributed on the screen. When visiting a website, check if one side holds the same amount of weight on the other. The colors should also have a similar visual weight. 2. EMPHASIS. An area in the design that may appear different in size, texture, shape or color to attract the viewer’s attention. \ FIGURE 1: AN EXAMPLE PAGE OF BALANCE AND EMPHASIS 3. MOVEMENT. Visual element guide the viewer’s eyes around the screen. EMPOWERMENT TECHNOLOGY  4. PATTERN, REPETITION, AND RHYTHM. These are the repeating visual element on an image or layout to create unity in the layout or image. Rhythm is achieved when visual elements create a sense of organized movement. 5. PROPORTION. Visual elements create a sense of unity where they relate well with one another. EMPOWERMENT TECHNOLOGY  6. 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 viewer’s attention. Infographics make complex data become more visually appealing to an average user. EMPOWERMENT TECHNOLOGY CREATING INFOGRAPHICS USING PIKTOCHART 1. Create a Piktochart account by going to www.piktochart.com and click the sign up 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. EMPOWERMENT TECHNOLOGY  4. The Piktochart editor will open. The Presenta Board theme consists of three blocks (parts). Select the blocks and input the information as you see fit. 5. While editing a block, you can use the various tools on the left side of the page. a. GRAPHICS – allows you to insert lines, shapes, icons, and even photos. b. UPLOADS – allows you to upload images for your infographics. c. BACKGROUNDS – changes the background of a selected block. d. TEXT – allows you to insert text to your infographic with the options to aide text frames. e. STYLES – allows you to modify the color scheme of your infographic. f. TOOLS – allows you to create charts (similar to one in PowerPoint), maps (for Demographics), and videos. EDITING TIPS: Double-click a text to edit the content When working with objects, the toolbox on top of the topmost block will allow you to manipulate it. This is similar to working with objects in PowerPoint where you can arrange an object to be on top or bottom of another. When working with charts, double-click the chart to open the data sheet editor. You may rename the title of your infographic on the top toolbar. 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. EMPOWERMENT TECHNOLOGY  ONLINE IMAGE FILE FORMATS NAME FILE USE SUPPORTS SUPPORTS EXTENSION TRANSPARENCY ANIMATION 1. JOINT.jpeg or.jpg Real-life No No PHOTOGRAPHICS photographs, EXPERTS GROUP high compression 2. GRAPHICS.gif Computer Yes Yes INTERCHANGE generated FORMAT graphics 3. PORTABLE.png Screenshots, Yes No NETWORK high GRAPHICS compatibility CREATING AND MANIPULATING IMAGES USING PHOTOSCAPE There plenty of image manipulation tools but if you are going to create a website you have to use the one which is efficient. PhotoScape is a good tool because it is feasible for beginners and advance users alike. On PhotoScape’s main screen, you will see the many features it has that you can use for creating web content as follows: EMPOWERMENT TECHNOLOGY  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 appearance of single image. 3. BATCH EDITOR – alters the appearance of 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 – divides a single photo into multiple parts. 9. SCREEN CAPTURE – captures the screen and saves it. 10. COLOR PICKER – grabs a pixel from your screen to be used in editing. 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. For this lesson, we will focus on the ones that we can use for our future website project; the Editor and Batch Edit. I. EDITOR EDIT For this exercise, take a photo from your camera. It can be selfie, a groupie, or random photo. Make sure that you are the one who took it and that it is worth spending time with editing. Once you have it ready, place it in your computer in a directory most convenient to you. 1. Open PhotoScape then choose editor. 2. Choose the folder where the image you want to manipulate is located using the file explorer on the upper left. 3. Once you have selected the folder, you will see a preview of all the images found on that folder at the bottom of the file explorer. EMPOWERMENT TECHNOLOGY  4. From the preview, select the image you want to use. The image will now be shown on a much bigger preview inside your work area similar to what is shown below: 5. Notice the properties of the image like the file name, the image size (in pixels), and the file size found on the bottom of the preview. 6. Manipulate the image using the tools on the bottom. a. HOME TAB – this is where you can add a frame, resize, sharpen, and add filters and effect to your image. b. OBJECT TAB – this is where you can replace a wide variety of images like texts, shapes, and symbols. EMPOWERMENT TECHNOLOGY  c. CROP – this is where various tools can be found in order to properly crop an image to desirable size. d. TOOLS – includes other tools like red eye correction, mole removal, mosaic effect, and brush tools. For more information about the tool, simply click it and a tip will be displayed describing how to use it. 7. Click SAVE located on the lower right of the program. The SAVE AS dialog box will appear. Save II. BATCH EDIT Batch editing is one of the most useful tools when trying to easily manipulate all images at the same time. This is most useful when you create a gallery of photos for a website. You can make their sizes uniform to what you have specified. For this exercise, you will take need to take at least ten pictures and save in your desired folder. It is highly recommended that your photos share the same orientation (portrait or landscape). 1. Select the folder where your photos are located, then on the PREVIEW window, drag the photos you want to be part of the batch edit to the work area (center). 2. Use the tools on the right to edit your photo. This is similar to the options in edit except the CROP and TOOLS tab which are replace by the FILTERS tab. The filters tab is used to add certain filter that will apply to all your photos. 3. Resize the pictures so that they do not exceed 800 pixels in width. Add filters if you want. 4. Click on CONVERT ALL button found on the upper right. EMPOWERMENT TECHNOLOGY  5. The SAVE dialog box will appear that will allow you to change the location, the name of the images, and the file type. Since we are working on photographs, we are going to keep it as JPEG. For this exercise, save the batch images in a new folder labeled as “batch” inside your resource folder. EMPOWERMENT TECHNOLOGY SHARING PHOTO WITH PHOTOBUCKET There are plenty of free image hosting sites out there, and Photobucket is one pf the oldest. Feel free to check out other free image hosting sites over the Internet. 1. First sign up for a Photobucket account on photobucket.com. Just like Piktochart, you may use your Google+ or Facebook account to automatically sign up. 2. Once your account is set up and you are already logged in, click the START UPLOADING button. 3. A new page will load allowing you to drag and drop your photos or to choose them manually or the entire folder to upload. Select a folder, add a password (optional), then feel free to upload any photos you have right then. EMPOWERMENT TECHNOLOGY  4. Once selected, a progress bar will appear indicating that the image is uploading. This may take a moment and will depend on your Internet connection. 5. Once you are done you will see these indicators: a. VIEW UPLOADS – views photos you just uploaded which also grants you options to share and edit them individually. b. SHARE ALBUM – shares everything you just uploaded plus the other content of your specified folder. c. EDIT PHOTOS – uses Photobucket’s photo editing tools to manipulate your image. 6. Let us assume you will share a photo individually. To do this, click on VIEW UPLOADS then once the page loads, click the photo you want to share. 7. On the top of the image, you will see the following options: A – shares your photo directly to social media and blogging platforms; Facebook, Twitter, Google+, Tumblr, and Pinterest respectively. B – gives you variety of link codes for HTML, Forums, Emails, Instant Messaging, and a direct link. C – shares your image via email. D – allows you to download your image. E – shares your image to social media sites with the option to add a custom message. 8. You may choose to share your photo to your friends on Facebook. If you are done sharing, you may now log off and close the browser. EMPOWERMENT TECHNOLOGY