Logo & Header

Note: (This post was created prior to Blogatech's facelift and the image is not what you see now but still some good info on how to create and place a background image in your header)

The logo for blogatech was created using Corel Draw, a vector based graphics program. Corel, is a professional tool with a large array of features that gives you the ability to manipulate shapes and text. Corel is not free but if your shopping for a professional drawing program, this is the one I use the most. Adobe's Illustrator would be my second choice but only because I've got more experience using Corel Draw. A complete explanation of Corel's capabilities is way beyond this scope of this post. I just want to give you a basic understanding of how the logo on this page was created.

I started with a bitmap image of a famous Leonardo daVinci drawing that you see on the right.

Then I created a outline of the main drawing shown in da Vinci's notes which comprised of a circle and a square combined.

I also created a copy of this outline and gave it a fill color of black to use as a slightly offset background which gives this shape a three dimensional look.

Then using a feature called Powerclip I placed the original da Vinci picture inside the containers outline. In Corel, objects can be stacked in layers so that the object on top overlaps the object on the bottom. After putting the picture inside the white container, I then placed it on top of the black outline object that was created earlier. This gives the logo a black offset outline called a drop shadow. Drop shadows create depth so the design doesn't look so flat. I also created a transparent square with a black outline and placed that on top of the square portion of the design so as to give the logo even more depth.

Now for the text. A large part of Corel Draws abilities are those associated with creating and altering text. Once the font was selected I had the ability to change the size and color of the text as well as the fill color. I choose a thin black outline with a burnt orange graduating to white fill color. I also created a copy of the word "Blog" and gave it a black fill which I again placed behind and slightly offset to give the text depth. Finally I created the name "blogatech" in solid black and placed this text on top of the design. With the logo complete I moved on to creating the complete header image you see.


I started by making a rectangle the approximate size of the header that I wanted. The header size is dependant on the format of your template and what browser your viewing it with. I started with a rectangle 720 pixels wide and 200 high. Just to give you an idea of size, if your monitor resolution is set to 1024x768 then the entire width of the screen you see is 1024 pixels making my experimental image width about 3/4 of that of the screen. I then placed my logo into this box and added a couple of color coordinated lines top and bottom to frame the text introduction I planned to add using HTML. Small text in images are just not as sharp as that created with code.

After I had the layout and size compete I changed the file from a .cdr file which is Corel's standard file format into a .jpg image file that could be uploaded to the internet. I did this via Corel's "Export" command. I then went to Image Shack, a online image hosting service, where I uploaded my newly created .jpg file. Image shack then gave me the URL address where my picture file is stored:

http://img99.imageshack.us/img99/5553/bt1gl.jpg

Just a note here: BACK UP YOUR TEMPLATE. It's easy, just go to your dashboard, select the Template tab and place your cursor in the box where your template code is. Right click your mouse, cursor down to "Select All" and click it. Then right click again and select copy. Now all you have to do is paste all this code into a word document or to notepad as I do. Name the file and indicate the date and time. Now you have a back up just in case one of the changes you make to your template makes your blog appearance into a scene from the exorcist. Mark my words, its going to happen and your definitely going to wish you had followed my advise.

In order to get my Logo image to display I had to place it into the style section of the template as the headers background. The style section controls the attributes of the elements in your blog, such as the size, color and style of fonts. It also controls how the header, body, footer, images and links appear. the style section makes up a large part of your template and starts with the tag:
<style type="text/css">
and ends with the closing tag:
</style>
Within these two tags I found The "#header" item which controls how the header of blogatech appears. I needed to add a couple of lines of code so my image would display correctly. You will remember that the image I created was 720 pixels wide and 200 pixels high. You can see from this code below that the width is set to a percentage of the screen resolution (76%) and is not a fixed size. Again, based on a screen resolution of 1024x768 the image width should be close. I could and eventually did have to resize the image to get the exact placement I wanted.

#header {
width:76%;
margin:0 auto 0 auto;
padding-top:0px;
border-bottom:1px dashed #ccc;

There is no defined height in the header style so I added the line of code you see in red to set the height. I also added the code in blue which sets the background of the header to be that of the Logo I created.

#header {
width:100%;
margin:0 auto 0 auto;
padding-top:0px;
height: 200px;
background: url(http://img130.imageshack.us/blotechlogo.jpg) no-repeat;
border-bottom:0px dashed #ccc;

I also changed the border-bottom from 1 to 0px which effectively makes the original dashed line invisable. I could have just deleted that line of code but changing the size to "0" left me with an easy way of putting the dashed line back in at a later time if I desired.

If you would like to learn more about CSS (Cascading Style Sheets), check out the links in the drop down menu at the top of this page.

Technorati Tags: CSS style sheets, Corel Draw, logo design, blogger