articles on

Typography Mania #21

Typography Mania is a weekly post series that comes around every Wednesday with the best of Typography work on the web, from videos to images everything is full of great design and inspiration. Check out this weeks Mania and comeback in 7 days for more. Make sure to click on each image to go to original location where you can check out more work from each artist and designer. Videos Images Le grand cirque des lettres | by Lavínia Carvalho Wedding Invite | by RazorBrown Jubilee Club - 31/10/09 - Special Guest Alex Neri | by checcco|design Two Left Shoes - November and December Tour | by checcco|design Jubilee Club - 07/11/09 - Nuova Sala & Tabacchi | by checcco|design firm | by j.vb Sam's Town : Music, Money & Mudbugs | by Thoughtbrain Uragano e Arcobaleno - Carmina Burana Concert | by checcco|design ??????? | by okpyx Hits & Kids | by arnaud de conti Skull Print | by Scharwath ubilee Club - 23/01/10 - We Want White | by checcco|design Karel Teige a typografie p. 104 | by oliver.tomas I Do Belive It's Closing Down | by marky1969 Sushi Homework, Fusion | by hey kyle Detail of Typesetter Box 2 | by Angie Naron Tisza 2010 summer | by mil3n revelation | by alshepmcr Denmark Christmas seal: bird | by karen horton Street Typo | by sinister pictures intuitiva | by khamuslestat One Day Project - "Alphabet" | by ~ aidan United States postage stamp: energy conservation | by karen horton Thank You | by RazorBrown Época São Paulo #24 Covers | by Rodolfo França

Friday Fresh Free Fonts #40

Friday Fresh Free Fonts #40

I will be posting some fresh free fonts every Friday, yes I know it's awesome. I will look forward to bring a lot of great fonts that will sure help you improve your typography work. Check out what I selected for you on the FFFF#40 and make sure to comeback for more next week. Click here to view all Friday Fresh Free Fonts Hattori Hanzo by Roman-Shamin Download Hattori Hanzo Raleway by The League of Moveable Type Download Raleway Creampuff by Nick's Fonts Download Creampuff Learning Curve Pro by Blue Vinyl Fonts Download Learning Curve Pro

Typography Mania #20

Typography Mania is a weekly post series that comes around every Wednesday with the best of Typography work on the web, from videos to images everything is full of great design and inspiration. Check out this weeks Mania and comeback in 7 days for more. Make sure to click on each image to go to original location where you can check out more work from each artist and designer. Videos Images Keep Feet & Hands Off Wall | by Florian Hardwig London Transport - Officers' visit to USA in 1946 | by mikeyashworth Vitamin Express | by solzy Obras Selectas: Poesía | by flor.O Surf Liquor. Santa Monica, CA. 2010. | by eyetwist Sparklehorse | by Neil Leonard Alt Fiction Identity | by jimexplore No Kissing | by shock.value Boost Your Health | by wackystuff Japan | by Reanimagic Switzerland Railway Leaflet 1933 | by mikeyashworth Save Me | by dancing-doll TOT - Train, Omnibus, Tram - Underground Group of London, staff magazine cover - February, 1931 | by mikeyashworth R-ogério | by tmnflor Nome | by author Diamonds are forever | by Raid71 Comedy Night - Center Street Pub - Oct. 23rd, 2009 | by Simon's Flickr junkyard Design for chile - Help Chile - A3 | by Simon's Flickr junkyard A Dream That Became A Reality | by Garrett DeRossett Can You Show Me: Day 9 | by ihorizontal dinojr | by Dave Kriebel Bus | by Sold for Parts Emb | by EYE—Q

Friday Fresh Free Fonts #39

Friday Fresh Free Fonts #39

I will be posting some fresh free fonts every Friday, yes I know it's awesome. I will look forward to bring a lot of great fonts that will sure help you improve your typography work. Check out what I selected for you on the FFFF#39 and make sure to comeback for more next week. Click here to view all Friday Fresh Free Fonts Cicle by La Tipomatika Download Cicle Good Dog by Fonthead Design Fonts Download Good Dog BlackJack by Typadelic Fonts Download BlackJack Surface by Bruno Herfst Download Surface

