Where Should You Begin?

Adobe Creative Cloud is an amazing collection of software that allows you to render your thoughts in a digital or physical form. Whether the artist has been in the graphics industry for one year or fifty, and whether creating a layout for a book, designing a painting for a gallery, creating an animated video, editing sound, or creating a three-dimensional form—all of this is possible.

However, if you haven’t upgraded your Adobe software skills for a while, or you are just starting to use the Creative Cloud, the various software choices can look intimidating. It’s very much like entering a maze or labyrinth, as seen in Figure 1-1.

In this book, you focus on how to work with graphics images, animations, video, and audio that will be added to a mobile-friendly website. As you progress through the book, your initial perception of what an animation is may change. Let’s start by looking at some of the Creative Cloud console software apps, as seen in Figure 1-2.

Take the time to scroll through the list in the Apps tab and see all the software that is available. The amount of software can appear overwhelming to a first-time Adobe user.

How Will You Get to Your Destination?

I teach Adobe Dreamweaver at a college. You’ll be looking at Dreamweaver in Part 6 of the book, which is where you add your multimedia to various web pages. I don’t teach my students how to use Photoshop or basic HTML coding; so before they come to my Dreamweaver class, I expect that they have taken a few introductory courses on web coding and Photoshop. This is to ensure that when they start adding images to HTML5 web pages, they know which file formats are acceptable for a website. However, not everyone comes to my class with the same level of skills or knowledge about image formats. If they haven’t learned the basics, they are overwhelmed by choices when new concepts, like video and animation, are presented. I think this same feeling applies when you look at how Adobe Creative Cloud uses its various software for website creation, as seen in Figure 1-3.

A Visual Map of How the Creative Cloud Software Works

Let’s look at the diagram in Figure 1-3. If these are the operations for creating a website in Adobe Creative Cloud CC 2019 software, you can see there is a lot going on. However, in smaller companies, or if you are a student, you may be more familiar with one program than another. I’ll guess that even some veteran Adobe designers have never seen some of these software icons before. If some of the software is unfamiliar to you, take a moment to click the What’s New link in your Creative Cloud console and read up on what the software is used for. Refer to Figure 1-3 to compare icons.

So, at this point, you might ask, “Do I need to learn all of this software to build a website?” No. To build a website that you can add multimedia to, let’s narrow the selection to the five core programs that I discuss in this book (see Figure 1-4).

Choosing the Smallest Number of Adobe Software Programs to Accomplish Your Goals

From a web design point of view, the following describes what these programs are used for (see Figures 1-3 and 1-4 for a review of the icons).

• Photoshop CC (Ps) : Used for creating and editing still images from a camera, scanning or drawing from your imagination, creating simple animations and videos.

• Illustrator CC (Ai) : Used for drawing images using vector (scalable) shapes for stills or animation frames.

• Animate CC and Mobile Device Packaging (An) (formerly known as Flash): Used for creation of HTML5 animation and movies with or without audio.

• Media Encoder CC : Used for formatting and basic movie creation to the correct web video or audio format. For more advanced editing of video clips, a program like Premiere Pro CC (Pr) or After Effects CC (Ae) is used before formatting in Media Encoder. For audio, use Audition CC (Au).

• Dreamweaver CC (Dw) : Used for creating a website with pages that include text, images, and other types of multimedia. ( I will not focus on Muse CC(Mu) for this book, because while you can use it to initially build simple websites, once it is brought into Dreamweaver CC for a more complex task, you cannot return to Muse. If you attempt this, it may corrupt or render the files useless. Also Muse is no longer part of the Creative Cloud package.)

Note

If you are skilled in any of the software shown in Figure 1-3, feel free to use it along with the projects discussed in later chapters. If you have used Project Felix (Fe), please note that it was rebranded as Dimension CC (Dn) for the 2018 version (see Figure 1-5).

Each part of this book focuses on a core Adobe Creative Cloud software as it relates to graphics and multimedia.

• Part 2: Photoshop

• Part 3: Illustrator

• Part 4: Animate

• Part 5: Media Encoder

• Part 6: Dreamweaver

• Part 7: Looks briefly at software that you can use to further enhance your web design experience, such as InDesign’s EPUB files and interactive PDFs. The versions of software I used were CC 2018 and 2019.

Once you narrow down the software that you will use, the maze looks less complicated (as shown in Figure 1-6).

You can see your destination or goal in the center of the maze: Dreamweaver. However, the path still takes several twists and turns. Why?

The twists and turns represent choices that you must make when deciding which web format to choose for your final multimedia files in Dreamweaver. Poor format choices mean wrong turns and usually cause you to retrace your steps. Good choices lead you to getting your project done on time. At the start of each of the book parts—on Photoshop, Illustrator, Animate, and Media Encoder, you see a graphic representing the software, or in the maze, a junction point (see Figure 1-7).

You can choose any of the following file formats or paths that this software offers. However, if you don’t understand why you are using a format, you may be making a poor or uninformed choice.

Summary

In this chapter, you looked briefly at the several types of graphic software for developing a website available in the Creative Cloud suite. At first glance, the choices appear overwhelming—until you narrow it down to five core software choices: Photoshop, Illustrator, Animate, Media Encoder, and Dreamweaver. Once you choose a program, however, you need to choose which type of file format to export your multimedia to the web.

In Chapter 2, the first stop in the software labyrinth is Adobe Photoshop CC, where you discover how to create graphics and video for a website.

Working with Your RAW and Layered Files

Let’s begin by opening Photoshop CC. I am working with the CC 2019 version. If you do not have Photoshop on your computer, but you do have the Creative Cloud application, click the Install button beside the Photoshop icon (see Figure 2-4), and follow the instructions on how to install the program.

If you already have Photoshop CC installed on your computer, double-click on the icon. Or, in the Creative Cloud application, click Open to launch the program, as shown in Figure 2-5.

Once Photoshop opens, set up your workspace so that yours is the same as mine.

I chose Graphic and Web in the Workspace icon (in the upper right), as seen in Figure 2-6.

If you have already used the Graphic and Web workspace, you can choose Reset Graphic and Web from the menu to return the workspace to its default settings.

Or, if you prefer, you could work with the Essentials workspace since it offers the full range of tools in the Tools panel, as seen in Figure 2-7.

Clicking the Edit Toolbar icon opens the Customize Toolbar dialog box so that you can drag tools from Extra Tools on the right to the left into the toolbar; as you do so, the toolbar updates. You can also group tools together by hovering an extra tool over a current tool in the toolbar when a blue line appears under the other tool, as seen in Figure 2-9.

You can also remove tools by dragging them back to the Extra Tools side. Or you can choose restore defaults to add all tools, or clear tools to remove all tools. Likewise, you can load presets that others created or save your own presets. When you have added the tools you require, click Done, or Cancel to exit without making any changes.

Your layout should now look something like Figure 2-10.

If you prefer another workspace for your web design, you can always choose a different one or create your own custom workspace (New Workspace) as seen in Figure 2-6.

Creating a New File

If you want to create a new file, choose File ➤ New, as seen in Figure 2-11.

Photoshop CC has organized many of its standard layouts as tabs so that you can easily choose a layout for your project, whether for photos, print, web, mobile or film and video. You can create your own custom sizes. You can use an artboard, where you have two or more layered layouts display (see the Layers panel when a file is open) within one .psd file. However, when you begin creating a file that you are planning to use for the web, make sure that the color mode is set to RGB Color, as seen in Figure 2-12. You’ll learn more about color in Chapter 3.

When you have the correct settings, click the Create button on the bottom right of the New Documents dialog box, as seen in Figure 2-13. Your new file will open.

At this point, you begin to add Layers via the Layers panel, as seen in Figure 2-14, and design your artwork using one or more of the tools in the Tools panel.

While you can always create your files directly in Photoshop CC, you may have collected or acquired your original images in other file formats. Here I have listed some of the ones you will likely encounter. In the main menu, go to File ➤ Open.

• Bitmap (.bmp): This file is often created when you scan a file with your office scanner. It is common in Windows-compatible computers. While it can be used on the web, the file size is often quite large, so it’s better to save a copy in a file format suited for the web.

• TIFF (.tif,.tiff): Often, graphic artists will save a final single layered piece of artwork as a TIFF file. These files are considered images that do not lose quality (lossless) as copies are saved from them. They retain their original size; no compression of data occurs.

• Photoshop PSD (.psd, .pdd, .pstd): While creating your graphics, you may save your files with multiple layers. Photoshop PSD files allow you to retain these layers, effects, and masks. After you save and close the file, you can always come back another day and continue to edit it until you are ready to export a flattened copy to the web.

• Large document format (.psb): Sometimes the file size of a layered file can become very large such as over 2GB. Layered files over this size are often saved as a .psb known as a Photoshop Big to preserve the file quality.

• Camera RAW or digital negative (.dng): A camera raw image file is in a camera-specific proprietary format that is essentially a “digital negative,” with no filtering, white balance adjustments, or other in-camera processing. You need the Camera Raw program plugin to install with Photoshop CC to view these files. Refer to Figure 2-15.

While these are all good file formats for your original files (except for the bitmap and JPEG files), you cannot display the other formats in most browsers.

Note that Photoshop can open many other file formats, including video (see Figure 2-16).

Or if you choose File ➤ Open As, you will see the Camera Raw option for opening the files shown in Figure 2-17.

For more information on other formats, visit https://helpx.adobe.com/photoshop/using/file-formats.html .

Image Files from Other Adobe Programs

Your image files might originally come from Adobe programs like Illustrator CC (.ai and .eps files), Lightroom CC (Camera Raw), Dimension CC to create 3D shapes (.png or .psd), Fuse CC to create 3D characters as (.obj and .png) files, and Adobe Acrobat PDFs. All of these files can be opened and saved as pixeled raster images within Photoshop.

For example, in Illustrator CC, you can File ➤ Open and save a copy as a pixilated image or as a smart object that can be in a layer and later scaled. You can choose File ➤ Open As Smart Object. Find an Illustrator (.ai) file in your open dialog box and click Open to see the dialog box, as seen in Figure 2-18.

Click OK and then choose Duplicate Image to create a copy, as seen in Figure 2-19.

Then save the new file as a PSD, or select the smart object layer and then drag it into your new file. Be careful not to edit the original smart object by double-clicking on the layer, which will open the smart object layer in a new window or in the Illustrator CC. Refer to Figure 2-20.

If you get a warning message from Illustrator CC, just click Cancel to prevent the file from opening, and return to Photoshop CC.

In Photoshop, you can make further outward adjustments to the Smart Object by using masks, layers, effects, blending modes, or tools to alter color and shape. You can also Edit ➤ Transform to resize the image without it losing quality because it is a Smart Object. As seen in Figure 2-21.

When you are done, you can save any open file by selecting File ➤ Save, and then File ➤ Exit exit to Photoshop CC or keep Photoshop open for the next chapter.

Summary

In this chapter, you looked at how to set up a workspace in Photoshop. You also looked at some of the different image file formats that you can open within the Photoshop program. You can either create your own files with Photoshop or work with images that come from another source, such as another Adobe program like Illustrator, or from a camera, scanner, or another client. In the next chapter, we explore the correct color choices for your web design projects.

Adjusting the Image Size and Resolution

As a last step before exporting your image to a web format, you can adjust its final size and resolution by going to Image ➤ Image Size.

Figure 3-17 shows the vase_image.psd image to set a final size for the image and resolution before exporting.

If you are reducing the image, a resample setting of Bicubic Sharper (reduction) is the best setting for an image that will become smaller with a lower resolution as seen in Figures 3-17 and 3-18.

Much of this resampling can be done when you export the file, as you will see in the next chapter where we look at the resample setting in more detail.

If you want to crop the image’s canvas, rather than make the resolution smaller, go to Image ➤ Canvas Size (see Figure 3-19).

You can also use the Crop tool found in Tools panel. Its settings are in the Options panel. The crop options are seen in Figure 3-20.

Use the handles on the Crop tool to size the image. Alternatively, choose a ratio option from the control panel to adjust the size to get a specific width and height, as seen in Figure 3-21.

If you don’t want to use the Crop tool, either right click on the image and choose cancel from the pop-up menu, as seen in Figure 3-22. Or click the cancel current crop operation symbol that will appear in the control panel. And then choose another tool from the panel.

When you are done looking at color choices, you can save any open file with File ➤ Save. File ➤ Exit to exit Photoshop CC, or keep Photoshop open for the next chapter.

Summary

In this chapter, you looked at some of the color choices and modes that are available to prepare images for your website. Some modes are better for print, like CMYK and Duotone; others, like RGB and Index, are meant for the web. You also took a look at how to further adjust the size and resolution of an image before export.

In Chapter 4, you look at how to make further adjustments or optimize your image files during export. Photoshop CC gives you several menu options for export, but figuring out which method is best for your workflow can be a challenge if you have many files to work with and multiple conversions to make.

Option 1: File ➤ Save As…

File ➤ Save As... is probably the fastest option to use if you only have one or two images to add to your website (see Figure 4-1).

You are then presented with options from the Save as type drop-down menu in the Save As dialog box, as seen in Figure 4-2.

However, as you see in Figure 4-2, you can’t adjust or preview initial settings for that file until you click the Save button. Depending on the file format, only then are you able to click the preview check box in that particular file format’s dialog box. Whatever format type you choose, you can’t switch to another file format to compare both of your options at the same time.

To avoid overwriting your current file, if it’s in the same folder, select As a Copy in Save Options. Depending on the file type chosen, some options are not available. You can also confirm the color profile for this file as well. When done, click the Save button to save your file, or Cancel to exit, as seen in Figure 4-3.

