Designing banners

I have been a designer by profession for thirteen years, but in all that time I have never designed a website. Until now. Designing this blog has been my first experience in web design. It has been challenging and it has given me constant bloodshot eyes, but I have totally loved it!

So, keep in mind that this post, along with any other design post, is geared more toward general design because that is what I am the most familiar with. If I speak incorrectly on any topic relating to web design, please forgive me (and correct me)!

Perhaps my favorite part of putting this blog together was creating the banners that you see at the top of each page. I loved being able to do everything myself, from taking the photos to choosing what font to use.

I will chronicle my banner design process, using the Photography banner as an example.

I shot this photo on a whim as I was leaving the State Fair this summer. I thought it was a well-suited option for the Photography banner because I love the composition of it. I had a wide aperture setting on my camera when I shot it, so that helped to create a very (fun) shallow depth of field. The different branches create conflicting angles, while all in different depths, and all of that appeals to the (well, my) eye. Geez, I feel like I'm back in college art class!

I imported the photo into Lightroom and I played around with exposure and saturation and a few other fun tools. (I'm not going to get into Lightroom too much here because there is way too much I could go on about. To see some Lightroom tips and tricks, check out the Photo Editing section of this blog.) Since the green from the leaves is the main color in the photo, I intensified it to make it pop. I love color, and I like it bright and bold! I also added a yellow hue to the photo (which you can see mostly on the tree trunk) to give it a little life. And, I put a vignette around the edges of the photo because I am madly in love with vignettes.

I knew the banner needed to be 650 pixels wide and 160 pixels high, so I brought this newly edited photo into Photoshop and created a crop box exactly that size. I moved the crop box around over the photo to see what part of the photo I wanted to crop.

By the way, I always make sure Shield is checked so everything outside of my crop darkens. This allows me to get a better idea of how the crop will look. I like to set my shield color as black and the opacity at around 85%. This darkens the uncropped area, while still making it visible.

Once I found the perfect crop, I cropped!

Now, I confess to having a slight obsession with fonts. I am extremely selective when it comes to finding the perfect font for whatever it is that I am designing. I believe that a font can literally make or break a design. So whenever I design anything, I spend a considerable amount of time on this part of the process.

I like to type out some test text and run through my list of fonts until I find about ten (or so) good options. I take those ten (or so) options and line them up vertically, next to my design. Then I start eliminating them, one by one, until the last font is standing.

In this case, Nueva Std Condensed was the winner! It has a bit of a fun flare, yet it is simple and it complements my banners.

The bottom right corner was where I envisioned my text going back when I was choosing the perfect crop. (It is a good idea to keep text placement in mind before it is on the page, or screen, or whatever.) And in this case, it is visually appealing to keep equal amounts of padding around the text (on the right and bottom, where it is close to the edges of the photo).

So, there you go! That is how I created the Photography banner for this blog, and I used the same general process with the rest of the banners.