Showing posts with label background. Show all posts
Showing posts with label background. Show all posts

Wednesday, 7 January 2015

Working on a Header

Weeks 3 and 4 of Beautify your Blog is about the header. I'm looking forward to these because so far I'm not really impressed with the backgrounds that I've chosen. I know that once I create a header that I like, that I will probably have to use a more neutral background.

Here are a few things that Erin suggests:
  • If you've adjusted the width of your blog, then you'll want a header that is roughly 1000px wide. The height of the header should be about a third of the width, so in this case, 300px or so.
  • Use only a couple of fonts and match your background colours.
I ended up making a large number of headers. I love making these. I've been using PowerPoint to make my own images for years. It's simple to put images together and then add text. One thing that I've learned is that it's best to do this within a coloured box, even if that colour is white. Unless I'm going to use just one background image, the first thing I do is create a white rectangle with a thin border. I then add my images and text boxes. Once I'm done, I save the entire group as a JPEG image. After the image is saved, it's easy to place it where you need it, and then, if you don't like something, to go back into PowerPoint to make changes. That's why I always save my PowerPoint file - you never know when you'll have to go back and make changes.

Here are some of the headers I've tried out on the Test site.
Header with two large images and centered name
Header with two large images and centered name

In my header I've used a number of images. This example contains two larger images, one of them within a round frame. The blog name is large and in the middle, and as Erin suggested, it contains two fonts and two colours that fit with the background.

Header with round images and smaller name
Header with round images and smaller name




In this example, I used a number of images within round frames. The blog name is smaller and located under the smaller images.




Header with images in square frames
Header with images in square frames

This header is similar to the above example but the images are within a square frame with rounded borders. There are less of them and they are slightly larger.

You will notice that the background is different. I tried taking a picture of fabric and using these as background. This was my favourite one, but I'm not sure that it's required if I have an interesting header.

Header for Learning & Design Blog

I wanted to try something totally different for my Learning & Design blog. (You may have noticed that the other images are for the Quilting & Learning blog.)


Header with different fonts
Header with different fonts



This is a similar header with  different fonts and a different background colour. I found the design, Stitches, on the Starsunflower Studio site that Erin suggested. The design is by Jan Kopriva.



Header with an overall image
Header with an overall image
I've just added a different header for the Learning & Design blog. It took a while to get it right because it turns out that even if you make the background the correct size (970px), when you open it up in PowerPoint, the size will change.

The image is Winter Leaves, designed by Nathalie Ouederni from France. I found the image on the Smashing Magazine website, as part of their Desktop Wallpaper Calenders: January 2015 series. Isn't it great? If you go to Nathalie's site, you can download wallpaper from this image.

What I learned:
  • If you want to put writing within your image, you have to have a uniform section to write in, otherwise you'll only see the writing in some sections and not others.
  • Details such as font, font size and the frames around images can make a lot of difference.
  • Bringing an image into PowerPoint changes its size!
  • Working with a width of over 1000px makes aligning images much more difficult within a post. I ended up going back to 970px.
  • Getting the same colour background for my test site and this site was very difficult. It turns out that if you want to change the background colour to something specific, you should go to the "Advanced" setting/ "Backgrounds" and then change the "Outer Background".
  • The hard part is choosing! Should I keep making new headings or just choose one?  
If you have any preferences, please let me know!

Sunday, 3 August 2014

New Look is Coming Along

It's week 2 of Beautify your Blog. Erin's examples and instructions are really well done. The lesson was on Blog Layouts and Backgrounds.
New background

Erin gave us suggestions for finding wallpaper through Google. It turns out that getting the right wallpaper is tricky. They suggest that if you want to image to cover the full background of the blog, then the image should be 1800 x 1600 or greater. However, the image needs to be under 300k - that's quite small. So if you want a large image, the resolution has to be pretty low; and then you would only see the sides of the wallpaper behind your blog.

Another option is to find a smaller image and tile it. This can work very well, but it really depends on the image. I found a funky but not too strong image at Wallpaper Panda.com It's relatively small; tiles well; has colour and interest without over-powering the page.

Following Erin's instructions, I also made the test blog wider. I think it's important to show more of the blog and less of the background!

First version of the new look
Although Erin suggests keeping the blog's background (where the writing is located) white, I just found the contrast to be too much. I played with many colours and the one I liked best was the cream. I actually loved the pale pink, but that didn't give the page enough contrast.

I'm not sure is this is my final background design but I'm going with this choice at this time. The great thing about the design is that it can be changed, and it's even easier than painting a room!

Second background choice
Second background choice
I guess I must of had reservations about my choice because after publishing this blog post and making the changes in the Learning & Design blog, I got an idea (oh oh!) When I took the picture of the blog above, it was with the Snipping Tool and I notices when I posted it that it was quite small in size.....so, why not take a snippet of one of the backgrounds that I liked but was too large, and see if this would work. Well, it did!
Second option for the new look


Now I have a dilemma - which image should I use? I'm going to post images of both images and blogs. I don't have to decide right away - and if you want to tell me which one you like best, that would be appreciated!

The next two lessons are about creating a header - I can't wait. It would be nice to create something that pops!


What I learned:

  • I loved playing with the background! I seem to be unable to choose anything that is really sedate.
  • Sometimes it's good to consider other tools such as the Snipping Tool to play with your images.
  • I also learned how to add a text gadget at the bottom of the blog to give credit for the image.