I’m sorry to say, that I’ve changed my mind once again. Oops, that seems to happen alot. I’m still planning on the design I sketched out, but I’m also going back to the more colorful, vibrant design I had been working on before I started this whole tutorial extravaganza. We’ll pick back up where I left off, but first I’m going to show you the new background that I’m going to use, then I’ll go forward with how I design my header image.

Another thing I wanted to address was the reason I’m not currently taking on pay jobs to customize other people’s TNG templates. One of the things I learned while teaching myself to do websites was that when people pay someone to make their websites for them, sometimes they have very different ideas about what exactly each website designer is capable of. I’ve never reached farther in my web design knowledge then what I needed to use for myself. I started by learning HTML and then fell in love with CSS design. I know a little about MySQL and PHP to get by, but not enough to really dig in deep with things. It’s for this reason I don’t even try to take on “commissions”. It’s just not fair for the paying customer. If you’d like a simple CSS design, I’d be your girl, however, in my experience most people want a little more flash (literally and figuratively) to their websites. That’s perfectly fine for them, but I don’t like flash (literally and figuratively). I like simple, easy loading websites. For me, designing websites for pay or others hasn’t been something I’m confident enough in to take on yet. I’ve been thinking about taking some coding and design classes for it to be an option in the future, but it’s just not in the cards right now.

For now I want to give you a run down of my plan for the next few weeks. Yes, that’s right I said few weeks. I’m really hoping to batten down the hatches and get this done. Seeing as how I’m going back to the original new design, I think it will go much faster. I think the reason I was losing momentum was I didn’t like any of the new designs as much as I like the original redesign. Well, except for the crowded three column format I was going for. Now I have a better idea of where I’m going with it all.

POST 1: Plan Change- In this post, I’ll highlight the changes to my master plan and bring us back up to date with where we left off in the previous tutorials. I think it will include a new design sketch but I haven’t decided yet. I have some paper sketches from before that I might just work from instead of hashing it out all over again.

POST 2: New Banner- This post will highlight the new website banner. My banner is one of the most commented on aspects of my design. For that reason I want to show you with the right tools how simple it is to accomplish.

POST 3: Buttons- As I was researching the new design, I fell across a tutorial for Image Sprites. I fell in love. It’s a CSS way of having that little bit of flash (just figuratively this time). It’s a great little pop to the website. It’s a little more advanced, but with the tutorial I used, I was able to hash it out once, and now I use my example to modify for all other image sprite menus.

POST 4: My Favorite Customizations- This might actually spread across a few posts. I’m not sure at the moment. When I customize my TNG installation, I actually don’t change too many things with the core pages, just the CSS files. This is why I love CSS so much, you can change so many things with just one file. The great thing about TNG is it’s designed to read your mytngstyle.css file before the other css files. So when you put something in YOUR file, it overrides that command in all the other files. Which makes it easy as pie to customize things. If you know the right command that is, but we’ll go over that!

POST 5: TO BE DETERMINED- This is still to be determined because I am toying with the idea of making my own downloadable TNG template. The only drawback is because I use customized images in my design and that might not translate to a template. Right now, this is just a maybe. I’ll be thinking about it over the course of the tutorials.

So there’s the plan so far! I hope to have the first post up by Friday… before I chicken out! This is a little nerve wracking for me. I’ve never tried to explain my process before!

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

Disclaimer: I am not affiliated with TNG software or it’s creator, Darrin Lythgoe. I have not in the past or present made any profit from my tutorials about customizing TNG. I can’t promise to fix all problems that come up with TNG or your designs. A lot of web design is about trial and error. All I’m trying to do is help the people who have commented or e-mailed about this software that makes genealogy websites a lot of fun!

A lot of the times, when I’m designing a website I’m not sure of what the final product will look like. It’s hard to pre-make images for the design, when I’m unsure of how it’s all coming together. There are two definite images I know I have to make in the beginning though. The site banner and a background pattern if there’s going to be one.

So, in this case I’ll start with the background pattern. I really enjoyed to background used on the pre-made TNG template that I used on the iLeeny Beta Site. Sorry, I just love saying that, it makes me feel all nerdy.

click for full size image

To recreate that background but in different colors. I opened a new image file that was 10 pixels by 10 pixels. Then I used the pencil tool to color in my pattern. However, I want to test this pattern to make sure it looks how I want it to look.

There is a simple way to do this in PhotoShop. I go to the Edit Menu and select Define Pattern. A dialog box will come up to confirm. I select OK.

click for full size image

It would do no good to test on a 10 pixel by 10 pixel image, so I open a new file, without closing the old one. This one is big enough that I can tell if my pattern is to my liking. So I head back to the Edit Menu, except this time I select Fill. Another dialog comes up. I make sure the Contents box says Pattern, and I select the pattern I just made from the other image. Then I hit OK.

click for full size image

This pattern isn’t what I was looking for, so I go back and make a few more changes.

click for full size image

This is closer to what I wanted. This time I used a seven by seven image, and I lightened the blue a bit so it wouldn’t be as bright. Now it’s time to mess with the harder image, the banner. Except that’s going to take a little bit more talking, so I’m going to go ahead and split these posts up.