Next are some settings that may appear for each web file format when you click the Save button.

Bitmap (BMP)

A bitmap, which is common to Windows computers, can be a created from a scan with your home or office scanner. It also can be used on a website. Often, its file size is large. Generally, when a person builds a website, they want to keep the images small so that they upload quickly. If you want to save a file as a .bmp file, you can adjust the setting in the BMP Options dialog box. Figures 4-5 and 4-6 show basic and advanced modes; use the button to toggle between the two.

The BMP file options have a toggle that you can use to set in either Basic Modes or Advanced Modes. In Basic Modes, you can set the file format to Windows or OS/2. You can also adjust the bit depth to 16, 24, or 32. Note that because I used the .bmp file extension, Compress (RLE) is unavailable. The “Flip row order” box refers to how the encoding is written, either from bottom to top or in reverse. According to Adobe, “Advanced Modes are most relevant to game programmers and others using DirectX.”

JPEG

When you save your file as a (.jpg), the JPEG Options dialog box allows you to alter your setting while previewing your image, as seen in Figure 4-7.

If the image (.psd) has more than one layer with some transparent areas in the image, and there is no background (Layer 0), then the Matte background option is available; otherwise, it is set at the default None, so its unavailable. For color options, you can choose the current Foreground or Background colors that are in your Tools panel. You can also choose White, Black, 50% Gray, or Netscape Gray, which is about 25% gray (see Figure 4-8).

Custom brings up the Color Picker window, where you can choose whatever color you want. When it opens, it shows the last color that you picked in the list (in this case, Netscape Gray). Figure 4-9 shows the options.

Image Options refer to the quality of the image. You can either adjust the quality by typing a number quality from 0 to 12, by choosing a setting from the drop-down menu (Low, Medium, High, or Maximum), or by dragging the slider between the small file and the large file. Whatever option you choose, the number box, drop-down menu, and slider all reflect the changes, as seen in Figure 4-10.

The number 0 results in a low, grainy image, while a high number like 12 results in a larger image with maximum quality. The size of the file can be seen in the Preview setting.

You can also choose Format Options.

• Baseline (“Standard”): Recognized by most web browsers and good for photos that need decent quality. It is supported by all browsers.

• Baseline Optimized: Similar to standard but compresses the file a little more. Depending on the image, the quality is indistinguishable from baseline standard.

• Progressive: Creates an image that displays gradually as it downloads. It appears as if the image is rendered as scan lines (like in the days of the old-fashioned tube TVs). At first, the browser quickly shows a reduced quality image of half the scan lines while it resolves the complete image. You can set between three and five scans to take place in this setting: however, with a fast Internet connection, this setting is not used as often.

Note

According to Adobe, some browsers do not support progressive JPEGs, so if you want to use this setting, run a test first.

PNG

The PNG is considered a good compromise between a JPEG and a GIF since it can be used for photos that retain good color quality and can maintain transparency. However, you will notice that if you use the File ➤ Save As option for your image, you do not have access to the preview or transparency in PNG Format Options. Refer to Figure 4-11.

The following are available.

• Large file size (Fastest saving): Less compression is applied, so it saves faster.

• Interlacing: Similar to the Progressive option in the JPEG setting. The image loads in parts, gradually becoming clearer with each scan.

• Medium file size (Medium saving): Some compression is applied, so it saves more slowly than large.

• Smallest file size (Slowest saving): More compression is applied to the file and it may take longer to save.

Unlike the JPEG dialog box, you won’t know how small your file will be until after it is saved.

CompuServe GIF

Because GIFs only use 256 indexed RGB colors, they are best for items that contain solid areas of graphics, such as logos or cartoon illustrations. The fewer the number of colors, the smaller the file size. Photos do not always reproduce at the best quality in a GIF. You can preview a GIF behind the dialog box, and a color lookup table is produced for the GIF. If a color cannot be reproduced, it is dithered to simulate the color. You can also reach this same dialog box via Image ➤ Mode ➤ Indexed Color, but that will affect the current image and not a copy. Either way, you may be asked to flatten the image if you have not already done so. Click OK. Refer to Figure 4-12.

You can control the number of colors that the file has by using the Palette drop-down menu to set the colors that best represent the image, as seen in Figure 4-13.

The following options are from the Palette drop-down menu.

• Exact: Shows the current number of colors. Some files will have less than 256 colors.

• System (Mac OS): 256 colors for a macOS system palette.

• System(Windows): 256 colors for a Windows system palette.

• Web: 216 colors, also known as Restrictive. This compensates between Mac and PC computer monitors. If your image does not have 216 colors, the number of colors may be lower.

• Uninform: Type your own setting into the Colors area.

• Local (Perceptual): Creates a custom pallet of color that gives priority to the colors that the human eye has greater sensitivity to, or that are more pleasing. (Master refers to a master palette that you may have created earlier).

• Local (Selective): Similar to Perceptual, but also favors the broad range of continuous colors and the preservation of colors on the web. This usually produces an image with the greatest color integrity.

• Local (Adaptive): Samples colors that appear most commonly in the image. Images with a majority of red have a greater concentration of red shades.

• Custom: Allows you to create a custom pallet in the Color Table dialog box at Image ➤ Mode ➤ Color Table, as you can see in Figure 4-14.

You can click a color block and then edit it in the color picker, as seen in Figure 4-15. You can then save or load a table. It is saved as an .act file.

The Color Table’s Eyedropper tool (on the right in Figure 4-14) allows you to sample colors.

The following continues from the drop-down palette menu Figure 4-13.

• Previous: A custom pallet from a previous conversion.

• Colors: Determines the exact number of colors in the image, as seen in Figure 4-16.

• Forced: This includes specified colors to be included in the conversion, such as black and white, primaries (red, green, blue, cyan, magenta, yellow, black and white), Web (216 web safe color), or your own custom colors that you can sample using the Color Picker when you click a color, as seen in Figure 4-17.

The Transparency option lets you determine if the image contains transparency. If it is unchecked, the image is filled with a matte color of choice (see Figure 4-18).

Let’s look at the Options section of the Indexed Color dialog box. If the original image has transparent areas, more than one layer, and no background (Layer 0 or turned off), the Matte background option is available; otherwise; it is default at None, so unavailable. As with JPEG images, earlier similar color settings are available. Refer to Figure 4-19.

• Custom: Brings up the color picker so you can choose your own color. The custom color or any Matte option will then blend into the area where the transparency once was.

• Dither: When you reduce the number of colors, the image may not blend well. You can use the options shown in Figure 4-20 to adjust this.

• None: The default for no dither.

• Diffusion: A random structure dither that is good for preserving delicate details and text in logos.

• Pattern: A halftone-like square pattern.

• Noise: Reduces the edge pattern if you are working with edges if you plan to slice your image for an HTML background with a <div> tag or within a table. (You will look at slices in Chapter 5.)

• Amount: You can adjust the amount of dither by percentage. Refer to Figure 4-21.

• Preserve Exact Colors: This preserves the colors in the table from dithering.

Photoshop PDF

A PDF does not preview unless you click the file link on a web page and it is downloaded into the browser. You may want to save some images as a PDF by using Photoshop rather than placing them in a program like Adobe InDesign CC and then saving the file as a PDF. Either way, make sure that Acrobat DC Pro is installed on your computer so that you can use the distiller to create the PDF. Refer to the program icons shown in Figure 4-22.

When you save the file as a Photoshop PDF, you receive the alert shown in Figure 4-23.

Click OK and continue to the next dialog box. If you have used a program like Adobe InDesign CC, you will find the export setting familiar.

Here you are presented with various tabs, including Presets, Standards, and Compatibility, which you can choose from the drop-down menus. Refer to Figure 4-24 to see the assorted options and click the tabs on the left to get an overview of these settings.

• General: The main settings that allow you to preserve the file should you want to edit it again in Photoshop, embed a thumbnail, optimize for fast web preview, or view the PDF after saving.

• Compression: Distinct options for down sampling images and adjusting image quality within the PDF. Refer to Figure 4-25.

• Output: Deals with color and file conversion, as seen in Figure 4-26.

Security: Sets security features for an image so that users who don’t know the password can’t open, print, or edit it, including those with screen readers. If you don’t want security, leave these settings unchecked. Refer to Figure 4-27.

• Summary: Lists all the settings and any warnings that may need to be corrected before pressing OK. Refer to Figure 4-28.

Once you have set your settings, click the Save PDF button in the bottom right of the dialog box (see Figure 4-24). A PDF is created, which you can view in Adobe Acrobat Pro DC or Reader.

Option 2: File ➤ Export ➤ Quick Export as PNG

You can use this option if you want to save a PNG file quickly without going through a dialog box: File ➤ Export ➤ Quick Export as PNG.

This option is only for PNG files. You cannot save the file in any other settings, and it only saves the file as a .png. Personally, I don’t like this because it does not provide a dialog box to choose settings if each image is slightly different.

If you want to know what the Quick Export setting is, you can check it under File ➤ Export ➤ Export Preferences. This opens the Preferences Export tab, where you can view or alter the settings. Refer to Figure 4-29.

Unlike in Option 1, however, you can choose if the PNG is transparent or not. Also, you can set the file to a smaller 8 bit or leave it at the larger size. Other options include the export location, metadata, and color space of sRGB. Click OK if you want to save the preference changes.

JPEG

If you are in the Export options and you switch to JPEG, you can only set the quality by number. Options like standard and progressive are not available. You can set the export location, metadata, and sRGB color space, however. Refer to Figure 4-30.

GIF

In the Quick export options you can switch to GIF, however there is no option to allow part of the GIF to remain transparent. Also, you cannot look at the color palette here. You can set the export location, metadata, and sRGB color space, however. Refer to Figure 4-31.

SVG

SVG is a scalable graphic format. You can keep the vector-like shape of the image so that it does not become pixelated when scaled larger, as the other bitmap images would be. You can set the export location, metadata, and sRGB color space. Refer to Figure 4-32.

Quick Export Format is quick, but not always the best because it does not give all the options to format the images, or the option to preview your changes.

Options 3: File ➤ Export ➤ Export As…

The next option to look at is the Export As dialog box. This example allows you to control and preview your settings at the same time. As you can see, many of the options that are within the Export Preference settings can be found here. You can create several images with different scaling sizes and unique suffix names.

PNG

Choose PNG from the File Settings Format menu, as seen in Figure 4-33.

• File Settings: Format: PNG or select another from the menu, set transparency, and set a smaller file size.

• Image Size: You can scale the original size of the image by width, height, and percentage, and the way that the pixels resample. Refer to Figure 4-34.

• Bicubic: Examines the values of surrounding pixels. Using complex calculations, Bicubic produces smoother tonal gradations than Nearest Neighbor or Bilinear.

• Bicubic Automatic: Chooses the resampling method based on the document type and whether the document is scaling up or down.

• Bicubic Sharper: Reduces the size of an image based on bicubic interpolation with enhanced sharpening. This option maintains the detail in a resampled image. If Bicubic Sharper over-sharpens some areas of an image, try using Bicubic.

• Bicubic Smoother: Produces smoother results when enlarging images based on bicubic interpolation.

• Bilinear: Adds pixels by averaging the color values of surrounding pixels. It produces medium-quality results.

• Nearest Neighbor: A fast but less-precise method that replicates the pixels in an image. Used with illustrations containing edges that are not anti-aliased to preserve hard edges and produce a smaller file. It has been known to produce jagged effects, which becomes apparent when you distort or scale an image or perform multiple manipulations on a selection of the graphic.

• Preserve Details: A type of noise reduction for smoothing out noise as you upscale the image.

In this dialog box, you can also adjust canvas size separate from the image size, the metadata, and the color space. Refer to Figure 4-35.

JPEG

The JPEG format has a similar setting to PNG; however, you cannot adjust the matte background settings. Refer to Figure 4-36.

GIF

The GIF format has setting similar to PNG; however, you cannot adjust the transparency or matte background settings. Refer to Figure 4-37.

SVG

SVG has settings similar to a PNG file; however, you cannot control the color profile as you can with the others. Refer to Figure 4-38.

When done, you can set more than one size for the same file on the left with the plus (+) icon. Next, choose Export All from the bottom of the dialog box, and then choose a folder to save the sizes in. The suffix that is added to the file lets you know which size was chosen. Use the Trash icon to remove sizes. Refer to Figure 4-39.

Option 3’s File ➤ Export ➤ Export As has a better preview option than Option 1’s File ➤ Save As, but it does not allow you access certain matte and transparency options that you might need for some image projects. Is there a way to have it all for your raster images?

Option 4: File ➤ Export ➤ Save for Web (Legacy)

Personally, Option 4 is my favorite method to use when it comes to saving files for the web. It offers the most options when it comes to working with GIF files. Refer to Figure 4-40.

The Save for Web (Legacy) dialog box has been used in many versions of Photoshop. It’s similar to Export ➤ As, but it has many more options, including allowing you to save a GIF with transparency or as an animation, as you can see in the lower-right animation panel. You can even access the color table as you would using File ➤ Save As ➤ GIF. What’s so wonderful about this layout is that you can use it to compare up to four layouts of the same image in different file formats or settings, and then you can choose which graphic adjustment looks best and uses the least amount of kbps (kilobytes per second). While size may not matter for viewing on your home computer, consider how fast the graphics load on a smaller device, like a tablet or smartphone. Refer to Figure 4-41.

