Pscc slides p8
•Transferir como PPT, PDF•
0 gostou•561 visualizações
The document discusses various tools and techniques in Adobe Photoshop CC for creating photo gallery web pages, including using actions to automate repetitive tasks, aligning and arranging layers, 3D text, frame animations, slicing images and pages for web display, and exporting to HTML. Techniques covered include puppet warping layers, batch processing files, saving custom action sets, tweening animations, and setting slice options.
Recomendados
Mais conteúdo relacionado
Semelhante a Pscc slides p8
Semelhante a Pscc slides p8 (20)
Mais de Tracie King
Mais de Tracie King (20)
Último
Último (20)
Pscc slides p8
- 1. Project 8: Photo Gallery Web Page Automating repetitive tasks Editing layers for visual effect Building frame animations Slicing the page Adobe Photoshop CC: The Professional Portfolio
- 2. Actions Repeat multiple operations in a single click File>Automate>Batch to process multiple files Save custom action sets with .atn extension Create a droplet to enable drag-and-drop processing Adobe Photoshop CC: The Professional Portfolio
- 3. Actions (cont’d) Use caution when recording a resizing action – Resize/Resample to specific size (inches, pixels, etc) or resolutions – Can’t record based on percentages – Use a workaround Adobe Photoshop CC: The Professional Portfolio
- 4. Aligning Layers View>Snap – – – – – Guides Grid Layers Slices Document Bounds Adobe Photoshop CC: The Professional Portfolio When multiple layers are selected: – Align based on selected edge – Distribute across space of all selected layers
- 5. Puppet Warp Add dimensionality to flat layers Change mesh settings to increase or decrease precision Bend layer content around pins (anchors) Adobe Photoshop CC: The Professional Portfolio
- 6. 3D Text Create 3D objects from any text layer Use built-in shape presets Use Properties panel to manage options Use on-screen 3D object controls Adobe Photoshop CC: The Professional Portfolio
- 7. Animation Tweening Frame Delay Looping Export as GIF for Web display Adobe Photoshop CC: The Professional Portfolio
- 8. Slicing Slice tool manually draws slices Layer>New Layer Based Slices Options bar: – Slices From Guides – Divide [Slice] User slices Auto slices Adobe Photoshop CC: The Professional Portfolio
- 9. Slice Options Slice Select tool Double-click a specific slice Select multiple and double-click to change options for all selected Adobe Photoshop CC: The Professional Portfolio
- 10. No Image Slices Specific area in which text is exported as HTML text Text is not converted to graphic text Text in area is defined in dialog box Text does not appear in the Photoshop canvas Adobe Photoshop CC: The Professional Portfolio
- 11. Save for Web Adobe Photoshop CC: The Professional Portfolio
- 12. Exporting HTML Format: – HTML and Images – Images Only – HTML Only Settings – Default is usually okay Slices: – All Slices – All User Slices – Selected Slices Adobe Photoshop CC: The Professional Portfolio
Notas do Editor
- It is very common to create the look and feel of a Web site in Photoshop and then hand off the necessary pieces to a Web developer, who reassembles those pieces in an application such as Dreamweaver. We designed this project to reflect that workflow. Because this job begins with a blank canvas, we also used this project to explore a number of additional productive and creative tools that are available in Photoshop. Although we can’t say that many projects will incorporate exactly this series of tools, we can say that many different projects will benefit from the skills you learn here.
- Whenever you find yourself doing the same thing more than a few times, you should try to find ways to speed up the repetitive tasks. Stage 1 of this project explores Photoshop actions, which enable one-click access to a saved set of commands. The application includes a number of built-in action sets, accessed in the Actions panel options menu. Some are productive, but some can create outstanding visual effects. You should explore the built-in options so you can see what is already available before you begin your creating own actions. Actions are managed in much the same way as other built-in asset libraries (patterns, swatches, etc.). You can save your own custom action sets with the .atn extension. Remind students that droplets (File>Automate>Create Droplet) are a good way to pass an action to another user. However, a droplet is not a stand-alone application; they still require users to have Photoshop available on their system.
- Resizing images is a very common task, especially for a Web designer. Think of how many shopping sites display clickable thumbnails to open a larger version of an image. This action is so common that it merits special discussion. It is important to realize that you can’t record a resizing action based on a percentage of the file’s original size. You can, however, use a workaround to accomplish the same goal. Say you have a folder of images that are all 72 ppi. Using the Image Size dialog box, you can deactivate the Resample check box and then change one of the physical dimensions to 20%. This shows you that the resulting image would be 360 ppi (72 / 0.2). The necessary action would then use the following steps: •Open the Image Size dialog box. •Make sure the Resample check box is not checked, then change the Resolution field to 360 ppi and click OK. •Reopen the Image Size dialog box. •Check the Resample option, then change the Resolution to 72 ppi and click OK.
- Photoshop provides a number of options for arranging layers on the canvas. When the View>Snap option is toggled on, the View>Snap To submenu determines which elements have a magnetic alignment quality. If the Guides option is turned on, for example, dragging a layer near a guide snaps the dragged layer edge to the guide. If multiple layers are selected in the Layers panel, you can also use the Align options in the Options bar to align multiple layers relative to one another. The selected layers do not need to be contiguous in the panel for the align and distribute options to work.
- Stage 2 of this project explores two creative options for manipulating layers. Puppet warp allows you to basically bend a flat object into an unusual shape, often creating the illusion of dimensionality where none existed before. Puppet warp is based on a mesh that represents the joints in the bend. Adding points to the mesh makes the bend more precise, but also requires greater processing power and time when you edit the warp. By adding pins to the mesh, you define the points around which the warp bends. Each pin can be separately moved and rotated to change the mesh points between pins. Puppet Warp mode can be tricky to master. By first converting a regular layer to a Smart Object layer, the warp is non-destructive. You can experiment with different options without permanently distorting (or potentially destroying) the original layer data.
- You can use the New 3D Extrusion option to take advantage of Photoshop’s 3D capabilities to create three-dimensional artwork out of any type layers. The options for 3D text are the same as those you use for any 3D layer. It is important to realize that 3D text is still editable text. When you show the Mesh options in the Properties panel, you can click the Edit Source button to change the actual text. The text layer opens in a separate document window (with the extension “.psb”. After you change the text, save the file and close it; the new text will be reflected in the 3D text object when you return to the parent file.
- Although animation is typically created in another application (usually Flash), you can use a number of tools for creating animation directly in the Photoshop interface. Users with Photoshop Extended can use the more sophisticated timeline-based animation options. This type of animation requires knowledge that well is beyond the scope of this book; in fact, whole books are written about animation techniques. In Stage 3 of this project, we create a simple frame-based animation that is common in Photoshop work. The information on Page 432 is important to understanding how animation works. Basically, individual frames flash by in such a way to fool the mind into seeing continuous movement. To create an animation, you have to define the different frames that make up this illusion. In traditional cell animation, every frame had to be drawn separately, requiring hundreds (if not thousands) of hours to create a few minutes of animation. The point of software is to make life easier — after you define the start and end frames in Photoshop, you can use tweening to automatically generate the required intermediary frames that make up the entire animation.
- When you design a Web site interface in Photoshop, you eventually have to cut the page up into the pieces that will be rebuilt into the necessary HTML file. This process, called slicing, is the focus of Stage 4. Photoshop can automatically generate “user” slices based on existing page guides and layer content. You can also manually draw a slice area with the Slice tool, and divide an existing slice into a grid or equal-sized slices. When you define specific slices (regardless of the method), auto slices are added as necessary to support the ones you define. (Auto slices are named with sequential numbers based on the page name when you export the page.)
- You have to use the Slice Select tool to access the Slice Options dialog box. For every slice on the page, you can define a number of settings: •Name is the file name of the resulting slice •URL is the link that is called if a user clicks the slice •Target is the location where the link URL will open •Message Text appears in the browser status bar •Alt Tag is text that can be read by software in place of the image You should realize that some of this work duplicates work that is performed in the Web design application. If you are passing off slices to a Web developer, ask what information you need to provide in the slices.
- By default, text in a Photoshop file is rasterized into a graphic when you export a sliced page. Rasterized text (often called “graphic text”) maintains the exact visual appearance of the characters. However, graphic text has several disadvantages: •It is not searchable. •It is not selectable. •It is not editable (“live”). •It is not accessible to search engines. •It is not accessible to users with screen-reader software. As a general rule, anything more than a few words should be created as HTML text to avoid these problems. Photoshop allows No Image slices to contain longer blocks of text (see Page 444). Again, if you are handing slices off to a Web developer, HTML text is more commonly created directly in the development application. Ask the developer before you spend loads of time editing text directly in Photoshop’s Slice Options dialog box.
- When a design is done and slices are defined, the final step is exporting the page to a format that works for Web delivery. You can use the Save For Web dialog box to define the format for each slice, as well as a number of format-specific options. (The various settings are described on Page 447.) The most important consideration is which format to use for a specific slice. In general: The GIF format is better suited for images that don’t use a lot of different colors, or a lot of smooth transitions between colors. If you use the JPEG format, be careful how much compression is applied. Use the Optimized tab of the dialog box to make sure the applied compression does not introduce artifacts to the image. For animations, you must use the GIF format. For transparent areas, use GIF or PNG. The JPEG format does not support transparency.
- After you define the slice settings, you can determine exactly how the resulting files are exported. Three options at the bottom of the Save Optimized As dialog box control the resulting HTML file and the pieces that comprise it. All of the Output Settings options are explained on Page 448. Although the default settings are usually adequate, you should study these pages to be aware of what you can change if it becomes necessary.