Sorry for the delay, but its finally time to get our computers ready for the redesign! I have to preface this by saying that I have been doing this website stuff for almost 10 years now. This is not my specialty, but I do have some experience with the programs. Just because I’m using more advanced features and programs, doesn’t mean you have to! The important part is taking the time to become familiar with the programs you are using. The more you use them, the more you’ll learn about them.

HTML Editing Software

This is one of the most important programs you’ll need for customizing a website. If you have previous knowledge, you can get away with just using Notepad, but I like to use a program that has some built in “help”. There are many different types of HTML editing software. I use code editors, but there are ones out there called WYSIWYG (what you see is what you get) editors. The problem I’ve found with them (years ago though), is that they are not as code friendly as I would like. When I say that I mean, it gets a little jumbled on the code side, even though things “look” okay. However, they are a great way for a new website designer to jump in and see what code does what function.

Komodo Edit: This is the program I’ve used for the past year or so. It’s free, and it has a built in code database. So you don’t have to remember what values go with what tag. It’s pretty easy to use.

EditPad Lite: This is a free program also, but it’s much more basic in terms of features. However, if you’re comfortable editing code to some degree, this is a great program. This is actually the program I recommended to my siter and she still uses today. She doesn’t need it to do a lot, just to be able to edit basic coding.

SeaMonkey: This is a WYSIWYG editor/email/browser/IRC all in one program. I actually just installed it because I wanted to find a good WYSIWYG editor to show everyone and boy did I find it. I’m kind of in love with it myself. What I really love about this program is that it is a Mozilla powered product. If you haven’t been in the web developer world, Mozilla Firefox is one of the more popular browsers among web developers. We won’t go into the whys, because frankly the discussion gets too heated for my taste!

Photo Editing Software

Adobe PhotoShop: This is the program I currently use. I got a copy of an older version from the Navy base when they were cleaning out their stores. Sometimes if you know someone, you can get some pretty cool stuff that was purchased for government use but then became outdated. They do have a more affordable version called PhotoShop Elements. I’m going to be saving up for a copy of a newer version of that. It might not have all the bells and whistles of the full Photoshop but it’s more affordable for me! (Between you and me, if I ever got rich, I’d buy the Web Premium Suite from Adobe, but that’s just me ;p)

Paint Shop Pro: Before I got onto the Adobe train, I had a copy of Paint Shop Pro. It’s always been a much more affordable program. In fact, maybe I’ll save up for that one too. Just because I’m a software junkie like that and I like seeing the differences.

Gimp: This is a free program. Unfortunately, I haven’t had a chance to play too much with this one to see if it stands up to the other two. I played a little bit and if you aren’t looking to get too complicated, this program could definitely be your solution!

Again, I want to reiterate that you have to play with these programs and learn them. There is a learning curve, but I do have my mother using PhotoShop for her crafting, so it’s definitely learnable! :p

Next up, I’ll show you the process of how I design my banner and other images I’ll need in the design.

Disclaimer: I have no affiliation with these software companies. They are not compensating me for talking about them.

When you have any kind of redecorating project, it’s always a good idea to look around for some inspiration. My website encompasses a blog and a genealogy database, so it’s important that I plan and consider both those factors in my new design. As I was playing around in the test section I created during my TNG tutorial, I found out I liked something I never thought I’d like. Almost every website I’ve every created has had a fixed width design. This means that no matter how big or small your screen size is, I’m perfectly aware that my design is going to be certain size. Variable width designs scare me quite frankly.

I don’t know why they do. I think it’s the horror of the design falling flat in a 24″ inch monitor like mine. What if it is too scrunched in a smaller monitor size. To avoid this fear, I’ve just been doing fixed width. In my original About Me page, I wrote that I was trying to discover things about myself. That was back in 2010. Well I’ve discovered many things about myself in that time. One of them being that I like to learn, but once I’ve learned something, I’m scared of the advancement to the next level. That puts me in the stuck position.

Well, this year the training wheels are coming off. I’m making more efforts to get out there and learn. So one of the steps I’m taking is…. My new website design will be a variable width design! Oh gosh, that’s just crazy. I know, I’m weird.

click for full size

My first sketch was on paper when I was going with a fixed width design. So when I switched, I decided to go into PhotoShop and hash it out there. I played with fonts and images. This is just a rough draft. The banner will get a little more ornate, and I haven’t decided how to handle the links on the side yet, but it’s an ongoing process. What I really hope to accomplish is a design that’s more easily changed out when I like.

I like the more subdued colors too. I loved the splashes of color from my previous working design, but it just wasn’t working in the long run.

Next we’ll talk about programs you’ll need in the customization process!

Alright folks, today is the big day! Are you ready to install TNG? I do have to warn you, you will have to have some kind of webhosting. If you haven’t found one yet, you just have to be sure that they support PHP and MySQL, and if you’re paying for a webhost that doesn’t support them, you should probably switch. There are great options. I use Dreamhost, but have used others in the past. I believe Darrin has some recommedations at the TNG website, so check those out if you haven’t already!

Before we start, other then webhosting you will need at least one other program for installing. If you want to delve into customization, then I recommend a second program also for editing. We aren’t going to get into that today though. Today is just the nuts and bolts of getting TNG installed for the first time.

The program you’ll definitely need is an FTP program. I currently use FileZilla, but there are many free FTP programs out there that work just the same. If you’ve set up a webhost, they should have sent you a login for an FTP program.

click for full size

Read the rest of this entry »