On the left side are a few tools. Refer to Figure 4-42.

• The Hand tool (H) allows you to move to the different selections and moving all image previews in the tabs at the same time.

• The Slice Select tool (C) allows you to select slices in an image and edit them if you created any earlier using the slice tool. You’ll look more at this tool later in Chapter 5.

• The magnifying glass, or Zoom tool (Z), allows you to Zoom in on an area so that you can compare all images and their colors in that area at the same time.

• The Eyedropper tool (I) allows you to select a color in the image and then check it in the Eyedropper Color pallet. Once you know the color, you can then use this color for a pallet background color, or add it to swatches, or check Color Libraries.

• The last tool is Toggle Slices Visibility (Q), where you can turn the slices preview on or off as you preview an image.

Moving over to the right, there are several different presets that you can choose from or make your own. While you can work with most web bit-map file formats. The only file format that you cannot preview in this area are SVGs, which are vector. If you are working with SVGs, refer to Option 3: Export As settings. Refer to Figure 4-43 for the presets.

In the menu, you can save settings and optimize file size, as well as link and unlink slices.

In the Color Table options (see Figure 4-44), you can add new colors, delete, edit, and sort colors so that you have the optimum quality and file size.

Let’s now look at the file formats that we can work with for the web, and review some of their options.

GIF

While you can use several presets that are available to GIFs, as seen in Figure 4-43, you can create your own settings. Refer to Figure 4-45.

In the next drop-down menu (color reduction algorithm), whatever option you choose will alter the color amount.

• Perceptual: Creates a custom palette of color that gives priority to the colors that the human eye has greater sensitivity to, or that are most pleasing.

• Selective: Similar to Perceptual, but also favors the broad range of continuous colors and the preservation of colors on the web. It usually produces an image with the greatest color integrity.

• Adaptive: Samples colors that appear most commonly in the image. Images with a majority of red have a greater concentration of red shades.

• Restrictive (Web: 216 colors): Compensates between Mac and PC computer monitors. If your image does not have 216 colors, they are removed. Sets Colors to Auto.

• Custom: You can create a custom pallet in the Color Table dialog box. Sets Colors to Auto.

• Black and White: Sets the colors to black and white. Sets Colors to Auto.

• Grayscale: All the shades of gray. Sets Colors to Auto.

• System (Mac OS): There are 256 colors for a macOS system palette. Sets Colors to Auto. The color table differs by operating system.

• System(Windows): There are 256 colors for a Windows OS system palette. Sets Colors to Auto. The color table differs by operating system.

The following are in the Specify the Dither Algorithm drop-down menu.

• No dither: The default for no dither or none.

• Diffusion: A random structure dither that is good for preserving minute details and text in logos.

• Pattern: A halftone-like square pattern.

• Noise: This reduces the edge pattern if you plan to slice up your image for an HTML background with <div> tag or within a table. (You will look at slices later in chapter 5.)

• Dither: You can adjust the amount of dither by percentage. Check whether you want transparency and then choose the type of dither, which is like the other dither setting but for transparent sections in the Specify transparency Dither Algorithm drop-down menu.

  • No Transparency Dither

  • Diffusion Transparency Dither

  • Pattern Transparency Dither

  • Noise Transparency Dither

• Amount: You can adjust the amount of transparency dither by percentage. If you are not using a transparent background, set a matte color that fills in the transparent area, which can be the same as the background color for your site or whatever color you choose. Do this in Other, which brings up the color picker. Refer to Figure 4-46.

• Interlaced: Similar to the Progressive option in the JPEG setting. The image loads in parts, gradually becoming clearer with each scan.

• Web Snap: Snaps close colors to web pallet based on tolerance.

• Lossy: Controls the amount of file compression for that specific file format.

• Covert to sRGB: Makes sure the file is in the correct sRGB setting.

• Preview: Displays how the colors appear in monitors or screens.

• Metadata: Sets information on the file, such as copyright and contact information.

• Color Table: Shows which colors are currently in the table. You can edit these settings.

• Image Size: Allows you to adjust the size of the image using pixels in a uniform proportions (linked), separately (unlink), or by percentage, and sets the quality.

The following are from the quality (resampling method) drop-down menu:

• Nearest Neighbor: A fast but less-precise method that replicates the pixels in an image. Used with illustrations containing edges that are not anti-aliased to preserve hard edges and produce a smaller file. It has been known to produce jagged effects, which becomes apparent when you distort or scale an image, or perform multiple manipulations on a selection of the graphic.

• Bilinear: Adds pixels by averaging the color values of surrounding pixels. It produces medium-quality results.

• Bicubic: Exams of the values of surrounding pixels. Using complex calculations, Bicubic produces smoother tonal gradations than Nearest Neighbor or Bilinear.

• Bicubic Smoother: For enlarging images based on Bicubic interpolation but designed to produce smoother results.

• Bicubic Sharper: Reduces the size of an image based on bicubic interpolation with enhanced sharpening. This option maintains the detail in a resampled image. If Bicubic Sharper over sharpens some areas of an image, try using Bicubic.

You can also preview a GIF animation and choose the amount of time it loops. We look at this setting in more detail in Chapter 6.

JPEG

JPEG has some similar settings to GIF in this dialog box. You will only note the different settings here. Refer to Figure 4-47.

You can either set the quality via the drop-down menu (Low, Medium, High, Very, High, or Maximum) or in the Quality text box by typing or using the slider. They all reflect the results of the change. Refer to Figure 4-48.

• Progressive: Refers to how the quality becomes greater with multiple passes or scans.

• Blur: Can be adjusted to reduce artifacts or graininess in a photograph, though the image may not appear as sharp and clear as it was before.

• Matte: Since JPEGs cannot have transparency, adding a matte background to match your website’s solid background is an appropriate choice in an area you would normally consider transparent.

• Embed Color Profile: Allows you to include color information with the file (ICC Profile).

As with GIFs, you can make sure they are set to sRGB, view a preview, and set the metadata. You cannot use the Color Table because the file is in RGB and not indexed. Digital Photos in the JPEG format use many more colors, so there would be too much color information to include in a color table.

Like the GIF files, you can also adjust the size and quality of the image with various settings.

PNG-8

This file format for 8-bit files has many of the same settings as a GIF file (refer to this area if you are unsure what an unfamiliar setting does). You will look at only the different ones here. Refer to Figure 4-49.

Like GIFs, you can set transparency and work with the Color Table.

• Embed Color Profile: Allows you to include color information with the file (ICC Profile).

Note

Unlike GIFs, you cannot set lossy compression, and you must use the other settings to reduce the file size. Like GIFs and JPEGs, you can adjust the image size and its quality with the settings in the lower right.

PNG-24

PNG (24 bit) has fewer settings than PNG-8 because it is a higher-quality file. Many of the settings are like the GIF; however, I will only note the different ones here. Refer to Figure 4-50.

PNG-24 files can contain varying degrees of transparency (0–100%) that you built in your original file. Matte is not available if transparency is checked, since it blends into the web background.

As with the PNG-8, you can embed the color profile, preview, and add metadata. Because PNG-24 uses a large number of colors, like a JPEG, you cannot use the color table to check the colors. Like the other formats, you can still use the Image Size area to adjust the size and quality.

WMBP

WBMP is a file format that you haven’t worked with yet. WBMP, or Wireless Bitmap (.wmb, wbmp), images are monochrome (black and white) so that the image size is kept to a minimum. A black pixel is denoted by 0 and a white pixel is denoted by 1. For colored images, Wireless Application Protocol (WAP) supports the Portable Network Graphics (PNG) format. This type of graphic is used for mobile computing devices. Refer to Figure 4-51.

There are few similar settings that you can adjust, such as dither, but since it is black and white, the image can look very grainy and low quality.

The other things you can do in this dialog box are preview the image in the browser of your choice, and then save the files in the correct folders. Refer to Figure 4-52.

When you click Save, you are presented with options, such as those seen in Figure 4-53.

• HTML and Images: This is an option if you are working with slices and you want to keep the shape of the page as you have in Photoshop. You could bring this file into Adobe Dreamweaver and continue to edit the layout.

• Images Only: Best if you are only working with single images and will add them to Dreamweaver wherever they are required.

• HTML Only: Use the basic layout you created and exclude the images. I don’t use this option often because I prefer to create my layout using Dreamweaver; however, if you’re working in a group, check with your team what method they prefer for their workflow.

• Settings: I usually leave the settings at default. However, you can choose custom, background image, XHTML, or more advanced custom settings. Refer to Figure 4-54.

If your file has slices, you can choose to export all the slices or only the User(created) or Slices (user and auto) that were selected. You’ll look at slices in Chapter 5.

Additional Options That You Can Use to Export Files for the Web

Depending on how you have built your original file, it may contain one of the items discussed in the following sections.

Artboards

You can either create an artboard when you start a file (File ➤ New) or while building it. In the Layers panel, in the upper-side menu, choose New Artboard. You can then use the Properties panel to modify it further.

Artboards are great if you must design layouts for multiple devices and want to store them all in one file. Each artboard is like a folder that contains a collection of layers. Refer to Figure 4-55.

To Export you your artboards, you can choose File ➤ Export ➤ Export As (all artboards will be exported in the file).

The web files that you can export include BMP, JPEG, PDF, PNG-8, and PNG-24; you cannot export as a GIF or SVG using this option.

Artboards To Files provides exporting options if you check Export Options, but the choices are limited. Refer to Figure 4-56.

Note

Artboards To PDF has the exact same layout; however, you can only choose a PDF file type.

When you have adjusted the settings , click the Run button so that you can save the files.

For more information on working with artboards, check out

https://helpx.adobe.com/photoshop/using/artboards.html .

Layer Comps

Sometimes a designer has multiple variations of a similar file. In this case, they might want to create a layer comp and store them all in one file. In the Layer Comps panel, you can store various states for your clients to view, such as layer visibility (visible or invisible), layer position within the document, and layer appearance (styles and blending mode). Refer to Figure 4-57.

If you want to export your layer comps for the web, you can select File ➤ Export ➤ Layer Comps To Files or Layer Comps To PDF. Refer to Figure 4-58.

However, as you can see, some options for export are limited, and you cannot export as a GIF or SVG using this option.

Note

To export a layer comp as a PDF, the file must be saved first. The History panel has an item similar to Layer Comps called Snapshot (camera icon). Snapshots cannot be saved once the file is saved closed. If you want to save a snapshot rather than a layer comp, you can use the Create New Document from the current state icon. Refer to Figure 4-59.

For more information on layer comps , refer to https://helpx.adobe.com/ca/photoshop/using/layer-comps.html .

Layers

Most .PSD or Photoshop documents contain one or more layers. If you can’t find your Layers panel, look under Window menu ➤ Layers.

If you just have a document with multiple graphic layers, such as buttons, you can use File ➤ Export ➤ Layers to Files. Refer to Figure 4-60.

As you can see, some options for export are limited, and you cannot export as a GIF or SVG using this option .

Note

A final option available for exporting options is File ➤ Generate ➤ Image ➤ Assets. You can use this with the Layers panel to further generate images that are JPEG, PNG, or GIF. To do this, you have to name each layer in a specific way, which can get quite complicated. If this is an option you are interested in, for more information visit https://helpx.adobe.com/photoshop/using/generate-assets-layers.html .

Summary

This chapter covered a lot of ground as it relates to exporting images in the correct file formats. Depending upon your workflow, you may prefer some options over others; the choice is up to you. In the next chapter, you look at some of the tools used in Photoshop CC to speed up automation in exporting and slicing images.

Actions to Speed up the File Conversion Process

If you have a lot of files that you save in a certain format for the web, you can use the Actions panel. Refer to Figure 5-1.

For example, let’s say you have several photos that you want to set to a specific file size and save them as JPEGs. I’ll explain the steps to go about doing this.

With your Actions panel open and no other files open, click the folder called Create new set. Refer to Figure 5-2.

Call the new set Images for the Web and click OK. Refer to Figure 5-3.

At this point, it is a blank folder that you will add an action set to, as seen in Figure 5-4.

While the folder is open, click the Create New Action button next to the Folder icon. Save the action as Save JPEG Photos, as seen in Figure 5-5.

Alternatively, you can also move the action to another set, give it a key function, and give the action a color for better identification. For now, leave the settings as is and click the Record button.

You will now notice that the little red Record button is on in the Actions panel. You can begin recording your actions as you move along, as seen in Figure 5-6.

If at any time you wish to stop recording, click the square icon to the left. If you make a mistake in an action, you can now use the Trash icon to remove it. You can then resume by clicking the Record button and redoing the actions.

Afterward, to test an action, click the triangle (play) to the right of the Record button. Right now, nothing will happen until you add another action in Photoshop.

Go to File ➤ Open and locate a folder that contains the image or an image that you want to convert.

Select the file and click the Open button. The Actions panel has saved this action, as seen in Figure 5-7.

Now choose Image ➤ Duplicate from the main menu so that you don’t override the original file. Refer to Figure 5-8.

A new action has been added, as seen in Figure 5-9.

At this point, you may want to do some work or a minor color correction to the document that might be different for each file. Turn off the recording in the Actions panel. In the Action menu, select Insert Stop. Refer to Figure 5-10.

Type a message that reminds you why you have stopped, as seen in Figure 5-11.

Check Allow Continue at the bottom of the dialog box, and then click OK on the right.

Now click the Record button in the Actions panel to continue creating the steps, as seen in Figure 5-12.

In the main menu, choose Image ➤ Image Size.

