Table of Contents for
Graphics and Multimedia for the Web with Adobe Creative Cloud: Navigating the Adobe Software Landscape

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Graphics and Multimedia for the Web with Adobe Creative Cloud: Navigating the Adobe Software Landscape by Jennifer Harder Published by Apress, 2018
  1. Navigation
  2. Cover
  3. Front Matter
  4. Part I. Welcome to the Adobe Creative Cloud. Where Should You Begin?
  5. 1. Entering the Software Maze or Labyrinth
  6. Part II. Working with Photoshop to Create Web Graphics and Animations
  7. 2. Getting Started
  8. 3. Color Choices: CMYK, RGB, Grayscale, and Index
  9. 4. Saving or Exporting Your Files for the Web
  10. 5. Actions to Speed up File Conversion and Slicing Tools
  11. 6. Tools for Animation
  12. 7. Tools for Video
  13. 8. Other Miscellaneous Items in Photoshop That You Can Use for Web Design
  14. 9. Putting It into Practice with Photoshop CC
  15. Part III. Working with Illustrator to Create Web Graphics
  16. 10. Getting Started with Illustrator CC
  17. 11. Color Choices: CMYK, RGB, and Grayscale
  18. 12. Saving or Exporting Your Files for the Web
  19. 13. Actions to Speed up File Conversion and Slicing Tools
  20. 14. Tools for Animation and Video
  21. 15. Other Miscellaneous Items in Illustrator That You Can Use for Web Design
  22. 16. Putting It into Practice with Illustrator CC
  23. Part IV. Working with Animate to Create Animations, Movies, and HTML5 Canvas
  24. 17. Getting Started with Animate CC
  25. 18. Color Choices: RGB
  26. 19. Importing Your Artwork
  27. 20. Import Your Audio and Video
  28. 21. Working with the Timeline Panel
  29. 22. Exporting Your Files to the Web
  30. 23. Other Miscellaneous Items in Animate that You Can Use for Web Design
  31. 24. Putting It into Practice with Animate CC
  32. Part V. Working with Media Encoder to Create Audio and Video Files
  33. 25. Getting Started with Media Encoder
  34. 26. Working with Your RAW Video Files (AVI and MOV)
  35. 27. Working with Your RAW Video Files and Converting Them to Audio
  36. 28. Working with Your RAW Video Files and Converting Them to an Image Sequence
  37. 29. Putting It into Practice with Media Encoder CC
  38. Part VI. Working with Dreamweaver: Adding Images, Animations, and Multimedia to HTML5 Pages
  39. 30. Getting Started with Dreamweaver CC
  40. 31. Working with Images and Tags
  41. 32. Working with CSS
  42. 33. Working with Images for Mobile Web Design
  43. 34. What Is JavaScript?
  44. 35. Working with Bootstrap, Templates, Library Items, and the Assets Panel
  45. 36. Working with Video, Audio, and Animations
  46. 37. Additional Options to Apply Images in Dreamweaver
  47. 38. Final Testing, Getting Ready to Upload Your Site
  48. 39. Putting It into Practice with Dreamweaver CC
  49. Part VII. Further Dreamweaver Integration with Other Adobe Products for Websites
  50. 40. What Other Programs That Are Part of Adobe Creative Cloud Can I Use to Display My Graphics or Multimedia Online?
  51. Back Matter
© Jennifer Harder 2018
Jennifer HarderGraphics and Multimedia for the Web with Adobe Creative Cloudhttps://doi.org/10.1007/978-1-4842-3823-3_5

5. Actions to Speed up File Conversion and Slicing Tools

Jennifer Harder1 
(1)
Delta, BC, Canada
 

In this chapter, you continue to explore some of the many ways to you to export your images for the web using Photoshop. You will look at some related action tools that can help speed up the export process should you have a lot of images that require similar formatting. Later in the chapter, you look at how to slice images and how to zoom in closer to images.

Note

This chapter does not have any actual projects; however, you can use the files in the Chapter 5 folder to practice opening and viewing for this lesson. They are at https://github.com/Apress/graphics-multimedia-web-adobe-creative-cloud .

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig1_HTML.jpg
Figure 5-1

Speed up your export file conversion using the Actions panel

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig2_HTML.jpg
Figure 5-2

Create a new action set

Call the new set Images for the Web and click OK. Refer to Figure 5-3.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig3_HTML.jpg
Figure 5-3

Give the new set a name

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

An empty actions set folder

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig5_HTML.jpg
Figure 5-5

Adding a new action

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig6_HTML.jpg
Figure 5-6

The red record circle in the actions panel is on

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig7_HTML.jpg
Figure 5-7

The red record circle in the actions panel is on and has recorded an action of opening a file

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

Duplicate the image

A new action has been added, as seen in Figure 5-9.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig9_HTML.jpg
Figure 5-9

The action duplicating the image has been added

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig10_HTML.jpg
Figure 5-10

Insert a stop when you need to do some custom actions to your file

Type a message that reminds you why you have stopped, as seen in Figure 5-11.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig11_HTML.jpg
Figure 5-11

The message added to the stop as a reminder

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig12_HTML.jpg
Figure 5-12

Continue recording

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig13_HTML.jpg
Figure 5-13

Set a specific image size for all images

Note

Your image may vary in size, depending upon your layout. You may also have to add actions, depending on how you set up your layers or blends.

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig14_HTML.jpg
Figure 5-14