Typography Mania #19

Typography Mania is a weekly post series that comes around every Wednesday with the best of Typography work on the web, from videos to images everything is full of great design and inspiration. Check out this weeks Mania and comeback in 7 days for more. Make sure to click on each image to go to original location where you can check out more work from each artist and designer. Videos Helvetica is an independent movie about typography, graphic design, and visual culture. The movie is an exploration of urban spaces on important cities and also a fluid discussion with good designers about the options and the aesthetics behind the typo. Helvetica encompasses the worlds of design, advertising, psychology, and communication. "This movie is a lesson about typography" Images Vote for Me | by Dominic Clifford Know Your Limits | by Dominic Clifford Maples Too Motel | by Dane Royer Don't Worry | by Orignaux Moose From the Type Project Series | by astrodub Prcssd. Santa Monica, CA. 2010 | by eyetwist Signs, Signs, Everywhere the Signs | by Skeptical Beowulf Hand - Drawn Four | by garytherough Kilimanjaro Darkjazz Ensemble | by Annie Matronic It's an Hold Up | by Renato Pequito Read | by Bradguy Not Far | by Bradguy Ready Set Type | by D McArdel Holograms | by Vincent Viriot Illustrated Type | by David Maclennan Illustrated Type | by David Maclennan Illustrated Type | by David Maclennan Illustrated Type | by David Maclennan Give Me What I Want | by Robert Missen SubTone | by Jarr Geerligs CMYK | by Markie Darkie RGB | by Markie Darkie CK | by Markie Darkie I will honor the spirit of the text | by Jeremy Rojas

Friday Fresh Free Fonts #38

Friday Fresh Free Fonts #38

I will be posting some fresh free fonts every Friday, yes I know it's awesome. I will look forward to bring a lot of great fonts that will sure help you improve your typography work. Check out what I selected for you on the FFFF#38 and make sure to comeback for more next week. Click here to view all Friday Fresh Free Fonts Charis Sil by SIL International Download Charis Sil BallPark by Mikey Rossi Download BallPark BEBAS by Flat-it Download BEBAS Disco by TypoGrafski Download Disco

Typography Mania #18

Typography Mania is a weekly post series that comes around every Wednesday with the best of Typography work on the web, from videos to images everything is full of great design and inspiration. Check out this weeks Mania and comeback in 7 days for more. Make sure to click on each image to go to original location where you can check out more work from each artist and designer. Videos Images New Sketches | by José Azevedo New Sketches | by José Azevedo New Sketches | by José Azevedo New Sketches | by José Azevedo New Sketches | by José Azevedo Vogue | by SHCH Graphics Group Em busca del primer europeo | by m00mi Mind Annihilation | by Pixel Junglist What are you looking for? | by Fabio Has Typography | by Jasper Willemsen Typography | by Jasper Willemsen Felix's bon mots | by Jamie Bennett Felix's bon mots | by Jamie Bennett Have a Nice Day | by Lugu Gumilar Turn Off the Lights | by Steven Medina BBS/Alive Objets Series.Part 3/Anthony N. & Dâm F. | by Vicente García Morillo Poster | by Alexandre Rivaux Tizio Lamp | by Josh Lambert Tire Manual | by Josh Lambert Tire Manual | by Josh Lambert Comme des Garcons | by Lauren Goldblum Audiobook CD | by Erin Semple Day Eleven | by Brian Jaramillo

Creating a Typographic Portrait in Pixelmator