Set the image size at whatever you require for your website images. In my case, the photos are for a gallery, so I made sure that it was set to 72 pixels/inch, as seen in Figure 5-13.

When you’re done with the Image Size dialog box, click OK. This action is now added to the Actions panel, as seen in Figure 5-14. If at any time you need to adjust the action, you can double-click it to open that dialog box and adjust the setting again to refine it.

Go to File ➤ Save As and save the new image as a JPEG with a new name in the folder of your choice, as seen in Figure 5-15.

When done, click the Save button to save the file. The JPEG options will appear. Choose your optimum file size and quality while watching the preview for changes as seen in Figure 5-16.

When done, click OK. The Save action should now be added, as seen in Figure 5-17.

At this point, you could stop the actions and play them, or add a recording of File ➤ Close to close the files. Refer to Figure 5-18.

When you click the Stop Record icon, you have a complete action. Now close all the open files. With no files open in Photoshop, test the action to see if it works by clicking the Play button, as seen in Figure 5-19.

You will notice at this point that the actions always pick the same image and override it, which may not be what you want. Refer to Figure 5-20.

You need to be able to open the folder so that you can pick a new image and save the new file with a new name.

So, click Toggle dialog on/off for both the Open and the Save As actions, and run the action again. Refer to Figure 5-21.

This makes the dialog box open before going to the next step.

You could also toggle on the Image Size dialog if you think there would be image size differences; however, do not this right now because it will only slow you down. Run the action with the Open and Save dialog boxes open so that you can make the selection of your images.

As you can see, once set up, this is much faster than having to select same folder, duplicate the image, and then find the menu to adjust the images size with the same changes each time. Also, if you are working with CMYK images, you could add another action to convert the image to RGB, as seen in Figure 5-22.

The files can export in another setting by using one of the other export options that you looked at in Chapter 4.

Opening the file one at a time and saving change it to other file formats like GIF, PNG, PDF, or SVG by altering the action steps slightly and create another action for your set. You can then save that action within your set and use it for future projects.

Automate Batch Actions

While the above action steps are helpful and OK for a few images a day, what if you have over 20 images that need to be adjusted for a gallery, or even more for an e-commerce website?

There are two ways that you can automate the process. One way is to use File ➤Automate ➤ Batch, as seen in Figure 5-23.

In the Batch dialog box, you can reuse the actions that you just created within sets, and override settings such as folder destination, file naming conventions, length of numbering (2–4), and how the file extension displays (uppercase or lowercase). Refer to Figure 5-24.

With a setting of None, you can set your own custom file names. If you use this setting, make sure to check Override Action “Save As” Commands. The example displays how the first one will appear.

If the batch runs into errors with the actions, it stops or logs the errors. You can also set the starting numbering sequence and choose a compatibility mode based on the computer that is being used.

When you click OK, the batch starts the actions and runs through the steps. Based on the actions you choose, the procedure will run faster or slower, but it is faster and more organized than having to open and duplicate each image one at a time. The new images will appear in the folder.

Automate Droplet Actions

The third way to automate your actions is if you want to create an icon to drop image files on that functions like an action, you can do so using a script called File ➤ Automate ➤ Create Droplet, as seen in Figure 5-25.

The Droplet dialog box looks very similar to the Batch dialog box; the only difference is that rather the doing the collecting through Photoshop, you just drop the image onto the icon. This is great if you have a few last-minute images that you need to quickly format. The droplet appears as an external (.exe) file.

During set up, make sure to select Override Action “Save As” Commands.

When you click OK, a droplet icon is created, as seen in Figure 5-26.

Drop an image file onto it and see what happens.

Note

With droplets, you may want to remove the Open setting because you are dropping one file at a time onto the icon. The Open option confuses the actions and slows down automation. Rather than delete it from the original action, Save For JPEG, in the panel, create a duplicate of the action and click the name to rename it Save For JPEG2. Then, select the Open action and click the Trash icon to remove it. Refer to Figure 5-27.

You can then resave the droplet with the new action and test.

Now the open action is removed and the only time the dialog box opens is when it is time to save.

Note

While this is not part of any project in the book, File ➤ Automate ➤ PDF Presentation allows you to save multiple graphics as an interactive or moving PDF slide presentation, like what can be created in Adobe InDesign or Adobe Acrobat. You can then view the file in Acrobat Reader as a PDF file.

As you can see, there are many ways to work with actions to speed up your creation of graphics for the web.

Slicing Tools

When you export files for the web, you might save many photos or graphics that will appear somewhere in an HTML file on a solid-colored or patterned background; however, there are times when you might want an image to appear in a background that repeats in more <div> tags or in a table. In the past, tables rather than <div> tags were the accepted way to build website.

In Photoshop, you slice up an image into squares and rectangles, and then insert each part into the background cells of the table using CSS (Cascading Style Sheets) ; however, once designers started building layouts for multiple devices, such as tablets and smartphones, large background images in tables began to fall out of favor. The table could not flex and break to conform to the background movements; however, changes could be done with ease using <div> tags elements. Nevertheless, you can still use the Slice tool to create background images for <div> tags or small tables within a section of your website. Just keep in mind how your site’s design may have to break or transition with each device (see Figure 5-28).

Unlike tables, you can float divs over other divs, so less slicing is required.

When you design a layout for more than one device, bear in mind that for tablets and smartphones, you may want to reduce the amount of graphics on your site for faster download. You’ll look at media queries in Part 6.

Use the Slice and Slice Select Tool

Let’s look at a slice layout I created in the Chapter 5 folder for a webpage on a desktop computer. Later, we will use a flexible layout that will not require slicing, but it will give you a rough idea of where slicing in today’s website layouts succeeds and fails, and what you can salvage from a Photoshop sliced layout and later use in Dreamweaver again.

Using guides (View ➤ New Guide), you can layout where each slice is and how large. Refer to Figure 5-29.

The Slice tool (C) is found docked under the Crop tool. It can marque around a section within the guides and create a user slice. It appears in blue (see Figure 5-30).

Depending on where you create a slice, more slices will be generated around it. The generated slices are known as auto slices , which appear in a gray color.

Different icons and colors dictate what kind of slice it is.

• Slice lines: These define the boundary of the slice. Solid lines indicate that the slice is a user slice or layer-based slice; dotted lines indicate that the slice is an auto slice.

• Slice colors: Differentiates user slices and layer-based slices from auto slices. By default, user slices and layer-based slices have blue symbols, and auto slices have gray symbols and often a link icon. The File ➤ Export ➤ Save For Web (Legacy) dialog box uses color adjustments to dim unselected slices. These adjustments to appearance are for display purposes only and do not affect the color of the final image. By default, the color adjustment for auto slices is twice the amount of that for user slices.

• Slice numbers: Numbers are from left to right and top to bottom, beginning in the upper-left corner of the image. If you change the arrangement or number of slices, every slice number is updated to reflect the new order. Refer to Figure 5-31.

Note

For further alterations to slice color, go to Edit ➤ Preferences ➤ Guides Grids and Slices, where you can alter the line color and hide/show the slice number. Refer to Figure 5-32.

• Slice badges: The following badges, or icons, indicate certain slice types.

  • User or auto slice has image content. Refer to Figure 5-33.

• User slice has no image content. You cannot add this badge to an auto slice. It first must be promoted to a user slice. Refer to Figure 5-34.

• Slice is layer-based. Refer to Figure 5-35.

Slices can also be layer based when created with the Layers panel. You can further alter the information of the slice for the Slice tool selected in the Options panel, as seen in Figure 5-36.

• Normal: Uses whatever slice proportions you drag out.

• Fixed Aspect Ratio: Uses a height-to-width ratio. You can enter whole numbers or decimals for the aspect ratio. If you want your height to be twice as tall as the width, enter Width: 1 and Height: 2.

• Fixed Size: Enter the slices height and width in whole number pixels.

With the Slice tool, you can alter the size as you Shift-drag (to keep square) or Alt/Option-drag to draw from the center.

Slices can be altered using the Slice Select tool (C) (see Figure 5-28). With this tool, slices can be moved, resized, or aligned with other slices.

The Slice Select tool allows you to promote (bring forward or backward), divide (shift selecting two or more; and right-clicking allows you to choose to combine slices), and align slices. Refer to Figures 5-37 and 5-38.

When two or more cells are selected, you can use the alignment tools adjust the cells.

The following are the options from left to right.

• Align top edges

• Align vertical centers

• Align bottom edges

• Align left edges

• Align horizontal centers

• Align right edges

• Distribute top edges

• Distribute vertical centers

• Distribute bottom edges

• Distribute left edges

• Distribute horizontal centers

• Distribute right edges

You can hide or show slices by clicking the Hide/Show Auto Slices toggle button, which makes auto slices easier to view.

Note

If you want to show or hide all slices while working, you can also choose View ➤ Show ➤ Slices.

Clicking the File icon (Slice option) at the end of the Options panel, or double-clicking the Slice Select tool, allows you to set further options, such as the image’s defaults.

• Name: Rename the slice, as seen in Figure 5-39.

• URL (website link): The entire area of the slice becomes a link.

• Target: This determines how the webpage opens in a browser; the following are your options.

  • _blank: Opens a linked file in a new window or tab and leaves the original webpage open.

  • _self: Opens the linked document in the same frame in which it was clicked (this is the default).

  • _parent: Displays the linked file in its own parent frameset. Do not use this option unless the file contains a frame. The link is considered a child, and it appears in the parent frame.

  • _top: Replaces the entire browser window with the linked file, removing all the current frames. The name must match a frame in the HTML file for this to work. When the link is clicked, the specified file appears in a new frame.

• Message Text: Changes the default message in the text rather than showing the default URL link.

• Alt tag: Refers to alternate text, and acts as a tool tip until the image downloads. Alt tags are important for people with visual impairment and require a screen reader as part of accessibility to the web; websites should be for everyone.

Note

You can edit this information for any slice, including auto slices (linked), before you export in the Save for Web (Legacy) dialog box (see Figure 5-40). This is done when you double-click a slice using the Slice Select tool. If you do not complete these settings in Photoshop, you can always adjust them later in Dreamweaver CC.

If the area is a CSS (Cascading Style Sheet) solid color background or text, you can exclude that part of the image, which is Slice Type: No Image. The graphics within this slice are not exported when you choose File ➤ Export ➤ Save for Web (Legacy ). Also, you cannot name these slices. Refer to Figure 5-41.

Note

The Slice Type: Table option is not accessible. This may be because Adobe is encouraging users to use CSS options with <div> tags rather than tables. Soon, I show you another way to adjust for CSS and avoid using tables during the final HTML output in the Save for Web (Legacy) dialog box.

You can set the dimension of the slice and the background type color to fill any transparent areas in the file. The Other option opens the color picker for custom color choices. You cannot preview this color in Photoshop, only in the browser, since it is part of the HTML file that is generated with the image. Refer to Figure 5-42.

Each time you draw a slice, it is numbered and auto slices around it renumber to match the flow. Sometimes subslices generate, which overlap. This can get confusing. If you don’t keep track, and the image requires many slices, you may need to clear the slices from the page and start over again. Select View ➤ Clear Slices and begin to slice again.

Remember to be accurate. You can add guides to an image, select the Slice tool, and click Slices From Guides in the Options bar. Refer to Figure 5-43.

When you create slices from guides, any existing slices are deleted, and the new ones replace them.

If you create additional slices, use View ➤ Snap To, which aligns a new slice to a guide or another slice in the image.

Layer-based Slices

A layer-based slice encompasses all the pixel data in the selected layer. If you move the layer or edit the layer’s content, the slice area automatically adjusts to reflect the pixels that were added or removed. A layer-based slice must conform to the layer, so it is not as versatile as a user-based slice; however, you can change a layer-based slice to a user slice via the Promote button in the Control panel. Refer to Figure 5-44.

You can create a layer-based slice by selecting Layer ➤ New Layer-Based slice; just be aware that it may override other slices.

A layer-based slice is tied to the pixel content of the selected layer, so the only way to move, combine, divide, resize, and align it is to edit the layer or convert it to a user slice.

Likewise, all auto slices in an image are linked and share the same optimization settings. To create different optimization settings for an auto slice, you need to select it with the Slice Select tool and click Promote to make it a user slice.

Exporting Slices

When you are done slicing up your page, you can save the file and choose the specific file formats for each slice using File ➤ Export ➤ Save for Web (Legacy). Use the Optimize Tab window, as seen in Figure 5-45.

The Slice Select tool allows you to choose how each slice is treated to get the optimum quality and lowest file size. Areas of solid colors might be the best set for GIF files, while areas that have a lot of color or photographs should be saved as JPEGs or PNGs. If you need to turn the slices turn off and on, you can click the Toggle Slices Visibility icon (Q) beneath the Eyedropper tool.

Slices from Tables to div Tags, Generating Cascading Style Sheets

So that you use <div> tags rather than tables, let’s look at hidden settings that you may be unaware of. Go to the Preset menu of the dialog box. Choose Edit Output Settings, as seen in Figure 5-46.

In the HTML tab, check Output XHTML. Alternatively, you can select XHTML from the Settings drop-down menu, which checks this setting for you; however, you will be making changes in another tab within this dialog box, so the settings will register as Custom. Refer to Figure 5-47.

Note

If you don’t check Output XHTML, when you bring the file into a program like Dreamweaver CC, you may receive a warning in line 1 of the document stating that the head has not been properly declared. Refer to Figure 5-48.

Here is how it appears when XHTML is checked.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

This time, there is no warning.

Next, from the drop-down menu, choose Slices, as seen in Figure 5-49.

