Showing posts with label Web Design. Show all posts
Showing posts with label Web Design. Show all posts

Monday, July 2, 2012

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.

Thursday, February 2, 2012

What to offer on your mobile website

As a business owner, you have to be in tune with the latest developments so you can keep up with the world and promote your business on top. The latest development, as you may already be aware of and have experienced yourself, is for sites to offer a mobile version of their websites. With mobile device use on the rise, even at home, it is important to offer people quick and easy access to your information. So when you're looking for a web developer to complete your site, here are a few tips you should keep in mind to discuss.

Provide the same engaging content. You might have heard people talking about having a "stripped down" site. I have even mentioned it in past articles. However, we have to think about the meaning of "stripped down." It does not mean that you should include almost no information except for a few lines and your contact information. People don't just visit mobile sites to find a phone number or an address; many people regularly browse the Internet using their smart phones or tablet computers. Therefore, it is important to develop content that provides all the necessary information. You can provide an abridged version, but do not sacrifice important information or points. Cut out any introductory speech or fluff if you need to; get straight to the point and your users will thank you.

Include interesting visuals. Just like with your desktop version, you need to include pictures, graphs, and anything else you have on your regular site. You can edit the size of the files yourself or you can have your graphic or web designer do it for you. You can use some of the same pictures as your desktop version, just scaled down and saved in a format that optimizes the size for mobile sites to decrease the loading time. Provide bold, attention-grabbing pictures; the small text on mobile screens is sometimes difficult to read, so graphics are more important than ever to draw the eye to the areas you need your users to look at. If you want to create graphics (such as buttons and banners) or include photographs you don't have on your desktop site, be sure that it doesn't add information the desktop site doesn't have; the only difference should be that they are bolder and designed specifically for mobile use.

The design should be similar to the desktop version. Your design is part of your brand, your corporate identity, and you don't want to jump too far from that. Furthermore, users shouldn't be confused or question what site they've visited; it's important to maintain consistency with colors, logos, and styles. With more people using mobile, you also want to give them a good user experience and make the site seem inviting. You don't need to only display a white background, the logo, and contact information anymore. Mobile design has come a long way, giving you more freedom than ever before. There are many beautiful mobile designs out there – you just have to spend some extra time discussing it with your developer.

Mobile design is becoming increasingly important. Many believe mobile Internet will be the next big thing, overtaking desktop usage over the next couple of years. Don't be left behind the times; contact a web development company, such as Codank Web Design, and get started on your mobile site today.

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

Thursday, January 26, 2012

20 beautiful winter stock photos

It’s that time of year again. When the days get shorter and the temperature drops, we start anticipating snow. Many northern states and regions have already experienced their first snowfall for the year. However, for those of us where snow is a rare occasion, looking at photographs of winter wonderlands and chillingly beautiful, frost-covered landscapes is a real treat and the best way to enjoy the season. So while some of you may be sick of snow covering your streets and driveways and may anticipate spring, you can still kick back, relax, and enjoy the beauty from the comfort of your own warm, cozy home. Here we have compiled a list of 20 beautiful, free stock photos for your viewing pleasure – or for your personal use in seasonal projects.

Photobucket

Photobucket

Photobucket

Photobucket

Photobucket

Photobucket

Photobucket

Photobucket

Photobucket

Photobucket

Photobucket

Photobucket

Photobucket

Photobucket

Photobucket

Photobucket

Photobucket

Photobucket

Photo by steppelandstock on deviantart.com.

Photobucket

Photo by crazymadness on deviantart.com.

Photobucket

Photo by philippel on deviantart.com.

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

Tuesday, January 24, 2012

Web Design vs. Web Development

Over the years, many people have used web design and web development synonymously. When people think of web design (and sometimes even graphic design), they generally think of the entire process of creating the site from the conceptualization of the design to the back end programming and database work. Although there are many web designers who can do these things, web design typically refers to a smaller niche of web development. In order to clear up the roles of web designers and web developers, let's take a closer look.

Web design refers to planning and creating the site as well as the graphic and media elements. This is where web development and graphic design cross; many graphic designers also create the concepts and designs for web pages, using programs such as Adobe Fireworks or Photoshop. Many web designers also know HTML and CSS, and how to write JavaScript. However, this does not mean that web designers are always programmers. As a whole, web design generally has to do with the front end work on the site, focusing on the appearance, the layout, and the first impression.

Web development, on the other hand, refers to the overall creation and maintenance of the website. This can include web and graphic design, but it more often than not refers to work with coding and programming the site functionality; this includes database work, application development, networking, and work with servers - back end work. Web development is a more general term that covers all niches of the Internet and website creation.

