DESIGN BRIEF
Creating a Word as an Image encourages you to see letters beyond their utilitarian dullness. It’s about discovering the magic behind the unique shapes and infinite possibilities of letters and words.
**NOTE: Flickr does not host animated GIF’s so when we get to that point in the project, open an IMGUR account and host it there.
ASSIGNMENT 1 | Project 1
- CREATE a new page on your website under the PROJECTS tab called: Photoshop Word as Image
- Create a new file in Photoshop: 8.5 x 11″ at 300ppi at CMYK.
- Recreate ALL words found on my Pinterest typography board. Use the same color font (get as close as you can) as used in the images on the Pinterest board. They should look exactly like the images on my board, no variations.
- Create a folder on your DropBox called : Photoshop Word as Image. Place your PSD AND PDF of the recreation there.
- Save as date_last name first name_WordAsImageRecreation
- Post to both Flickr and your project page. Make sure you’ve resaved the file for web at RGB and 72ppi.
SAVE YOUR PSD’S!
- Each letter of the word should be create on a DIFFERENT layer. Each word should be created in its own document
- Document setup: 8.5″ high x 11″ wide
- Resolution:300ppi
- Color mode: CMYK
- Name your file date_yourname_wordname.psd
- Save each file as a PSD
THEN
- Save each file for web
- Size: 800px wide
- Resolution: 72ppi
- Color mode: RGB
- Same file name BUT date_yourname_wordname.jpg
- Save each file as a JPG
Post to both Flickr and your project page.
- DUE DATE: Week 9
ASSIGNMENT 2 for Project 1
DESIGN BRIEF
Word as Image | 3 ORIGINAL WORDS
DIRECTIVE
- Choose any THREE words of your own to design as an image
- 3 separate documents
- Each letter of the word should be create on a DIFFERENT layer so that you can animate it later on.
Challenge: Create an image out of a word, using only the letters in the word itself.
Rule: Use only the graphic elements of the letters without adding outside elements.
The font and image should be in harmony with the phrase. Read this to help you choose your fonts. Note: There are no images in this project.
- Dictionary definitions of each of your words
- Synonyms of each of your words using a thesaurus
- Mind Map – create a mind map for each of your three words
- Research – write a few sentences about each piece you post explaining how it relates to you word and/project.
- Inspiration – write a few sentences about each piece you post explaining how it relates to you word and/project.
- Three Sketches of Each Word
- In-class Critique due by the end of class
All of the above should be uploaded to both Flickr, your project Photoshop project page and to your DropBox.
DUE DATE: Week 9 | We will have in-class critiques
- In-class Critique due by the end of class
- Color Sketches of Each Word
- Photoshop Iterations of Each Word
DUE DATE: Week 10
- Research
- Inspiration
- Three Sketches of Each Word
- Color Sketches of Each Word
- Photoshop Iterations
- Final Photoshop PSD Files
- Final Photoshop JPG Files
- Word Document Description (500 words minimum)
- ALL files should be placed on Flickr, on your project page, and in a folder on your DropBox. Name the folder: date_yourname_WordAsImage
- Color print out of all three words printed on one 11×17 piece paper
- Word document printout
DUE DATE: Week 10
ASSIGNMENT 3 for Project 1
RESOURCE: Animated GIF’s (Graphics Interchange Format)
Most popular name example
DIRECTIVE
- Creative an animated GIF of each of the THREE words you designed in Photoshop.
- Open the PSD from each of your words
- Save each layer as a separate letter.
- Animated the letters.
- Save as a GIF
- Put those GIFS’s in separate folders. ex. word 1, word 2, word 4 inside of your DropBox project folder.
Upload to both Flickr and your project page.
DUE DATE: Week 9 Wednesday
TUTORIAL on Creating Animated GIF’s
See below. This link is an additional resource. Photoshop / Creating frame animations
1. Collect all the images you want to use and place in a folder.
2. In Photoshop create a new image – image size: 700px wide, color profile: RGB, ppi: 72.
3. Drag all the images from your folder into the new document in Photoshop. When you drop the images into the new document, the first image displays an overlaid “x.” Click the Commit
Transform checkmark on the top-right or press Enter to position the images as separate layers. Bring in all the images until they are loaded and visible in the Layers panel.
4. You can rearrange the layers according to the sequence of the animation.
5. Go to Window > Timeline, to open the Timeline. On the Timeline (small pull down menu), select
Create Frame Animation.
6. From the Animation palette menu (the downward arrow on the top-right of the palette), select Make Frames from Layers. You can also select Reverse Frames if needed. The layered file is placed on the Timeline with each layer changing into an individual frame for the animation.
7. Set the time delay for each frame according to the animation you want to create. Click the drop down button just below each frame. Custom delays can be set up in the pop up menu. Each frame can be set individually with specific time delays. If all frames are selected, all frames can be set to
the same time. You can also use the pop-up (marked Forever) to set the animation loops. Forever can be used if you want it to loop indefinitely or any specific amount from the pop-up.
8. Go to File > Save for Web.
Internet tips to help make your GIFs as small as possible.
1. Crop away any extra space around the image. Reducing the pixel dimensions of your image is the single most effective way to reduce the file size.
2. Reduce the number of colors in the image.
3. Reduce the number of frames in the image.
4. Avoid dithering. Dithering may make some images look better, but it will increase the file size. If your software allows it, use a lower level of dithering to save extra bytes.
5. Some software has a “lossy” option for saving GIFs. This option can significantly reduce the file size, but it also reduces image quality.
6. Don’t use interlacing. Interlacing usually increases the file size.
7. Avoid useless animation.
8. GIF images with large blocks of solid color and horizontal patterns compress better than images with color gradations, soft shadows, and vertical patterns.
9. When reducing colors in GIFs, you’ll get the best compression when the number colors is set to the smallest possible of these options: 2, 4, 8, 16, 32, 64, 128, or 256.
ASSIGNMENT 4 for Project 1
##EXTRA CREDIT##
ADD audio to each of your three animated gif’s.
RESOURCE
- Creating Animation with Audio in Photoshop CS6 Tutorial | Link
- SoundCloud | Free background sound
DUE DATE: Week 9 Wednesday