Rather than the default Slice Output Generate Table, which has fallen out of favor with web designers, select the Generate CSS radio button, as seen in Figure 5-50.

The Referenced settings allow you to reference the CSS by ID tag, inline, or by class. Refer to Figure 5-51.

The following are descriptions.

• By ID: Generates an ID tag for each slice that is unique, but keeps the CSS separate in the head section.

• Inline: Puts all the code directly into the body. I do not recommend this setting because it makes the code cluttered and difficult to alter if you must adjust later in Dreamweaver.

• By Class: Generates a unique class for each slice, but only one main <div> tag. Like ID, this setting keeps the CSS separate in the head section. Personally, this appears to be the best setting because it keeps the code looking the cleanest, and it is easiest to edit.

I left all other settings in the drop-down menu at the default.

• Background: Refers to how the background is handled with an image or color.

• Saving Files: Takes care of the filename and the file extension is saved.

Click OK to exit this dialog box.

Note

If you like these settings, you can save them as a preset so that they are available to you next time for another project.

Back in the Save for Web dialog box, when you click Save, the various file format slices are saved and numbered with the HTML file. If you plan to only save the images, you can reassemble them in Dreamweaver CC in an HTML5 file. Since you adjusted the CSS, choose HTML and Images. Leave the settings at Custom. Refer to in Figure 5-52.

Note

Depending on the slice setup, the HTML file that was generated from your slices might appear as if you were creating rollover images or buttons. Also, the HTML coding that was generated for the slices was not a version of HTML5. If you were not planning to create rollovers, but only graphics for your div, I recommend using this XHTML file as a starting point and only copy the parts of the code that you need into your HTML5 file and external CSS file, which you create in Dreamweaver CC. In addition, you can re-create rollovers in Dreamweaver with or without slices, which you look at in Part 6 of the book.

Zoomify an Image

One other unique way you can work with images for a webpage is to select File ➤ Export ➤ Zoomify.

Adobe, in collaboration with a company called Zoomify, created an effortless way to create a basic HTML page with a feature that allows you to zoom in on an image. The dialog box is shown in Figure 5-53.

Zoomify appears to work with only JPEG images. You can choose from various base templates for the background. Once you have set the folder location, you can name the file, set the JPEG image quality, and set the browser width and height of the zoom area. When you click OK. Photoshop generates several files in a folder containing tiled images, an XML file, a JavaScript (.js) file, and an HTML page.

You can open the HTML file in Dreamweaver to edit the HTML for your own project. This is a useful option if you need to have a page on your site with a detailed image or map that the user needs to examine up close by pressing the plus (+), minus(–), or reset (Z) keys. Refer to Figure 5-54, an example found in the Chapter 5 folder.

Summary

This chapter covered a lot of ground as it relates to exporting images, including using automation, slicing, and single images that you can zoom in and out of. Depending on your workflow, you may prefer some options over the others; the choice is up to you. In the next chapter, you look at some of the tools for creating basic animations in Photoshop CC using the Timeline panel.

GIF (animated) (.gif)

With your Layers panel and Photoshop tools, you may have designed backgrounds, part of a banner as an advertisement, or a procedural animation for a client’s website. Once you have the layers and parts of your design to your liking, you can add movement. At this point, you might wonder if you need to export the layers and create the animation in a program like Adobe Animate CC (formerly Flash). Not necessarily. If you are comfortable designing animations with Animate CC, do it that way. You will look at that option in Part 4; however, if you are new to Animate CC, you can create a very simple animation to suit your purposes without leaving Photoshop CC.

For now, let’s locate the Timeline panel in the main menu.

The Timeline Panel

The Timeline panel is a long horizontal panel that allows you to preview all your frames in an animation. It has two options in its drop-down button: Create Frame Animation and Create Video Timeline (see Chapter 7). You can choose which one you want to use. Let’s look at Create Frame Animation first. Refer to Figure 6-2.

If the Timeline panel appears at the bottom of the page, you can drag it out by its upper tab and place it somewhere else on the screen, so that it does not block your image.

Click the Create Frame Animation button to start your GIF animation.

The Timeline panel changes and gives you one starting frame to begin with. The layers that you have turned on or off in the Layers panel dictate the way that the first frame appears. Refer to the GIF animation start file and Figure 6-3.

You’ll also notice that the Timeline panel’s submenu has now changed to reflect the fact that you are creating a frame animation. Refer to Figure 6-4.

Adding a Frame

An animation cannot take place unless you create another frame. This is done either via the menu (New Frame), or on the bottom edge of the panel, click the Duplicate Selected Frames icon. Refer to Figure 6-5.

Once you have two frames, your play features become accessible. Refer to Figure 6-6.

To alter the second frame, you need to change something in the Layers panel while the second frame is selected. You can do this by turning on or off a layer eye, as seen in Figure 6-7.

When you have more than one frame selected (using the Shift key), you can use this icon to create the same number of frames of the same kind. For example, if you have three frames in a sequence, you can select them all and press the Duplicate Selected Frames icon and the three frames will be duplicated. This brings you to a total of six frames, as seen in Figure 6-8.

A frame can be deleted by selecting it, and then choosing Delete Frames from the menu or by clicking the Trash icon (delete selected frames) in the Timeline panel. If you don’t like your entire animation, you can choose Delete Animation from the menu, which resets you back to the first frame. Refer to Figures 6-3 and 6-9.

Adding, Altering, and Removing Frames

Assuming that you currently have only one frame in your animation, you now want to alter the second frame. Using the Layers panel, you can do one of several things.

If you have already set up movement with the layers, you can choose from the Make Frames From Layers menu. This adds all the layers as separate frames into the timeline and overrides the current frame, as seen in Figure 6-10.

This may not be what you want. You may need to delete a few frames or turn off a few layer eyes in each frame to get the desired result.

Choose Layers and turn them on or off while a frame is selected, and then move to the next frame and do the same thing. Refer to Figure 6-11.

Note

If required for your animation, while on a Layer using the Move Tool found in tools panel, Nudge with your keyboard’s arrow keys or move the object around while the tool is selected on the Layer for a specific frame. This alters the position of a shape on a layer for that frame, but not for another frame in the sequence, as seen in Figure 6-12. Clicking back to a previous frame, the shape will be back in its original position on the layer.

Notice that I added a fifth frame to show how the object moved on the layer. If I select frame 4, the object moves back to its original location on the layer. For now, I will remove frame 5 by clicking the Trash icon and returning it to the way it appeared in Figure 6-11.

Add Layer Style Effects and Turn Them On or Off in the Frame Sequence

Optionally, frame 5 could have effects(fx) or layer styles added to a layer while in frame 4 No effects would appear or they would be turn off in the layer panel. Refer to Figure 6-13 if you want to add this option to your animation.

Likewise, layer fill or adjustment layers could be turned on or off in sequence, as seen in Figure 6-14.

At this point, you may want to preview or play your GIF animation. Click the play animation arrow to see how it runs (see Figure 6-15).

The arrows on the left move you back to the first frame or previous frame, and the arrow on the right moves to the next frame.

Click the square icon to stop the animation. Refer to Figure 6-16.

You can also choose the number of times that you want the animation to run; see the drop-down menu in Figure 6-17.

• Once: The default; the animation plays one time.

• 3 times: The animation plays three times.

• Forever: The animation never stops.

• Other: You can set the number of times that you want the animation to play, as seen in Figure 6-18.

For each frame, you can also set the duration with the little down arrow or leave it at the default time of 0 seconds. Refer to Figure 6-19.

If you want your animation to play in reverse order, select all or some frames, and from the Timeline panel, choose Reverse frames. This places the frames in reverse order in the Timeline panel, as seen in Figure 6-20.

To undo this right away, choose Edit ➤ Undo Reverse Frames.

To make frames match each other, choose Match Layer. Here you can choose how you want the layers to match to give them a similar look in their layer’s position, visibility, and style, as seen in Figure 6-21. You can check or uncheck the areas you want to affect.

Note

If you want to convert any frames into actual layers, from the Timeline panel’s menu, choose Flatten Frames into Layers. This adds those frames to the Layers panel and is a quick way to keep a setting in an animation (see Figure 6-22).

Tweening Layers in the Timeline

When you played the animation seen in Figure 6-15, it was a bit choppy. How can you make a smoother transition between the layers? In Adobe Animate CC, there is an option called tweening, which allows you to create additional transitory frames that give a smoother appearance of gradual change. The change might involve movement, opacity, or various effects. Select the frames that you want to tween, as seen in Figure 6-23.

Choose Tween from the Timeline menu, or choose the Tween Animation Frames icon from the panel, which creates the tween. Figure 6-24 shows the dialog box.

Different types of tween effects can be accomplished by selecting one, two, or all frames at once. If you select two frames, for example, you can enter the number of frames you want to transition between them. When one frame is selected, you have access to Tween With: First Frame, Next Frame, Previous Frame, or Last Frame. This makes a smooth transition if you are planning to do some looping in the timeline of the GIF animation. For example, the last frame blends into the first when you tween the last frame. Refer to Figure 6-25.

For layers, you can choose the tween to happen on all layers or on selected layers.

If you have selected all the parameters, Photoshop will adjust for all of them or only the ones being used, and reflect the selected frames.

For a smoother appearance, continue to tween frames with choppy transitions before you export. You can also continue to alter the tween frames with the layers for an even smoother appearance. You can see my final example in this chapter’s GIF Animation folder, which may look slightly different from Figure 6-26.

Once you have tested your animation and it plays to your liking, make sure that you save the PSD file that you created it, in case you need to return to it or alter it later. Note that you can further optimize the animation using this option, but be aware that it may alter the quality of the image, so make sure to run a test on a copy first. Refer to Figure 6-27.

Export Animated GIF

Now it’s time to export. Go to File ➤ Export ➤ Save for Web (Legacy).

The Save for Web dialog box automatically recognizes that you are creating a GIF animation, because now the animation portion of the box is editable, as seen in Figure 6-28.

At this point in the dialog box as you did earlier in Chapter 4 with your static GIF you can spend time adjusting the quality of the file.

In the right column the bottom of the Animation area allows you to preview the animation and confirm the looping options. When done, click the Save button to save the GIF with the format of image only as you did in Chapter 4 with static GIFs with an image only format. When the file is saved it will be a single file containing the animation frames.

For an interesting tutorial on how to create a flowing water GIF animation, visit https://helpx.adobe.com/photoshop/how-to/make-animated-gif.html .

Note

A GIF animation does not contain audio. You need to create a video timeline if you want sound in your animation. You look at video with audio in the next chapter.

Summary

This chapter explored how to create a simple GIF animation that can be placed on a webpage. These types of animations can be used as background, behind text, or as part of the text, such as a bullet on a webpage. While there are a lot of creative things that you can do with GIF animations, they unfortunately don’t contain audio, and their quality is not always the best for photos. You will look at how to create a video with audio in the next chapter.

Video Setup Tips

Alternatively, if you are creating a new PSD file, you want to create a preset video file size (film and video), whatever size your RAW footage (AVI, MOV, MP4) was shot at, or a custom planned size for final web video for your site, as seen in Figure 7-2.

View All Presets shows you more options.

To build a web video, I chose my size based on the size of most of my footage. My smaller Canon camera shot at 640×480 with a resolution of 72 dpi. Some of my footage was originally in AVI at 30 frames per second (fps) and some in MOV format at 24 fps (a second Canon camera at 1920×1800), but I converted to the same file format, size ratio, and 30 fps using Adobe Media Encoder (see Part 5). I also removed the audio from the videos. You do not have to do these steps before bringing your files into Photoshop CC because you can open MOV and AVI files and work with them right away.

Photoshop CC accepts the following RAW video formats: .264, .3gp, 3gpp, .avc, .avi, .f4v, .flv, .mov, .mp4, .mpe, .mpeg, .mpg, .mts, .mxf, .r3d, .ts, .vob, .wm, and .wmv.

In addition, film from different cameras or video files from clients may not have the same ratio scale as your set video area. In my case, the MOV video files did not fit the same scale as the AVI format. I also have files that were created in the animation program, Animate CC, and had to be formatted in Media Encoder before being added to Photoshop CC. You’ll look at how to adjust these properties and crop in Media Encoder in Part 5.

Nevertheless, you can use this extra footage area to your advantage. If your RAW video is larger than your intended size, use the extra area and pan or move the video around using keyframes so that the action is more centered. Extra size on the left and right is an useful if you could not center the scene while shooting as seen in Figure 7-3. You’ll look at keyframes and how they relate to video layers shortly.

Once you have all your video ready, you can begin. I spent time reviewing my footage and made a rough timeline with notes in Excel so that I could judge what footage to use for the timeline and in what order— basically, I created a verbal storyboard. It saves time if you must replace or add footage. While you can use Photoshop to do some trimming for you, using Media Encoder CC (see Part 5) to remove large unnecessary parts saves me time when working in Photoshop. You can use the files in the video footage folder for this chapter if you don’t have any to practice with. For now, just use this chapter to understand the basics of the Video Timeline tool. You will create a basic video in Chapter 9 and put it into Dreamweaver in Part 6.

Video Timeline

Go to the Timeline and choose the Create Video Timeline button that appears as an option in the center of the drop-down menu. Refer to Figure 7-4.

You can scale the Timeline panel by dragging its sides and bottom when the white arrow-shaped icon appears.

Upon clicking the video option, you are presented with a new default selection of layers and frames in the Timeline panel. Refer to Figure 7-5.

