Page 6 - Demo

ivWALK-THROUGHProject Goals4%uf038Social Media GraphicsProject Introduction%uf038Managing Missing Fonts%uf038Creating Custom Vector Shapes%uf038Creating Warped Text%uf038Creating and Editing Pixel MasksVideos to WatchAccess these helpful videos in your online student resources:Your client, the Community Arts Council, is a local arts center that offers a low-cost after-school art program for students in the surrounding area. They want to use social media to promote the program with an early-registration discount. As part of the design team working on the overall marketing campaign, your job is to create graphics that meet size requirements for X, Facebook, and Instagram. You then need to share your design assets with other team members, who are building mailing postcards and a printed catalog. This project incorporates the following skills:o Managing missing fonts o Creating custom vector shapeso Creating a complex masko Working with adjustment layerso Exporting assets and filesSocial Media Graphics Each project begins with a clear description of the overall concepts that are covered. These goals closely match the different %u201cstages%u201d of the project workflow.Project Meeting234 Project 4: Social Media Graphicsproject objectives art director comments client comments PROJECT MEETINGThe after-school arts program is one of our most successful offerings. The program is available to any student from kindergarten to twelfth grade, and we offer everything from drawing and painting to pottery and stained glass. This year we are even incorporating a mural project for high school students. We have a number of grants that help to keep costs low, and we also offer an early-registration discount for anyone who registers at least two weeks before the end of summer.We do use printed postcards as giveaways at local events and sending to our existing mailing list, but we also know that social media is a great way to introduce our programs to new patrons. We need the social media graphics for X (formerly Twitter), Facebook, and Instagram. Social media graphics is one of our fastest growing design markets. Unfortunately, it seems like every social media platform has different size requirements for images. With a little bit of planning, though, you can design all three images in a single file, and then export exactly what you need for each site.The work is partially complete, but I need you to take over the project and finish the design. I used two different fonts in the file, but if you don%u2019t have them, you can substitute similar fonts.Photoshop%u2019s non-destructive tools can be a huge benefit in any project workflow. As you create the different design elements, I would like you to keep the design elements editable as much as possible. The client did approve the initial sketch, but there is always a chance that something will need to change later down the line. To complete this project, you will:o Replace missing fontso Review file and canvas sizeso Create and edit a basic vector shapeo Create and edit a custom vector shapeo Create warped texto Paint the layer mask alpha channelo Refine the mask in the select and mask workspaceo Duplicate layer content between fileso Add adjustment layers o Define export preferenceso Use Export As to create different social media sizeso Quick export image assetso Create an asset libraryEach project begins with the client%u2019s comments about the job, and the project Art Director provides fundamental advice and production requirements.The Project Meeting also includes a summary of the specific skills required to complete the project. Real-World WorkflowProject 4: Social Media Graphics 243STAGE 2 / Creating Custom Vector ShapesThe design for this project requires two separate background objects: one behind the client%u2019s logo, and one behind the %u201ccall to action%u201d text in the bottom-right corner. The required elements are very simply shapes with solid fill and stroke colors. You are going to create these as vectors so that they remain editable in the Photoshop file without losing quality.Create and Edit a Basic Vector ShapePhotoshop includes a number of vector-based drawing tools. In this exercise, you will work with the Rectangle tool to learn about the difference between a %u201csmart%u201d shape that is recognized by Photoshop and a regular vector path.1. With CAC-summer.psd open, choose the Rectangle tool in the Tools panel.2. In the Options bar, click the Fill swatch. Click the color swatches to open the pop-up color panels.The Rectangle tool is active.4. Click the Color Picker button in the top-right corner of the pop-up panel.Photoshop automatically switches to the Eyedropper tool when you open the Color Picker. You use the Eyedropper tool to select or sample a color from the existing image.5. Using the resulting eyedropper cursor, click a medium magenta color in the brick background image. The Eyedropper tool becomes active when you open the Color Picker.Click here to open the Color Picker.Sample a medium magenta as the shape%u2019s fill color.Projects are broken into logical lessons or %u201cstages%u201d of the workflow. Brief introductions at the beginning of each stage provide vital foundational material for completing the task.Visual Explanations258 Project 4: Social Media Graphics11. On the canvas, click within the highlight area for each end of the paintbrush to add those %u201cobjects%u201d to the selection.Zooming in might help to click within these narrow areas.Click to add the objects for each end of the paintbrush.Add to Selection is active.12. In the Options bar, click the Show All Objects button to turn off that option.Your selection should now include the painter%u2019s arm, as well as both ends of the paintbrush.13. In the Layers panel, click the Add Layer Mask button.When you add a new layer mask, the active selection is automatically used to determine which parts of the image are visible. %u2022 Selected areas are white on the mask and visible on the canvas.%u2022 Unselected areas are black on the mask and not visible on the canvas.Remember, a locked Background layer cannot include transparent pixels. When you add a layer mask to a locked Background layer, it is automatically unlocked and converted to a regular layer named Layer 0. The Background layer changes to a regular pixel layer.Selected areas are white on the mask.Unselected areas are black on the mask.Note:A layer mask can include shades of gray, which allows you to define areas of semitransparency. In other words, pixels that will be partially visible.Concepts and processes throughout the book are extensively illustrated. Wherever relevant, screen captures are annotated to help you quickly identify important information.Step-by-Step Exercises240 Project 4: Social Media GraphicsReview File and Canvas SizesWhenever you design social media graphics, you should know that different platforms have different image size requirements. While the names used by various sites might be slightly different, most of these sites have several common image types. The image to the right of the table shows the general position of the basic elements as they appear on a desktop; the layout on mobile devices will be a bit different, but the concept of each image type is still the same. You should also keep in mind that these sizes are a moving target, and they do change at times. The sizes listed below are current as of August 2023, but you should verify size requirements at the specific time you take on a new project. Site Image position Size in pixels Aspect ratioFacebook Profile 180 %u00d7 180 (desktop)140 %u00d7 140 (mobile)1:1Cover 820 %u00d7 312 (desktop)640 %u00d7 360 (mobile)2.63:1Feed 1200 %u00d7 630 1.91:1Stories 1080 %u00d7 1920 9:16Instagram Profile 110 %u00d7 110 1:1Feed 1080 %u00d7 5671080 %u00d7 10801080 %u00d7 13501.91:11:14:5Stories 1080 %u00d7 1920 9:16X (formerly Twitter)Profile 400 %u00d7 400 1:1Cover 1500 %u00d7 500 3:1In-stream 1200 %u00d7 675 16:9LinkedIn Profile 400 %u00d7 400 1:1Cover 1128 %u00d7 191 4:1Shared (Personal Page) 1200 %u00d7 627 1.91:1Blog Post (Company Page) 1350 %u00d7 440 3:1YouTube Channel Icon 800 %u00d7 800 1:1Cover 2560 %u00d7 1440 16:9Video Thumbnail 1280 %u00d7 720 16:9Note: Prior to 2023, Instagram required a 1:1 image aspect ratio with a recommended file size of 1080 %u00d7 1080 pixels. In 2023, the platform began allowing other sizes so that users have greater flexibility in the images we post.Cover Feed/Profile StreamEvery stage of the workflow is broken into multiple hands-on, stepby-step exercises.Resource FilesProject 4: Social Media Graphics 235STAGE 1 / Managing Missing Fonts When you work with type in Photoshop, it is important to understand that fonts are external files of data that describe the lettershapes for display and output. The fonts you use in a design need to be available on any computer that will be used to open the file. Photoshop stores references to those fonts, but it does not store the actual font data. In this stage of the project, you will evaluate the current status of the file, resolve problems caused by missing fonts, and create guides that will make your work easier during later stages.Replace Missing FontsBecause this project starts with a partially completed file, your first task is to evaluate the existing file and determine what needs to be accomplished.1. Expand the CAC-Web24-RF.zip archive in your WIP folder (Macintosh), or copy the archive contents into your WIP folder (Windows).This results in a folder named CAC, which contains the files you need for this project. You should also use this folder to save the files you create in this project.2. In Photoshop, open the file CAC-summer.psd from your WIP>CAC folder. 3. Review the Layers panel.This file includes several type layers. Two of those show a warning icon, which indicates that the layer requires a font that is not available on your computer. 4. Click to select the top type layer (%u201cAfter School...%u201d) in the Layers panel.5. Choose the Horizontal Type tool in the Tools panel, then click anywhere in the heading text on the canvas.Click to place the insertion point anywhere in this text.The top type layer is selected.This icon indicates that a used font is not available on your computer.All images, fonts, and files required to complete the step-by-step projects are included in the online student resources, which you can access using the individual code on the inside back cover of this book. WALK-THROUGH