Add the image size setting while recording

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig15_HTML.jpg
Figure 5-15

Save the file as a JPEG

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig16_HTML.jpg
Figure 5-16

Set the JPEG option settings

When done, click OK. The Save action should now be added, as seen in Figure 5-17.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig17_HTML.jpg
Figure 5-17

The Save action has been added to the Actions panel

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig18_HTML.jpg
Figure 5-18

Add a file close action to close a saved file

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig19_HTML.jpg
Figure 5-19

Play the action in the Actions panel to test it

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig20_HTML.jpg
Figure 5-20

The same image is being picked; you must correct the action

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig21_HTML.jpg
Figure 5-21

Make sure that the Open and Save dialog boxes open so that you can open, and then save the images with a new name

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig22_HTML.jpg
Figure 5-22

There are many options that you can choose from when creating actions, such as mode conversion or file type

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig23_HTML.jpg
Figure 5-23

Automate contains two ways to speed up the image conversion process

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig24_HTML.jpg
Figure 5-24

Use the Batch dialog box to speed up your actions

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig25_HTML.jpg
Figure 5-25

Use the Create Droplet dialog box to speed up your actions

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig26_HTML.jpg
Figure 5-26

Droplet icon

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.

../images/466782_1_En_5_Chapter/466782_1_En_5_Fig27_HTML.jpg
Figure 5-27

Creating an alteration to the actions for the Droplet

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).
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig28_HTML.jpg
Figure 5-28

Slicing up a graphic-rich website for a desktop display may look great, but how will this layout display for a tablet or a smartphone in portrait view?

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig29_HTML.jpg
Figure 5-29

Arranging where to slice by creating guides first

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).
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig30_HTML.jpg
Figure 5-30

Creating a user slice (blue) using the Slice tool and auto slices (gray)

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.

../images/466782_1_En_5_Chapter/466782_1_En_5_Fig31_HTML.jpg
Figure 5-31

Close up of numbered user slice (blue) and auto slices (gray)

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.

../images/466782_1_En_5_Chapter/466782_1_En_5_Fig32_HTML.jpg
Figure 5-32

You can adjust your default color preference for your slices in the Preferences dialog box in the Guides, Grids & Slices tab

  • 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.

../images/466782_1_En_5_Chapter/466782_1_En_5_Fig33_HTML.jpg
Figure 5-33

User or auto slice with image content

../images/466782_1_En_5_Chapter/466782_1_En_5_Fig34_HTML.jpg
Figure 5-34

User or auto slice with no image content

../images/466782_1_En_5_Chapter/466782_1_En_5_Fig35_HTML.jpg
Figure 5-35

Slice is layer-based

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig36_HTML.jpg
Figure 5-36

Further options are available for the Slice tool in the Options panel

  • 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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig37_HTML.jpg
Figure 5-37

Dividing slices using the divide slice dialog box

../images/466782_1_En_5_Chapter/466782_1_En_5_Fig38_HTML.jpg
Figure 5-38

The Options panel for the Slice Select tool

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.

../images/466782_1_En_5_Chapter/466782_1_En_5_Fig39_HTML.jpg
Figure 5-39

The Slice Options dialog box for the Slice Select tool

  • 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.

../images/466782_1_En_5_Chapter/466782_1_En_5_Fig40_HTML.jpg
Figure 5-40

How slice options appears in the Save for Web legacy dialog box when an image slice is click on

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig41a_HTML.jpg../images/466782_1_En_5_Chapter/466782_1_En_5_Fig41b_HTML.jpg
Figure 5-41

When you don’t want a slice to export, set it to No Image in your Slice Options dialog box. You can also add text. the upper screenshot shows working on the layer slice. The lower screenshot shows how the slice options appear in the Save for Web dialog box.

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig42_HTML.jpg
Figure 5-42

Alter the slice background type color in the slice options dialog box

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig43_HTML.jpg
Figure 5-43

Slices from guides are a faster way to add slices to your file

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig44_HTML.jpg
Figure 5-44

Layer-based slices can be promoted to user-based slices

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig45_HTML.jpg
Figure 5-45

Select user slices and alter the file format

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig46_HTML.jpg
Figure 5-46

Edit the output settings of your HTML

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig47_HTML.jpg
Figure 5-47

Edit your HTML output settings by choosing Output XHTML in the HTML Tab

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.

../images/466782_1_En_5_Chapter/466782_1_En_5_Fig48_HTML.jpg
Figure 5-48

Avoid the doctype warning by checking Output XHTML

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig49_HTML.jpg
Figure 5-49

Choose Slices from the drop-down menu to adjust the next setting

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig50_HTML.jpg
Figure 5-50

Choose that slices generate with CSS

The Referenced settings allow you to reference the CSS by ID tag, inline, or by class. Refer to Figure 5-51.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig51_HTML.jpg
Figure 5-51

Choose a setting for your CSS

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig52_HTML.jpg
Figure 5-52

Choose HTML and Images when you save if you want to generate both at the same time

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig53_HTML.jpg
Figure 5-53

Options in the Zoomify dialog box

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.
../images/466782_1_En_5_Chapter/466782_1_En_5_Fig54_HTML.jpg
Figure 5-54

Zoom in and out of an image with Zoomify

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.