Johannes Aagaard is an 21 old young Danish guy. He is an upcoming Illustrator, with a passion for typography, spectacular words, surrealism and colors. Aagaard have an huge passion for art, both digital, traditional, photography, design and lyric. In this article he shares with us a case study of a the work entitle ConceptualArt. We highly recommend that you check out his website at http://www.kongesuiten.dk/aagaardds I have tried to make some typography again, this piece is my first piece for a long time. Worked with colours, and mixing typography and illustration - just as I like it. "I'm not trying to do conceptual art" - It just happens! Animated Case Study
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. Typography Videos Typography Images
Last weekend I was, once again, stuck waiting more than 4 hours in aiports. So I was checking out some skateboard deck designs and found an amazing one from Girl Skateboards. The cool thing about that design was the effect, reminded me of those old signs that were painted on the walls, in old factories and industries. So in this tutorial I will show you how to create an effect pretty similar to that one, but the idea of this tutorial is to show you how to select the correct Blend Modes when playing with textures. Also we will use Illustrator to create the font for our sign, in this case with the word Abduzeedo, of course :) Step 1 Open Adobe Illustrator and create a new document, then go to View>Show Grid, then View>Snap To Grid. After that with the Rectangle Tool (M) create 2 squares like the image below. Use only stroke and leave it without fill. Step 2 Basicaly what we did in the first step was to create a module for the letters. Now duplicate 4 times to have modules for the letters A, B, D, U, Z, E. With the Direct Selection Tool (A) start deleting segments of the module in order to create the letters. It's really simple and won't take you more than 5 minutes. Step 3 Now increase the stroke to something like 50-60 pts. After that go to Object>Path>Outline Stroke. The stroke now will be transformed in a object with fill. Step 4 To create the 3D effect is pretty simple and we will use the Rectangle Tool (M). First thing is to create some references like the triangles 1 and 2. Then it's easy, it's just create other segments and with the Direct Selection Tool (A) you can edit the vertices. If you want to add points use the Pen Tool (P). Also I used 2 shades of orange, one lighter and one darker. So the light is coming from the top so the darker will be always at the bottom (3-6). Step 5 Here is just an idea of the whole process, once again, it's not complicated and it's a good exercise if you want to practice a little bit of Illustrator. Step 6 For the O you can go to Effect>Stylize> Round Corners. Use a small value, something like 2 or 3 for the Radius. Also duplicate the word Abduzeedo and fill it with black, go to Arrange>Send Back so it will be behind the 3D text. After that just add a little text using a Brush Script Std Medium font with red and just add a very light blue background. That's it, the illustrator part is done and it's a quite cool design already. Step 7 Now go to Photoshop. Create a new document. I'm using 1920 x 1200 pixels for the size. After that import a nice wooden texture with some peeling paint. The one I used is courtesy of Shutterstock and can be downloaded here. Step 8 Let's reduce a bit of the Saturation. Go to Image>Adjustments>Saturation. Change it to -40. That will make the blue a bit more grey. Step 9 Copy the Abduzeedo word from Illustrator and paste it in Photoshop. Choose Paste as Smart Objects in case you need to change the colors. Step 10 Duplicate the wooden texture and move it to the top, in front of the Abduzeedo word and go to Layer>Create Clipping Mask. Change the Blend Mode to Darker Color. The cool thing is that we get the blues and the brows of the peeling texture instead just black or dark shades if we had used Multiply for example. It's a great Blend Mode for this type of aged design. Step 11 Duplicate the texture and go to Image>Adjustments>Desaturate. Put it on top of the othe texture again as a Clip Mask. This time however change the Blend Mode to Multiply. The idea is to darken a little bit the word Abduzeedo. Step 12 Copy the shadow in Illustrator and paste in Photoshop behind the Abduzeedo 3D word. Step 13 Duplicate the background texture and go to Image>Adjustments>Desaturate. After that go to Images>Adjustments>Invert. Arrange the texture so it will be in front of the shadow layer. Step 14 Go to Layer>Create Clipping Mask. After that change the Blend Mode of the texture layer to Lighten. The Lighten Blend Mode is perfect because it will show the texture and lighten the very dark vector shadow, making the effect much more realistic. Step 15 With the Rounded Rectangle Tool (U) create a white rectangle below the the Abduzeedo word. Step 16 Duplicate again the background wooden texture and go to Image>Adjustments>Invert. Step 17 Move the inverted text layer so it will be in front of the white rectangle. Go to Layer>Create Clipping Mask. After that, change the Blend Mode to Difference. Step 18 Duplicate the background texture again and go to Image>Adjustment>Desaturate. After that go to Image>Adjustments>Levels. Increase the white input so the color of the texture turns to white. Step 19 Go again to Layer>Create Clipping Mask. Also reduce a little bit of the Opacity to 70%. Conclusion Now just add the final text again repeating the same process we did for the word Abduzeedo. The blend modes will be almost the same, but now we understand how the Darker Color and the Lighter Color work; and specially which cases to use it. Of course you can apply them in totally different ways, that's the best thing about Photoshop, you can always find new ways and solutions for the same problem. It's all about playing. Click on the image for full preview Download the Photoshop File Click here to download the Photoshop file used for this tutorial
Last Saturday I was in São Paulo, Brazil for the Intercon 2009, one of the biggest events about the internet culture here in my country. I was super happy as well because I was invited to talk about Abduzeedo to that huge crowd. But what I want to show to you here in this post is this amazing project called Unique Types. Raphael Vasconcellos from Agencia Click explained me about the Unique Types's idea, that is to support AACD - Associação de Assistência à Criança Deficiente (Brazilian Association for the Welfare of the Handicapped Children) - an association that helps children with physical disabilities. The project aims graphic designers, digital artists and typographers; and challenges them to create fonts inspired by children suffering from physical disabilities. The fonts will be registered with Creative Commons license and could be used by other agencies in their campaigns. Unique Types is a special collection of fonts inspired by children suffering from physical disabilities. Each font is created under the Creative Common license and is free of rights and limitations on use. To understand a little bit more about the project check out this video: What are Unique Types? from AACD on Vimeo. Pre-launch for Designers You and other renowned designers and studios from around the world are invited to participate in this unique project. How does it work? It's very simple: Create your own type inspired by disabled children. Explain your process: a text or a video on Vimeo Gather your material and send it to: email@example.comVisit the pre-launch site at http://uniquetypes.cc/designers/ Check out the first fonts created for the project Nosewritten - Download During the creative process, We studio designers were going through physical limitations Nosewritten from Welab on Vimeo. Ubiratan - Download Gustavo Terra created a version inspired in the childen locomotion. Ubiratan from Gustavo Terra on Vimeo. I loved the idea of this project and how it mix one of the most loved areas of design that is typography with a very noble cause. I will start working on my font for the Unique Types collection and I would love to see more people joing that. For more information and keep up with the new fonts, visit http://uniquetypes.cc/designers/ About AACD The AACD (Brazilian Association for the Welfare of the Handicapped Children) is a non-profit organization which has been helping people suffering from physical disabilities for the past 59 years.
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#22 and make sure to comeback for more next week. Click here to view all Friday Fresh Free Fonts Public Gothic by A2591 Download Public Gothic Oval by Font Fabric Download Oval UA Squared by Ben McGehee Download UA Squared Contra by Apostrophic Labs Download Contra
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. Typography Videos Typography Images
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#21 and make sure to comeback for more next week. Caviar Dreams by Nymphont Download Caviar Dreams Fullogic by Robert Karpati Download Fullogic Gladifilthefte by Tup Wanders Download Gladifilthefte Livia by S. G. Moye Download Livia
Yes, a typography series post starts today and you here to witness the beginning of a long series of inspiration. As we always looking to improve and interact with you by showing the best of the best in visual imagery. So tell you friends, your pops and your pets. We got some crazy typography over here! Want to send in your typography piece for next week Typography Mania? email us at firstname.lastname@example.org with the subject Typography Mania
Magomed Dovjenko is a graphic designer and illustrator from Russia but based in Cologne, Germany. Despite his young age he has done some incredible works for respectful companies such as Reebok, Adidas, Diesel, and many more. Dovjenko, also is member of an important collective, the KDU - The Keystone Design Union. As usual we highly recommend that you check out Magomed portfolio at Behance (http://www.behance.net/aureax). But we selected some images for you to take a look first My name is Magomed Dovjenko. i'm a young-yet experienced freelance illustrator, residing in Germany/Cologne, originally from Russia, Chechnya. I love graphic design, illustration, typography . I'm also part of the select multi-disciplinary collective the Kdu - The Keystone Design Union. I'm self-taught.
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#20 and make sure to comeback for more next week. MadFont by Harold Download MadFont Quaker Shade by Typeology Download Quaker Shade Garcia by Benny Demmer Download Garcia Justus by Khunrath Download Justus
Vanila Barcelona or Vanila BCN is the design studio of two very talented graphic designers from Spain, Carlos Jimenez and Roger Gual. They met when they were studying graphic design at Elisava Design School and they have been working together since them. From his clients we can tell that it's been working pretty well so far, especially for the type of work with beautiful typographies with that hand drawing feel. As usual we highly recommend that you check out Vanila BCN's website at http://www.vanilabcn.com/. You will not regret! Carlos Jimenez and Roger Gual was born in May 1983. Both meet studying graphic design on Elisava Design School eighteen years later and after working in different studies during two years they decided to work together founding Vanila Barcelona to develop their own projects. They love old school graphics, western typographies and all kind of "folklore". Both like the food from Sevilla and the breaking waves of Laguna Beach. They missed the epoque when Saved by the Bell was on tv. Freehand will never die. Some Works
We have a great tutorial sent by one of our readers, Chanito from Panama. In this tutorial he will show you how to create a good 3D type explosion with Adobe Illustrator, Cinema 4D and Adobe Photoshop. We will use basic tools to make this artwork. Good Luck!!! For more information visit Chanito's Deviantart at http://chanito.deviantart.com/ Step 1 Open Adobe Illustrator and find the font that you want to use in your artwork, in this case I used Xirod Font and tweaked it a little. Make it outline and save it in Adobe Illustrator 8. (Cinema 4D just open vectors in this Adobe Illustrator version). Step 2 Go to Cinema 4D and open your Illustrator file, when you open it in Cinema 4D you can see that it is inside of a group. You need to ungroup them and add the extrude NURBS to each letter of your word. Then when you have each letter with extrude you need to add lights (I used 2 area lights, in the front and the left side) and target camera (optional, you can use whatever you want). Step 3 Well, we have our 3D text and we need to add more details before we go over to Photoshop. We're going to duplicate our 3D object 8 times to make it editable and we are going to add explosion and shatter. You need to play with the settings to see how you want your 3D text to look like. Just apply 3 explosions and 3 shatters to it and make a preview, you will see where to add more details and where not to. Step 4 Go to render settings and put these following settings. Make the render and save in 300 DPI TIFF format with Alpha Channel. Step 5 Take the render into Photoshop, go to the Channels windows and choose the Alpha Channel. Make your selection, cut your 3D text and paste it in another layer. Then you can work just with your 3D text and after, with your background. Step 6 We're going to create the background and paint some areas with dark blue. I used the basic soft brush and 50% opacity to achieve the effect that I wanted. Step 7 Now we're going to add more details to the background and we also need to create some highlights behind the 3D text to make it stand out. Step 8 Time to add some color to our 3D text. You can do this in different ways. I just used the basic soft brush and painted over the 3D letter and made some masks. Step 9 We need to do a special effect to apply in front of our 3D letters. To do this, choose the Gradient Tool and change the mode to Difference. Make gradients in different directions. After, select the text and make a layer mask in this effect layer. Change the blend mode to Soft Light and Opacity to 70% Step 10 Next, select the 3D text, go to Modify - Contract and use 10 to 20 pixels. Delete then deselect and go to Effects - Blur - Motion Blur use Angle: 15 and Distance between 60 to 70 pixels. Step 11 Now we'll add more detail to our 3D text. Choose a good splatter brush and paint wherever you want. To generate the back of the explosion you need to add broken glasses behind text. (http://psdtuts.s3.amazonaws.com/208_Break_Down/pieces.png). Add some highlights to make it stand out. Step 12 Add some shadows inside of the 3D text with the Polygonal Lasso Tool and the Gradient Tool in Black to Transparent. Step 13 Now add some crack brushes in the 3D text to make the explosion more real. Put a crack on the letter you want to brake, in my case, the x. Step 14 Add highlights on the border of each letter to give it a real explosion feeling. To create the beginning of the explosion add a mini explosion brush to the inside corner of the x. Step 15 Make some lines and flares in the explosion point in different ways. Use different colors to give it a great look. Step 16 Add the broken glass image on top of your 3D text and change the Blend Mode to Overlay. Duplicate it, go to Edit - Transform - Flip Horizontal and change the Blend Mode to Normal. FINAL This is the final image. Hope you enjoyed this tutorial!
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 #19 and make sure to comeback for more next week. ChunkFive by Graham Smith Download ChunkFive Turnpike by Font Diner Download Turnpike Virgo 01 by Vic Fieger Download Virgo 01 Oceania by Morice Kastoun Download Oceania
Straight from Estonia, the guys from HandMadeFont give as all access to their studio and tell us a lot of special details about their incredibly typography and font work done by hand. HandMadeFont.com Who hides behind this studio that creates such awesome typography and hand made fonts? The names behind HMD are; Maksim Loginov and Vladmir Loginov. We are brothers that have been working in graphic design for ten years. We grew up altogether with our parents, until we became 20 years old and we adopted oneself to each other. Nevertheless we are different. We have different interests. Maxim likes to word in a 3D, anime, japanese dolls. Vladimir likes modern art and photography. Vladimir in indulge in documental movies and lately he gained some prizes on a several filmfests. Despite of the fact, that we are very different, we easily find common language. In a HandMadeFont project, we didn?t determined any limits for each other. Everyone does what he wants and that got to be respected. The names behind HMD are; Maksim Loginov and Vladmir Loginov. We are brothers that have been working in graphic design for ten years. How the idea of creating all kinds of hand made fonts started? Very often we had to create unique fonts for different advertising campaigns, posters, tv-ads etc… And the final result, after putting so much effort into it, would only last for a month or two. We felt sorry that no one would ever see those works again. So we decided to give them a new lease of life. That’s how the idea of HandMadeFont came up. We’ve completed the alphabet and the process turned out to be so exiting that we ended up with loads of new fonts. the process turned out to be so exiting that we ended up with loads of new fonts Where all these great hand made fonts get created? For now on we work together in a big advertising company AGE McCann (Estonia). Studio locates in a Tallinn center. We have beautiful views to the old town from the studio windows. There are 25 persons in the studio and a very creative atmosphere. For example, in the studio we have a hookah, playstation, ping-pong table… You can always have a break and relax or play. We collect nothing, but we buy and read a lot of different books, as a designer ones, or fiction. But this is not a collection. This is just a way of life. in the studio we have a hookah, playstation, ping-pong table… You can always have a break and relax or play Do you believe that the atmosphere you work in can influence on the actual work? Of course, the atmosphere in the studio is 50% success. And maybe more. The process of the birth of ideas is very difficult to organize. Especially when it is necessary that ideas are born every day. It's very good when in the studio you do not feel like at work. And when the work becomes a favorite thing that you just pleased to do. the atmosphere in the studio is 50% success You guys have done endless number of different and very unique hand made fonts. What inspires you the most to keep creating all these different fonts? If we only knew, where they come from (especially the genius ones), we would be very rich. But in our case it is more simple. “In the beginning, there was a word...“. Every object has its own name. Every word consists of some letters. It means, that every word implies some shape. For example, imagine a pencil on a table. We take a lot of pencils and compose a word "pencil“. This is a beginners level. But, going further on, if we compose a word "painter“ using the same pencils, then we receive the shape of the word "painter“, which expands itš sence. We’re all surrounded by the lots of different things, which can be made into a font. Often we follow our instincts rather than just logic in choosing something. It’s like a man scratching the name of his beloved on some tree never thinks what font he’s using. Same with us. First we make something, than look at the result. Sometimes it’s no good , but usually we are happy with the first choice. It has more integrity and the spirit. The quirkiness of our fonts and the raw feel to it is important to us. It has energy. We never think, how anybody can use our prints, because it is a dead-end. We do not deal with a conveyor manufacturing. Sure the project we launched is commercial, but in the very beginning we assumed to cooperate with magazines and advertising companies, not just selling a variety of ready prints. Of course we like to sell our jobs, it is interesting. But we are designers, not top sales managers. We like to create something new. At the moment we cooperate with several magazines, composing unique headlines. We are always open to new offers. Every object has its own name. Every word consists of some letters. It means, that every word implies some shape After you get the first idea for a new font and you decided to go ahead with it, do you have a set process that is always used in order to create the whole font set? Usually, we start with one letter. Then we compose a word to see how the letters look altogether. If we like it, we continue with it. If we don't, then we start from the very beginning. Sometimes one letter making lasts too long, so we refuse to continue. It doesn't mean that we afraid of difficulties. We just do not want to have it in a routine way. We just do not want to have it in a routine way. How long does it usually take? It all depends on the material we use to create a font. Basically we use anything. Hammer, matches, scissors- anything that cuts, saws or whatever. Every material requires a different approach. Take liquids, for instance. It’s hard to create a model from liquid- it has no shape. Our job is to find a right shape for it. You see, it’s not easy to apply standard terms of typography to describe what we do. They are not classic fonts, everyone is used to. We’re not exactly the specialists in this field, it’s hard to be a specialist in squeezing letters out of ketchup or cutting forms out of loaf of bread. We try various things and methods and share the results with people. One of the hardest was the "red caviar" one. We wanted to take some pictures of red caviar first. But this was such an expensive and tasty product, that it didn’t make it to the session. We’d eaten all of it and had to recreate it in 3d. It came out even better than the real thing. When we earn our first million we’ll use black caviar for a font. it’s not easy to apply standard terms of typography to describe what we do After making so many different fonts, do you have any favorites or a special one? Our favorite font is the one made by our mother. It’s the red knitted letters. Our mum knits. So we’ve asked her to knit the letters from the sketches we’d made. She did the whole alphabet in two days. We couldn’t have made anything like that in a hundred years. It’s really special to us. Our favorite font is the one made by our mother Are you guys working on any project we should know about? We have plenty of ideas. Currently we are in a process of creating some 200 new fonts. Almost anything can be made into a font. We have a few ideas about using people and animals in our work, and this requires a totally different approach. So far we’re not ready for it. Maybe some day. We have a few ideas about using people and animals in our work Thank you very much for the interview, you guys are great. I'll leave the last words up to you. Incidentally, this October is the birthday of our studio. We are one year old and this interview is a good gift. Thank you.
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# and make sure to comeback for more next week. Future Sands by Jerry Rose Download Future Sands St Transmission by Sascha Timplan Download St Transmission Sonrisa Thin by Jason Castle Download Sonrisa Thin Age 11 by HVD Fonts Download Age 11
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#17 and make sure to comeback for more next week. Etcetera by Lifter Baron Download Etcetera Pasta Simpla by fabergraph Download Pasta Simpla Sketch by Sergiy Tkachenko Download Sketch FF Dagny OT Thin by FontFont Download Dagny OT Thin
This past Friday was the Abduzeedo meetup here in my hometown of Porto Alegre. It was really cool, we had a lot of fun and a lot of beers! When I was leaving I noticed the neon sign outside the pub and it really inspired me to create a tutorial on how to acheive that type of effect in Photoshop. In this tutorial I will show you how to create a nice light effect in Photoshop. We will use Layer Styles and Blend Modes to simulate a neon text effect. Step 1 Open Photoshop and create a new document. I used 1920x1200 pixels. After that import a brick texture, the one I used was a courtesy of Shutterstock and you can download it here Step 2 With the texture layer selected go to Image>Adjustments>Hue and Saturation. Use 0 for the Hue, 45 for the Saturation and -85 for the Lightness. Step 3 Add a new layer and go to Filter>Render>Clouds. Make sure you had black and white for the foreground and background colors. With the Eraser Tool (E) delete the areas close to the edge and leave just the center of the image. After that change the Blend Mode to Color Dodge. Step 4 Import the logo you want to use for the neon effect. I'm using the ZEE logo I created a few weeks ago. Duplicate the layer and hide it because we will need to use a few copies later on in this tutorial. Select the visible logo layer and go to Filter>Blur>Gaussian Blur. Use 15 pixels for the Radius. Step 5 Follow the images below for the settings of the Layer Style. We will be using Drop Shadow, Inner Shadow, Outer Glow, Bevel and Emboss and Color Overlay. Step 6 This will be the result you will get after the layer style. Step 7 Duplicate the layer with the layer styles to make the effect a bit stronger, but reduce the opacity to 50%. Step 8 We will need another layer with the logo without any layer style applied to it. Put this new logo on top of the others and then go to Filter>Blur>Gaussian Blur. Use 100 pixels for the Radius. Also change the Blend Mode to Color Dodge. Step 9 Now with the Brush Tool let's create the base part of the neon that will be fixed on the wall. Use black for the color and put this behind the neon layers. After that go to Layer>Layer Style>Bevel and Emboss. Use the image below for the values of the Bevel and Emboss. For the "E" base use -160º for the angle and for the "Z" base use 0º. Step 10 Again with the Brush Tool (B) and a very soft brush, using 0 for the hardness, add a new layer behind the layers created in the previous step. So just paint a very soft shadow. Conclusion Light effects are always really cool for wallpapers, I'm really addicted to these types of effects and in this tutorial I showed you how to create a neon effect. Basically, the effect is all about layer styles and blend modes. Now, it's up to you. You can try different colors and backgrounds but the technique won't change that much from this one. Click on the image for full preview Download the Photoshop file Click here to download the Photoshop file used for this tutorial