DAP - Blog of Debora Parentes | deboraparentes.com » Typography

Photoshop Tutorial – Face Transform with Type

Debora Parentes — Thu, 25 Mar 2010 12:41:05 +0000

In this tutorial, written again by Violet Bag, you are going to learn how to change a normal and basic image of a little kid and transform his face so that it appears to be constructed with text.
There are fifteen easy to follow steps to complete this tutorial and should not take you any longer than 30 minutes to complete.

You can download the source file, including the .PSD file, here:

Face with Type Source Files

And this is the final image you will learn to create:

Step 1

First we start by opening this Picture of the face of the kid below (source files).

Step2

We need to firstly resize the image so that it will work better with the parameters being used in this tutorial.
Go to Image > Image Size and apply the following settings:

Step 3

Now that we have our image resized go to the bottom part of the layers panel and add an Adjustment Layer: Curves.
Click on the icon that is a half black and half white circle, as you can see below.

Step 4

We now need to merge the Picture and the adjustment layer. Convert the background layer into a normal layer and double click on it and hit OK.
Then select the kid layer and the adjustment layer and press CTRL + ALT + E. You will now have your merged layer.

Step 5

Add another layer and fill it with black.

Step 6

Grab the text tool and draw a rectangle that covers the entire image, as you can see below:

Step 7

Start typing any text anything you want (this tut used Georgia, 8pt). What you need to do is select the paragraph mode to justified-center. Use the one that is selected in the picture below.

Step 8

Keep on typing until you cover the whole image with text…

Step 9

Now add a layer mask to this type layer. Hit the icon that is on the bottom of the layers palette, the one that is a rectangle with a circle inside.

Step 10

Now you need to click on the little eye that you see beside the layers to make the first two layers invisible. Once you do that you should see the kid’s
face only, select that layer. Hit CTRL+ A to select the whole image, and then CTRL + C to copy the kid’s face.

Step 11

Now, pay atention here. ALT + Click on the layer mask thumbnail.

Step 12

You will now see that your image has turned to white. Now Hit CTRL + V (or go to Edit > Paste).
And the face of the kid should be pasted on the mask.

Step 13

What we are seeing now is the mask. If you press ALT and click on the mask layer thumbnail it will give you the chance to modify the mask, not
the image. You can do it any time and to go back to your image just click on any other layer.

Step 14

Now we need to put all layers visible:

Step 15

You see, now we’re not seeing the mask anymore. As you can see the text has merged with the original image because of the mask.
Here’s what it looks like:

Step 16

To make it a little brighter let’s duplicate the type layer and lower the opacity to 46%:

Step 17 – Finished

This is the final result.
Hope you’ve enjoyed it and if you have any questions let me know. See ya.

The Author

Paola has been the author of todays tutorial, she is also known as Violet Bag and you can visit here website, Violetbag.com to view some of her awesome works and some more tutorials.

High-Quality Free Fonts for Professional Designers

Debora Parentes — Tue, 16 Feb 2010 14:01:50 +0000

We know that typography can be used as a way of mutual understanding between you and your users. To communicate effectively, typography requires appropriate typefaces as there are a lot of unsung fonts out there that have really inspired us. Color and size of type elements are much more prevalent than in text typography. Most display typography exploits type at larger sizes, where the details of letter design are magnified. Color is used for its emotional effect in conveying the tone and nature of subject matter.

References For Free Fonts

Other Resources

Article’s Main Image Source | Tato Toledo

Technorati : fonts, free, freebies, goodies, typography
Del.icio.us : fonts, free, freebies, goodies, typography
Zooomr : fonts, free, freebies, goodies, typography
Flickr : fonts, free, freebies, goodies, typography

The Simplicity of Helvetica

Debora Parentes — Wed, 27 Jan 2010 21:21:14 +0000

Helvetica is one of the most popular typefaces in the world.

Technically speaking, it’s a sans serif Grotesque typeface, inspired by and based on the Akzidenz-Grotesk typeface created by Berthold around 1898.

