Exporting Images for a Gallery

In Chapter 4, you looked at how to export images for a gallery. In Chapter 5, you looked at how to use actions and automation to speed up that process. In this chapter, there is a folder called Gallery Images that contains about 11 PSD files (g_image1.psd, g_image2.psd, etc.) that you will use to create a final gallery in Dreamweaver in Part 6.

An image gallery is composed of images that are JPEG, PNG, or GIF files. If the image is a logo or illustration with not much photographic content or major gradient transitions, then saving the image as a static GIF is OK. However, if the image contains a lot of color or photographs, then it is better to use a JPEG or a PNG image. PNG and JPEG are comparable in quality for photographs; however, in photographic images that you want a lot of detail, I find that JPEG is the best option. Nevertheless, if download time is a concern, the choice is up to you. You may have to compare different formats of them side by side, using the 2-up or 4-up tabs as in the Save for the Web (Legacy) dialog box in Chapter 4.

Ensuring that you have scalable images that can look good in a large or small format is also important. In some cases, you want to create images in one or more sizes, as you saw in Chapter 4’s Option 3 File ➤ Export As. In my case, if you look at g_image1.psd, I created the canvas size at about 400×600 pixels. Look at Figure 9-1, which is an average size for a website; it could be easily viewed on a desktop or tablet. And if I apply CSS, it can be scaled down to smartphone size.

Each PSD file has several custom layer adjustments, so creating an action set for these steps other than to set a similar image size would not be practical. However, if all of the images in your gallery only have minor color adjustments that were consistent throughout, then creating actions or a batch action may be the best workflow for you.

However, since you only have 11 images, to get the optimum quality, you will create a simple action called Export For Web that brings up the File ➤ Export ➤ Save For Web (Legacy) dialog box so that you can make minor adjustments to each file as you go along.

With your first image opens (g_image1.psd), go to the Actions panel and choose your images for the web folder set. Refer to Chapter 5, if you can’t remember how to work with Actions panel. Refer to Figure 9-2.

Click the Create New Action button at the bottom of the dialog box.

Name the new action Export for Web and click Record, as seen in Figure 9-3.

The Record icon is now on. It appears as a red circle, as seen in Figure 9-4.

Now go to File ➤ Export ➤ Save For Web (Legacy) dialog box. Refer to Figure 9-5.

At this point, you could choose a preset as a JPEG, PNG, or a GIF once you are content with the settings (I chose JPEG Maximum, optimized).

Now choose Save at the bottom of the dialog box. Refer to Figure 9-6.

If you have a website started, save this image into the Images folder; if not, save it in your current folder or your choice location.

Name the file. Make sure that the Format setting is Images Only and that Settings is Background Image, as seen in Figure 9-7.

Click Save.

The file is saved in the folder and the dialog box will close. An export action is added to the Actions panel. Refer to Figure 9-8.

You can now press the square Stop icon (on the left) to stop the action.

Look at Figure 9-9. If you explore the export action by clicking the toggle arrow, you see that there are a lot of settings.

These are all recorded so that you do not have to make the same adjustments each time.

To make sure that the dialog box opens when you play the action, click the squares (toggle dialog on/off) icons near the check box, as seen in Figure 9-10.

You can close the first image, and then select File ➤ Open to open g_image2.psd

This time, you just need to just select the Export for Web action from the Actions panel, and press Play for the action to play again. You can always make different adjustments or keep the same settings. In the dialog box, click Save and give this file a new name in your images folder. The action always keeps its original settings for each new file. However, if you keep the same image open and play it again, it uses the most recent setting in the export; so make sure to close the PSD files without saving changes and open it again to keep original export settings.

Take some time to save the 11 images as either JPEGs or PNGs for the gallery by using the action. You could speed up the process even further by creating a batch action or even a droplet, as in Chapter 5, if you had more image files to work with.

Now let’s move on to the second project.

Exporting a GIF Animation

In Chapter 6, you looked at some of the basic steps to create a simple GIF animation that could be used for instructional purposes or as a beautiful ever-looping picture for a webpage. In other cases, you may want a very subtle change to take place in the background of your website, such as a slight graphic background shift.

In Chapter 8, you looked at some miscellaneous tools that can be used for the web; one that is very useful is the offset filter for repeating backgrounds. You can create a repeating background, but you can also animate it and use CSS to make it only repeat on the x or y axis to create a division on the page or appear as a stripe across the top of the page. From a design point of view, I do not recommend covering the entire page with a repeating animated GIF because this would look gaudy; however, if done correctly, it can add interest to your website.

