Purpose
This assignment is designed to flesh out concepts from the lecture, and to give you an opportunity to build a few Photoshop files that will focus on the topics from this week.
Directions
- Download the file archive linked above. Double-click on the file to decompress it.
- Inside the archive, you'll find a PDF file and separate folders for each project.
- Read through the handouts at the beginning of the PDF. They are designed to supplement the material in the lectures.
- There are two hands-on projects that are part of this assignment. You will find step-by-step instructions for building these files in the PDF document. Sample files showing you the completed project are also supplied in each project folder.
- One project in this assignment is a Challenge Project where I will give you only minimal instructions. This will be a great test of your mastery of the material from this section.
- When you have completed this assignment return to this week's Module. Read through the Summary and head over to the Discussion forum with any questions you might have.
Turning in your Work
Follow these steps to upload your completed projects directly to Canvas:
- Place all the completed files into a single enclosing folder
- Name the folder LastNameFirstName_Photoshop2.2
Image Editing: Working with Type V I S U A L M E D I A D E S I G N 10 5 73 Visual Media Design 105 > Digital Skills for Visual Media WORKING WITH TYPE IN PIXEL APPLICATIONS Photoshop has a full compliment of type tools, but you should understand some of the nuances of working with type in a raster program. FOR SCREEN PROJECTS Photoshop is a powerhouse for setting type for screen projects. Screen designers use Photoshop to mockup the typography in websites or mobile applications, and to create type-based interface elements for a variety of platforms. FOR PRINT PROJECTS You will almost always get better results setting type in InDesign or Illustrator; this is especially true for long passages of type. Photoshop is best-suited to creating type that will be integrated into a photographic image or illustration. One issue around setting type in Photoshop is that most flat file formats “rasterize” the vector letter forms, resulting in soft edges and degraded legibility. Saving Photoshop files that contain type in PSD, PDF or EPS formats can preserve the vector information in the digital fonts. 74 Visual Media Design 105 > Digital Skills for Visual Media PROJECT: SOCIAL MEDIA GRAPHICS Social media graphics for Twitter, Facebook and Instagram often involve combinations of image and type. Photoshop is the best place to create these digital files. Scenario: You've been hired to help with a social media campaign around the 2020 Presidential Election. Your client wants some simple images to inspire the electorate to vote! The first file you build will be a custom header for the Twitter account. This file must be 1500 x 500 pixels | RGB Color | JPEG GETTING STARTED £ The font for this project is Futura. You will find font files in the project folder. Use FontBook to activate them now. £ Jump into Photoshop and make a new document that is 1500 x 500 pixels. Be sure the background color is set to white. BUILD THE BACKGROUND The background for this file is a gradient and a simple graphic. Let's build this part of the file first. £ Locate and open the file VotingGradient.psd. £ Copy and paste this gradient into your working file. £ Name the layer Gradient £ Locate and open the file Hands.psd. £ Copy and paste this image into your working file. £ Name the layer Hands. £ Save your file. ADJUST OPACITY £ Target the Gradient layer and set the opacity to 50% £ Target the Hands layer and set the opacity to 10% £ Save your file. You can adjust these values later, if necessary. 75 Visual Media Design 105 > Digital Skills for Visual Media ADD THE TYPE £ Equip the Type Tool and click once in the center of the canvas £ Type out the word VOTE and then hit the return key. £ Now type out the words: LET YOUR VOICE BE HEARD! £ Equip the Move tool. Drag the type roughly into position in the center of the canvas. FORMAT THE TYPE You can use the controls in the Options Bar for basic text formatting. We'll use these controls to set type size, alignment, and color. £ Target the type layer and equip the Type Tool £ Swipe through the word VOTE to select it £ Use this formatting: • Futura ExtraBold Condensed • Align center • 315 points • Rich red £ Swipe through the words LET YOUR VOICE BE HEARD! £ Use this formatting: • Futura Medium Condensed • Align center • 120 points • Rich Blue £ Save your file. FINISH UP AND SUBMIT £ Make any final tweaks or adjustments. This has been a simple example, but you could use the same techniques to spice up your own social media accounts. £ When you're happy with your file, export out a JPEG for use on Twitter. £ Submit the PSD file to your instructor using the method they prefer. This may be to the class server or to Canvas. Ask your instructor if you are unsure. 76 Visual Media Design 105 > Digital Skills for Visual Media PROJECT: A TYPE COLLAGE This project will combine type and image in a provocative way. The exercise will give you a taste of using type in Photoshop and will show you the basics of type formatting and special effects. It will also draw on collage skills from previous sessions. Scenario: You've been hired to create a photo-collage to go along with a quote about space from HG Wells. The final piece will appear on a website. GETTING STARTED £ Navigate to the exercise folder; have a look at the images for this project. You have a star background, an astronaut and a few planets. £ The typeface for this file is Exo, a futuristic sans serif face. The font files are provided in the project folder. Use FontBook to activate them now. MAKE A NEW FILE £ Launch Photoshop. Create a new document that is 2000 x 900 pixels at 72ppi £ Open the file stars.jpg and copy and paste the image into your working file. £ Save the document to the Desktop as LastName_Firstname_ Infinite.psd. ADD THE EARTH IMAGE £ Open the file Earth.jpg £ Copy and paste this image into your working file £ Name this layer Earth £ Equip the Move tool and move the earth downwards to match the screenshot £ Save your file. MANAGE LAYERS £ Target all the layers in the document £ Type Cmd-G to create a new layer Group in the file £ Name the Group Background £ Save the document 77 Visual Media Design 105 > Digital Skills for Visual Media ADD THE WORD INFINITE £ Equip the type tool and click once in the middle of the canvas £ Type out the word INFINITE. £ Click the checkbox in the Options Bar to accept your edits. You should see a new type layer in your file £ Be sure the type tool is selected and the type layer is targeted £ Use the formatting controls in the Options bar to format the type like so: • Font: Exo Bold • 400 points • center alignment • white color £ Save your file REFINE THE TYPE FORMATTING £ Go to Window > Character to open the Character Panel £ Use the tracking controls to bump the tracking up to 50. This adds more horizontal space between the characters. £ Manually center the type on the canvas with the Move Tool £ Save your file. 78 Visual Media Design 105 > Digital Skills for Visual Media ADD THE PARAGRAPH TYPE There is a text file in the exercise folder that has a quote from HG Wells that will be the centerpiece of this file £ Open the file SpaceQuote.rtf £ Type Cmd-A and Cmd-C to copy all the text to the Clipboard £ Return to Photoshop £ Equip the type tool £ Drag out a type frame centered on your canvas and roughly half the width of the file £ Paste the text from the quote into this type frame £ Click the checkbox in the Options Bar to accept your edits. You should see a new type layer in your file FORMAT THE PARAGRAPH £ Be sure the type tool is selected and the new type layer is targeted £ Use the formatting controls in the Character Panel to format the type like so: • Font: Exo Light • 36 points • 55 points leading • 50 points tracking • center alignment • white color £ Finally, swipe through the last line in the passage [—HG Wells] and set that to Exo Bold. £ Save your file 79 Visual Media Design 105 > Digital Skills for Visual Media ADD THE ASTRONAUT £ Open the Astronaut.jpg file £ Make a selection that targets the astronaut only. You can use the Laso or the Magic Wand. £ Copy and paste these pixels into your file £ Name this new layer Astronaut £ Transform and position the astronaut in the upper center of the canvas £ Save your file MANAGE LAYERS £ Target all the ungrouped layers in the document £ Type Cmd-G to create a new layer Group in the file £ Name the Group Foreground £ Save the document At this point you have all the content in the file. But you can add visual interest with a few typographic special effects. We'll do that in the next few steps! 80 Visual Media Design 105 > Digital Skills for Visual Media BEND AND BLEND! One of the unique strengths of Photoshop as a typesetting tool is its ability to blend type and image. Let's take a look. £ Target the Inifinity type layer £ First decrease the layer opacity to 50% £ Now, click the type warp icon in the Options Bar. It looks like a T on top of a semi-circle. £ Add a subtle Arc to the type to make it bend around the quote. £ Save your file FINAL EDITS This has been our most sophisticated file-build in the class so far; congratulations for getting through it. If you are happy with your file, you can save, close and move on. If you are inspired to do more work on this, here are some suggestions: £ Add extra moons or planets. You'll find some good source images in the "Extra Images" folder. £ Add Layer Effects to the type. This is an intermediate feature that lets you add shadows, glows and outlines. £ Add other celestial effects or objects. If you have some Photoshop experience under your belt, this is an opportunity to strut your stuff! FINISH UP AND SUBMIT £ Submit the file to your instructor in the method that they prefer. This may be to the class server or to Canvas. Ask your instructor if you are unsure. You'll have more opportunities to explore type as we move through this course. Hope you enjoyed this project! 81 Visual Media Design 105 > Digital Skills for Visual Media CHALLENGE PROJECT: CUSTOM WALLPAPER! Building custom wallpaper for your phone is a fun project that will tap into all the skills we've learned in this section so far. You can do whatever you want for this assignment, provided you meet all the requirements! A LITTLE RESEARCH Use Google to research the pixel requirements for your particular model of phone. For example, iPhone 6 and 7 require wallpaper that is 750 x 1334 pixels. Every model of Android and Apple phone has slightly different numbers. GETTING STARTED £ Strategize about content. Phone wallpapers typically reflect the personality and taste of the user. A favorite celebrity, politician, sports team, location or family member makes a great place to start. £ Find or create an image that will be the central focus of the wallpaper. You can look online [Unsplash, Google], or take a photo with your phone or camera. £ Find a typeface that reflects the personality of the project. You can browse the fonts installed on your computer with FontBook, or download and install a new face from GoogleFonts. BUILD THE FILE £ Jump into Photoshop. Create a new file that matches the pixel wallpaper requirements for your phone. £ Copy and Paste your main image into this working file. Now that you have a working document, complete the project by meeting these requirements: £ Correct file size, color space and file type £ At least one central image £ At least one additional collage element £ At least one type layer £ Beautifully organized and named layers FINISH UP AND SUBMIT £ When you're happy with your file, export out a JPEG for your phone. Bonus points for actually installing the wallpaper! £ Submit the PSD file to your instructor using the method they prefer. This may be to the class server or to Canvas. Ask your instructor if you are unsure.