Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Copy of Typography

No description

Normunds Tiltins

on 20 December 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Copy of Typography

Typography A Tutorial What is Typography? Typography is an art. When we think of Graphic Design and Web Design, typography and its abilities to be used as a design in itself are all too often overlooked. Typography uses type design, arranging type and glyphs* in its creation.
It is used in multiple different design scenarios such as logo design, banner design, ads, magazine covers or pages, business card design, etc.

Among all the elements of graphic design, typography is an important one. In terms of design, it means being able to knowledgeably choose the kind of font type that works with the design, as well as the font type that works well on its own. It's the art of arranging font type into a layout, and even sometimes making it into a layout entirely. This arrangement includes the careful selection of typefaces, font size, line length, line spacing and the adjustment of spacing between letters and words. All together these elements form typography.

*In its most general terms, a glyph is an element of writing; a mark on a written medium that contributes to the meaning of what is written.
In typography, a glyph is the "specific shape, design or representation of a character." Above: Examples of various glyphs of the lowercase letter "a" Typography is an extremely important part of graphic design. Why? Because, along with the visual graphics, the typeface and typography design is the thing that viewers look at most and base their opinions on when viewing a layout or a design, whether on an ad, a poster or a website.

Having an aesthetically appealing design goes hand in hand with choosing the right type and using typography as an art rather than using it as a secondary tool for conveying a message. Why is TYPOGRAPHY important? THE ASSIGNMENT This assignment will focus on using typography as an art form and using it as the main source of both conveying a message, and of the layout itself.

It will allow for plenty of creative liberty, encouraging originality and evoking thought as to what looks good in a design, what doesn't, and why typography works for the creation. The task is to create something, whether a poster, an ad, or just an appealing graphic, using mainly typographic resources.

I will present you with examples of interesting typography designs, various different tutorials for a multitude of typography-related designs, and will walk you through an in-depth tutorial of creating an interesting and dynamic splatter-text as well as a tutorial on creating a fun graphic using only text as our medium, a design commonly seen in typographic creations. THE TASK Photoshop will be the main tool for you to create your typographic creation. CS5 has many fantastic features in editing and creating dynamic effects to font type, and makes it easy to use different stocks, fonts, and brushes to create the perfect design. Contents... Photoshop Tools By opening Photoshop CS5, and clicking on 'Window', then 'Character', a small window will appear on the right hand side of the screen, beside the layer panel (pictured below). By following these steps again, and clicking 'Paragraph', another window will appear, in a tab on the existing one. The character window will allow you to edit and change a font's size, metrics, the height of the font relative to its closeness to other words in the paragraph, the spacing between letters and the colour. The paragraph tab will allow you to edit everything relating to the spacing of the paragraph, the lining (left, centered, right, justified), the height, and much more. The text panel, below, appears when the 'Font' tool is selected on the left,
where the tool panel is located. It allows you to edit the font size, face, style, sharpness, and path. ** There are multiple fonts for you to choose from, which are available on Photoshop upon installation. But however vast the selection is, it is still limited. When using typography as a design, having many different fonts to choose from, aside from the typical ones, is important. Which brings us to resources. RESOURCES ----------------------------------------- ----------------------------------------- There are many different places and websites at which you can download fonts and brushes to improve your selection and your design capabilities.
When downloading fonts, the file type should typically be a TrueType Font. After installing, clicking the download should bring up a window with the font displayed, and the option to install it.

With other resources, such as Photoshop brushes, the font type will be in the format .abr. Upon clicking it, Photoshop should open and the option to use the brush set will be available under the brush tool selection.