You’ll notice that the Video Timeline layout and menu is different than the frame animation you saw in Chapter 6.

As with the frames in Chapter 6, the Layers panel works closely with the Video timeline. Anything that appears in the timeline can also be found in the Layers panel with a matching name, as seen in Figure 7-7.

If you rename the layer, it changes in the Timeline panel.

The background layer becomes layer 0 when you convert to a video timeline. This way, even the background layer is editable and can be adjusted in various scenes as required.

As mentioned, if you have ever worked with Premiere Pro CC, After Effects CC, or even Animate CC, the arrangement of the timeline will look familiar to you.

Let’s take some time to look at the features of this part of the Timeline panel.

Currently, our file 640×480 at 72 dpi has no video in it; only one layer.

Layers in the Timeline

A layer appears as a purple rectangle in the Timeline panel. It is not a video layer, but it does have a small default amount of time attached to it; about 3 or 4 seconds. Every time you add a layer to the Layers panel, it adds that layer and its name to the Timeline panel. Refer to Figure 7-9.

Depending on where the blue playhead is located, the track (layer) starts at that location expanding the timeline.

As with an animated frame, a layer track can have its position opacity and style altered by using keyframes, as seen in Figure 7-10.

Keyframes are a point of transition. By opening the layer’s options using the arrow and the blue scrubber playhead, you can then set a keyframe point where various transitions happen. For example, if you set a keyframe for a layer and then make an opacity change from that key point to the next or the end of the video, that change will happen. You should at least have two keyframes as a starting point, and then an ending point so that the transition works correctly.

Note

You cannot transform a layer with keyframes. You see how to do that with Smart Objects shortly.

The keyframes that appear as yellow diamonds are called linear interpolation . You can check this when you right-click them, as seen in Figure 7-11.

Note

Interpolation is also known as tweening. It is the process of filling in unknown values between two known values. Examples would be the morphing of a red object on the left into a blue object on the right. In digital video and film, interpolation usually means generating new values between two keyframes; you saw an example of tweening in the frame animation timeline in Chapter 6.

There are two types of interpolation.

• Linear (diamond shape) : Evenly changes the animated property from one keyframe to another. (The one exception is the Layer Mask Position property, which switches between enabled and disabled states abruptly.) In Figure 7-12, it may appear as yellow or gray, depending on if it is selected or not, or if an actual transition is preset, if not the diamond appears smaller.

• Hold (square shape) : Maintains the current property setting. This interpolation method is useful for strobe effects, or when you want layers to appear or disappear suddenly. A red or yellow arrow can also be a hold if found with a linear interpolation combination, as seen in Figure 7-13.

Notice that by clicking the Clock icon for each layer’s properties, you can add a yellow diamond at the playhead line point. This sets the points for when each event occurs on a keyframe. Further points can be added by clicking the diamond next to the clock. You can move from keyframe to keyframe with the left and right arrows. If you click the clock again, it permanently removes all existing keyframes for that track’s properties as seen in Figure 7-14. To undo this right away, choose Edit ➤ Undo right away.

You can delete, copy, or paste a keyframe by right-clicking and choosing it from the pop-up menu (see Figure 7-11) or from the Video Timeline menu, as seen in Figure 7-15.

While selected as a diamond shape keyframe, the interpolation is linear interpolation, but you can switch it to hold interpolation, which is a square. For now, leave them at the default linear.

Animation of a keyframe requires that you have at least two keyframes to animate that property; otherwise, any changes made last for the entire layer video clip.

If a property is not turned on, it contains no keyframes.

If you click, a keyframe with your mouse and drag, you can move the keyframe to a new location on the video clip timeline.

Other Layer Properties

Other types of layers, such as fill or adjustment layers, can have properties added to their tracks. The same is true for vector-shaped layers. A vector mask or layer mask can be altered, as seen in Figure 7-16.

You can add this same mask setting to a non-video layers (purple) by adding a mask and a vector mask to the layer, and then edit them, as seen in Figure 7-17.

A Type layer can also have Transform and Text Warp properties added, as seen in Figure 7-18.

Note

With the type, you have access to the Transform properties, but the with the layers, so far, you cannot. If you want to transform a non-video layer (purple) or even a video layer (blue) you need to make into a Smart Object (also purple).

Smart Object Layers

In the Layers panel, right-click a layer and choose Convert to Smart Object, as seen in Figure 7-19.

Transform and position are the same. When clicked, a Smart Object opens a PSB file that can have a timeline within it, as well as other layers blending and masks.

Tip

if you are going to transform a mask, make sure that it is inside a Smart Object for the animation; otherwise, it might not scale accurately during the transform.

Adding Video Layers

At this point, you might want to import a video or add other photos to your Layers panel.

You can add video layers by going to Layer ➤ Video Layers ➤ New Video Layer from File…, as seen in Figure 7-20.

Locate a video file like an AVI, MOV, or MP4 or any graphic image sequence (image1.jpeg, image2.jpg, and so on) listed in the format options.

This allows you to add a new graphic or video clip to your Layers panel and Video Timeline panel.

• New Blank Video Layer: Adds a new layer to your Layers panel and to the Video Timeline panel. The layers (video or non-video) in the timeline are also known as tracks . A blank video layer can act as a placeholder until you are able to add the actual track.

Notice that a new video layer is added to the Layers panel and to the Video Timeline panel. Refer to Figure 7-21.

You can tell that it is a video layer because it has a little Film icon on the preview of the layers’ thumbnail image. Video layers, whether they contain content or not, are blue with a play arrow. A non-video layer is purple with a play arrow, except for fills and adjustment layers.

If you click the arrow, it reveals two settings: video and audio. Video shows the current duration and speed of that track, which you can alter via drop-down sliders, as seen in Figure 7-22.

Altering the speed of the track 100% or lower, slows it down; higher than 100% speeds it up. This can affect the duration. So, the track may be longer or shorter than the original time. Likewise, you can alter the duration of the track by holding your cursor over the front end or back end of your track. Your cursor will change into a prong-like icon, and then you can drag to remove footage from the front or the back of your track, as seen in Figure 7-23.

Note

This removal does not affect the original footage, and you can always pull it back to the original size to reset it.

The audio option is found in the Music tab. If a video has audio, you can alter the volume or cause the sound to fade in or out at the end. While you can remove the audio before bringing your file into Photoshop using Adobe Media Encoder, you can choose Mute Audio to turn off the sound in that track; you can turn it on again if required. Refer to Figure 7-24.

As with the frame animation and non-video layers, each video layer in the timeline can be altered by position, opacity, and style (inner glow, drop shadow) by using the keyframes, as seen in Figure 7-25.

If you are using a blank video layer on top of a video layer to paint over an area, you can turn on and off the altered video eye to check your alterations that can be made with a Clone or Brush tools. To see where and how points along the track have been altered refer to Figure 7-26 and move the blue playhead to those areas.

For more information on how to paint an altered video layer with the Clone stamp, Pattern stamp, Healing brush, or Spot Healing brush, visit https://helpx.adobe.com/photoshop/using/painting-frames-video-layers.html .

The brush only paints one frame at a time, so if you have mass areas of video that need coverage, you need to determine the best workflow to efficiently accomplish these changes. Perhaps a Smart Object is a better solution for areas that change little, such as an annoying glare in the corner of the frame.

To restore an altered video track, choose Layer ➤ Video Layers ➤ Restore Frame (while highlighted frame is selected using the playhead and mouse arrow) or Layers ➤ Video Layer ➤ Restore All Frames.

Video Groups

You can also add video layers via the timeline if you want to keep them all in one video group (folder) or track. This is good if you want one video to play after another without a transitional break. Click the plus (+) icon to add the video to the group, as seen in Figure 7-27.

Note

If you discover that you put the wrong video into the video layer, you can always select that layer track (white outline) and choose Layer ➤ Video Layers ➤ Replace Footage. Find the correct video and click Open, which automatically updates that layer with the correct video. Also, since the video is linked, if the original video is removed after the PSD file is closed from the folder, a warning icon or message will appear, as seen in Figure 7-28. You can also use the Replace Footage option to relink the video.

When one video is relinked, if other missing links are found in the same folder, they automatically relink. To confirm, click OK in the dialog box.

Video layers and non-video layers can be part of the same video group if you plan one to lead into the other without a transitional break.

Using Layers That Are Not Part of a Video Group

Layers within the Video Timeline panel can be moved up or down when you drag the video clip into another group. Refer to Figure 7-29.

To move outside the group, use the Layers panel to drag the video into its own layer track. To drag one or more video clips on the same layer timeline, Shift-click to select each movie clip and then drag upward to appear in above another video or downward to appear below a video that now overlaps it. Refer to Figure 7-30.

Remember, only when a movie clip is selected (white outline) can you alter its properties. Clicking blank areas in the timeline where the movie clip is not playing leaves properties like blends, opacities, and fills unavailable.

Convert Video Layers to Smart Objects

Video layers can be edited further when converted to Smart Objects. In some cases, you may need to do this if the orientation of the video is wrong, or you need to transform or scale the video so that two videos can play side by side, like a split screen. Like any other Smart Object layer, it is editable and could have a mask applied. To convert a video layer to a Smart Object, in the Layers panel, right-click a layer and choose Convert to Smart Object. The video clip will have a purple color in the timeline, indicating that it is a Smart Object with a video inside. Refer to Figure 7-31.

You can still edit the video by double clicking it in the Layers panel, this bring up a PSB file that you can alter and then save changes and close. The alterations will be reflected in the Layers panel and Timeline panel.

The Smart Object’s Play icon allows you to do something different. By right-clicking the Smart Object or Play icon in the track, you can choose several types of motion combinations, such as pan & zoom and rotate. Refer to Figure 7-32.

The default is No Motion. Each motion option (see Figure 7-33) gives various pan, zoom, or rotate settings. It also allows you to resize to fill canvas; this setting, when enabled, ensures that the clip is the same size as your Photoshop canvas during the motion.

If you don’t want to use the preset motion settings, you can use keyframes to alter the point of zoom, pan, or rotation. To do this when you are over a selected Smart Object with the blue handle playhead, use the menu option Edit ➤ Free Transform to alter the width and height of the Smart Object for the current keyframe that will appear as a transform in the timeline panel.

Note

Once the video clip is converted to a Smart Object, it cannot be returned to a video clip unless you undo the video change right away in the History panel (see Figure 7-34) or delete that layer from the Layers panel and add a new video.

Delete Timeline

If you want to want to remove the entire timeline in the Video Timeline menu, choose Delete Timeline. Refer to Figure 7-35.

Delete Track

If you need to delete a layer or track at any time, refer to Figure 7-36. Click the arrow next to the layer’s Film icon and select Delete Track.

This removes the movie layers from the Layers panel as well.

Select Transition and Drag to Apply

When video layers, Smart Objects, or type layers are on their own tracks, you can blend one into another overlapping track by using various fade-in or fade-out sequences. Refer to Figure 7-37.

You can set various transitional blends using the half-square icon in the video timeline between movies by choosing a transition and dragging that blend onto the selected movie clip’s start or end. Move it around on the clip to set the duration. Refer to Figure 7-38.

If you want the transition to be a default of one second, leave it at the current setting or while on the video track drag with the prong-like trim cursor to the end of the white transition ramp in or out to make it longer or shorter. Refer to Figure 7-39.

• Fade: Causes the fade to be a gradual opacity change that makes the upper clip slowly disappear, revealing the lower clip; it can fade in or out, depending on where it is placed on the video track. Cross Fade: Works when two videos are in the same track group; then, you can overlap them. This takes up less space if you have many clips to cross fade. Refer to Figure 7-40.

If you want to set a custom color from the color picker, choose Fade With Color; otherwise, it fades in black or white. Refer to Figure 7-41.

If you need to alter or remove the fade, right-click the transition in the movie clip. Then choose a different transition from the drop-down menu and enter a new duration time, or click the Trash icon to delete, as seen in Figure 7-42.

Split Video Clips

There may be parts in the middle of your video footage that you want to remove because you do not want it to be part of the final video. You can use the blue scrubber playhead to find a point in your track and split it.

• Split the Playhead: Scissor icon or found in the timeline’s menu in the Video Timeline panel. Splits the video into two parts in the timeline when you place the playhead at the point you want to split. In Figure 7-43, the video appears on two layers in the Layers panel and as two parts in the Video Timeline.

You can then drag the split video to another location ion the timeline, and even collapse or expand it on either end to repeat or remove more footage.

Note

You must be on a select area (white outline) of a video for this to work.

Trim Movie

If you would rather trim part of the footage than use the prong-shaped icon to clip the beginning or end, you can move your playhead to a point on a selected movie layer. Then choose Trim Start at Playhead or Trim End at Playhead, as seen in Figure 7-44.

This shaves off part of the movie at this point. Move Start to Playhead and Move End to Playhead allow you to align a track to a specific point in the timeline using the playhead; this is easier than dragging the track.

Convert Frames

After you have completed the video, if you need to make a copy of each layer in a duplicate file (don’t override the original), in the Video Timeline panel, choose Convert Frames. There are three settings, as seen in Figure 7-45.

• Make Frames from Clips: Make the movie frames single clips on the timeline from separate layers. This only works if the video is first flattened into clips.

• Flatten Frames into Clips: This makes all the frames separate layers for clips in the Layers panel. And then as separate layers in the timeline, you can drag selected frames and order them onto one layer in the timeline as a video group to create a frame-by-frame animation. This is useful if you need to alter each frame to add or remove something from the scene. Examples are a floating orb or some item that added by creating a drawing first.