When seeking out someone to work on your websites, you should understand the difference and know what you are looking for. In many small scale cases, web design and development are handled by the same person, but for larger scale sites, you should look into hiring a web development company, such as Codank Web Design and Application Development.

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

Thursday, January 19, 2012

How to paste a picture on a TV in Photoshop CS4

If you pay attention to advertising, then you might have wondered how the photographer captured the picture on television and computer screens so clearly. Generally, taking a picture of a screen won't render properly and will leave you with a poor photograph. For this reason, graphic designers usually photoshop the picture on blank television or computer screens. In this tutorial, we're going to look at how to paste a photograph on a television screen in Photoshop CS4.

First, select the pictures you want to use. I'm using a stock photo of a television from stock.xchng and a stock photo of a butterfly from MorgueFile. Open both files in Photoshop and look at their sizes by pressing Ctrl + Alt + I or going to the top bar and clicking Image and then Image Size. Compare their sizes and - making sure the constrain proportions and scale styles checkboxes are selected - reduce the size of the butterfly. I've reduced the width to 800 px (though this can always be made larger or smaller later).

Photobucket

Now switch back to the photo of the TV. We need to select the inside of the screen, and the easiest way to do that is with the polygonal lasso tool. Click on the little black arrow at the corner of the lasso tool for more options and select the polygonal lasso tool.

Photobucket

Click on each of the four corners of the television screen, making sure to draw the line just the smallest bit past the black edge framing it because you don't want to leave any white spaces. Once you finish, click back on the first point to complete the selection; you should see the marching ants marquee appear.

Photobucket

Switch back to the butterfly picture and select it by pressing Ctrl + A or going to the top bar and clicking Select then All. Copy the picture and go back to the tab with the television. Next, go to the top bar and click Edit then Paste Into to put the picture inside your selection.

Photobucket

The picture will appear, but it won't fit the screen just right because of the angle of the television. To adjust the picture angle to match the television, we need to transform it. Go to the top bar and click Edit, then Transform, then Perspective.

Photobucket

Use the corners on the bounding box to tilt the picture to the right; since the television's right side is pushed back, you should pull on the right side of the picture as well. Once you are done with that, click on the arrow at the top of the workspace to apply the transformation. Then, press Ctrl + T to further transform the picture and make it bigger to fit the TV screen. Hold down on the Shift key while pulling on one of the corners to constrain the proportions. You may have to give it more perspective when you're finished scaling it.

Photobucket

The only thing left to do is give the picture layer an inner shadow to give it some depth. Click on the fx at the bottom of the Layers panel on the right hand side of the workspace. From there, choose Blending Options and then Inner Shadow. You want the distance and the size to be 8 px and the angle to be 30 degrees.

Photobucket

And it's that simple! Once you get the hang of it, editing images of televisions and computers for your ads will be a snap. You can always call a web and graphic design company, such as Codank Web Design, for help with your graphics.

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

Thursday, January 12, 2012

How to create snow in Photoshop CS4

It's officially winter, and though the holiday season is behind us, you may still want to add spice to your seasonal pictures. Here in the South, snow isn't as frequent and when it does happen, you might not have your camera to capture that magical moment. However, you'll still be able to dress up your photograph and add snow in later. In this tutorial, we're going to look at how to create falling snow in Photoshop CS4.

First, open the picture you want to use in Photoshop. I'm using a stock photo of snow on the ground from MorgueFile. Once you've opened the picture, find the color swatches at the bottom left of the workspace in the Tools panel. Click on the first one and use the color picker to change the color to white. Then select the brush tool from the Tools panel and navigate to the top bar along the workspace. Change the brush tip size to 5 px and the hardness to 0%. Also find the opacity dropdown next to the brush mode dropdown and change it to 55%.

Photobucket

We need to customize the brush a little more, so go to the top bar and click on Window. From the list, choose Brushes so the Brushes window will show.

Photobucket

Click on Brush Tip Shape in the Brushes window and look at the options. Go to the bottom of the window where it says Spacing. Change the spacing to a higher number, such as 386%, to break up the continuous line into individual dots.

Photobucket

Now click on Scattering to select the checkbox and scatter the dots. Make sure the checkbox for both axes is selected and move the scatter slider to 1000%. Make sure the count is set to 1 and the count jitter to 100%.

Photobucket

It's time to create a new layer so we won't mess up the background if we don't like the outcome. Go to the top bar and click on Layer then New then Layer.

Photobucket

