Blog Design 101 | Image Mapped Header/Footer

I'm sure you've seen blog headers where there are links *in* the image itself. Take mine for example. My social media links, navigation bar, and blog title are all one image. Don't believe me? Click it and drag it to your desktop. It will be one single jpeg. I remember before my graphic design/web design days when I used to scratch my head and think, "How the heck did they do that?". Well, my friends... I shall show you.

Now, unless you have Adobe Illustrator or Photoshop you'll have to go about this another way. But don't worry, I will show you all three. First off, you need to create you header how you want it to look either using Adobe or a free software such as GIMP. Don't worry about the actual linking process just yet, just create the navigation bar, social media buttons, and title you want. Here is mine below... look familiar?


Once you have your header designed, it's time to map that thing! This part depends on what you're using so feel free to skip to the part that pertains to you.


Using Illustrator
 
If you're secret weapon happens to be Illustrator, you will be using the Attributes window. You will need to individually select each object you want to link to a URL.  Then go over to your Attributes section (you may need to click "Window" and turn on the Attributes window for it so show up in your toolbar.) With the object you want to link selected, choose "Rectangle" under the Image Map drop down menu. Then type in the URL you want it to link to. In this example, I have selected my Twitter button. Do this for all the links you want in your header image.

Saving Your Files


Once all the links have been created, go to "File" > "Save for Web and Devices". Select either jpeg or png under the file type and then click "Save". A pop up window will appear where you can name and choose where to save your file. Under the "Save as Type" field, make sure you have "HTML and Images" selected.

Your HTML file will then be saved wherever you've selected and your header image will be saved in a folder titled "Images". Go to those files and open up the HTML file in your browser. You should see your header image and be able to select the links you've made. Now is a good time to make sure you have successfully created all the links you want. 


Once you've gotten it to your liking, right click the white space (not the image itself) of the webpage and select "View Page Source". A text window will pop up with a bunch of HTML mumbo jumbo that you don't really need to worry about. This HTML code will be copy/pasted into your header widget in Blogger after on last step.


The only piece of code you need to worry about is where it says img src="...." Right now, it is linking to the file hosted on your computer. Once you put this code into a Blogger widget it won't know where to find this image. So you need to host your header image online using Photobucket, Image Shack, etc. Grab the new code from your image hosting site and replace that file name between the quotation marks. Now you're ready to plop this code into your header widget.


Using Photoshop

If you're using Photoshop to create your image map you will need to use the Slice tool which is hidden under Crop (press and hold Crop and you will see two other tool options). Using the Slice tool, cut out sections around each of your buttons. When you are finished, you image will look like an odd grid of sorts. Don't worry, you won't see these lines after you are done.


Press and hold the Slice/Crop option again and choose "Slice Select Tool". Double click each of the buttons you've sectioned off and a pop up window will come up. Enter the URL of the button into the field. You can also choose if you want the llink to open in another window or if you want an alt tag to come up when someone hovers over the button. Hit OK and do this for the remainder of the links.

Once you've hyperlinked all the buttons, follow the same directions for saving as you did using Illustrator.


Using an Online Image Mapper

There are several free image mapping options on the internet for you to try. For this tutorial, though, I'm using www.image-maps.com. It's fairly intuitive but all you need to do is upload the image you've created (either using Adobe design software or free software like GIMP) and select "Start Mapping Your Image".


Select either "rectangle" or "custom shape" and drag/resize the shape to fit around each of your buttons. Enter the URL and alt tag and hit "Save". Once you've added all your links you can select "Get Your Code" from the ride sidebar. A window will open up with a bunch of advertising on it. Ignore all of that and at the top select "HTML Code". Copy the code from the text box and drop that into your Blogger widget.

**********************

Once you've put the code into your header widget and hit "Save" you should now have a fancy new header for your blog! I personally use Illustrator to create my blog designs but there are always free ways to create almost as good of quality outcomes. The one complaint I've heard about the online image mapping software is that it's a little bit blurry. If you have software suggestions or tips, pleases leave them in the comment section!

Now, for this tutorial I focused on adding a blog header. However, by following the same exact directions, you can create a blog footer as well. Just like the one at the bottom of my blog. The only difference being where you plop the code (the footer widget). So if you decide to try this out I'd love to hear your thoughts and see the final result! Just leave your links in the comments! Happy coding!

2 comments

  1. wow nice one. looking great accidentally i found your blog Love to stop here. nice saying and nice pics and nice work keep it up happy blogging. Thanks :)love is everything

    ReplyDelete
  2. I just used this tutorial to help make an image mapped header for my blog at http://jennblogs.com

    I used photoshop and the instructions were great! The only thing different was that I use self-hosted wordpress so the actual installation is a bit more difficult (just pasting into a widget would have been amazing!) but I got it figured out and it looks great!

    Also, if you visit my blog, just keep in mind that I'm not nearly done with customizing the layout! haha

    Thank you so much for posting this!

    ReplyDelete

Thanks for stopping by! I'd love to know what you think!
-Allison