Ten awesome, grungy rock-n-roll fonts

Two of the latest design trends over the past year have been unique, outstanding typography and grungy website and graphic designs. Although not all trends should be followed, this is one that's caught my attention and has warranted a lot of interest. While doing a lot of browsing on the web, I compiled a list of some of my favorite grungy fonts that are available – for free. Take a look; you might find something you can use in a design concept. If nothing else, just take the time to look at how far typography for the web has come since the days of Comic Sans and Verdana.

1. Old Press

Old Press lives up to its name; it has this nice, old school punk rock feel to it. The eroded print makes it look almost like it came from newspaper. It's perfect for posters or designs that have newspaper elements to them.

2. Birth of a Hero

This font caught my interest because it looks a lot like a font one of my favorite bands uses for their logo. The difference here is that the clean, sophisticated lines are juxtaposed with deconstruction. It gives it this nice grungy look without being overwhelming or looking too dirty. This is one of the cleaner grungy fonts out there – it's sure to catch attention when used in posters, banners, and graphics.

3. Acid Label

Acid Label reminds me a lot of something you'd find on an alternative clothing label. The hatching and speckled displacement is in all the right places to make a really spectacular impact. You won't forget this one easily.

4. Far Cry

While some of the other fonts could be described as punk rock if compared to a genre of music, Far Cry is more reminiscent of 80's arena and glam rock. The way some of the characters are larger than others makes them really stand out and draw attention – it's a bold statement in more than one way.

5. Requiem

Although I tend to prefer sans serif fonts, Requiem caught my eye. It's a strong font that makes its statement – it's grungy but elegant.

6. HVD Poster

7. VTKS Ink

8. Denial

There's something about Denial; maybe it's the backwards N character that drew me in, or the subtle stroke lines around the lettering. This font looks like something you'd use on a stamp – it's bold and loud with an industrial flair.

9. Keyboard Plaque

10. Trash

Trash is one of the most interesting grunge fonts I came across. I love how it looks like it's been cut out of a magazine, with the print smeared. But what really makes this font fantastic is how the letters are at varying angles. It's a real eye- catcher.

Even if you aren't a designer or aren't interested in being involved in designing something, hopefully these free fonts have given you some inspiration for a concept. You can contact a designer, like Codank Web Design, to discuss any ideas you have and set up an appointment to launch your design project into reality.

How to stylize text in Photoshop CS4

One of the great things about using Photoshop is that you can create stylized text for images, graphics, and logos. The difficulty you might run into is knowing where to start when there are so many different features that you can use. The trick is exploring the different features and playing around with them; however, when you're new to Photoshop and don't know where anything is, this can be hard to do. In this tutorial, we're going to run through some of the things you can do to stylize text and show you where different options are located so you can customize text to your liking.

First, open Photoshop and click File then New. You can make your document any size you'd like, but I've chosen to make mine 1000 px wide by 500 px tall. Once you've created your document, click on the text tool in the Tools panel (it looks like a capital T). Click on the font dropdown at the top of the workspace and choose a font, then choose a font size and color. I've chosen to use Copa Sharp BTN in 72 pt black. You can drag a text box across the document at any time during this step.



Type your text in the text box. You can change your text options at any time during the process by selecting the text and changing the dropdown boxes at the top. Here, I've chosen to center align my text by clicking the middle button near the color swatch.



Click the Create Warped Text button (located on the right of the color swatch) and choose a style from the dropdown. You can play with the different styles until you find one you like; I've chosen to use the Arc style.



You might need to use the move tool at the top of the Tools panel to move or nudge the text down so it's visible on the document. Now we need to add some layer styles. Click on the fx at the bottom of the Layers panel on the right side of the workspace. Choose Blending Options from the list and explore your options once the dialogue box pops up.



The first thing I'm going to add is a drop shadow. I've changed the distance to 6 px because it was looking a little crowded before. You can leave it as it is if you're satisfied, but I wanted to do something a little different and make my text really pop. To do this, explore your contour options and try different ones; I chose to use Sawtooth 1 to give my text more definition and dimension.



Next, I decided to soften the text so I added an inner glow. I changed the color to white and the opacity to 50% to make it blend in more. Now it has a nice, smooth 'chrome' look.



At this point, if so desired, you can center the arc a little more by clicking Edit then Transform then Rotate and dragging the bounding box until you're satisfied.





Next, we're going to create a some vertical text. To do this, click on the black arrow at the corner of the text tool button and select the Vertical Type Tool. Drag a text box down and choose your font type, font size, and font color. I've chosen to use Cooper Std in 60 pt black. Type your text in the box.