In practical terms, though, it’s used by designers at independent firms, big corporations, and everything in between, from all over the world.

Helvetica has been featured by MOMA in New York and has received a number of awards and worldwide recognition. There’s even a documentary and a few books about it.

But why is Helvetica so popular? What is it about this font that seemingly tries to be inconspicuous that has made it such a part of our culture and daily lives?

We see it dozens of times every day, from product logos, to websites, to packaging, and numerous other items. Read on for more information about Helvetica and why you might want to consider it in your next design project.

A Brief History

The original Helvetica was designed in Switzerland in 1957 by Max Miedinger and Eduard Hoffmann at the Haas type foundry (Haas’sche Schriftgiesserei). Haas was controlled by the type foundry Stempel, which was in turn controlled by Linotype.

Helvetica was originally called Die Neue Haas Grotesk, and was closely based on Schelter-Grotesk. It was created specifically to be neutral, to not give any impression or have any meaning in itself. This neutrality was paramount, and based on the idea that type itself should give no meaning.

The original Helvetica brochure.

The marketing director at Stempel decided to change the name to Helvetica in 1960 to make the font more marketable internationally. Originally it was proposed that the typeface be called Helvetia (Latin for Switzerland), but the designers didn’t want to name it after a country, and so it was called Helvetica instead (which is Latin for Swiss).

Helvetica Variations

There have been a number of Helvetica variations created, including a number of language variants (Cyrillic, Korean, Hindi, Japanese, Vietnamese, and Greek among them). Others variations include:

Helvetica Light was designed at Stempel by artistic director Erich Schultz-Anker and Arthur Ritzel.
Helvetica Compressed was designed by Matthew Carter that’s similar to Helvetica Inserat, but with a few differences.
Helvetica Textbook is an alternate design with a few different characters.
Helvetica Rounded was developed in 1978 and includes rounded stroke terminators. It’s only available in bold and black versions (including condensed and obliques), plus an outline version that wasn’t available digitally.
Neue Helvetica was developed in 1983 and has more structurally unified heights and widths among its characters. It also has improved legibility, increased spacing in numbers, and heavier punctuation marks.

Rise In Popularity

Helvetica was designed in post-war Europe, and many companies were looking for a change. It was the opposite of all the kitschy, fancy, decorative typography that covered corporate materials and advertisements.

Helvetica’s sleek lines and modern sensibilities were just what companies were looking for to remake their identities and set themselves apart from the past.

Corporations stick by Helvetica because of what they have invested in it. Because of this, it has become associated with corporate culture and business to some degree. This is one reason why American Apparel chose to use the font for their own brand identity to poke fun at corporate culture in America.

Compared to Arial

Arial is a very similar font to Helvetica, and was developed in 1982. To an untrained eye, the differences between the two fonts is almost undetectable. But there are key differences among certain characters, notably G, R, r, t, a, and 3. I Love Typography has a great comparison of how Arial and Helvetica differ.

Helvetica is somewhat more refined than Arial, even though each one has the same character width.

One of the key differences, though, is in the strokes for each character. Helvetica uses primarily vertical or horizontal strokes, while Arial often uses diagonal strokes.

If you’re interested to see if you can tell the difference between Arial and Helvetica, Ironic Sans has a quiz that compares 20 popular logos originally designed with Helvetica redone in Arial and compared.

It’s harder than you’d initially think, particularly if those characters mentioned above (with key differences between the two fonts) aren’t present in the logos.

Technical Details of Helvetica

Technically, Helvetica is a very interesting font. There are a few things that set it apart from many other sans serif fonts, and make it unique.

Helvetica’s characters always have vertical or horizontal terminations on their strokes, never diagonal.
Helvetica is as much about the negative space surrounding the letters than about the lines that make up the characters themselves.
The negative space contained within the lowercase “a” closely resembles a teardrop.
It has monotone stroke weights.
It remains legible when in motion, one reason it’s popular for signage and automaker and airline logos.

Designing with Helvetica

