New Blog Design!

It's that time of year.

Blog design ADD.

I wanted to go for a more simple look, so I went with a one layer background and a white middle. I updated my button, so if you feature my blog on your blog, feel free to switch it out. I have to admit, it didn't turn out as cute as I had hoped, so I may be tweaking some things.

Any suggestions?

As always, if anything looks funky or doesn't work on your computer, please drop me a comment!

Credit to Jiovannas Creations for the background paper and Carrie Loves Design for social media buttons. As always, all elements of my design were freebies.

Talk soon!

Blog Tutorial 4: Customizing your Tabs and Gadget Titles

I'm back with what will be my second to last planned tutorial. I have this one, and then I was going to do a "finishing touches" post. That post will consist of tweaks you can make to your design in blogger and/or photobucket to make it perfect! 

My question to you is: are there any other things that you'd like a tutorial on regarding blog design? Leave a comment or shoot me an email! There are tons of tutorials if you google what you're looking for, but I'm trying to put it into teacher friendly language and use lots of pictures! =)

So, onto this tutorial: Customizing your Tabs and Gadget Titles.

First, I have to give credit to Terri from The Creative Apple! I wanted to customize the tabs on my design about a month ago, and she had just done it. I asked her how to do it, and she emailed me back right away! So thanks, Terri!

The first thing you'll have to do is head over to Gimp or Word to make your tabs! They can be images or words. Now, I only know how to do the words if you have a solid color background, because I'm not sure how to make text with a transparant background. I'm sure it's possible, though!

So, just like you did your header, you need a starter image. Hopefully, you have been looking through and downloading scrapbooking kits [making sure you follow their TOU!] recently!

[For this tutorial, I am going to use an image from Scraps by Missy. Click that link to visit her blog. She has many freebies and kits to purchase!]

Open your image in Gimp using File--> Open as Layer. Scale your layer a little smaller, but make sure that you keep the proportion so that the image stays intact! I'm going to make the width 200, but you can make it however big/small you want. Remember, though, that these will have to sit horizontally on the top of the center of your blog.

The problem now, is that there is a whole bunch of extra space around the frame. Even though it is transparent, it would still take up space. So we are going to get rid of it! Go to Image--> Zealous Crop. This crop will get rid of the extra space, and it will make sure that there is only as much transparent extra space that is needed. The image didn't center for me after that step, and it doesn't matter. It will turn out the same!

You don't have to do this step, but if you need help centering, set guides like we did with the background. Go to Image--> Guides--> New Guide by Percent. Set one vertically, and repeat to set one horizontally.

Now, you can add your text! Many bloggers have tabs on the top of their blog. The most common that I've found are Home, About Me, Freebies, Awards, Resources, and Copyright. You can make a "page" on your blog for whatever you want! For the sake of time, I'll just be making three tabs.

Just as we added text before, click the A in your toolbar and click your image. Type in your page title. I'll start with Home! Remember you can change the font, color, size, spacing, etc! Move your text to the center of your tab by clicking the move button in the toolbar.

You are finished making your first tab! We are ready to make another, but we aren't going to start from scratch! We are going to duplicate what we already have.

You are going to duplicate the WHOLE thing, not just the layer. So go to Image-->Duplicate. A new window will pop up that looks identical to the one that you have just finished! 

[Don't close the first one, we didn't save it yet! Just minimize it.]

Once you have a duplicated image, you only have to customize the text! I'm going to use the same font, a slightly smaller size, and the same color. When you go to change the color, the color that you used in the first tab should be saved. Easy-peasy!

Duplicate and repeat as many times as you'd like, depending on how many tabs you need! I'm going to make three-- home, about me, and resources.

