USING FONTS: ADOBE ILLUSTRATOR TYPE PORTRAIT
Students will use the Adobe Photoshop software to create pieces related to the art and design field.
Student Objectives: Adobe Photoshop
Provided with multiple lectures, examples, study guides, guided practices and student resources, the students will be able to demonstrate an understanding of computer design software (rasterized image artwork - Adobe Photoshop) by producing a completed digital photo manipulation project that show the use of 8 or more tools. (i.e.; type tool, path tool, clone tool, etc.)
Program Of Study Requirements:
Commercial Art - 500 - DIGITAL IMAGING
507 - Demonstrate basic use of image editing software (e.g. Photoshop).
508 - Demonstrate intermediate use of image editing software (e.g. Photoshop).program.
Commercial Art: 100 -
ORIENTATION302 - Design basic geometric and organic forms showing texture and tone.
303 - Create Line Art
505 - Demonstrate basic use of a vector-based drawing program (e.g. Illustrator).
506 - Demonstrate intermediate use of a vector-based drawing program (e.g. Illustrator).
For this project we are going to learn how to create cool portraits made entirely from type. This is a time consuming technique but not too difficult to learn. We are going to use Adobe Illustrator and most of the time we will work with the Envelope Distort feature on text.
This is how the final design will look like:
For many beginners, the task of picking fonts is a mystifying process. There seem to be endless choices — from normal, conventional-looking fonts to novelty candy cane fonts and bunny fonts — with no way of understanding the options, only never-ending lists of categories and recommendations. Selecting the right typeface is a mixture of firm rules and loose intuition, and takes years of experience to develop a feeling for.
Over the last few weeks we have learned about the importance of Fonts used in Graphic design and how it can make or break it. There are literally hundreds of thousands of Fonts on the Internet, but which ones should you use for your design? ...that depends on the design. If your designing wedding invitations, you wouldn't want to use an urban graffiti font. Common sense and knowledge of the elements of design will help you through the process.
First Year Students:
For this project, you will create a portrait of a famous individual and create of them using only Fonts. The famous person can be:
An Actor or Actress as themselves or in costume from a movie they were in.
A Singer or someone known withing the music industry (DJ, Producer, etc.)
An Artist or Writer
Politician or Social/Environmental Activist
Second Year Students:
The 2nd Year type design project is to develop an 11x17 vertical layout travel poster. Using the skills you learned last year, how can you only use type to develop a poster for like, New York or Paris for example. Research description words of the area you want people to visit.
Lecture - Using Illustrator and Photoshop
We'll be using Adobe Illustrator for this assignment using some specific tools like the Distort, Mesh, and Type commands. We will also need to use Adobe Photoshop to import your image and prepare it to be brought into Illustrator and traced over. We will go over the key components needed to complete this assignment.
Activity 1 - Selecting and preparing your image in Abobe Photoshop
Go on to Google and do an image search to find your famous person.
Make sure you have "large" selected under the search tools.
The picture needs to be a head shot. There can be a neck and shoulders in it if necessary to the design, but no more than that. If the image is large enough, you may be able to crop it to the proper layout.
The image needs to be at least 1024x768 pixels.
Create a new document in Adobe Photoshop that is 11X17 (Tabloid) @ 150 DPI resolution.
The document can be Horizontal or Vertical, but must take up 80% of the layout.
Name the file "initials_famous_portrait" and save it to your folder.
Follow the tutorials below to desaturate and prep your image to trace over.
Activity 2 - Selecting and preparing your Fonts on your computer
Go to the links below to pick out your Fonts.
Download the Fonts to your computer. They should download to your "Downloads" folder in the Dock.
Once downloaded, double-click on the Font to expand the .ZIP file. Once this is done, you will see a folder named after the Font you downloaded.
Double click the file with the ".TTF" extension
The FontBook app will open and load the Fonts.
Remember the Fonts must describe the person in the portrait and the emotion of the image. If it's an actor playing a character in a scary movie, you would use scary looking fonts.
The Fonts also need to describe the person, character they are playing, or scene. If it's a musician or artist, their songs and works of art can also be used.
Make sure you stay on the same computer since the Fonts are only downloaded to your computer.
Copy fonts to your folder or Flash drive.
Activity 3 - Final Printout
Create a new document in Adobe Illustrator that is 11 X 17 (Tabloid) @ 150 DPI in CMYK mode and name it "initials_Font_Portrait.ai" and save it to your folder.
Following the tutorials below, use the Fonts you have downloaded to draw over your portrait.
Use thin fonts for highlights and bold fonts for shadows and to show separation.
Save a copy as a PDF file so the Fonts can be read on other computers.
Save the finished file to your folder along with the fonts.
Save you PDF file to the "STUDENT SUBMISSIONS" Folder
WATCH THESE TUTORIAL VIDEOS BEFORE STARTING YOUR PROJECT
Here is a good example of a headshot found on Google for this project. It has a good composition and contrast. Plus his hood is up and is also wearing headphones.
Step 1 - Create the silhouette version in Photoshop
Open ‘photo.jpg’ in Photoshop. Choose Image > Adjustments > Desaturate.
Add Levels adjustment layer with the following settings:
Create a separate layer draw with the Brush tool over the unnecessary parts with black and white:
Save this version as a JPG file and place it into a portrait format Illustrator document:
Step 2 - Set the image to trace
To be able to use the photo as a guide, you will have to double-click on Layer 1 in the Layers panel and choose Template then click on OK. You can name this layer ‘Tracing’.
Now you need to create a new layer and you can call it ‘Design’.
Step 3 - Choose fonts
Choosing the right fonts for a typographic project is essential. You have to think about the style you are after and the message of the design. In my case I wanted a bit of R&B, street, club, breakdance feel to the design so I chose fonts accordingly.
I prefer to use for projects where it is not a problem to use free fonts. You won’t be able to do that for a design project for big companies like Disney, Mattel, etc. For those big clients, you will have to choose fonts from other sites like for instance. For this project in this example, I worked mainly with the following fonts:
Step 4 - Plan the layout of the text
Before we start adding text to the design, it is useful to plan what would be the best way to arrange the text. It is hard to imagine first how the final piece will look like but with practice you will be able to tell roughly the outcome. A couple of useful things to bare in mind:
Try to use thick fonts for bigger blocks of the design (like hoodie).
Try to use thin, cursive fonts for smaller details (like lines around the eyes).
Avoid using the same font twice close to each other.
Keep gaps between details to separate them (like between the face and the hoodie).
Don’t distort the text too much, make sure it stays legible and looks good.
Try to leave the least amount of negative space where you need to fit text into.
You can create gradual transitions by leaving more negative space in areas where you have middle tones.
Step 5 - Distorting text
Finally, we got to the step, which will be repeated many times. This is the real deal, this is where the designing really starts. I will show you how to distort one text and then you will need to follow the same procedure to finish the whole design.
First of all, you need to select the Type tool and click anywhere on the Artboard. Make sure you have the Design layer selected. Type in your copy and then press Esc.
Now you need to choose Object > Envelope Distort > Make with Mesh. You should also memorize the keyboard shortcut for this feature because you will be using it a lot (Command-Option-M or Control-Alt-M on PC).
In the Envelope Mesh dialog box, you can choose how many rows and columns you need for your distortion. Make sure you check the Preview to see the mesh on the text before you accept it. I prefer to have 4 columns and 1 rows most of the time with text.
If you arrange your text into multiple lines, then of course you can use more rows to make the distortion easier and smoother.
Now that you have the mesh on text, you need to use the Direct Selection tool and select the mesh point(s) that you want to distort. I prefer to select 2 or 4 points and the same time by creating a lasso selection around them. Once I have them selected I move them around and also rotate them by pressing R and dragging them clockwise in this case.
You can also edit the handles around each mesh point to adjust the distortion more precisely.
Step 6 - Editing text after distortion
If you decide to edit a text that you already distorted, there is still way to do it. Thankfully all kind of Envelope distortion is completely non-destructive in Illustrator and keeps the text editable. All you need to do is to switch to Edit Contents mode (indicated with a star shape in a frame):
Once you are in this mode, you can easily change the text and if you wish to switch back to work with the mesh you can choose the Edit Envelope option.
Step 7 - Repeating step 5 until you cover the whole portrait
This is definitely the painful part, because you will need a lot of patience to repeat this step many times until you cover the whole image with text.
As a side note I would like to mention that it is not always necessary to distort the text. If you use small enough text, you can get away with straight, undistorted words as well.