Just like with our other text, we're going to add some layer styles. Navigate to the bottom of the Layers panel and click the fx, then choose Blending Options. For this text, I've chosen to use a drop shadow and left the default settings. I also added an inner glow, again leaving the default settings. Where I did some customizing was when I got to using a gradient overlay, which you can use to add a gradient to your text. I chose to use a black and white gradient (though you can change it by clicking the arrow next to the gradient), and checked the reverse checkbox. I also chose a different gradient style from the dropdown (instead of linear, I went with reflected).



Next, I clicked on bevel and emboss. I chose to use a pillow emboss from the style dropdown to give it more definition and make it easier to read. Then, I clicked on the texture subcategory and used the arrow next to the texture swatch to browse the patterns. I chose to use the denim texture, though if you don't see any you like in the preset swatches, you can append more by clicking the black arrow next to the texture swatches displayed.



There's one other way of customizing text that I'd like to look at, so create a third text box. This time, change the text color (I've made mine blue), though I've left the settings from the previous text box I created.



Along the top bar of the workspace, find where it says Filter and click on it. Then click on Filter Gallery to bring up the dialogue box where you can view changes and test filters before you apply them.



You can browse through the filter gallery and try out different filters; many of them won't show up that well because text is pretty flat. However, we can add some noise to the text by going under the texture category and choosing Grain. You can leave the default settings if you'd like, but I changed the Intensity to 66 and the Contrast to 61. I also changed the type to Soft. Once you're satisfied, click OK to apply the changes.



Finally, I decided to give the text some more definition and make it look sort of plastic, so I decided to add a layer style. Just like before, click on fx and then Blending Options. This time, click on bevel and emboss and leave the default settings.



We've only just scratched the surface of the many things you can do to customize your text in Photoshop. However, now that you've completed the tutorial, you should have a better understanding about how to navigate Photoshop and edit text to stylize it. As mentioned before, sometimes the key is to play around with your options, and once you get more familiar with it, you'll be able to choose options in a snap to make it look like the vision in your head.

About CODANK Web Design

CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.

For more information, visit us at www.codank.com

Typography Tips Every Designer Should Know

Creating a website is not just about the general layout, structure, and design. Although these things are important, it should not become so important that your content suffers. After all, your visitors are on your page to look at the content and read the information you have to offer. Therefore, formatting your content is one of the most important steps to take, and you should pay special attention to the way you display your text.

Ensuring your page has defined sections and hierarchies is the first step. Just like a newspaper has headlines and subtitles, your web page should also have headings and sub-headings. Larger font draws the eye in and helps to organize the page in neat sections; it is an expected courtesy to format your pages in a way that makes them easy to scan and pick out desired information. As much as we want our visitors to read every word we so painstakingly crafted, that isn't the way people work. It has been proven that Internet users scan pages to glean the information they're looking for, so make it easy for them and they may go back over your site and spend a little longer. Remember, though, it's not just the amount of hits you receive, but the amount of relevant hits you receive.

Color contrast is the next thing you should keep in mind. Although you may be tempted to go crazy and pick out as many bright colors as you can to attract attention, too many colors can be an eyesore. Not only is it in bad taste, but you want your visitors to be able to read your text without having to strain their eyes. As a general rule of thumb, you want to mix dark and light colors for your background and text. Usually, it's best to pick a light color (like white or a tint of a color) for the background and have darker text; this yields the best results. However, if you use the right tones, you can use complementary colors too (such as dark blue and light orange). Just be sure to conduct user testing before launching the site and listen to any feedback or concerns you receive.

Be consistent with your font choices by using CSS and external style sheets to apply fonts throughout all your pages. When choosing fonts, make sure you use between two and four consistently. Generally, it's best to have a different font for each different type of text; serif fonts and decorative fonts are best used for headings and sans-serif fonts for body. Sans-serif fonts such as Verdana and Tahoma were specifically made for viewing on the web, so they are your best choices for body text.

One last word of caution: text should not be centered. Aligning your text to the left margin yields the best appearance - and it's easier to read too. Centering text can cause the sides to look ragged and break up the flow of your webpage. Generally, it's best to left-align all elements, including headings.

Now that you know how important styling your font is, you can pay closer attention to those details. When working with a web designer, such as Codank Web Design, you can better communicate your vision for your site and what kind of impression you want to leave on your visitors. Even if you are not a designer, if you are looking to create a web site, you should have an idea of what you're looking for.

About CODANK Web Design

CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.

For more information, visit us at www.codank.com

Web Branding Tips for Businesses

As a business owner, the best investment you can have is an online website. A website is not only very crucial for business, but establishing an overall web branding is critical as well. Web branding is a impressive way to stand out within the World Wide Web.

Think of web branding as another way a company can advertise besides using television, magazine or newspaper. By definition, a brand is classified as a symbol. Symbols are known as designs which represent something else, and a brand is meant to package all of the associations, experiences and characteristics into an abstract construct.

In order to lure in customers, a company’s brand should have all of necessities to catch their attention. Whether it’s sound, phrases, logos or imagery, it should be something in which people come into contact with.

Below are a few CODANK Web Design web branding tips. A company should read them carefully and then plan accordingly.

Consistency – Make your brand memorable. Make sure to be consistent in your web design when you’re building it. Keep consistent colors, visuals and typography.

Uniqueness – Differentiate your web page and brand from your competitors. If you don’t, it won’t really be memorable!

Size & Position – Position your logo in the upper left area of the webpage – that is the area most people look to see what site they’re on.

Character – Give your brand character. You can do this by introducing it with a little personality; something that your audience can associate their selves with.

Color – Choosing the right color is very important. Color stimulates emotions and carried with it subconscious associations to numerous things and characteristics.

About CODANK Web Design

CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.

For more information, visit us at www.codank.com

Tips for Web Branding

Investing in an online website is possibly one of the best decisions a company could ever make. Establishing an online presence is just as important as the overall web branding. Creating a web brand is an excellent way to stay a step further than your competitors.

Branding can come in the form of a slogan, symbol, name, or color combination. Web branding is not that much different from what you may see in a newspaper, local magazine, or on television. When using a slogan, symbol, name or color combination as a brand, you are packaging all of the associations, experiences, and characteristics into an abstract construct.

A company’s online brand should be just as eye-catching as their print brand. Whether it’s a logo, phrases, or imagery, the brand should consist of an idea in which will intrigue potential clients.

Below are a few web branding tips provided by CODANK Charlotte Web Design. We advise you to take into consideration each tip before launching your online brand.

Consistency – Make your brand memorable. Make sure to be consistent in your web design when you’re building it. Keep consistent colors, visuals and typography.

Uniqueness – Differentiate your web page and brand from your competitors. If you don’t, it won’t really be memorable!

Color Combination– Choosing the right color is very important. Color stimulates emotions and carried with it subconscious associations to numerous things and characteristics.

Position and Size – Position your logo in the upper left area of the webpage – that is the area most people look to see what site they’re on.

Character – Give your brand character. You can do this by introducing it with a little personality; something that your audience can associate their selves with.

About CODANK Charlotte Web Design

CODANK is a top Charlotte Web Design and Internet Marketing Company located in Charlotte, NC. The company is dedicated to providing a broad range of web design services. CODANK specializes in Search Engine Optimization (SEO), Graphic Design, Online Marketing, and Web Design and Development.

For more information, visit CODANK Charlotte Web Design and Internet Marketing Company at www.codank.com

Your Online Presence - Web Design and Branding

The best investment a small business or entrepreneur can have is their online website. Not only is their website important, but their overall web branding is critical as well. Web branding is a great way to stand out within the World Wide Web.

Web branding is very similar to a company displaying their brand on TV, magazine or newspaper. A brand is classified as a symbol. Symbols are defined as designs which represent something else, and a brand is meant to package all of the associations, experiences and characteristics into an abstract construct.

To draw in customers, a company’s brand should have all of necessities to catch their attention. Whether it’s sound, phrases, logos or imagery, it should be something in which people come into contact with.

CODANK Charlotte Web Design has provided a few Web Branding tips below. Read them carefully and plan accordingly.

Character – Give your brand character. You can do this by introducing it with a little personality; something that your audience can associate their selves with.
Color – Choosing the right color is very important. Color stimulates emotions and carried with it subconscious associations to numerous things and characteristics.
Consistency – Make your brand memorable. Make sure to be consistent in your web design when you’re building it. Keep consistent colors, visuals and typography.
Size & Position – Position your logo in the upper left area of the webpage – that is the area most people look to see what site they’re on.
Uniqueness – Differentiate your web page and brand from your competitors. If you don’t, it won’t really be memorable!

About CODANK Charlotte Web Design

CODANK is a top Charlotte Web Design and Internet Marketing Company located in Charlotte, NC. The company is dedicated to providing a broad range of web design services. CODANK specializes in Search Engine Optimization (SEO), Graphic Design, Online Marketing, and Web Design and Development.

For more information, visit CODANK Charlotte Web Design and Internet Marketing Company at www.codank.com