You are ready to save! Just like we did the button, you are going to save each one as an .xcf [in case you'd like to go back in and fix] and export it as a .png [so that we can upload to photobucket and install]. I would name them TAB_home, TAB_about, TAB_resources, etc., just so they are easy to find!

Once they are saved, upload them in photobucket!

Now you'll need to go to your blogger layout. Right below your Header, you will need to add an HTML gadget in the long space. If you want, you can create it anywhere in the layout, and then drag it to that position! [If you have a Pages tab from Blogger already, you need to remove it.] Name it Pages for easy identification.

Here is where the coding comes in. In essence, you will be adding each of your tab images in the order that you want them to be. Each image will be linked to the individual page.

If you would like your tabs centers, put <center> at the beginning of the HTML gadget.

You will need the below code for each tab/image. [Thanks again, Terri!] Copy this into the gadget box as many times as you have images. Where it says YOUR PAGE URL, go to your page and paste the URL there. Where it says YOUR IMAGE URL, go to Photobucket and grab the direct URL.

<a href="YOUR PAGE URL" mce_href="YOUR PAGE URL"><img src="YOUR IMAGE URL" mce_src="YOUR IMAGE URL" border="0" /></a>

When you're doing this, make sure you make them in the order that you want. You can easily switch them around by cutting and pasting the code. Here is what mine looks like.

Click Save and then Preview your design. They should be in one straight line under your header. You may need to resize if they are too large. You can go back to them in Photobucket, resize them, and fix the direct link, as I've showed you in previous tutorials. Here's the finished tabs on my test blog!

-----------------------------

PHEW. That was long! Thankfully, you make your gadget titles in the exact same way using GIMP. You can use the same frame as you did in your tabs or a different one. Up to you! On my blog here, I used a slightly different one. I'm going to use the ones I already have from my actual blog.

Make them and save them in GIMP. You will want them to be pretty small, depending on the width of your side bars. I'd start with 200 or less. I would save them as title_followers, title_labels, etc so that you can easily find them later!

Now, go to blogger and add a new HTML gadget.

Title your gadget so that you know which image it will be. I'm doing the followers one, so I added that title. Then, paste the following code in the box. Where it says YOURIMAGEURL, go to Photobucket and get your direct link code. Paste it there.

<center><img src="YOURIMAGEURL"/></center>

After you save it, drag it directly above its corresponding gadget. This is why you titled it the way that you did.

Click preview, and you should see something like this. You have the new gadget title, your new image, the actual gadget title, and your followers gadget. That is a lot of titles! Even though it looks like that, leave it there for now!

Now, repeat the same exact thing for each gadget that you have! You will have a lot of gadgets on your sidebars, along with a lot of titles. That's okay! Once you're finished adding your images above each gadget, you can go back and delete ALL of the titles. This will create a smoother side bar!

Here is just the followers portion of my test blog, after I deleted the titles!

YAY! You have customized your blog! I'll be back soon with my last planned tutorial. Please comment if you find these tutorials useful! I made a little button in case you want to pin a tutorial for later use. I've also added a new tab on my blog that will have links to all my tutorials. =)

Blog Tutorial 3: Making a Header and Button in GIMP

Hello & Welcome! A couple things before I get started with the tutorial!

Remember, I marked down my TPT products to $1 until sometime tomorrow evening. They are geared toward grades 2 - 4, depending on your students' abilities. Click here to view my last post with a more in depth description!

I am also still looking for helpers for my giveaway. Not much interest in helping, I guess? It'll just have to be a small event, no biggie! But thanks for those of you who are willing to help. I'll contact you soon! =)

---------------------------------------

Onto the tutorial. Just a reminder, I posted previously about how to make a header and button using Word/Pages. If this seems too complicated, feel free to use that tutorial by clicking here!

First thing's first-- open up GIMP! Open up new file. It doesn't really matter what size it is right now. Mine is something like 940x400.

Now, you'll have to choose the background [or base/outline] of your header. If you downloaded a scrapbooking kit, many of them come with frames that you can use. If not, you can find frames all over the place, just be sure to check the designers terms of use. If you can't find anything, just start out by making a rectangle-type shape in the color of your choosing in paint. You can jazz it up! Whichever one that you choose, go to File-->Open as Layer and open it up!

Depending on the size of the frame, you might not be able to see it because it is too large. So go to Layer--> Scale and make it something manageable. We can change the size of it later! Remember, if you want to change the proportions [make it taller or wider, not both], you'll have to click the chain to make it broken!

Here's what we have! If you look in your layers window [if you don't have that open, go to Windows-->Layers], you'll see that we have two layers open right now. One is the white background image. If you click the eye next to that, it will disappear. Do that now.

Okay, now this gets tricky, so try to stick with me! You need a paper/background to fill in the middle of your header. Do you see how, before we hid the white background, it covered all of the transparency? We want to keep the transparency on the outside so that our header keeps it cute shape! So we are going to need to choose a paper, then resize it so that it is only seen inside the frame!

