Imaging and Design for Online Environment

Slides:



Advertisements
Similar presentations
Make your choice from more than 70 templates to get a quick start online!70 templates.
Advertisements

Creating Your Own Website
In addition to Word, Excel, PowerPoint, and Access, Microsoft Office® 2013 includes additional applications, including Outlook, OneNote, and Office Web.
JUX 1 12/26/2012 JUX Creating in Jux allows you to present your images, captions, text, blogs, etc. in a creative format. Create an Account Login at
Glogster: Create Virtual Posters Created by Russell Smith, Technology Facilitator, North Edgecombe High School.
Overview Review Elements
Weebly Elements, Continued
Weebly Elements, Continued
TITLE GOES HERE Your Subtitle PROFESSIONAL STARTER BUSINESS UNLIMITED
Learning the Basics – Lesson 1
Principles of Design ACT-ADDI-1 Students will identify components related to the design process. C) Describe the elements and principles of design.
TITLE GOES HERE Your Subtitle PROFESSIONAL STARTER BUSINESS UNLIMITED
Table of Contents Tips for Success Send s
Edit PowerPoint file using Microsoft PowerPoint: 
Principles of Design Photography.
- Presentation Subtitle -
- Presentation Subtitle -
Overview Review Elements
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
Edit PowerPoint file using Microsoft PowerPoint: 
Google Slides Fundamentals
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
Edit PowerPoint file using Microsoft PowerPoint: 
- Presentation Subtitle -
- Presentation Subtitle -
Edit PowerPoint file using Microsoft PowerPoint: 
- Presentation Subtitle -
Edit PowerPoint file using Microsoft PowerPoint: 
Edit PowerPoint file using Microsoft PowerPoint: 
- Presentation Subtitle -
Edit PowerPoint file using Microsoft PowerPoint: 
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
Edit PowerPoint file using Microsoft PowerPoint: 
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
Basic Web Page Creation
- Presentation Subtitle -
- Presentation Subtitle -
- Presentation Subtitle -
Principles of Design Photography.
Edit PowerPoint file using Microsoft PowerPoint: 
Edit PowerPoint file using Microsoft PowerPoint: 
Edit PowerPoint file using Microsoft PowerPoint: 
Presentation transcript:

Imaging and Design for Online Environment Lesson 6 Imaging and Design for Online Environment • Basic principles of graphics and layout • Creating infographics • Online file formats for images • Principles and basic techniques of image manipulation • Uploading, sharing, and image hosting

At the end of this lesson, the students should be able to: understand the basic principles of graphics and layout; create a simple infographic using web tools; understand and use several file formats used on the web; easily manipulate images using a simple image editor; and upload and share images using Photobucket.

Basic Principles of Graphics and Layout Balance. The visual weight of objects, texture, colors, and space is evenly distributed on the screen. Emphasis. An area in the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Movement. Visual elements guide the viewer’s eyes around the screen.

4. Pattern, Repetition, and Rhythm 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. 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.

Online Image File Formats *When inserting text to a web page, you can simply copy a text to your html editor, or you can upload it on a website as a PDF file. Most browsers support “add-ons” so that you can open PDF files without leaving the browser.

Principles and Basic Techniques of Image Manipulation Tips to help you edit images for your website: 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 finding out the best file format. Choose the right image size. A camera with 12 megapixels constitutes to a bigger image size. Monitors have a resolution limit, so even if you have a million megapixels, it will not display everything. Caption it. Remember to put a caption on images whenever possible. If it is not related to the web page, then remove it. Practicum. Ask the students to manipulate an image using the tips provided in the slide.

Sharing Photos with Photobucket There are plenty of free image hosting sites out there, and Photobucket is one of the oldest. Here’s how to access it: 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.

Once your account is set up and you are already logged in, click the Start Uploading button.

A new page will load allowing you to drag and drop your photos or to choose them manually or to choose an entire folder to upload. Select a folder, add a password (optional), then feel free to upload any photos you have right then.

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. Once you are done, you will see an indicator similar to the one shown in the image below. 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 contents of your specified folder c. Edit Photos – uses Photobucket’s photo editing tools to manipulate your image

On the top of the image, you will see the following options: Let us just assume you will share a photo individually. To do this, click on View Uploads. Once the page loads, click the photo you want to share. 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 a 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

You may choose to share your photo to your friends on Facebook 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.