This website is an initiative of J-Lab

# Present It!

Photography and Graphics

  • Getting Familiar with Photoshop

    Photoshop is an excellent tool to create new graphics that can range from elaborate illustrations to what appear to be simple text headlines. It’s available as a full version for about $600 (considerably less if you are a student) or a stripped-down version called Elements that can be had for less than $100. There are other programs that do many of the same things as Photoshop, like the open source Gimp or value choice called Paint Shop Pro. All of these programs do the same basic function that we will discuss, but the user interface might be slightly different from one version of Photoshop to the next, so keep than mind as you apply these lessons to your program.

    Getting Familiar with Photoshop, Part II

    Foreground and background colors, editing modes, jumping to Image Ready.

    Working with Layers

    If you have ever drawn an illustration with pencil and paper, you’re familiar with the limitations of drawing an object on top of another object. When you change your mind later about it’s placement, the "topmost" object must be erased – and when you erase the top object you also erase what’s underneath.

    Creating Web-formatted Images

    If your image is at 72 dpi and you've made all your edits (color correction, cropping, resizing), you’re ready to save it as a JPEG or GIF.

    Creating Transparent Images

    All digital images must be rectangular in shape, but sometimes you may want to create the effect of an irregular outline. You can do this by matching the background color of your image to the background color of the web page it is displayed in or by creating a transparent area in the image through which a web page background will be visible.

    How to Take Pictures for Online Use

    Whenever you can, take photographs with a digital still camera, as opposed to a digital video camera or a regular camera. You will be able to turn the image into a web-ready format more quickly and you'll get a better quality picture than if you used a digital video camera or took screenshots from a digital video. or a camera phone?

    Getting Familiar with Web Graphics

    Only two image formats — GIFs and JPEGs — can be used completely safely on the web. Sometimes, the PNG format is also used, but is not fully supported by all web browsers.

    Preparing Images and Photos for the Web

    Here are some guidelines for making your images download quickly and display correctly.

    Checking and Changing Resolution

    Open an image in Photoshop and let’s try setting the resolution.

    Editing Photographs

    Most digital cameras take photographs that can be put onto your Web site just as they are — without being touched up. Some photos, however, will be greatly improved if their color and contrast are tweaked.

    Using Photoshop Slices

    When Web design became a significant part of a Photoshop user’s job, Adobe added Slices to its arsenal of design tools. Slices can be used to save changes as you create graphics for the Web. Essentially, you will use Slices to divide up a Photoshop document. Each “Slice” gets saved as a different image when you Save for Web.

    Creating Animated GIFS with Image Ready

    Small animations can be created directly in Photoshop by using animation tools provided in Image Ready, a tool created by Adobe so Web designers can create animated GIFs.

    Creating photo galleries and slideshows

    Even if you are just starting out with digital photography, you should consider publishing slideshows and photo galleries when one or two photos just won't do justice to the subject.


  • Editing Audio

    It’s a good idea to save a backup of the original file so that you can revert to it if needed. It is also a good idea to save a couple of copies of your file. One should be the original digitized file, untouched in case you destroy the sound in later versions. You might also save a version of your edit. You can throw away these versions later, but they’ll save you time if you mess up your file and need to go back and try again.

    Delivering Audio Online

    Upload audio files in the same way you upload any other file using an FTP (file transfer protocol) program. You may find it useful to create a folder on your Web server to store all audio files. This keeps your media organized on the server.

    How to Record Audio for the Web

    Recording audio isn’t rocket science, but you do need to pay attention to where you are choosing to record. If at all possible, record in a sound studio using high-quality microphones. Usually, this isn’t possible, and you will often be recording interviews in someone’s office or on the street.

    Digitizing Audio

    Digital sound is created by a process called "sampling." Most digital sounds, whether on a CD or from the Web, were created by recording hundreds of very small snapshots of sounds as they were played. These snapshots build the waveform that is a digital sound. A 44.1 kHz file for example, uses more than 44,100 samples, or snapshots, per second. The quality, as you might expect, is fairly high – CD-quality, in fact. Four or five minutes of 44 KHz-sampled music creates a file of about 50MBs.


  • How to Shoot Video for the Web

    As you set about shooting video, you may want to consider hiring an expert if you don’t already have one in-house. With patience and creativity, a novice videographer can shoot like a professional, but you must invest the time to develop the expertise. If your budget permits, hire a freelance journalist with videography experience. If it doesn’t, get excited about learning a new set of skills and having some fun.

    Using Adobe Premiere

    In the next sections, you will get a look at digitizing and editing video using Adobe Premiere Pro, which includes most of the editing tools you need and has good integration with digital video — the best type of video for the web. The ideas and concepts you learn here should be adaptable to most video-editing software. You can download and try both Adobe Premiere Pro and Adobe Premiere Elements for 30 days from the Adobe website.

    Digitizing Video

    Here are the steps necessary to capture and digitize video.

    Editing Video

    Importing other file types, and handling transitions.

    Adding and Editing Audio

    If you want to bring in music or a voiceover, you have some choices. You can import music from a CD or from a digital file on your computer. You can record a voiceover using audio editing software, or you can simply record your voiceover onto the video camera and capture it in the same way you capture video clips.

    Adding Titles and Other Graphics

    Titles are often text elements overlaid on black video or actual video. You can use a title to place the title of the clip on the screen or to add names, locations or credits.

    Delivering Video Online

    Video on the web has one major problem: video files are huge. Delivering large video files online is a problem because people can’t download them quickly enough to make them usable. There are two possible ways to handle this issue.


  • Getting Familiar with SWiSHmax

    Macromedia Flash is the weapon of choice for serious interactive animators, but the outstanding application SWiSHmax may be a better choice for those who need to get the job done with a minimum of fuss –  or for those who like its $99.95 price tag better than Macromedia Flash’s $699.95.

    Note: While SWiSHmax offers many of the same functions as Flash, the menus differ greatly, so these sections do not serve as a proper Flash guide. For help with Flash, check out the tutorial that Jane Stevens wrote for the UC Berkeley Graduate School of Journalism website.


    Creating a Basic SWiSHmax Animation

    Begin experimenting with SWiSHmax by creating a simple animation.

    Applying Effects in SWiSHmax

    There are more than 300 effects you can apply to objects in your movie. Some of these are quite simple – zooms and fades – and others are fun, pre-designed effects you’ll enjoy applying.

    Creating Buttons with SWiSHmax

    Many animations are created around interactivity, and the most common interface to begin an animation or cause an action is a button. In this section we look at how to create a button in SWiSHmax.

    Saving an SWF using SWiSHmax

    Once you have created an animation you want to use on a Web page, you need to export an SWF file from SWiSHmax. SWF is the format supported by Web browsers that can be placed into any HTML page.

    Creating a Simple Slide Show with SWiSHmax

    You can use a program like SWiSHmax to create attractive photo slide shows. Begin by preparing your images at the size you want them to be in the slide show using a graphics program.

    Getting More Help with SWiSHmax

    You’ve gotten started, but there is plenty more to learn. Here are a few good SWiSHmax resources.

