COMS 359: Interactive Media

Transcription

1 COMS 359: Interactive Media

2 Agenda Project Two Overview Advanced Images PhotoShop Creating custom graphics

3 Project Two Education or Information Site Description (from course syllabus) For the second project, students will create a site for education/training or information delivery. The content for the second project must come from a third party client. The client will provide you with the content for the project. Clients may be corporations, small businesses, non-profit organizations, or community groups. You will work with the client to identify specific project objectives, to gather and develop site content, and to employ web program and design skills to create an effective web site that accomplishes the client's goals and fulfills their expectations.

4 Project Two Project Requirements Collaborate with a Content provider Incorporate new HTML tags & design principles that will be covered in the next several weeks Custom Graphics Tables Multimedia (audio/video) Size 8-12 pages

5 Project Two Possibilities Campus or Community Organization Corporate Communication Education (primary or secondary ed.) Corporate Training Examples Responsibilities Page Exemplify both content & design options Illustrate how these kinds of sites are organized & used

6 Project Two Time Line (5 weeks) 1st Week = Advanced Images & PhotoShop 2nd Week = Images (con t) & Tables 3rd Week = Multimedia 4th Week = Design Seminar & Project Workshop 5th Week = Project Two Due

7 Project Two Now - Find content provider & have a meeting to decide on the goals and audience for the project Week One - Begin development of the project & check your design ideas with content provider (Flowchart) Week Two & Three Finalize design (storyboard) Create all pages Week Four Have content provider check the design and provide corrections or updates. Implement changes and make final version of the site Week Five - Turn in the project

8 Project Two Most difficult part of Project #2 is not HTML or design. The most difficult part will be working with a content provider. Not knowledge that can be read about and memorized. But a practical skill that can only be learned by doing. i.e. playing a sport Pedagogy = coaching; provide guidelines to assist the development of your skills Collaboration = the real skill of a good web designer

9 Project Two Collaborating with Content Providers 1) Maintain two distinct roles Content Provider = information expert Web Designer (you) = presentation of that information on the Web; translate the ideas of another person into interactive format

10 Project Two Collaborating with Content Providers 2) Cooperation Although you and the content provider have separate roles, the project is the result of successful collaboration & coordination Not all content providers know how to do this. You need to take the lead in making this happen. Be organized & take a structured approach Give Content Provider material & solicit comments Be patient, forgiving, and gracious Practice good listening & communication skills

11 Project Two Collaborating with Content Providers 3) Content Providers usually do not know what they want. But they certainly know what they do not want. Trial & Error - Give your content provider several options to choose from in making design decisions Be patient; creativity takes time & mistakes Guide decision making process by using an organized approach

12 Project Two Collaborating with Content Providers 4) Most content providers know just enough about digital media and the Internet to be dangerous to themselves, you, and the project. Keep roles distinct & help provider to do the same Be patient & listen; let providers voice their opinion Keep your ego out of the process; don t get defensive; make all difficult design questions a matter of the project s success

13 Project Two Take the challenge of collaboration seriously The better you collaborate, the better the second project The valuable media producer/web designer Not just the technology of HTML Effective translator of other people s ideas

14 Project Two Next Wednesday Tell us who your client will be Briefly describe the project

15 PhotoShop Introduction PhotoShop = image processing software Use it to manipulate still images and create icons, buttons, backgrounds, etc. Industry standard in digital media for image processing

16 PhotoShop Introduction Not an exhaustive treatment of the software, but an introduction in order to get you started using it. Best way to learn software is not through abstract examples and exercises but by applying the software to actual design problems that are encountered in the course of a specific project. Learn software by using it; use the program s help to guide and inform your usage

17 PhotoShop Introduction Function Desktop

18 PhotoShop Function PhotoShop works on the principles of layers A completed PhotoShop image is made up of numerous layers Analogy = collage Text Layer Image Layer Background Layer

19 PhotoShop Desktop

20

21 Pull down menus

22 Tools

23 Tool Options (used to adjust the features of the various tools)

24 Navigator & Info

25 Color, Swatches & Styles

26 History, Actions & Tool Presets

27 Layers, Channels & Paths

28 Work Area

29 Using PhotoShop Tasks Basic Image Processing Text Graphics Custom Backgrounds Buttons

30 Image Processing Changing Image File Formats Problem: Although the standard image file formats for web publication are GIF & JPEG, there are a number of other file formats for images Scanners & Digital Cameras - TIFF (.tif) Paint software & MS icons - bit map (.bmp) PhotoShop - Proprietary file format (.psd) Solution: Use PhotoShop to change the format of the image file (i.e. change.bmp to.gif or.jpg)

31 Image Processing Changing Image File Formats Procedure Open file in PhotoShop (File, Open) Save As - JPG or GIF

32 Image Processing Select Format from pull down menu

33 Image Processing Altering Image Mode Grayscale = Cut color info; B&W image Indexed = Index color to specific pallet RGB = Standard Choice* CMYK = Used for printing

34 Image Processing Altering Image Adjustments Color Balance Brightness/Contrast & Hue/Saturation Replace Color Invert, Equalize, Threshold, Posterize Variations

35 Image Processing Image Size Adjust Image size Adjustments = Shrink or Stretch the Image Canvas Size Adjust the size of the field on which the image appears Adjustments = Crop or Add negative space

36 Image Processing Rotate Canvas 180, 90, arbitrary = turn the image Flip horizontally or vertically = mirror image

37 Image Processing Altering Image Filter Apply special effects to the image Artistic Blur Brush Strokes Distort Many filters have adjustable parameters

38 Image Processing Original Exercise - Alter an image Change mode Alter image features (brightness, contrast, color, etc.) Change size of image or canvas Use filters to create special effects Altered

39 Image Processing Additions - Layers Task: Add text over an image Procedure Use text tool to input text Select text font, size and color in Tool Options Position text on the image by using the positioning tool abstract art

40 Image Processing Other Image Processing Tools Magic Wand Tool Capture a color and manipulate the captured area Set Sensitivity in Options Lasso Tool Mark out a section by Freehand Manipulate indicated section

41 Image Processing Other Image Processing Tools Eyedropper Tool Sample color from any part of the image and load that color into the color pallet Match colors from an image Retouch parts of the image Airbrush, Paintbrush, Pencil Apply color to an existing image Quality of the applied color = type of Tool

42 Image Processing There are other tools available Dodge, Blur, Smudge, Pen, etc. Experiment with them to learn what they do and how to use them There are also a lot of effects available under Filter Powerful options but use sparingly Experiment with them to see how they effect the image

43 Image Processing When to use Image Processing Like video FX, most first time designers tend to overuse image processing Don t process just because you can; use image processing to adjust the look of the image in a way that is appropriate to the content of the project Thus, use processing sparingly; always motivated by project content & design Most useful image processing feature = adding text to images for making logos and headlines

44 Image Processing Saving your new Image Save As PSD Save in PhotoShop PSD format Retains layers for future editing Save As GIF or JPG Save GIF or JPG for web distribution Does not retain PhotoShop layers

45 Image Processing Saving your new image Suggestion Save a PSD file in a separate folder/directory; this is your back-up image for future editing Save a JPEG or GIF in your working HTML folder/directory; this is the image that will be used on your web page

46 Preview PhotoShop (con t) Transparent GIF headline Custom Background Buttons

47 Preview Alternative to PhotoShop PhotoShop = $ GIMP = Free