[[This is the difference, to me, between using Word or Gimp. If you're fine with a perfect rectangle header (like on my blog), Word might be a good route for you!]]

So, I'm going to choose a paper from the same kit so it matches, and open it as a layer. Then I'm going to resize it to be 800x300. Remember, I can change the size again later.

Hm, notice how the new paper is on top of the frame? Not how we want it to look! So, we are going to change the order of the layers! By changing the order, we are switching which layer is on top. We want the frame on top. Look at your layer box. Your newest layer/paper should be on top. We want to move it back, behind the frame. Highlight [click] the newest paper, and click the down arrow. Here should be the result!

Looking good so far, right?! Now, lock down these layers so that they don't move around when you're messing with embellishments by clicking the blank space next to the eye [a chain will appear]. 

Now, we're going to decorate with pictures and words. Every header has words, but you don't necessarily have to use pictures. You can skip this part if you'd like!

Just like with the background, we are going to File-->Open as Layer. Find your first embellishment/clip art. Make sure that this layer is on the top of the list. If it isn't, move it up using the UP arrow. If you'd like the resize it, go to Layer--> Scale... or click the scale button in the tool bar.

[If you need a refresher on manipulating embellishments, revisit my last tutorial!]

A few things I don't think I mentioned in my last post regarding manipulating images, deleting and rotating. If you add a layer/image, but you don't end up liking how it looks, highlight the layer in your layer toolbar. Then, click the trashcan. This will delete your image!

If you would like to rotate an image. Click the rotate button on the toolbar, then click your image. A new box will pop up, and you can use the slider to rotate the image as much as you want!

I'm going to keep my flowers straight. Don't forget, you can move your image at any time by clicking the move button in the tool bar!

Repeat adding clip art/embellishments until you are happy. I added flowers and a bird!

The last step is adding text. If you have a set of letter images/clip art, you would add them like you added the embellishments. I am going to add regular text. GIMP has all of the fonts that you have on your computer. So if you're a font hoarder like me, you'll have a lot to choose from! However, it is kind of a pain, because you can't search for them. You have to type in what you want. A good idea is to use Wordmark to choose some fonts that you might like, so be ready for that.

Click the A in your tool bar, and click somewhere within your header. Type your title. Highlight your title, and then you can change your font, size, color [sorry, I left that out of the screenshot!] and spacing using the box that pops up. Notice that the text becomes a layer in your layer box.

So I changed mine a little bit, but I'm not satisfied. IMPORTANT: You can move the text while you're working on it, but not rotate. You can only rotate it when you're finished editing your text. You can add as many text layers as you'd like.

Here's my finished product! Not the coolest, but it'll do for a tutorial!

Now, you are going to save it like you saved your background. Once as a .xcf, and then you need to export it as a PNG. PNG is sooooo important! If you want the outside to remain transparent, this step is essential!

Now, upload this image to your Photobucket account. Once you've done that, keep that open and head over the Blogger. Go to your layout and edit the header.

Copy the direct link of your image and use that to upload it into blogger. Here's what you might see.

Do you see how it is cut off on the right side? That means we need to make the header smaller. Instead of going back into GIMP, we are going to fix it in Photobucket. SO much easier! So head back over to Photobucket, and click edit. Once you've clicked edit, go to the bottom and switch to advanced editor.

Now, you can change your image size. This will depend on the width of your blog and your personal preference, but I changed mine to 860 x 350. Then, you will save it again. Make sure it is a PNG so that you can keep your pretty edges! You may need to do this a few times to get your header exactly the size that you want it!

Upload this new, updated header onto your layout. And you're finished!

Phew! That was a lot of work. But it is SO worth it when you look at your pretty blog, and it is something that you are proud of making on your own!

This post was also supposed to be about making a button.

Here's the thing! You make a button in the same exact way, but it is obviously just wayyy smaller! In GIMP, start out with an image that is about 200 x 200 and go from there! [[Or, you can make it in Word if you want it to be a simple square/rectangle, like most buttons are. Here's that link again!]]

And I have to outsource when it comes to coding again, because I still can't get it to show up. But here is a great website that tells you how to upload your button with a grab box!

I hope these tutorials continue to help you. Not getting much feedback, but thanks to those who have commented! It is very much appreciated!

My next tutorial will be Blog Tutorial 4: Customizing your Tabs and Gadget Titles.

Blog Design Tutorial 2: Constructing a Background in GIMP

In the last tutorial, you should have downloading our program, GIMP, found a digital scrapbooking kit, and created a Photobucket account. We will be using all of these today, so if you didn't do those things,  go do them now..

...waiting...

.....waiting.....

.......waiting.......

Okay, hopefully you're back and ready to go! Just a clarification. I will try to explain the step the best than I can, then I will follow that up with a screen shot. [I know that I learn best by someone showing me what to do!] You may need to click on the picture to make it larger!

Okay, so first, you'll need to open up GIMP by clicking on the little fox icon. The main window should open up. Other tool windows may open. Here are the two that you actually need:

                                               

If you have any other boxes open, you can close them. If these two boxes don't show up, here's how you get them.

Now that you have these two boxes open, you'll need to open up a new image. This is just a background image that sets the size for your background. Here's where I wasn't sure what to do when I was making my first backgrounds. Different tutorials said to make your original image different sizes. But every time I made it different sizes, layers got cut off! So frustrating! So, I made mine 1200 x 1000.  Then, I set my background color in blogger to match my layout, in case people's screens are wider than mine, but I'm getting ahead of myself. [If you don't think this size will work for you, go a little bigger, like 1400 x1100.]