In this tutorial, I will show you how to create a typographic portrait using only Pixelmator. But what does that mean? A typographic portrait is a portrait composed of text. The technique is pretty simple. We will also play with Blending and basic filters. Step 1 Open Pixelmator and create a new document (The size I used was 1440×900 pixels). Then fill the background layer with black. Step 2 Import the photo you want to use (The one I selected was courtesy of Shutterstock. You can get it at http://www.shutterstock.com/pic-46756228/stock-photo-sweet-girl.html). Step 3 Duplicate the layer image and go to Image>Desaturate. Then go to Filter>Blur>Gaussian Blur. Use 15 for the radius. After that, go to Image>Invert. We will use this image later on, so you need to export it. Go to File>Export and export a JPG version of it. Step 4 With the Type Tool (T), add text until the whole screen is filled (For the font, I used Georgia Italic, size 18). After that, duplicate the layer and change the text color to black. Go to Filter>Blur>Gaussian Blur and use 4 pixels for the radius. Move this layer down 2 pixels; that will create a shadow. You will not see it because the background is currently black, but it will will be visible as we start adding more layers. The shadow is important because it will give a nice depth to the composition. Step 5 Add more text, changing font sizes. Always create shadows, as we did in the previous step. Step 6 Now below all the other text layers, add more text. Fill the screen with text, but using a smaller font, such as size 13. After that, go to Filter>Blur>Gaussian Blur and use 3 pixels for the radius. Step 7 Put the photo layer on top of the other layers and change Blending to Linear Burn. Step 8 Select all text layers and go to Layer>Merge Layers. After that, go to Filter>Distortion>Displacement. The filter box will open. Here, you will need to use the image we exported in step 2. Just drag it from where you saved it to the filter box. Increase the scale to 120. Step 9 The Displace filter will make the text look weird, especially the edges, so go to Filter>Blur>Gaussian Blur. Use 6 for the radius. Step 10 Duplicate the photo layer and change Blending to Multiply and the opacity to 50%. You can also group all layers and duplicate them. After that, merge them into one layer and go to Filter>Blur>Gaussian Blur. Use 15 pixels for the radius and then change Blending to Screen and the opacity to 60%. That will add a little glow to your typographic image. Conclusion This is a very handy technique. You can even try it using different shapes instead of text. The technique is quite simple. However, it might take a little time to add text and find the right position for big keywords. Such little details will make all the difference, giving more style to your design. Download Pixelmator File Click here to download the Pixelmator file.

Friday Fresh Free Fonts #37

Friday Fresh Free Fonts #37

I will be posting some fresh free fonts every Friday, yes I know it's awesome. I will look forward to bring a lot of great fonts that will sure help you improve your typography work. Check out what I selected for you on the FFFF#37 and make sure to comeback for more next week. Click here to view all Friday Fresh Free Fonts Cantarell by Dave Crossland Download Cantarell Merge by Phila-Type Download Merge Riesling by Bright Ideas Fonts Download Riesling Marketing Script by Dieter Steffmann Download Marketing Script

Typography Mania #17

Typography Mania is a weekly post series that comes around every Wednesday with the best of Typography work on the web, from videos to images everything is full of great design and inspiration. Check out this weeks Mania and comeback in 7 days for more. Make sure to click on each image to go to original location where you can check out more work from each artist and designer. Videos Images Hatch Show Print | by Carli Dottore Think Pink Poster | by Carli Dottore Print Wip | by F925 Women Print | by Mr. Fancy Pants Bryant Aerosmith Silkscreen | by mico.toledo Oh Hell Yeah!!! | by dylanRMullins Conejo | by Geotypografika Agropo Typeout | by Teja Ideja There is no Peace on Earth | by vistavision Typography | by bpelletier Overprint | by David Fajula Girls Like You | by NVasion W2 Letterpress | by gmcmullen Cover design by Amber Gulilat | by Tate Publishing Design Cover design by Kandi Evans | by Tate Publishing Design Typography Mania | by TyPe is RAD Me Typo | by krisz974 Graphic Poster | by Anthony Libonati TTC Poster Northbound | by Jonathan Guy White Rabbit | by the?aninh Norm's | by TooMuchFire

Friday Fresh Free Fonts #36

Friday Fresh Free Fonts #36

I will be posting some fresh free fonts every Friday, yes I know it's awesome. I will look forward to bring a lot of great fonts that will sure help you improve your typography work. Check out what I selected for you on the FFFF#36 and make sure to comeback for more next week. Click here to view all Friday Fresh Free Fonts Anivers by exljbris Font Foundry Download Anivers Museo Slab 500 by exljbris Font Foundry Download Museo Slab 500 Calluna by exljbris Font Foundry Download Calluna Delicious by exljbris Font Foundry Download Delicious

Typography Mania #16

Typography Mania is a weekly post series that comes around every Wednesday with the best of Typography work on the web, from videos to images everything is full of great design and inspiration. Check out this weeks Mania and comeback in 7 days for more. Make sure to click on each image to go to original location where you can check out more work from each artist and designer. Videos Images Promo Poster | by Shawn Avery School is Such an Odd Word | by Wacky Stuff Promo Poster | by Shawn Avery NYC Typography - Williamsburg - Brooklyn | by Ampers Anderson This is the Woman | by World of Good Hand Lettering | by Nate Williams Good Times | by Cory Remjeske How to Draw Pain | by Porelsol Jitish Kallat | by Chris 9 Love | by Hudlow Ecuador Postage Stamp | by Karen Horton Font Poster | by Network Osaka In Other Words | by Patrycja ! | by Robert Wil5on Classic | by Paulo Perdigão Helvetica Poster | by Fábio Shimana Metropolis | by Jeff Rogers Goody's Coffee Shop | by Jerici Cat Cofetarie | by red-pencil-sharpener Mean Streets | by Raid71 Bulevard | by red-pencil-sharpener A | by Nick Adam

Super Easy Typographic Portrait in Photoshop

Last year we posted on Abduzeedo a very cool post about typographic portraits, the 45 Amazing Type Faces - Typographic Portraits became one of the most popular posts on Abduzeedo, and a lot of people asked me how to create that effect in Photoshop. We have also posted a little tutorial showing how to do that using, Flash Photoshop Quick Tips #5 - Typographic Portrait, however I decided to create a nice typographic effect using just Photoshop. So in this tutorial I will show you how to create a really cool and super easy typographic portrait in Photoshop. We will use the Displace filter and some Blend Modes to achieve the effect. The whole process is quite simple but it might take you some time to add the texts and elements, but once you do that the rest is very straight forward. Step 1 Open Photoshop and create a new document. I used 2560x1440 pixels for the size. Then import a photo of yours, I'm using a portrait taken by a John Arlington, a great photographer friend of mine. The photo I have is with white background, so extract the background. Step 2 Duplicate the layer and go to Image>Adjustment>Desaturate. You will have a black and white photo. Add a white background. After that save the file, it has to be PSD otherwise it won't work with the Displace filter. Step 3 With the Horizontal Type Tool (T) create text boxes and start adding texts. The idea is to play with the texts, they don't have to be readable, or at least with normal legibility, so play with the line-heights, reduce that so the lines overlay one another. Also make some keywords much bigger and bold, like in my case I highlight some words like Photoshop Tutorials, Illustrator, Inspiration... Also, play with italic, regular texts as well as alignments and text sizes. Tip: I used Garamond for the font, I think serif fonts look much better for this effect. Step 4 For each layer, go to Layer>Layer Style>Drop Shadow. Use Multiply for the Blend Mode, black for the color, 90º for the Angle and 5 pixels for Distance, Spread and Size. Also, group all the layers and the duplicate the group. Go to Layer>Merge Group and then go to Filter>Blur>Gaussian Blur. Use 10 pixels for the Radius. This blurry layer will have to stay behind the regular one. The idea is to add some depth to your text, that's why the shadow. You can duplicate the orginal text again and move it a little bit to the top and left as well to add even more depth. Step 5 Select all the text layers and merge them into one layer only, then go to Filter>Distort>Displace. A dialog box will appear asking you to choose a file. Select the PSD file we created on the Step 2. After that for the Displace settings use 15 for the Horizontal and Vertical Scale; use Tile for Displacement Map and Repeat Edge Pixels for the Undefined Areas. The displacement map will distort the layer based on the greyscale photo we used, the dark tones go down while the lights go up. Step 6 Put the photo layer on top of the white text layer, then change the Blend Mode of the photo layer to Light Burn. Step 7 The photo has too many details, so go to Filter>Noise>Dust & Scratches. Use 7 pixels for the Radius and 0 levels for the Threshold. Step 8 Mask the text layer so you will have just the texts over the photo. Conclusion You can reduce a little bit the saturation and as I mentioned before, you can add more text layers and even try different symbols and shapes. There are many ways to create this effect, this perhaps is the easiest one, but you have to be very careful to make everything very subtle, otherwise the effect won't look as cool as we expect. Click on the image for full preview Download the Photoshop File Click here to download the Photoshop file used for this tutorial

Friday Fresh Free Fonts #35

I will be posting some fresh free fonts every Friday, yes I know it's awesome. I will look forward to bring a lot of great fonts that will sure help you improve your typography work. Check out what I selected for you on the FFFF#35 and make sure to comeback for more next week. Click here to view all Friday Fresh Free Fonts Kilogram by KalleGraphics Download Kilogram Bentham by Ben Weiner Download Bentham League Gothic by The League of Moveable Type Download League Gothic Junction by The League of Moveable Type Download Junction

Typography Mania #15

Typography Mania is a weekly post series that comes around every Wednesday with the best of Typography work on the web, from videos to images everything is full of great design and inspiration. Check out this weeks Mania and comeback in 7 days for more. Make sure to click on each image to go to original location where you can check out more work from each artist and designer. Videos Images ESPN magazine | by Andy Gilmore TJ Bolting & Sons | by i_need_my_device Medecine Generale | by Andreas Sundgren Happy Card | by Philippe Nicolas YES | by Philippe Nicolas Klinkhardt 2645 | by n1ke It's a Miracle | by Jeff Rogers M | by Jeff Rogers S | by Jeff Rogers Heart Like a Feather | by Jeff Rogers NYC | by Jeff Rogers Judd & Maggie...& Dylan | by Jeff Rogers Merry Christmas | by Jeff Rogers Chanterelle Menu Cover - 1990 | by Robert Indiana 73 | by Albert Exergian Why the Monkey Dances | by Kevin Cornell Impeccable | by Hal Taylor Haiti | by John Downer Photography 3 | by Arthur Hawkins Two | by Ewald Spieker

Lost in Space Typography in Photoshop

Last week I was checking out some of the Typography Mania posts, and got really inspired to try something new. So I decided to create an abstract composition with light effects and apply that as a texture of a text, everything done only using Photoshop. So in this tutorial I will show you how to create an easy and super quick text effect in Photoshop. We will play with Brushes, Blend Modes, basic filters like Blur and Liquify, and also text. Step 1 Open Photoshop and create a new document. I used 2560x1440 pixels. Then with the Gradient Tool (G) fill the background with a radial gradient with 2 shades of purple (3d2626) Lighter and (060404) darker. Step 2 With the Elliptical Marquee Tool (M) create an ellipse selection. Add a new layer and select the Gradient Tool (G). Use black and a very light grey for the colors. Fill the ellipse selection with the radial gradient. Use the image below for reference. Step 3 Go to Edit>Define Brush to create a new brush. Step 4 Go to Window>Brushes. Use the image below for the values of the Brush Tip Shape, Shape Dynamics, Scattering, Color Dynamics and Other Dynamics. Step 5 Add a new layer and with the Brush Tool (B) and the brush you have just created, paint some spheres on the design. This is a random effect so you won't get the same result as I did. Step 6 Add another layer and group this layer. This new layer will be inside a folder in the Layer Palettes. Change the folder's Blend Mode to Color Dodge. Then, with the Brush Tool (B), select white for the color and a big soft brush to paint some areas to highlight them (1-4). Tip: Use the numbers 1-0 to change the opacity of the brush, with 1 being 10% and 0 being 100%. Step 7 Add a new layer and with the Rectangular Marquee Tool (M), create a rectangular selection. Fill this selection with a white to black linear gradient using the Gradient Tool (G). After that change the Blend Mode to Color Dodge to create a nice light effect. Step 8 Duplicate the light effect layer. Rotate and resize them to create different light effects. Tip: Use the Eraser Tool (E) to blend some of the light effects one they are over one another. Step 9 Add a new layer and group this layer so it will be inside a folder. Change the Blend Mode of the folder to Color Dodge. With the Brush Tool (G), using white for the color, select the layer inside the folder and paint some flares (1-3) Step 10 Add another layer on top of the others, then with the Gradient Tool (G) fill the layer with a gradient using red, yellow, green and blue for the colors. Change the Blend Mode of this layer to Overlay. Step 11 Create a new layer and fill it with a checkerboard pattern. You can download it here. Then go to Filter>Blur>Gaussian Blur, use 10 pixels for the Radius. After that change its Blend Mode to Color Dodge. Step 12 Select the pattern layer and go to Filter>Liquify. Use the Twirl Clockwise Tool (C) and the Bloat Tool (B) to deform the pattern layer. Step 13 Select all layers and click Command(mac)/Control PC + Alt + Shift + E to create a layer with all the layers merged in it. Go to Filter>Blur>Gaussian Blur. Use 20 pixels for the Radius. Then change the Blend Mode to Screen and the Opacity to 50%. Once again click on Command(mac)/Control PC + Alt + Shift + E to create a layer with the final design. Step 14 To create the text effect we will add a new layer for a new background. You can duplicate the same layer from the Step 1 and just change the colors, instead of a purple hue I used a brown. The light one is 3b2500 and the dark 130f08. Step 15 Select the Horizontal Type Tool (T) and type "Lost in Space" like a did in the image below. Make the words "Lost" and "Space" much bigger than the "In". Then change the font to VAL. You can download it here (http://fontfabric.com/?p=585). Use white for the color. Step 16 Go to Layer>Layer Styles>Drop Shadow. Use Multiply for the Blend Mode, black for the color, -90º for the angle, 0 for Distance and Spread and 30 for Size. Step 17 Select now Inner Shadow. use Color Dodge for the Color with White, 100% for the Opacity, 2 pixels for the DIstance, 1 for Choke and 5 pixels for Size. Step 18 Move the layer with the design merged to be on top of the other layers, more specifically on top of the text layer. Then go to Layer>Create Clipping Mask. Step 19 Go to Google Images and search for some eclipse photos, I found this amazing one at http://www.cardiff-astronomical-society.co.uk/ECLIPSE2006\DSCF0841.JPG. Copy it and paste it in your design. Go to Image>Adjustments>Levels. Increase the black input. Change the Blend Mode to Screen. Also go to Filter>Blur>Gaussian Blur. Use 5 pixels for the Radius. Step 20 Duplicate the eclipse layer and position it on top of the other ones that were in the design, the difference is that now it will look like the lights are coming out of the text. Conclusion Merge all the layers again and you can add a little noise (Filger>Noise>Add Noise). The effect is very simple and won't take you more than 20-30 minutes to achieve it. But it's a nice exercise for those willing to play with light effects, also clipping mask and text effects in Photoshop. Click on the image for full preview Download the Photoshop file Click here to download the Photoshop file used for this tutorial

Friday Fresh Free Fonts #34

I will be posting some fresh free fonts every Friday, yes I know it's awesome. I will look forward to bring a lot of great fonts that will sure help you improve your typography work. Check out what I selected for you on the FFFF#34 and make sure to comeback for more next week. Click here to view all Friday Fresh Free Fonts Ecolive by Prosaiper Download Ecolive Muneris by Greg Ponchak Download Muneris The Download link is all the way to the right side on the page. Magnificent by Diego Vallejo Download Magnificent Outlaw by Billy Argel Download Outlaw