Awesome Band Website Tutorial

The Most Awesome Band Website Tutorial Ever!

For class, I had to complete a tutorial using photoshop. I chose to do the tutorial to design an awesome band web site from www.dzineblog.com

How to Design an Awesome Band Website

This tutorial sparked my interest because my husband used to be in a rockband and I have always been a grunge girl at heart. Back in the day, I used to listen to Nirvana, the band that made grunge rock most successful in the 1990′s. Why not learn how to create a grungy web site? Might as well practice making websites for bands.  I actually used pictures of my husband and the band he used to be in, Stonewater, for the tutorial.

Techniques I learned?

1. Use of lighting effects to add to a background

I learned how to add a really neat effect to my background by adding a lighting effect by going to filter, render, and lighting effects in photoshop. I added a spotlight effect that made the band logo stand out more. It just made the background look more grungy and polished. I found this technique very easy, yet it can make a big difference.

2. How to create a stamp or branding iron

In order to complete the band web site tutorial, I actually had to dive into another tutorial about how to create a branding iron or stamp look.  This tutorial was very simple but enlightening! This technique can come in handy for edgy logo designs, added effects, and possible navigation buttons. This tutorial combined the use of text, a rounded rectangle, and layer styles to create a branding iron look.

3. How to use layer mask and the use of brushes to give a content box an edgy look

I got to learn how to create a really neat content box by combining a rectangle, layer mask, and grunge brushes. This was the easiest technique ever, but it can come in handy in many future projects. I think I could even create paper looking content boxes using this same technique.

4. The use of layer styles and opacity to sharpen the look

From previous learning and lynda online training, I already knew how to combine the use of layer styles and opacity. However, I feel like it reiterated what I need to always keep in mind. Layer styles help give images more depth and a more realistic look. The use of shadows, inner glows, and gradient overlays can make a tremendous difference on how an image looks.  I did learn how to combine overlay and reduced opacity to create more of a blending effect using layer styles. These tools come in very handy to create clean and polished web sites.

Any Challenges Encountered?

In all honesty, the only challenge I encountered was when creating the branding iron or stamp look. I forgot a couple of steps on the tutorial and had to redo the tutorial a couple of times to get it right. The tutorial was very simple, I just kept leaving out a couple of steps, when creating the rectangle shape and stroke layer style. It makes a huge difference on the outcome when a step or two is left out. Otherwise, both tutorials were very well written and easy to follow along.

Best Technique Learned?

My favorite technique learned was how to make grungy looking content boxes and  navigation buttons. I learned how to combine a layer mask and use grunge brushes to give the content box the grunge effect. The neat thing about adding a layer mask and the grunge brushes, is that it can be edited. Using an eraser with the grunge brushes will work too. (I actually used that effect for the grungy navigation buttons). However, it is more difficult to edit, if you decide to make changes later. I think this technique can be used to create paper textures as well. I will definitely use this technique in  future projects.

Tidbits Added

Milk Can Texture Effect

The tutorial was good about letting the learner be creative. The author of the tutorial mentioned that an image can be added to the background using a blending mode. Last weekend, I just so happened to take a picture of an old, rusty, beat up milk can and used that image in this tutorial. (I love taking pictures and closeups of random things). I added it to the background by using the soft light blending mode and reducing the opacity. It helped give a little more edge to the grunge background. The first picture below is a close up of the milk can. The second picture is the blending effect of the milk can image combined with the background.

My Final Touch

At the end of the tutorial, the author mentioned that additional images could be added and blended into the background. The author mentioned adding the images to the left hand side. Since I felt like the top right corner of the website was a little bare,  I added one big picture of the band and used the blending mode of lighten and reduced the opacity to 21%. I used the grunge technique of using the layer mask and grunge brushes to make the image blend in with the backgroung more and have an edgy look.

I have to admit, I was very excited once I finished this tutorial! I was amazed at how the easiest techniques can be used to create an awesome grunge website. I have always wanted to design a grunge looking website, and with the help of a tutorial, now I have!

And here is my version of the completed tutorial on how to design an awesome band website:

Advertisement