Let’s look at the GIF Animation folder and the background3_animated.psd file in your Chapter 9 folder. Refer to Figure 9-11.

In the Layers panel in Figure 9-12, you can see a pattern that I created using a gradient and filters such as crystalize and offset. This is to give the look of hot glass.

Play the animation using the timeline , and you will notice a gradual change in color. To make it look as if this was done gradually, I used tweening between a starting and ending frame, and added an adjustment layer photo filter to make it appear like the glass is cooling. Refer to Figure 9-13.

In this file, I added some transparent areas into the layers so that you have the option to blend my animation on top of other backgrounds.

There is a time delay for each frame, and the animation is set to play once.

Once the animation is complete, and you have previewed it using the Timeline’s play features, choose File ➤ Export ➤ Save for the Web (Legacy).

Refer to Figure 9-14 for all the settings .

Transparency is optional; in my case, the background is white, so you could leave it unchecked.

Choose a white matte. At this point, you could play the animation again to test it or adjust the looping.

Click Save the bottom of the dialog box. Refer to Figure 9-15.

This brings up an area for you to save your file. The format is Images Only and the settings should be Background Image, as seen in Figure 9-16.

Find your website’s Images folder and save it there with the other gallery images. Close the original PSD file without saving any changes.

Now that you have completed the second project, let’s look at project number three: the video poster.

Exporting a JPEG Poster Image for Your Movie for the Web

When you create a video for the web, it’s a good idea to have a cover page so that your audience will know what the video or movie is about; this is also known as a poster. Rather than let your video decide which frame the audience should see, a poster allows you to create a custom starting frame that gives information about a select scene in the movie. A poster can be a GIF, JPEG, or PNG file and it will always be the first thing the audience sees before the movie loads or starts. Let’s look at the Movie Poster folder and the poster_cover.psd file, as seen in Figure 9-17.

The Layers panel (see Figure 9-18) shows that the file has a background image and a Smart Object layer that is an illustration created in Illustrator CC.

The poster must be the exact same size as the final video; otherwise, distortion occurs and there is a size change when you click Play for the HTML5 video on your website.

In this case, it is 640 × 480 pixels.

You can now export the poster for the web, by selecting File ➤ Export ➤ Save for the Web (Legacy). You can save it as a JPEG or PNG because this is a colorful poster. Choose JPEG High with Quality set at 60, and check the Optimized box. Refer to Figure 9-19.

When done, click Save, as seen in Figure 9-20.

Save your poster in your Images folder so that you can link it in Part 6 for your video in Dreamweaver. Refer to the settings in Figure 9-21.

When done, close the PSD file without saving changes. You will now move on to the fourth and final project: rendering the video.

Rendering Your Movie

The last item you need to work on in Photoshop CC is rendering the video. If you have created your own video for a project with your footage, use it in these final steps; otherwise, follow along with the video I have created.

Open the Movie folder’s Movie_Glass_Tango_Part2.psd file. The file is linked to quite a few MP4 and MP3 files, so it may take a few moments to open. Also, you may get an alert saying that the files have become unlinked, as seen in Chapter 7, where I talk about video groups. You may need to relink the files; those that are in the same folder will automatically relink.

Make sure that the Timeline and Layers panels are opened so that you can see how I laid out the file and the links.

When the file is open, in the Timeline, go to the first frame (see Figure 9-22) using First Frame button; the preview screen is white.

As you move around the timeline, use the scrollers and make the track bigger and smaller with the zoom. Notice how I grouped some tracks, such as my intro animation and final credits into video groups. Other videos kept on their own tracks so that I could add a fade transition. Some tracks contain keyframes to keep the image centered while the action in the video is happening. Refer to Figure 9-23.

As you move to the next track, you move downward in the Layers panel. First layers or tracks should be on top so that they can be blended into the next scene, which is lower in the Layers panel. Keep this in mind when you organize your own video. Refer to Figure 9-24.

In the Glass Tango video, I also added a text layer that is seen on top of video footage. A text layer could have a text watermark that is seen throughout the footage. Refer to Figure 9-25.

Once I added the video layers, I dragged each track to the correct location in the video timeline before adding the transitions and audio. Often, you have to use the Play button several times to watch the video and stop the play head to make corrections as you go along. In this case, the video is set up for you, so use it as a guide for your future videos.

