Sunday, 7 April 2013

Image creation




I am going to start this post by saying I am NOT a graphic designer, I am completely untrained BUT... I have taught myself to use GIMP, a free image editing software which some say is "comparable to Photoshop". It is nowhere near as powerful as photoshop, but for anyone who needs to edit images and can't afford Photoshop, GIMP  is perfect.


There are a gazillion tutorials on Youtube that guide you through image manipulation using this software. So, if you feel the need to design your own blog, GIMP  is the perfect place to begin. It's easier than what it looks and a whole heap of FUN! It can be downloaded for free HERE.


Header Image

The only real trick to displaying your header image in Blogger (as opposed to a blog title), is the sizing. Blogger doesn't provide an easy way to re size images in the Header Field. There are two ways to get around this... the first is putting your image up there, and if it sized incorrectly, re size and upload the new image. From experience, this can take FOREVER! For starters though, before you edit any of the widths on your new blog, your header's size should be "around" 800 pixels in width but not exceed 220 pixels in height. The funniest thing I see in the blogosphere, is sites where the header image covers almost the entire screen! There is a way you can re size directly in blogger by altering part of your HTML coding within Template. Have a bit of a Google if you are that advanced and you will come up with quite a few sites with the coding for you to copy.


Background Image

There are plenty of "free" background images available, please see my earlier post on Image Selection, the Legality and "FREE" Images. The one thing I will mention regarding this though, is that your own photography adds such a great feel to your blog, both for visitors and you. Make sure the file format is either a .jpg, .gif or .png (recommended) file and that its size does not exceed 100kbs. As a rule of thumb an image size of around 30kb or less is about right if loading time speed is not to be compromised. 

The great thing about Bloggers range of Background images for you to choose from is the large selection, including the "transparent" range, meaning you can select a plain background colour in the Advanced section of the Blogger Template Designer, under "Page". Then , you can overlay one of the transparent images so your plain colour is now patterned.


Your other, and perhaps the best option, is visiting the good people at PATTERNCOOLER!


You can edit each of Patterncooler's backgrounds by either randomly choosing colours or using the Hex Codes from your design choices (Template, Advanced). Again, here is a link to a list of hex codes. You can also edit the size of the pattern right on Patterncooler's website, and download (free of charge) in .PNG format. While I do say free of charge, it is always (at very least) polite to add attribution within your page for the use of someone else's "free" item, and then notify them of it's use, so they can check it out! While Patterncooler's designs are free to non-commercial users (Bloggers unless your selling something), you can donate to Patterncooler on their site if you have the funds. If you do, please donate as it really is an INCREDIBLE site and resource for all.


Button Image


The best way to make a button image is to use part of your Header image, so they compliment each other on your blog. As you will see on my own Button, it is the head of the caricature in the Header with the words "Design Du Jour" formatted differently (but using the same font). The most common size for a button is 200 x 200 pixels. Guaranteed this seems small, but if you are adding a blogroll to your blog (I cover the creation and installation of a scrolling/rolling blog roll here), the less room that can be taken up on someone else's blog the better. One of the most annoying and arrogant things I see, is Bloggers with a massive button! Having them all the same size in a blogroll would make it so much neater!

One thing i will say though, it's a great idea when you are designing your Button Image, to make the original about 500 pixels in width and height. Reason being, is that the code I will supply for both the Button with Grab Box, and the scrolling/rolling blogroll, contains coded sections for setting any image to appear the size you want. Therefore you can make your 500² image appear as 200². If you were to increase a smaller image though, it would become pixelated/blurred.


In my next post, I will cover not only the creation of a Blog Button for your site with a "Grab Box" (including HTML code), but the instillation process. Go here.

Again, if you have any questions, please let me know.

All the best,

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me