Best viewed using Google Chrome. Please email me if you need a fast reply as I may only reply comments here after a month. If you like my blog, remember to follow me! Thanks

Friday, September 5, 2014

Blog Tutorial: Design From Scratch Part 2 (The Header)



Hi people. So we've come to the second post of this Design From Scratch thingy! And today we'll be talking about the header.

Note: I don't know digital art (I'm planning to learn though!) so the samples won't be those digitally awesome stuff. I am not a professional designer, so I don't teach fancy, slideshow or even interactive headers. I know Photoshop, but we won't be talking about it today because these tutorials are meant for those who don't even know PS but want a personalized header without paying others to do it. What I'll show is how to design simple, minimalistic but interesting headers that will attract readers but won't get into your content's way. If you're looking for professional stuff, this is not for you.

Since it's an important part of your blog, I've dedicated this post solely to it. A header is super important because it is your blog's first impression. Readers and visitors don't even have to scroll down to see it; it is right there when they load the page.

So to give a good impression we need a good header. A good header should have these criteria:

  1. Large
  2. Well-aligned
  3. Clear
  4. Simple
When I say simple, I don't mean plain. You can be as creative as you want, but keep it clear and easy on the eye. So how do we create a header? I'm not sponsored by this website, in fact I pay to use its premium services, but I've always liked PicMonkey. Why?

First of all, it's free. I know I said I paid, but that's only to use its premium stuff that I really need (such as cloning and a couple of effects), but I have been using it for free for more than a year. And everything that I use to design my blog is free, so there isn't any need for you to pay if you don't want to. 

Secondly, they have a lot of free stuff. It's not like those cheapskate websites where they force you to pay everywhere you go. The stuff is labelled clearly whether it's a premium feature or not, and they are always upgrading and bringing in new free features. Plus you can download the best quality free.

Thirdly, it's easy to use. Unlike more professional editors like Photoshop, Picmonkey is extremely easy to use and still packs powerful tools that you will need to design stuff or to edit pictures. The interface is friendly and informal too, and you won't feel intimidated at all.

Let's move on to the designing. Here's a picture of my previous header:




Doesn't it look fresh and appealing? It's simple, clear and large. You can add a static photo of yourself instead of bees and flowers, or maybe have a different theme: school, nautical, garden, hearts etc. The best thing is picmonkey has lots of free stickers to play with. You can also upload your own cliparts if you want.

Step 1: Go to PicMonkey. Mouseover "Design", then click on "Custom" size. The size varies with your preference, for my header example above, I had it 1350 x 350. Personally I think the width should be the width of your post background if your header is not going to blend in, but in my case, since it's going to blend with the white of my background anyway, it doesn't matter.


Step 2: Under the Basic Edits tool, pick Canvas Color and tick the "Transparent Canvas" to make the canvas transparent, if you have a colour for your blog background. If your blog is white, you can leave the canvas as white!



Step 3: Use the Text tool to add text to your header. You can pick the font, colour and size. Try to make the name of your blog huge and in the middle of your header so that it is clear. Add any quote or description of your blog if there is (best if it's only one sentence so that the header doesn't look cluttered).

Remember that if your background isn't white, some colours might not go with your background colour. For example, red wouldn't look good on a blue blog. You can also separate your words, rotate them and create different effects.



You can also zoom in and adjust the alignment of the words properly...


Step 4:

