Today I’m going to show the process I use to create my website banners. Not all these options will be available with your graphic programs, so you’ll just have to play around with the program and see what works for you. You never know what hidden talents are in those programs!
Above is the banner that I’ll be creating. This is the original banner I made for the new website over a year ago. I’m not going to recreate it exactly, because I don’t remember the exact settings I used, so I’ll try and re-create it the best I can.
This is the color palette that I’ll be using for the new design. I wanted to test the colors at both 100% opacity and 50% opacity. I know the colors are glaring to see by themselves, but mostly they will be used to accent certain things. Hopefully I’ll be able to balance them well.
Also on the color palette, I made sure to note down which fonts I’m going to be using. I use Aquarelle for the Moore-Mays.org in my logo and Pupcat for the Misadventures of a Genealogist subtitle. I’m planning on using Century Gothic as the main font on the website, but that can change. I want to make sure the site isn’t too hard to read, so I’ll have to wait and see how well the font looks in the design.
I usually add the main focal point for the banner first. Most cases that would be the text. I want to the text to stand out and not bleed into the background. I want to make sure that it is in place before I start messing with anything else. I’d rather change out a background design/texture then change the text of my banner. I’ve been using the same text for my Moore-Mays banner for at least 5 years now.
The text is added in my blue color (#0385f9), and I’ve tried to center it in the image. My next step is to add a slight curve to the text to give it an extra umph. Is umph an adjective? Oh well. In order to add the slight curve I use the “Create Warped Text” tool on the top bar in PhotoShop. You’ll have to look around your program for something similar if it’s not called Warped Text.
There are a few options under the “Style” menu, but I chose the ‘Arc’ option. I also chose a +15% bend for my text.
Remember when I told you I loved the Blending Options section? Well, we’re using it again! It’s fun to play with these options and see what it does to your image. This time I’m using Bevel and Emboss to create a more 3 dimensional image. Above are the settings I’m using on this project.
Okay, after hitting okay on the bevel and emboss I go ahead and add my subtitle in under the other text. I like how with the bend, both lines of text line up. I want the same bevel and emboss on the subtitle as I used on the title. To do that without going back into Blending Options, I right click on the title layer and select ‘Copy Layer Style’. To paste it, I just have to right click on the subtitle layer and select ‘Paste Layer Style’. Then my text will match exactly!
Here’s what my progress looks like so far. It doesn’t look like much yet, but wait until we start adding in the background details!
I’m going to use what PhotoShop calls ‘Brushes’ for these next steps. In order to be able to really manipulate the next few steps I’m going to add them to new layers so that they are independent of each other.
Once my layer is created, I open up one of my ancestors census images. In this example I’m going to use William Moore’s 1870 Census record from Chicago. This is the first appearance of a Moore in a census. I can’t go any earlier for them in the census then this, so I like to use it in my banner as a sentimental thing.
To create a brush from this image I go to Edit > Define Brush Preset. A screen comes up to verify the name of the brush. I just leave it as the file name and hit OK.
Here you can see that it’s added the brush to the end of my Brush menu. I make sure that I’ve got my banner file back up and select the census brush. Unfortunately, the brush doesn’t translate well into a screencap. However, I can tell you it will look like a plain outline of the census image. So I was able to line up my ancestor’s name so that they were visible on the screen.
Looks good! I’m going to edit that more later, but for now I want to create another census brush from another ancestor. I created a new layer for that brush so that I can edit both census brushes without it effecting the other.
After adding the second census brush, you can definitely see the dark overlap of the images. I could have cropped the images a bit to save on this but I can just fix it really quick with a great little tool. The blue arrow is pointing to the “Mask” tool. I love that tool almost as much as I love the Blending Options.
The arrow pointing to the Layers menu shows that there has been the addition of something to the current layer. You should also notice that the colors have been changed by the program to black and white. Black will subtract from the layer and white adds to it. Think of the added white box as a mask over top the existing layer. Adding black to this mask is basically you painting a mask over the layer and using white is like erasing that mask. So I use black to clean up my edges on the census layers and make it a little less glaring. The arrow pointing down is pointing to the place on my actual image where the black is showing on the mask box on the side.
After cleaning up the image, I merge the top census layer down to the second census layer. This will make the census layers as if they are one layer now. Any editing done to those images now need to be uniform, so it’s better to have them on the same layer.
Until this point, I wasn’t worrying too much about the background being way too distracting from my text. It’s time to fix that now, and it’s real easy!
Making sure I have the Census layer selected, all I have to do to lighten up that layer is to take down the opacity. I chose 50% on this particular banner. Depending on what you’re doing you might want to make it less noticeable. I don’t want to take it down too far because I like being able to pick out my ancestor’s names in the banner.
Now I’m going to add another pop of color into the banner. I’m kind of known in the outside world for loving pops of color and I want to finally show it on my website! I’m naming this layer the ‘Pink Layer’ so I know it’s easier to tell later which layer is which. I set my initial opacity to 40% but after playing with the brushes in my arsenal some, I ended up putting it back to 100% for the next step.
Well, that was definitely a pop! I should mention that I’m not sure where I got a lot of my brushes from. I used to be an active member in some graphic editing communities and there were a lot of free brushes being created and shared at the time. I really wish I had kept better track at the time because I love some of these brushes and would have like to give the creators credit.
To take a bit of the sting out of the pink, I used a Gaussian Blur on it. After the blur, I changed the opacity down to 20%.
After the pink was done, I decided to add some blue back behind the lettering. Seeing the blue, you can actually see the extra dimension of the lettering now. This time I just used one of the PhotoShop brushes to fill in behind the text.
I lowered the blue layer opacity to 20% also, to match the pink. It still wasn’t quite what I wanted though.
To take a bit of the blue away, I added a mask to the blue layer and used the same faux finish brush from the last step to subtract some of the blue from the image. This gives me exactly what I was looking for!
To finish off the image, I go to Layer > Flatten Image. Then I save the image and upload it to my server. Now we have to add it into the website.
I bring up the mytngstyle.css file. I add in another selector, this one I name #two. You’ll notice that this one is 980 pixels wide this time. We’re going to center this one inside the 1000 pixel one.
I add the #two selector in right below the #one selector from last week. You’ll notice I indent things every level I go. So the #one selector is the first level, then the #two selector fits inside that one, and finally the banner image is going inside the #two selector.
Don’t forget to also close the tag at the end of the page.
Here’s our final product for this week!
Previous Posts:
- RMC: Part 1 is the Planning Stage
- RMC: Creating a Database and Installing TNG
- RMC: My Design Inspiration Sketch
- RMC: Programs You Might Need
- RMC: The Site Design Images- Part 1
- RMC: A Note on Things to Come
- RMC: New Plan and New Background
- The Test Website!
Disclaimer: I hope this tutorial will help others to customize their own websites. I don’t claim to be an expert in web design or TNG. I am just hoping to show others how my design is made so that they might get an idea of how to do it themselves. I have no affiliations with any of the programs or websites mentioned in this tutorial. I only own anything that is on the moore-mays.org domain. I am not perfect and I will mess up in the presentation of this design as I go, but I will fix it as I go. The purpose of this tutorial is to show that you will mess up and that you can fix it without having to start all over again.
One thought on “RMC: Creating the New Banner”