• Convert to Frame Animation: This converts back to the animation timeline; in doing so, you lose important data. If you do this by accident, make sure to hit Cancel in the warning box, or go back in your History panel to before this setting, as seen in Figure 7-46.

Video and 3D Graphics

You can also add 3D effects to your layers.

• 3D object or camera position: Use the 3D position or camera tools to move the model or 3D camera over a duration of time. Photoshop can tween frames between position or camera movements to create smooth motion effects.

• 3D render settings: Alter render modes with the ability to tween transitions between some render modes. For example, change gradually from vertices mode to wireframe to simulate the sketching-in of a model’s structure.

• 3D cross section: Rotate an intersecting plane to display a changing cross section over time. Change cross section settings between frames to highlight different model areas during an animation.

In high-quality animations, you can render each animation frame using the Render options in the Render Video dialog box (see the “Rendering the Video” section in this chapter).

Tip

You can create examples of faux 3D using a 2D photo, known as a 2.5D Parallax Effect, by cutting out the people or objects from the photo image, then fill in the gaps with the stamp tool where the people were. When the foreground object is separated from the background layer this gives the appearance when movement is added that the people or objects are alive and gives depth, bringing the scene to life. You often see this effect used in historical documentary videos where black-and-white pictures that are then colorized of an event when no video footage at that time was available. For more information on 3D, visit https://helpx.adobe.com/photoshop/using/creating-3d-objects-animations-photoshop.html#create_3d_animations_ . For a basic example of 2.5D Parallax, check out my example in the Chapter 7 folder.

Interpret Footage

You can specify how Photoshop interprets the alpha channel (transparency) and frame rate of the video you’ve opened or imported. Go to Layer ➤ Video Layer ➤ Interpret Footage. Refer to Figure 7-47.

Alpha Channel

An example of an alpha channel is what you see when actors stand in front of a green or blue screen. The green background is not recognized as part of the scene; it is replaced by a different background that is digitally inserted later. If the imported video contains no alpha channel, this area is unavailable and ignored.

If an alpha channel is used in an image, there are two common representations available: straight (unassociated or unmatted) alpha, and premultiplied (associated or matted) alpha. When Premultiplied-Matte is selected, you can specify the matte color with which the channels are premultiplied or blended.

If an incorrect alpha color is chosen, ghosting or halos around objects can occur. When choosing the correct matte color, make sure to preview first. Blue or green are the common colors to use when shooting subjects who will be superimposed on a background or video footage. For more information, visit https://en.wikipedia.org/wiki/Alpha_compositing and https://helpx.adobe.com/photoshop/using/importing-video-files-image-sequences.html .

De-Interlace

This feature affects how the video renders. Sometimes it can affect the quality of the video with scaling or blurring, so it is important to preview and test your video to get the optimum quality. Interlacing is a technique developed for transmitting television signals using limited bandwidth. In an interlaced system, only half the number of horizontal lines or fields for each video frame is transmitted at a time.

Fields are upper (odd-numbered lines) or lower (even-numbered lines). The upper is usually drawn first on the screen from top to bottom in one pass, then the lower field. This is typical of the older analog system. However, with digital, you can use interlace or non-interlace. De-Interlace converts interlaced fields into non-interlaced, progressive-scan frames. This option is useful for clips that you want to play in slow motion or in freeze frame. This option discards one field (retaining the dominant field you specified for the project in the Fields setting in the dialog box). Then it interpolates the missing lines based on the lines in the dominant field (upper or lower). If you want to create more advanced interpolation, it is better to use Adobe Premiere Pro. For a visual example refer to Figure 7-48.

For more information on de-interlacing, visit https://en.wikipedia.org/wiki/Deinterlacing and https://helpx.adobe.com/premiere-pro/using/interlacing-field-order.html .

Frame Rate

You can adjust the number of frames per second at the current frame rate of the footage or whatever frame rate you choose. Just be aware that adjusting the frame rate slows down, speeds up, or makes the video appear choppy; so if you do not want this effect, leave the video at the Footage Frame Rate (default). Often, old film footage runs at about 24 frames per second, while newer digital film runs at about 30 frames per second. Your digital camera may have more than one option. To convert older film into the new digital format, technically, six new frames must be created for the speed to be compensated; this is where interlacing appears to fill in the gaps. Refer to Figure 7-49 for frame rate options.

Other Settings

Color Profile color-manages the frames or images in a video layer.

Mute Audio turns off the sound in the video. If you don’t mute the audio here, you can always change it in the timeline (as you saw earlier when you looked at track settings).

Playing and Previewing Video

As with the Animation Frames timeline, there is a Play feature in the upper left so that you can play/stop your video timeline or move to the first, previous, or next frame. Refer to Figure 7-50.

Before playing the video, you can turn the entire video’s audio on or off in the timeline preview. Refer to Figure 7-51.

You can also adjust the preview resolution for the entire video with the Widget icon, and add a loop playback. You can also select loop playback to play the video again from the Timeline menu, as seen in Figure 7-52.

Note

Allow Frame Skipping (see Figure 7-52) refers to skipping uncashed frames (not fully loaded in to Random Access Memory (RAM)) to achieve real-time playback. If you find that your video still skips with this setting selected, it may mean that either Photoshop does not have enough RAM and or your computer requires more RAM.

Working with the Timeline and Playhead

The gray handles at the beginning and end of the timeline show the duration of the current video timeline; 00 is the beginning. You can drag the start or end frame to the left to shorten the length of the video, or to the right to lengthen it. Once it reaches the full length of the video it stops, and you can drag no further to the right unless you add more footage. Refer to Figure 7-53.

You can further adjust the heads using the Video Timeline menu by selecting Work Area ➤ Set Start at Playhead or Set End at Playhead. Remember that the playhead is the blue triangular slider head that you can move back and forth along the timeline. Refer to Figure 7-54.

Note

Extract Work Area allows you to remove an area from a video or blank video keyframe split it onto two lines. Use the beginning and ending handles to set the duration that you want to remove. The playhead must be within the handles. Then choose Work Area ➤ Extract Work Area, as seen in Figure 7-55.

Note

Now that the area is extracted, the remainder is divided on two layers.

• Lift Work Area: Works on the same principle as Extract Area except rather than compress the video layers after removing, it leaves a gap in the area that was removed, as seen in Figure 7-56.

Both appear to work best with Smart Object and blank video layers. You want to move the gray handles back to the start and the end of the video so that all the tracks can play.

Continue Working with the Playhead to Edit Video

You can drag the blue playhead with the red line and “scrub” over the timeline to slowly preview the movement of your video. The playhead moves along when you click the Play button. You can also move around the playhead by using the Video Timeline menu. Go To ➤ Time lets you choose a point in the timeline or a frame, or move to the start of or the end of the work area. Refer to Figure 7-57.

If you want to add more keyframes to your video timeline, you need to add a longer video. While on a blank or altered video layer choose Layer ➤ Video Layer ➤ Insert Blank Frame. Or drag the timeline portion of that layer forward to make the timeline longer by using the prong icon.

Likewise, you can use Layer ➤ Video Layer ➤ Delete Frame from a blank or altered video layer, or drag the tracks timeline portion backward to make the timeline shorter.

Frames can also be duplicated. Select Layer ➤ Video Layer ➤ Duplicate Frame if that frame of the altered video contains content; if not, this feature will not work. Refer to Figure 7-58.

Other options are Layer ➤ Video Layers, Restore Frame, Restore All Frames, and Reload Frames.

Adjust Frame Rate

In the Timeline panel, the duration of the video and its frames per second (fps) are shown on the lower left. If you need to alter fps for the whole video, you can do so in the Timeline panel’s Timeline Frame Rate dialog box, as seen in Figure 7-59.

If you need to zoom in on different tracks in the timeline, you can do so using the slider, as seen in Figure 7-60. Left makes the timeline smaller; right makes it larger.

Adding Comments

While building your video, you might want to add comments (see Figure 7-61) in case you need to give your original PSD file to another editor who might use the file in a program like After Effects and needs to continue where you left off.

For example, while on a blank video layer, you can select it and choose Comments ➤ Edit Timeline Comment from the Video Timeline panel’s menu. Enter a comment in the dialog box, as seen in Figure 7-62.

Click OK to save the comment.

You can also choose to export all comments as HTML or text, if required for other work.

The comment is visible as a yellow square on the top of your timeline if you choose Show ➤ Comments Track from the Video Timeline panel’s menu, as seen in Figure 7-63.

The comment itself is not actually on the layer but on its own track and keyframe, so if you delete the track, you delete the original comments. So be aware of this. You can edit a comment by right-clicking it and choosing Edit Comment from the pop-up menu. Refer to Figure 7-64.

Hide or Show Tracks

While working on the timeline, you may want to show or hide certain layers or tracks, as you saw with the comments clip. Refer to the Timeline menu area, as seen in Figure 7-65.

All Clips is the default setting; however, if you only want the video group to show, select Video Groups Only. In Figure 7-66, Smart Objects and all no-video layers are hidden.

• Favorite Clips Only: To show only a select subset of layers, first set them as favorites in the Timeline panel.

• Set Favorite Clips: Select one or more layer tracks from the Timeline panel, then choose Show ➤ Set Favorite Layers from the menu.

• Global Light Track: Displays keyframes where you set and change the master lighting angle for layer effects, or styles such as Drop Shadow, Inner Shadow, and Bevel and Emboss. Refer to Figure 7-67.

Other Settings in the Timeline Menu

Figure 7-68 shows other settings in the Video Timeline panel’s menu.

• Enable Timeline Shortcut Keys : If you have created shortcut key from Edit ➤ Keyboard Shortcuts (see Figure 7-69), you could use them when this selection is checked.

• Enable Auto-Grouping of Clips : This is set as default and allows the movie clips to be grouped together.

• Enable Onion Skins : Use this feature if you are creating a type of hand-drawn stop motion animation. This makes the video slightly blurry so that you can see how different layers interact. It does not affect the actual video; it is only to help you preview the video during editing. If you need to adjust the options, go to Onion Skin Options.

• Enable 3D Tracks : If the layers contain 3D graphics, this area is enabled; otherwise, it is unavailable. For more information, refer to the “Video and 3D Graphics” section in this chapter.

• Onion Skin Options : If you have enabled onion skinning, you see whatever settings you applied here, as seen in Figure 7-70.

• Onion Skin Count : Refers to the number of previous and forward frames displayed in the preview. You can enter the Frames Before (previous frames) and Frames After (forward frames) values in the text boxes.

• Frame Spacing : The number of frames between the displayed frames. For example, a value of 1 displays consecutive frames, and a value of 2 displays strokes that are two frames apart.

• Max Opacity: Enter a percentage of opacity for the frames immediately before and after the current time.

• Min Opacity: Enter a percentage of opacity for the last frames of the before and after sets of onion-skin frames.

• Blend Mode : Sets the appearance of the areas where the frames overlap. Multiply is the default but you can set it to Normal, Screen, or Difference for previewing.

• Set Timeline Frame Rate: Sets the frame rate for the movie. Refer to Figure 7-59 for a visual example.

• Animation Panel Options : This controls the way that you view the timeline icons at small or large sizes. You can also set this for the animation timeline. Refer to Figure 7-71.

Adding Background Audio

The final track is the audio track, which is always found below the video layers. It is not referring to the sound that comes with each movie clip but is rather a separate track or tracks for background music or voice-overs, which you can optionally choose to add. Refer to Figure 7-72.

Click the drop-down arrow near the music notes and choose Add Audio…, as seen in Figure 7-73.

You could also click the plus (+) symbol on the right of the Video Timeline panel audio track.

Search through the formats of audio and video for only the audio portion and choose an MP3 or WAV file. Also check which alternate formats Photoshop will accept before you click the Open button. Photoshop does not accept 3GA smartphone audio. I will show you how to get around this in Media Encoder in Part 5. When the audio is added, it appears as a green symbol with a play arrow. Refer to Figure 7-74.

As with other clips, you can turn off the sound; duplicate, delete, or replace it; or add another audio track. If you have more than one audio track (New Audio Track), you can add or delete one of them by choosing Delete Track, and the track will be removed. As with video, you can adjust the volume and have the sound fade in and out, or you can mute it. Refer to Figure 7-75.

Note

If you have more than one track or your audio is spread out, you need to drag the track to the location. Unlike layers, sounds do not appear in the Layers panel; if you decide to add a sound between two other sounds, you may need to spend more time organizing and adjusting your sound order. If you need to edit your audio, use a program like Adobe Audition CC first.

Rendering the Video

When you are done creating your video, it’s time to make the video ready for the web. To do this, choose Export ➤ Render Video, or from the Video Timeline panel, choose Render Video, or use the Arrow icon (Figure 7-76) at the bottom of the Video panel.

Here you can review many of the export options, including frame rate and range of frames for export, if you only want part of the video; interpret the quality of 3D objects; or alpha channel. Photoshop uses Adobe Media Encoder to do the rendering, which you look at in more detail in Part 5 to render your video as an MP4 (H.264) video file. You might have the other options, such as DPX, QuickTime, or Photoshop Image Sequence, but for the web, choose MP4(H.264). You can also choose the location to save the file and check Create New Subfolder if you want the video to appear in a new folder within the current folder. When you are ready, click Render, as seen in Figure 7-77.

Caution

If your video is small (like the examples in this chapter), rendering your file on the main computer drive is fine. However, if you plan to render a large video file, as I show in Chapter 9, I recommend saving. Larger renderings take time and have the potential of crashing, or at the very least, slowing down your computer.