Now we're ready for stickers! Since in this example there's the word fashion, I'm going to assume it's a header for a fashion blog, and we'll add some fashion-related stickers. For food-related stickers, there's a chef hat, water drop, flames (solid if using free, smoky available if you're on premium) and eggshells. Even though the choices are not many, the stickers available are versatile and can be creatively used on a wide range of ideas.

If you have your own image (that has a transparent background), you can click on Your Own under the Overlays tool and add your image. :D




Above I've added a button for the O alphabet (let's just ignore the word "love", it's not essential haha) which instantly makes the words a lot more interesting right? I've also added a moustache to the tail of the G alphabet, a red lipstick print (faded 50% so that the red won't clash with blue later) and finished off with an assertive, strong dark blue dashed-line arrow, which is kinda pointing to the bottom, inviting readers to scroll down. :D

Step 5: It's not the best header design, since this is just an example, but it's minimalistic, simple, clear and large, and not at all plain! When you're done, hit save and remember to save it in the PNG format, not the JPEG format. PNG will save your transparent background and retain higher resolution!


Oh and if you want to input different languages and you have the font styles you want (we know how fugly the default font is for non-roman characters)
or maybe you just want a specific font installed in your computer, you can click "yours" under the Text tool and all the fonts available in your computer are uploaded. Below is an example...I have this Japanese font style in my computer, so I used it for a few Japanese characters.


Here are three designs I cooked up while writing this tutorial...not the best of the best, but it gives an idea of the stuff you can do!

Trendy blog that is fashionable or just modern and chic!

Anime blog with a sweet, cute side maybe?

A homeroom teacher blog could be very well-suited for this header!

The backgrounds of the headers above are transparent, btw! Let's try one of them on a blog.

Step 6: Go to Layout > Header > Edit


Step 7: Upload the new header! Remember to choose "Instead of title and description". Uncheck the "Shrink to fit“ box because we already made sure it fits :D




Yay uploaded!

Step 8: Hit save and view your blog!


It's a little too much to the right here, so I adjusted the width of my entire blog in the Template Designer. If you don't want to adjust your blog width, or maybe you want the header to be a bit higher or lower, try this method. Click HERE

Tadaa!

Yay! Now we have an awesome header! And if we should want a bluish background...


Works too! :D Just make sure the blue isn't too bright or dark. :)

Email me your questions, or comment below if this is helpful! Remember to follow me! Coming up will be the sidebar! I'll be getting rid of that About Me thing you see above and replacing with something better :D

Photoshoot: C.C Cosplay (Code Geass)


Herroo humans! :D

I am pretty sure most hardcore anime fans and some casuals have heard and watched Code Geass. It's like, one of the most epic series I have ever watched :D
Initially I was slightly turned off by the robot (is it called mecha?) part of the story cause even though I like Transformers and stuff, robots in an anime is a bit...weird. But Lelouch is too awesome to not continue watching, so I did, and I did not regret at any point.



In fact I was so wowed by the perfect rationality of Lelouch and his match-made-in-heaven-partner C.C that I decided to cosplay as C.C for my first cosplay photoshoot. Now some people might go zomg but you've never cosplayed before, or like have some negative perception towards cosplaying.
Imo I have never been biased toward any hobby (unless you do stuff like collect panties or something ew) and I guess I don't mind being another shoutout proof that cosplayers DO NOT always dress sexily/provocatively and they DO NOT always dress up as maids and shiz.

It is a hobby that allows one to show their love for a certain character, and imo one should only cosplay as a character if and only if one actually watched the series and really like him/her. Some people just cosplay because the characters have fancy clothes or look pretty, but that's not the main point. Some people do wear revealing clothes, but that's only when the characters wear it (like Kill la Kill). Most of the time the characters have a few different outfits, so it's entirely possible to skip provocative clothing entirely.

Plus many cosplayers make their own costumes and weapons and props, so seriously, the best ones out there deserve respect, not being lumped together with brainless humans using cosplay as a way to dress like nobody's business.

So. Now that I have state my stance, let's move on.


I love C.C for her intellect, her cool, level-headed mind and her suppressed emotions that she actually has despite her being not human and all. She loves pizza (yay) and she's always sarcastic but actually a warm loving person inside which I absolutely adore. She's also strong and independent unlike many other female anime characters who are all boobs and looks but no thoughts of their own and always need to be saved. In this case, she is the one constantly saving Lelouch (even though he's already OP as hell).




I'm sorry if I couldn't get her blank/pensive/thoughtful/bored expressions .___. but she is one awesome female character, and I love cosplaying as her. She's very cool. I might even consider doing it again with another main outfit of hers (the black one) when I have the means to do so ;)

Here goes!

Fixing~
HAHAHAHAHAHAHA Family Guy on while I'm fixing stuff
Oh right I actually forgot my wig cap (gg) so there will be stray brown hair (I TRIED)
There are only indoor shots because it was already night when my makeup was done by Mar. She is literally magic <3 only thing is my eyebrows are brown but ohvellwtv haha.
Buckets of thanks to Blyan as well because he had to end up running errands and buy pins and hairbands and pizza and shiz lol. AND be the photographer. *smothers with hugs*


Not ready lolol I was still fixing =.=

I had to admit I was watching Family Guy. 
The Window Photo. I love the bokehs!
I kinda look like Legolas...no?
Favourite picture! I wasn't ready but it turned out quite well.
LOL dis so swag. We had to get Pizza Hut for accuracy sake cause they sponsored CG and C.C only eats Pizza Hut pizzas.

One of the few full body pics. Shame there are so few cuz I like the costume.

Close-up

Favourite picture again! I think this is my most favourite?
Third favourite. Blyan said I look provocative here. I'm like C.C is supposed to be "innocently sexy" HAHA


NOMS.

Idk why this picture is taken. My nostrils are perfect HAHA.

Favourite too :D
Upside down :3
Mar said I look blur LOL



Full body yay! Otw to the pool :3

Took some outdoor shots at the pool but kinda sucks so nvm.



Lelouch! It's my actual phone wallpaper hahaha.

Selfies after le shoot :D
LOL sleepy face
*hides*
Dat book that cannot be taken out zz
That's it for this time :D
It was fun!
Wondering if I should do Asuna from SAO or Enma Ai from Jigoku Shoujo next. Hmm.