On of the best things about Helvetica is its neutrality. It was designed specifically not to give an impression or have any inherent meaning. And because of this, it’s very adaptable to use for different design projects. That’s one reason why it’s been used by everyone from Post-It to American Apparel. It’s also widely seen online, as it’s a web-safe font on Macs.

If you’re looking for a font that rides the line between classic and modern, conservative and edgy, or elegant and relaxed, Helvetica might just be your answer.

Depending on the design elements you include around it, Helvetica can be any or all of those things. Because it’s a sans serif font, it does tend to sway a bit more into the modern category, but it’s simple enough to fit in within a more traditional design.

Helvetica is particularly well-suited to signage and other designs where legibility is key. This is further reinforced by the wide variety of companies that have used the font in their logos or other corporate identity materials (American Apparel, American Airlines, Target, the NYC Subway, etc.).

Another of Helvetica’s main advantages is that it’s a very “safe” font. If you’re unsure of how particular typefaces influence design, Helvetica can be a good fall-back option that will have little impact by itself.

This can be useful to designers who are just getting started or for those studying design. But just remember, because Helvetica is “safe”, you’re unlikely to win any awards for being edgy or daring when you use it, at least not for the typography itself.

Helvetica in the Wild

As already mentioned, Helvetica is used in graphic design and web design all over the place. Below are a few examples of Helvetica in the real world. For more examples, check out our previous post, “40 Excellent Logos Created with Helvetica“.

One of a series of vintage-looking covers for social media sites (available as posters).

The NYC Subway system’s signs and map were changed to Helvetica in the 1970s by Massimo Vignelli.

U.S. Government forms all use Helvetica.

Helvetica looks neutral yet refined when cut from copper (just ignore the Comic Sans flyer below).

The “Love Happens” cover is in Helvetica; the other is (probably) in Arial.

Helvetica is neutral enough that it works even on signs that would normally use a more traditional font.

The commemorative Moleskine notebooks created for Helvetica.

Helvetica Light.

Another church sign in Helvetica.

Target has one of the more recognizable Helvetica logos.

Fox’s TV show “Fringe” uses Helvetica on their on-screen titles. It remains legible even at odd angles.

Another image from the NYC Subway.

NYC is not the only city to use Helvetica for transportation signs.

A tattoo in Helvetica.

A very early advertisement using Helvetica, dating to 1959.

Another vintage advertisement; the Motorola logo was in Helvetica, along with the headline.

Further Resources

Helvetica and Alternatives to Helvetica – A comparison from The FontFeed of Helvetica and similar fonts.
For Logo Power, Try Helvetica – An article from BusinessWeek on Helvetica logos.
Swiss Legacy – Swiss Legacy has an entire category dedicated to designs using Helvetica.
Helvetica at 50 – A great article from BBC News on the 50th anniversary of Helvetica.

Image credit: iPhone Helvetica Wallpaper (used in the article intro)

Written exclusively for WDD by Cameron Chapman.

Beautiful Fresh Free Fonts for Designers

Debora Parentes — Wed, 27 Jan 2010 20:47:49 +0000

The fonts are one of the most essential elements of every web or print Project; there have been many other selective collection font posts around the world.

Today we’re glad to present you Val Font, FILE Font, LOT Font and Cube Font designed by the FontFabric. Please read the license agreements carefully – they can change from time to time.

If you don’t want to miss out our next posts, you can Subscribe to the 2Experts Design Blog or follow us on twitter

VAL Font

VAL font is applicable for any type of graphic design – web, print, motion graphics etc and perfect for t-shirts and other items like logos, pictograms.

Format: Opentype (.otf) Compatible: PC & Mac Details: 215 Character Set, Manual Kerning, Tracking / Pairs Price: Free

FILE Font

FILE font is applicable for any type of graphic design – web, print, motion graphics etc and perfect for t-shirts and other items like logos, pictograms.

Format: Opentype (.otf) Compatible: PC & Mac Details: 55 Character Set, Manual Kerning, Tracking / Pairs Price: Free

LOT Free Font