The Photoshop Image Sequence option lets you render individual frames in image formats such as JEPG, bitmap, TIFF, and PNG, which you could use for animation or print-related projects. Refer to Figure 7-78.

Remember, if you choose image sequence, it will produce a lot of individual frames; so it may be best to select a range rather than all in your render settings.

Saving the Original File

Your RAW video file can be saved as a PSD so that you can go back and alter it at any time. Just make sure to keep your video files in the same folder so that the link does not break.

When you are done, you can close the Timeline panel either by clicking the X in the upper right, or choose Close in the Video Timeline panel. Close Tab Group is used only if you have another panel docked with the timeline. Refer to Figure 7-79.

Summary

This chapter explored how to work with Video Timeline panel tools for the web and how to render an MP4 file. You’ll practice this again in Chapter 9, but in the next chapter, you take a short detour to see which miscellaneous tools Photoshop has to offer for web design.

Libraries CC

The Libraries panel was introduced with Creative Cloud. In Photoshop CC, you can store colors and images that you use in projects in a library. You can then move over to a program like Dreamweaver CC, and the colors will appear there so that you can refer to them during your project, as seen in Figure 8-1.

Extraction of Code from Layers

In the Layers panel, layers in your files might have CSS information or SVG data that you can later use when designing your website or when placing items. Right-clicking a layer allows you to use the Copy CSS and Copy SVG options, as seen in Figure 8-2.

You can then open a text-editing program like Notepad++, paste the information into it, and examine the contents before copying the data that you need into a CSS file in Dreamweaver CC.

There is another option. When you save the file as a PSD, you can use Dreamweaver CC’s Extract panel and the Creative Cloud to get important data out of the file to work with Dreamweaver.

Web Fonts and SVG Fonts

Many of the web fonts that Adobe supplies are in the Character panel’s Type tool (see Figure 8-3).

You can use colorful SVG fonts, like EmojiOne, from the Options panel.

You can view all the options and varieties in the Glyphs panel as well, as seen in Figure 8-4.

It’s like having free clip art! For more information , visit https://helpx.adobe.com/photoshop/using/svg-fonts.html and https://helpx.adobe.com/typekit/using/ot-svg-color-fonts.html .

Filter for Repeating Backgrounds

Photoshop has many filters; however, my favorite is at Filter ➤ Other ➤ Offset. I use this often for repeating backgrounds. To start, create a square image, then place all the foreground items on a flattened layer that you want to repeat. Refer to Figure 8-5.

Then use the Offset filter to adjust the horizontal and vertical pixel settings. For undefined areas, wrap around and preview the results. This ensures that the background tiles correctly, as seen in Figure 8-6.

Then, click OK. Later you can add images or shapes to any blank gaps, or use the Stamp tool to correct seams that are running down the center of the image, as seen in Figure 8-7. Refer to the repeating background image PSD in the Chapter 8 folder. You can then use one of the options from Chapter 4 to export the file in your desired format.

You can use this with CSS in Dreamweaver to create a repeating background for webpages.

New to Photoshop CC 2018 Paint Symmetry

Another way to repeat patterns is to use the Paint Symmetry option, which is by default in an off state for the brush, pencil, and eraser in the Tools panel. Refer to Figure 8-8.

If you cannot locate this option, go to Edit ➤ Preferences ➤ Technology Previews, and select Enable Paint Symmetry (see Figure 8-9). Note this is the path for version CC 2018. However in CC 2019 this link has been removed from the preferences and by default part of the brush and eraser tool control panel as in Figure 8-10.

Select and click OK to exit the preferences. This adds a new option to your Options panel. It looks like a butterfly, as seen in Figure 8-10.

By choosing from various symmetry paths, you can create all types of interesting repeating shapes, as seen in Figure 8-11.

Just make sure to turn off the Symmetry option while you are doing your regular painting.

Web Styles

The Styles panel (see Figure 8-12) offers web-friendly styles that you can add to your graphic buttons.

If you have not already added these styles to your list, Photoshop may ask (see Figure 8-13) if you want to replace or append these styles and add them to the current list.

Once added, they can be applied to a vector shape layer to create a button, as seen in Figure 8-14.

Color Blindness Proofs

Color Blindness Proofs is a feature that most Photoshop users likely do not know exists, but it’s been around for several versions. While only eight percent of the world is color blind, it important to recognize that we all see color differently and not everyone can tell the difference between red, green, and blue, and some people can only see shades of black and white. You can preview your images to see how a person with protanopia (red loss) and deuteranopia (green loss) might see your images. Go to View ➤ Proof Setup. Refer to Figure 8-15.

To return to normal settlings, choose View ➤ Proof Colors.

While you can’t compensate for all color issues on your website, if you want to reach a wide audience, it’s important to see how people with color blindness view your website in areas where color is a part of searching, choosing information (e.g., clothing), or doing an important task (e.g., filling out a form).

To learn more about color blindness, visit https://en.wikipedia.org/wiki/Color_blindness .

Summary

This chapter explored some tools that you might not have been aware of, which you can use to build your website. In the next chapter, you work on a few images and video files that will be part of the final project in the Dreamweaver multimedia website.

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.

Working with RAW and Layered Files (AI, EPS, PDF)

Let’s begin by opening Illustrator CC. If you do not have it on your computer, but you do have the Creative Cloud, click the Install button (see Figure 10-4) and follow the instructions on how to install the program.

If you already have Illustrator CC installed on your computer, from your desktop, double-click the icon. In the Creative Cloud, click Open to launch the program, as seen in Figure 10-5.

Once Illustrator CC opens, you can set up your workspace so that yours appears the same as mine.

I chose the Web workspace from the Workspace icon in the upper right, as seen in Figure 10-6.

Equally, you could work with the Essentials Classic workspace since it also offers a full range of tools in the Tools panel, as seen in Figure 10-7.

As seen in Figure 10-7 Photoshop’s and Illustrator’s Tools panels look similar, you can customize the Illustrator Tools panel as you did with Photoshop, this time using the (...) edit tool bar icon at the bottom of the panel.

In Part 3, you look at some of the panels available in the Automation workspace. If you prefer another workspace for your web design workflow, you can always choose a different one or create your own custom workspace (New Workspace), as seen in Figure 10-6.

Your workspace should now look similar to Figure 10-8.

If you prefer that your Tools panel is two columns, make sure to drag the panel out from the left to undock it, and then click the double arrows in the upper part of the Tools panel to make it two columns, as seen in Figure 10-7.

Creating a New File

If you want to create a new file, choose File ➤ New from the main menu. See Figure 10-9 for the dialog box.

To keep consistency across the Creative Cloud programs, Illustrator like Photoshop, has organized many of its standard layouts into tabs so that you can easily choose a layout for your project whether for the web, mobile, or film and video. You can even create your own custom sizes. Like Photoshop, you can use an artboard in which you can have more than one type of layout in a project; however, when you begin creating files that you are planning to use for the web, make sure that the color mode is set to RGB Color (see Figure 10-10) in the Advanced Options drop-down menu. I’ll discuss color more in Chapter 11.

Note

If you are not sure about size of the items that you are planning to create for the web, you can always keep your file at 300 pixels/inch (PPI). Unlike the raster images that you created in Photoshop, the graphics in Illustrator are vector; so if you keep the original AI or EPS file, the images will never degrade and they can be scaled to any size; however, if you know the exact size of your layout, such as when you are building a mockup for a website, use the Web tab to autoset the resolution to 72 pixels/inch (PPI), which is generally the acceptable resolution for most images on the web. Then, click the Create button, as seen in Figure 10-11. Whatever setting you chose, your new file will now open.

If the preset is not to your liking, you can adjust the color mode and resolution in the Advanced Options tab. However, unlike in Photoshop, you can only choose three raster effects or resolutions:

• Screen (72 ppi)

• Medium (150 ppi)

• High (300 ppi)

You can find more settings under the More Settings button in the New Document dialog box, as seen in Figure 10-12.

When you click the button, the More Setting dialog box opens, as seen in Figure 10-13.

Here, most of the settings are like what you saw in Figure 10-9, but you can also adjust bleed, access templates, and adjust artboard spacing and columns. When you are done, either click Create Document or click Cancel to return to the New Document dialog box. Clicking Create Document creates a new blank Illustrator file.

You can always create your files directly in Illustrator CC, or you may have collected or acquired your original images in other file formats that you want to place within your new document so that you can trace the images. Others you can open directly in Illustrator. I have listed some you will likely encounter. In the main menu, go to File ➤ Open or to File ➤ Place.

RAW File Types

The following are raster images that may have been created in a program like Photoshop. You may want to use them for tracing the graphic (Image Trace). You may want to use the pen tool. But ultimately, if you continue to work with illustrated files in Illustrator, you have to save them in another vector format.

You can select File ➤ Place within an Illustrator document as a link for tracing.

• Bitmap (.bmp) : This file is often created when you scan a file with your office scanner. It is common to Windows-compatible computers. While it can be used on the web, the file size is often quite large, so it’s best to save in a file format that is better suited for the web.

• TIFF (.tif,.tiff) : Often graphic artists save a final single-layered piece of artwork as a TIFF file, which are considered images that do not lose quality “lossless” as copies are saved from them, and they retain their original size; no compression of data occurs.

• Photoshop PSD (.psd, .pdd) : When creating your graphics, you may save your files in multiple layers. Photoshop PSD files allow you to retain layers, effects, and masks. After you save and close a file, you can always come back to continue to edit until you are ready to export a copy to the web.

There are many other raster graphics, including JPEGs, PNGs, and GIFs (discussed in Part 2) that can be placed directly into an Illustrator (.ai) file and onto separate layers in the Layers panel. This is often a better method than opening these files directly because you can move an image around in a file, or scale an image without altering the original. This is in the Links panel, as seen in Figure 10-14.

If you decided to embed an image within a document by using the Links panel, a graphic symbol will appear, as seen in Figure 10-15.

To unembed the image right away, choose Edit ➤ Undo or from the Links menu (Unembed…) so that you can save the image as a PSD file or Tiff in a folder. The recreated image will now return to being a linked file and is now separate and in no way linked to the original you first placed.

Depending on the file format, if raster files are chosen using File ➤ Open, you may be able to choose further import settings. A Photoshop file is imported in Figure 10-16.

You can

• Convert Layers to Objects: This is good if you want to keep text editable

• Flatten to a Single Image: Preserves text appearance

• Import Hidden Layers and Import Slices: If there are any in the original PSD

Make sure that you are working on a backup file so that you do not alter the original in some way.

In other instances, if you open a JPEG, no dialog box will appear, and the file is opened directly in Illustrator. That is why the File ➤ Place option may be best way to persevere the original artwork. It all depends on what you are trying to accomplish.

Alternatively, the following are commonly seen vector formats that you may acquire for original artwork from a client.

• Adobe Illustrator (.ai, .ait) : A proprietary file format developed by Adobe Systems for representing single-page vector-based drawings in the EPS and PDF formats. The .ai filename extension is used by Adobe Illustrator. While it can contain only one page, it can have multiple artboards. When it is saved with an .ait extension, it is known as an Adobe Illustrator template and can be used as a starting point for files that have certain similar designs (e.g., business cards, brochures, packaging, and logos). This format preserves various layers, filters, and effects that are applied to graphics within the file, and you can close the file and return to editing it further.

• Adobe PDF (.pdf) : The Portable Document Format was developed by Adobe Systems, and it is read by Adobe Acrobat Reader. These files can contain raster and vector images and text. You can open these files in Illustrator to copy out vector graphics, but be aware that due to compression, things like layer order or the integrity of the text may be altered or converted to outlines. Once you have copied the graphics that you want from a PDF file, it is best to save the new file as an AI or EPS file so that the integrity of the graphics and text are maintained for future projects.

• Encapsulated Postscript and Illustrator EPS (.eps, .epsf, .ps): The EPS format preserves many of the graphic elements that you can create with Adobe Illustrator, which means that EPS files can be reopened and edited as Illustrator files (AI). Because EPS files are based on the PostScript language, they can contain both vector and bitmap graphics. If your artwork contains multiple artboards, these artboards are preserved in the EPS format. However, be aware that depending on what types of filters and effects were used to create the file, the EPS file size may be smaller or larger than an AI file when saved. Also, older EPS files do not support some Illustrator features, so it might be best to save any artwork you copy from an EPS as an AI file. For more information on how to save this type of artwork, visit https://helpx.adobe.com/illustrator/using/saving-artwork.html .

• Enhanced metafile (.emf) : Some CD and DVDs contain vector clip art in this format. Widely used by Windows applications as an interchange format for exporting vector graphics data. Illustrator may rasterize some vector data when exporting artwork to EMF format.

• Windows metafile (.wmf) : Some CD/DVDs that contain vector clip art in this format. An intermediate exchange format for 16-bit Windows applications. The WMF format is supported by almost all Windows drawing and layout programs; however, it has limited vector graphics support, and wherever possible, EMF format should be used in place of WMF format or saved as an EPS or AI file when working on your project.

Note

Illustrator can open many other file formats, including AutoCAD and SVG files that can contain vector shapes, but unlike Photoshop, it cannot open video files. Refer to Figure 10-17.

For more information on other formats you might encounter, visit https://helpx.adobe.com/illustrator/kb/supported-file-formats-illustrator.html .

When you are done, you can save any open file as an AI or EPS for now. Then select File ➤ Close and File ➤ Exit to leave Illustrator CC, or you can keep Illustrator and the files open for the next chapter.