The videos that you create for the web likely will not have this much footage; possibly only 1 to 5 minutes in length. However, if you think your video will be longer than 20 minutes, a program like Premiere Pro and Adobe After Effects are better options for building longer stories with additional special effects.

Finally, at the end of the video Timeline panel, I added the audio tracks. In my case, I had three audio tracks. I removed the audio from my MP4 files because most of the dialog did not relate to the story. Refer to Figure 9-26.

I cannot name each audio layer separately to identify it; however, I can give a unique name to my audio files, like sound_name or voice, so that I know what is happening and can then refer to the original files.

The audio does not show up in the Layers panel, only in the video timeline.

The top audio track has my intro music, sound effects, and final credits music. The audio often butts up right beside the next, so you may have to use your play head to determine where you want the audio and then drag the track to the new location, as seen in Figure 9-27.

Be careful not to drag the sound beyond the range of the video tracks or layers; this increases the file’s length with no video footage. Refer to Figure 9-28.

The next audio track I added was my voice. I kept it at 100% volume so that you can hear me narrate the actions of the people creating the glass vase (Robert Gary Parkes and his apprentice, Jay). Your video may not contain narration, but you might use this track as an area to dub in another language, or the thoughts or backstory of a character as they are doing some action, or someone who is not yet in the scene or who left the scene; this is known in the movie industry as split edits, or J cuts and L cuts.

The Lower audio track in my Hot Glass Tango video is the background music. If you listen to most commercials or movies, when the actors are not talking, or even sometimes when they are talking, music is often quietly playing in the background; usually, at a lower volume than the voices speaking.

Background music enhances the scene and often adds excitement and sets the mood. I find it beneficial when there are gaps in dialog to keep the flow of the story so that the silence is not tedious. Nevertheless, there are times where silence is good and gives a transitional break. You can always fade or overlap sound so that you go from music to silence at key moments.

Once you have previewed the video and adjusted the audio tracks to the correct location, it’s time to render the video.

At this point, make sure that you are working with all files on the external drive, and then in the Timeline panel, choose the Render Video icon, or File ➤ Export ➤ Render Video. Refer to Figure 9-30.

Refer to the steps in Chapter 7 regarding rendering video (see Figure 9-31).

You can select a folder and create a subfolder, or render into the same folder as your files. Just make sure that with each new render, you delete any old files that you do not want to save.

In my case, the program is rendering with Adobe Media Encoder CC. I have it installed on my computer from the Creative Cloud. You will look at this program more closely in Part 5; otherwise, I keep the format at H.264 (MP4) and the document size at 640×480, and the frame rate at 30 fps. All other settings are the same as what’s seen in Figure 9-30. I kept the preset at high quality, but for your video, you may want to choose medium or low quality, depending on your audience. Refer to Figure 9-32.

There are presets that give a variety of frame rates and varying dimensions. Just be careful to choose the correct width, height, and frame rate for your video in the preplanning stages; otherwise, you may get some unexpected results or grainy footage if you upscale, change the field order, or adjust the aspect ratio.

Media Encoder can determine the dimensions and frame rate of your raw video files before you bring them into Photoshop. You’ll look at how to check this in Part 5.

For the range, render all frames (see Figure 9-30); however, you may want to render only part. If you know which frame a scene and audio starts and stops, you should be able to do this successfully.

In this case, you do not touch the render options because you have no 3D graphics or alpha channels.

When done, press the Render button on the right of the dialog box. The video will begin to render into the folder in your external drive.

Rendering may take a few minutes or an hour, depending on the size of the video and how fast your computer is. If you have another computer, do some other work while the rendering is happening.

Once the file has rendered, you should find it in the folder you assigned for output. You can preview it in your computer’s media player. At more than 17 minutes, my file is a little over 806MB, which is probably the largest size limit I would want for an HTML5 video file that streams online. As for duration, it’s as long as I would want to hold the audience’s attention.

When you are done looking at Movie_glass_tango_part2.psd, be careful that you do not save the original file. Close the file. Refer to Figure 9-33.

You have now completed the final project in Photoshop CC.

Summary

In this chapter, you reviewed how to create images, GIF animations, a poster image, and video for the Hot Glass Tango website. This chapter concludes your study of Photoshop. At this point, review any areas of Part 2 that you don’t understand so that you feel comfortable with working with your own graphics in Photoshop.

In Part 3, you journey to the next junction point in the software maze: Adobe Illustrator CC. You’ll discover how it can be used to create web graphics.