Here's how you open a new file. Go to File, then New.

Now that you have a new file ready, you'll need to decide what piece of digital scrapbook paper that you'd like to use as the base of your layout. You can always change the order of your layers later! Just open which one you think you want on the bottom. 

To do this, go to File, then Open as Layers. Now, you'll need to find the paper that you want! For this tutorial, I am going to use a kit called Citrus Punch from Creative Chaos. She releases a lot of great freebie kits! Once you find it, double click it to open it.

Now, it might look funny. That's because it is stretched. So here's what you need to do. Go to layer, then Scale Layer. Click it.

 Change the size to match your original image. To do that, you'll have to click that little chain. Otherwise, it won't allow you to change it the way you want to. Click Scale.

Abra-Ca-Dab-Ra!

Your first layer is done! If this is the only layer that you want, you can skip to the saving step. But, if you want to add another piece of paper and any embellishments, keep trucking along!

To add another layer, repeat the last few steps.
1. Go to Layer->Open As Layer
2. Find the paper that you want to use. Open it.
3. Resize it to the size of your original image.

Do those things, and you'll end up with this:

Both of your layers are still there! They are just the same size. Now, you'll have to change the size of the top layer so that the back one will peek out! Again.. go to Layer--> Scale Layer. This box will pop up. Don't change the height! Only change the width. This will make it skinnier. You can make it as thin or wide as you'd like. I'm making mine 1000.

Click Scale, and you'll get this!

Yay! Now, if you'd like to add another layer, go through the same steps! I'm going to stop at two. One more thing I'd like to show you before we're finished with the paper. If you want to make your thinner paper a little see through, here's what you can do.

Click your layer window, and click on the layer that you want to make see through. On the top of the layer box, there is the option of Opacity. It should currently be at 100%. To make it a little more transparent, lessen the percentage! [I'm going to leave mine at 100%]

Okay, we're done with he paper! Again, if you'd like to stop here, then skip to the saving step! If you'd like to add clip art or embelleshments from your kit, read on!

There are two things you should do before you start adding things. A good idea to do before you add any embellishments is to add "guides" if you'd like to center anything. I just put in a vertical and horizontal guide so that I can see my image's mid points. Go to Image-->Guides-->New Guides by Percent--> OK. Then do the same, but switch vertical to horizontal!

Another good idea is to lock down your two [or more] papers so that they don't move around while you'd moving around your embellishments.

Ok, now you're ready to add images. Go to File-->Open as Layers. Then open the image that you'd like to add to your background.

The image will appear in the middle of your background. If you'd like to resize it, click the Scale button in your toolbar [or scale layer, as you've done before] You can drag the corners of the image or use the scale box that pops up.

Now, you can move your image. Click the move button in your toolbar, and go for it! Use the guides if you want to center anything.

I'm going to center mine horizontally so that I can show you how to duplicate an image so you'll have a matching flower on the other side.

Go to Layer-->Duplicate Layer

When you do that, you won't see anything, because the new layer is directly on top of your original. Because I want it to be like a mirror image, I'm going to flip it horizontally. But you can use this to flip it vertically, too, if you wanted to. Go to Layer-->Transform-->Flip.

That's all I'm going to show you in terms of making the background. I hope this gave you a good foundation. Once you get comfortable, you can mess around with the other features.

It is time to save! I would make a folder that includes all of your background stuff, because you're going to save this twice. First, go to File-->Save As. It'll be saved as a .xcf. This is good, so that you can reopen it and tweak things if you need to. But we're also going to save it as a .png because you can't upload .xcf to Photobucket. So go back up to File-->Export To, and save it again, preferably in the same folder.

Go to your Photobucket account and upload your png image.

Go back to Blogger. Add an HTML box gadget to your layout. Paste the code below, then replace YOURIMAGELINK with the direct link to your PhotoBucket background, shown above.

NOTE-- I can't figure out how to show you HTML code without it disappearing. Grrrr. So I'm going to direct you to a site that will take it from here!

Click HERE and follow steps 4-8!

Save and view. You should see the background image!
Depending on the size of your screen, you may see some space on either side of your background. You have a couple of options, which I will get to in a later tutorial. This one is waaaayyyy too long already!

Please let me know if anything needs to be clarified. I hope this helps someone. Please leave a comment & let me know if it is helpful to you! This takes a long time, and I want to be sure it is being used. =)

The next tutorials will be Step 3: Making a Header and Button in GIMP

I already posted how to make a header/button in Pages or Word. If that is more your speed, feel free to check out this post in the mean time!

I will be uploading this background and future elements on my Tester Blog as I go along.