LOT free font is applicable for any type of graphic design – web, print, motion graphics etc and perfect for t-shirts and other items like logos, pictograms.

Format: Opentype (.otf) Compatible: PC & Mac Details: 78 Character Set, Manual Kerning, Tracking / Pairs Price: Free

Cube 02 Font

Cube 02™ is applicable for any type of graphic design – web, print, motion graphics etc and perfect for t-shirts and other items like logos, pictograms.

Format: Vector file (.eps) Compatible: PC & Mac Details: 36 Character Set, colored alphabets Price: Free

Enjoy this Post? Subscribe to the 2Experts Design Blog or follow us on twitter

The History of the Ampersand and Showcase

Debora Parentes — Wed, 13 Jan 2010 20:55:25 +0000

A Brief History of the Ampersand

The ampersand can be traced back to the first century AD. It was originally a ligature of the letters E and T (”et” is Latin for and). If you look at the modern ampersand, you’ll likely still be able to see the E and T separately.

The first ampersands looked very much like the separate E and T combined, but as type developed over the next few centuries, it eventually became more stylized and less representative of its origins.

You can see the evolution of the ampersand below (1 is like the original Roman ligature, 2 and 3 are from the fourth century, and 4-6 are from the ninth century).

The modern ampersand has remained largely unchanged from the Carolignian ampersands developed in the ninth century.

Italic ampersands were a later ligature of E and T, and are also present in modern fonts. These were developed as part of cursive scripts that were developed during the Renaissance. They’re often more formal-looking and fancier than the standard Carolignian ampersand.

The word “ampersand” was first added to dictionaries in 1837. The word was created as a slurred form of “and, per se and”, which was what the alphabet ended with when recited in English-speaking schools. (Historically, “and per se” preceded any letter which was also a word in the alphabet, such as “I” or “A”. And the ampersand symbol was originally the last character in the alphabet.)

The ampersand is a part of every roman font. It’s used in modern text often, probably most frequently in the names of corporations and other businesses, or in other formal titles (such as Dungeons & Dragons).

It’s experiencing a bit of a resurgence in general usage, as it commonly replaces “and” in text messages and Twitter updates. Ampersands are also commonly used in programming, particularly in MySQL, C and C++, XML, SGML, and BASIC.

Ampersand Designs

The original ampersand designs reflected their origins as a ligature of E and T. Even as the ampersand has evolved and become more stylized, it still retains the basic shape of E and T combined.

The standard ampersand most of us are used to seeing is the Carolignian variety, and is featured in many commonly-used fonts. Here are some examples:

Andale Mono – A very traditional, sans-serif example.

Apple Chancery – A fancier, serif example.

Kingthings Petrock - A gothic example.

The other common ampersand design is the italic ampersand, featured below:

Monotype Corsiva – A traditional script example.

Scriptina - A less-formal script example.

Aller Dispay – A modern, sans-serif example.

Hill House – A craftsman-style example.

Ampersands in Websafe and Web-Common Fonts

Some websafe and commonly used fonts on the web have excellent ampersand designs. Others, not so much. Here are the ampersands from a variety of web-common fonts:

Arial – Arial has a very basic, sans-serif ampersand.

Georgia - A very traditional, serif ampersand.

Helvetica – Helvetica’s ampersand is slightly more refined than Arial.

Palatino – Another very traditional example.

Times New Roman – A heavy, somewhat bulky-looking ampersand.

Verdana – The verdana ampersand is more squat and square than many other sans-serif examples.

Trebuchet MS – The only web-common font that uses an italic-style ampersand.

If you’re unhappy with the ampersand in a font you’ve chosen for your website, there are ways to use custom ampersands. The Typogrify plugin for WordPress makes it incredibly easy to use a custom ampersand on your WordPress blog.

The Ampersand in Design and Art

Ampersands have become a bit of an obsession for some. There are blogs that focus on ampersands (some within larger typography blogs, others focusing solely on the ampersand). There are t-shirts. And there are a surprising number of people out there who have ampersand tattoos. Here are some examples of ampersands in real life:

Using Ampersands in Your Designs

Whether for a web project or a print design, ampersands can play a prominent role in the look and feel of your website. When used in titles or headers they can add some extra graphic impact without images.

Italic ampersands, which are generally formal and fancy, can add extra elegance to a design that otherwise remains minimal. Carolignian ampersands in a sans-serif font are often bolder and have a modern feeling.

Carolignian ampersands in a serif font have a very traditional feeling, though depending on the specific font they can become more formal or more modern. A few more examples:

Italic Ampersands

Lucida Handwriting

Papyrus

Windsong

Goudy Bookletter 1911

Bernhard Modern

Caviar Dreams

Carolignian Ampersands

Lithos Pro

Tahoma

Optima

American Typewriter

Regency Script

Post by webdesigndepot

Popular Logos with Hidden Symbolisms

Debora Parentes — Wed, 13 Jan 2010 14:16:40 +0000

Some logos are very creative and have subtle symbols and messages that represents something about the company it stands for. We explore a handful of such logos in this collection.

Big 10

The Big Ten Conference is the United States’ oldest Division 1 college athletic conference. Since Penn State joined in 1990, there have been 11 schools in the Big Ten. They revamped their logo by placing a hidden number 11 on either sides of the letter T to stand for the actual number of schools in the division.

Goodwill

Goodwill is a nonprofit organization that helps disadvantaged people in North America. The letter G in the logo is a smiling face, conveying the notion that Goodwill provides happiness and relief to those in need.

Sun Microsystems

If you look at the diamond icon on the left of the company’s name, you will see that it spells out Sun starting from any corner. It is a wonderful example of symmetry.

Amazon

This logo has been around for over a decade, but many people do not know that there’s a hidden symbolism in Amazon’s logo. The arrow from A to Z represents that the website sells everything from A to Z, and doubles as a “smile” to suggest satisfied customers.

Toblerone

In the company’s logo, you will see a bear hidden in the mountain. The bear is the symbol of the city of Berne in Switzerland where Toblerone is produced.

Baskin Robbins

At first glance, this logo looks simply like the initials for Baskin Robins but if you take a second look, you will see the number 31 in the acronym (highlighted in a pink color). This stems from the idea that Baskin Robbins sells 31 types of ice cream, one for each day of the month.

FedEx

The hidden rightward-pointing arrow in the negative space between the letter E and X conveys the speed and precision of the company’s delivery service.

Hope for African Children Initiative

At first glance, this logo looks like a map of Africa, but if you take a closer look, you will see two people facing each other.

Milwaukee Brewers

The old Milwaukee Brewers logo uses the team’s initials (B and M) to form a catcher’s glove holding a ball.

Northwest Airlines

The old Northwest Airlines logo has a very clever icon. Not only does the icon on the left of the text spell out N and W, but the arrow and circle symbolizes a compass pointing in the northwestern direction.

Article by sixrevisions.com

DAP - Blog of Debora Parentes | deboraparentes.com » Typography

Photoshop Tutorial – Face Transform with Type

Step 1

Step2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

Step 15

Step 16

Step 17 – Finished

The Author

High-Quality Free Fonts for Professional Designers

01. Kilogram

02. Franchise

03. Flux Architect

04. PT Sans

05. Bada Bing

06. Lane

07. Sketchetica

08. DejaRip (Registration Required)

09. Kardon typeface

10. Palm of budhha

11. Cartwheel

12. Logofontik

13. Alpharuler

14. Soda

15. Juice

16. Gnuolane

17. Merge

18. Monkey Bars (Registration Required)

19. Orial

20. Costura

21. Branko Kockica

22. Halfway-Font

23. Expressway

24. A_B_ Stochome Modular

25. Knucklepuck

26. Phat Blox

27. Rusticus

28. Leftovers (Registration Required)

29. Lilly

30. Redonda (Registration Required)

31. Exus Pilot

32. Jettletter

33. SMD black

34. Solgas

35. Notice3 (Dingbats Font)