These two resources are some of the most important aspects to creating a dynamic and interesting typographic design. Where can I get these? ----------------------------------------- Many websites, if searched for, offer these for download. Personally, however, there are two that provide a large variety of fonts and brushes, as well as other resources, for download.
For fonts, the website dafont.com provides a vast list of user-submitted fonts for free download, categorized under a neat and organized navigation, enabling you to easily search for the type of font you are looking for.
For brushes and other resources, deviantart.com is a website among many which features user-submitted and user-created resources for download. For this website, make sure to read each uploader's terms and conditions before using their resources for commercial use. DaFont.com
DeviantART.com EXAMPLES of typography in design The examples above feature different forms and styles of typographic design. Using words and phrases to convey a message, using them to form an image, using them impactfully with styling techniques to evoke emotion: All of these forms of typography are good designs. THE TUTORIAL This tutorial will be a basic tutorial on how to create an interesting graphic of a 'bleeding' font. i.e., the illusion of ink and water bleeding over a page. We will be using the aforementioned websites to obtain our resources, and Photoshop to create the design. Create a blank document in Photoshop by clicking on File > New. The document size I chose is 800px by 800px. The next step is to download the font 'Bodoni XT' from dafont and create your text on the document in whatever style you want. *If you want to create your text on a path, select the pen tool and create the path you want your text to take the form of, and then select the font tool and click on the path. STEP ONE: STEP TWO: The next step is to download your resources. Since we want this text to look like bleeding ink, we're going to download some brushes from artists. Scour Deviantart for 'ink splatter' brushes, 'gradient splats', 'coffee stains,' and 'sumi-e' brushes. Sumi-e is a form of Japanese gradient painting using ink and bamboo brushes, it creates a great inky effect which will be perfect for this look. STEP THREE: After you have downloaded your brushes, you'll find them at the bottom of the brush selection window. Create a new layer and drag it underneath your text layers. Start placing splatters and smudges around your letters to create the illusion of bleeding ink. Use multiple different layers for this process so that some splatters and stains are darker than others. Play with the opacity and size of these resources, and when you're done you should have something as pictured above. If you want to add some drips, download some 'spray-paint' brushes and add drips and ink leaks to your image. STEP FOUR: As our image nears completion, it's starting to look already like bleeding ink text. To add some finishing touches onto our design, we'll add some textures. Do a search for 'grunge' textures and select one that will match our effects. I chose this one: After choosing your image, desaturate it by selecting Image > Adjustments > Hue & Saturation and dragging the saturation all the way down. We're going for a black and white effect in this image, so we want monochromatic shades. STEP FIVE: After we've desaturated our grungy texture, we need to create a new layer and drag it to the very bottom of our image so that it lies behind our text and our ink splatters. After that, bring down the opacity of the layer so that it doesn't overpower our text. I set the opacity to 25%. The final product should look something like this. This tutorial is for inspiration, it's easy to make simple text look how you want it to using simple resources, and easy to convey a certain emotion or idea using typography. The next tutorial is a little more advanced: We are going to create a portrait using only typography. This is a common and dynamic way to create a lovely typographic design. ---------------------------------------------------------------------------------------------------------- STEP ONE: Find an image that you would like to use for this creation. Preferably one with high contrast and easily definable features (if your photo is a portrait). I chose this photo of actress Olivia Wilde. The first thing to do is paste your image into Photoshop in a new document.
Once you have done that, create a new document and using the text tool, create a bunch of words using different type faces and sizes. It should look something like this: STEP TWO: Once you have your document of different typefaces, you'll make each one into a brush. Take the rectangular selection tool (M) and select one word, then under 'Edit' you will find 'Define Brush Preset'. Name the brush and click OK. Repeat the process for each of the words. STEP THREE: Switch back to your document with the photograph. Under 'Select', choose 'Color Range'. From the drop-down menu, select 'Shadows' and click OK. Press CTRL+J (Mac: Command-J) to copy those selected pixels onto a new layer.
Repeat the same process, but select 'Midtones' from the color range drop-down dialog instead. Click the eye icon next to your original image to hide it from view so you can see the progress so far. Click on the Midtones layer and from the Edit menu, select 'Fill' and from the drop-down, select 50% Gray. Check the 'Preserve Transparency' option.

Repeat this process with the Shadows layer, except select 'Black' from the drop-down menu and click OK. Remember to preserve the transparency. Then, merge the two layers. Thus far, you should have something that looks like this. STEP FOUR: Create a new layer and press CTRL+backspace (Mac: Command-Delete) to fill it with white. Select one of the custom brushes you made in the brush selection dialog, and bring up the brushes panel by clicking the 'Window' tab and selecting 'Brush'. A window will appear with options to edit your brush. Adjust the brush spacing to you can define the words more clearly. Under 'Shape Dynamics' on the left, edit the rotation and size of the brush. Experiment with these tools and repeat the process with other brushes.
Paint with these brushes on the new layer you created until you get something looking like this: Create a new layer and bring it above the black and grey portrait layer. Again, press CTRL+backspace (Command-Delete) to fill the layer with white. Hide all the layers in your layer panel (click on the eye) except for your black and white portrait layer. Select the entire layer ('Select > Select All') and copy it. STEP FIVE: Show all the layers again and click on the layer with the painted words to activate it. Click the 'Add Layer Mask' option at the bottom of the layer panel and then hold down ALT (Mac: Option) and click on the layer mask thumbnail. This will hide the painted text and show only the layer mask. Press CTRL+V (Mac: Command-V) to paste what you have copied onto the mask and deselect it. Press CTRL-I (Command-I) to invert the mask, it should now look like a negative image. STEP SIX: Activate the painted text layer, not the mask layer, by clicking on the layer thumbnail and you'll see a vague outline of your original image with the text brushes you created. Select your brushes from the menu and continue painting over it, the layer mask will hold the form of your original image so that you can paint only in the shadowed spaces. Eventually you'll notice your original image start to take noticeable form. This should be your final product. This technique is used in many different ways in typography and design, as shown in the previous examples. It's a good way to convey a message if the image and words relate to a cause.

The assignment given was to create a layout, an ad, or just a design using typography and to use your creative abilities to make it interesting. Use these tutorials as reference and
Full transcript