Now take the brush tool and start making diagonal strokes in the direction you want the wind to be blowing. Just give it a very slight angle to make it realistic. Brush over the whole picture and then go back over it with curly-cue motions to give it more body. If you need to, you can duplicate the layer by pressing Ctrl + J and then use the move tool to make more snowflakes.

Photobucket

At this point, we're almost done but we need to make the snow more realistic and make it look like it's in motion. Go to the top bar and click on Filter, then Blur, then Motion Blur.

Photobucket

When the Motion Blur dialogue box comes up, set the angle of the blur to whatever you'd like; I've set mine to 45 degrees. You should also set the distance relatively low (I've chosen 8 px). Don't go lower than 7 px or it won't look realistic.

Photobucket

At this point, we're done! Creating a snowy effect isn't hard to do - and it can make your seasonal photographs or cards look all the nicer.

Photobucket

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

Tuesday, January 10, 2012

Reinvent your website for the new year

A new year means a new opportunity - this could be your chance to clean up your site, tie up loose ends, and start over fresh. Although it's not a requirement, many people use the new year as a reason to update their site and make a change. So if you're looking to get your website up to speed for the next year, here are a few things you can do.

Check your competition. The first thing you should do is make a list of your competitors and check their websites. Look at what sort of changes they've made over the year (or since you last checked). See if your competition has added anything, changed, or has remained relatively static. Even if your competitors have not changed their sites much, you should be aware of what's going on in your industry - and what you can do to stay a step ahead.

Review your website. Once you've made note of the things your competitors have done, then you need to take a look at your own website. Ask yourself if there are any features your competition has that would be beneficial for you to add too - if you're lacking anything that could cost you a customer. Make changes as needed by updating information and yearly numbers, getting rid of things that only applied to the year before (such as specials and give-aways), and adding features that you think could benefit your users and make their experience easier. Sometimes this means a change in design; you may also find you need to add or reorder pages for clarity's sake. It is also a good time to give your site a thorough usability test and check to make sure it is compatible with the latest technology (particularly mobile technology, which Forbes.com reports has risen 117.8% over the past year).

Try something new. A new year is the perfect time to roll out a new feature, hold a contest, or send out a newsletter. Now's the time to get started on any new practices you've learned about and would like to try. Whether you want to create a new line of products or sign up for Twitter, you should get started now to make the most of your new strategy over the following year. The least that could happen would be for you to learn something about your market and your business - it's worth a shot.

New Year's is a great time to reinvent your website - and even redesign it. If you want a fresh start with a new design and layout, then you can contact a web designer or a design company, such as Codank Web Design, to help you clean up your site and make it fresh for a new start.

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

Friday, January 6, 2012

How to use the clone stamp tool in Photoshop

There will be times where you have a photograph that is almost ready to use - except for one or two details. It is inevitable that there will be things about a photograph that you don't like and that you want to change. Photoshop makes it easier to get the look you're going for, even if you want to edit a part of the picture out. In this tutorial, we'll look at how to use the clone stamp tool in Photoshop CS4 to remove an unwanted berry.

First, open the picture of the berries in Photoshop. You don't want to override your original picture, in case you want to use it some day, so save it under a different name (such as clone stamp sample) by clicking on File then Save As. The next thing you should do is analyze your picture and look at what you need to change or remove; you can use the zoom tool (the magnifying glass in the Tools panel on the left hand side of the workspace) if you need to. Are there any elements that stick out or detract from the overall composition? In this case, I felt as though the berry on the far right took away from the focus too much, and I wanted to remove it.

Photobucket

Use the zoom tool to zoom in on the stem of the berry. Look for where it is attached, then select the clone stamp tool (it's right under the brush tool) from the Tools panel. Go to the top bar and change the brush size to something like 20 px, then make sure that the brush opacity is set for 100%.

Photobucket

Hold down the ALT button until you see the crosshair appear in the brush circle, then click on an area close to the stem. This will copy those pixels and let you drag the selection over the area you paint, concealing it. The crosshair will move with the brush, selecting new pixels as you go, so make sure you don't select pixels right up on the very edge of the stem. Continue to brush and select new areas along the stem until you've painted over the whole thing.

Photobucket

Do the exact same thing for the rest of the berry. You can make your stamp size larger, but keep in mind that the bigger it is, the more adjacent pixels it will pick up with each selection and movement. Paint along each edge carefully, working your way into the center of the berry. Once you're finished, you can grab the healing brush tool (it looks like a band-aid) and brush over any patterns that stick out to smooth it over.

Photobucket

Photobucket

This was an easier example, but there will be pictures that are more difficult to work with. It takes time and practice to master the use of the clone stamp, but it is a very powerful tool that you should know how to use if you plan on working with Photoshop.

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