Reporting Community Data

  • Forums and Feedback

    Your website is not only a tool allowing you to communicate with your readers, it’s also a good way to allow your readers to communicate with you and with one another.

    Polls and E-mail Surveys

    For community websites, some of the best uses for online polls and e-mail surveys are to get an early sense of issues that are surfacing on your residents’ radar screens. That sensibility can then be used as a fulcrum for reporting a full-fledged story, to take the community’s pulse on a particular issue, or to leaven discussions in your forums.

    Searchable Databases

    There are many kinds of community data available. Much of it exists in electronic format. With a little work, you can turn these into interesting interactive tools and news exercises for your readers.  Stumped for what to develop? Here are a few suggestions.

    Visualizing Data

    If you’ve worked with computers for any length of time, you know how easy it is to collect data, and yet how hard it can be to make the best use of that data. In this section, we’re going to suggest some ways you can help your audience understand the raw data you’ve collected. As a niche publisher, you have a special opportunity to gather and share data that might not regularly be available to your audience. Data in its raw form can be useful to a small subset of your readers. But if you take that data and put it into a meaningful form, such as a chart, a graph or a timeline, your audience can more easily absorb, remember and draw useful inferences from what was once just raw data.


  • Understanding Blogs

    Blogs, or web logs, are hot these days — among journalists, citizens, even CEOs. News organizations and freelance journalists are finding blogs to be a great way to encourage interaction with readers and to elicit immediate comments on the day’s news.

    Writing and Editing a Blog

    Writing a blog isn’t rocket science, but it also may not be quite as easy as it looks. A successful blog’s conversational style either comes naturally or it doesn’t. So does that sense of what topics will hit the mark with the blog’s audience.

    Choosing Blog Software

    There are many software options available for blogging. First, you must determine where the blog should live: Hosted or Installed.

    Managing Blog Comments

    Blogs come with their own set of problems. You can expect to have to deal with comment spam, Trackback spam and trolls.

    Quick overview: Wordpress and Blogger

    Thankfully, most blog systems are so easy to use, you won't need any help. But here’s a quick overview of how to get started.