Image Editing

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 fle
formats “rasterize” the vector letter forms, resulting in soft edges
and degraded legibility. Saving Photoshop fles 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 fles.
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 frst fle you build will be a custom header for the Twitter
account. This fle must be 1500 x 500 pixels | RGB Color | JPEG
GETTING STARTED
£ The font for this project is Futura. You will fnd font fles 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 fle is a gradient and a simple graphic. Let’s
build this part of the fle frst.
£ Locate and open the fle VotingGradient.psd.
£ Copy and paste this gradient into your working fle.
£ Name the layer Gradient
£ Locate and open the fle Hands.psd.
£ Copy and paste this image into your working fle.
£ Name the layer Hands.
£ Save your fle.
ADJUST OPACITY
£ Target the Gradient layer and set the opacity to 50%
£ Target the Hands layer and set the opacity to 10%
£ Save your fle. 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 fle.
FINISH UP AND SUBMIT
£ Make any fnal 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 fle, export out a JPEG for use
on Twitter.
£ Submit the PSD fle 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 fnal 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 fle is Exo, a futuristic sans serif face. The
font fles 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 fle stars.jpg and copy and paste the image into
your working fle.
£ Save the document to the Desktop as LastName_Firstname_
Infnite.psd.
ADD THE EARTH IMAGE
£ Open the fle Earth.jpg
£ Copy and paste this image into your working fle
£ Name this layer Earth
£ Equip the Move tool and move the earth downwards to
match the screenshot
£ Save your fle.
MANAGE LAYERS
£ Target all the layers in the document
£ Type Cmd-G to create a new layer Group in the fle
£ 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 fle
£ 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 fle
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 fle.
78
Visual Media Design 105 > Digital Skills for Visual Media
ADD THE PARAGRAPH TYPE
There is a text fle in the exercise folder that has a quote from HG
Wells that will be the centerpiece of this fle
£ Open the fle 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 fle
£ 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 fle
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 fle
79
Visual Media Design 105 > Digital Skills for Visual Media
ADD THE ASTRONAUT
£ Open the Astronaut.jpg fle
£ Make a selection that targets the astronaut only. You can use
the Laso or the Magic Wand.
£ Copy and paste these pixels into your fle
£ Name this new layer Astronaut
£ Transform and position the astronaut in the upper center of
the canvas
£ Save your fle
MANAGE LAYERS
£ Target all the ungrouped layers in the document
£ Type Cmd-G to create a new layer Group in the fle
£ Name the Group Foreground
£ Save the document
At this point you have all the content in the fle. 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 Inifnity 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 fle
FINAL EDITS
This has been our most sophisticated fle-build in the class so far;
congratulations for getting through it. If you are happy with your
fle, 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 fnd 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 fle 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 fle that matches the
pixel wallpaper requirements for your phone.
£ Copy and Paste your main image into this working fle.
Now that you have a working document, complete the project by
meeting these requirements:
£ Correct fle size, color space and fle 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 fle, export out a JPEG for your
phone. Bonus points for actually installing the wallpaper!
£ Submit the PSD fle 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.