Hullo! I was just wondering what to write about before the weekend crafting begun when Apple asked on Twitter for color suggestions for her blog.
So instead of just tweeting back some random hex codes, I decided why not just share a process? This way she can experiment and end up with a design that she truly will enjoy. So, this is for you gang, hope this will help :-)
For our sample, we are working on a fictitious food blog called Food Carnival :-)
- Choose a photo that you really like and believe shows your personality, relevancy to the topic that your blog will focus on, or your blog title. Moodboards typically have a lot of images, but for the purposes of this tutorial, we will not complicate the decision process LOL. Here's one I found from Jessica's Clean Green Simple blog (a recipe too! yum):
- Create a color palette from your chosen photo. We are using a popular site called Colourlovers for this step. It is a playground of color and patterns! You do have to Register to be able to use the free online tools, but it's worth the minute of your time since you will be going back to this site for all your color needs in everything creative that you do :-)
IMPORTANT NOTE: You must have the URL of your chosen photo to be able to load it, or you can search for a photo on Flickr.
In the Photos tab, you will be able to pick the colors yourself from the photo.
But the Colors tab is where your palette is generated from the photo you uploaded and you can choose whatever suits your fancy! You may combine colors from both tabs for your final palette. For web design, you don't really need to pick out that many colors, but it's your blog and your call so enjoy!!
Tadah! Our final palette as published on Colourlovers :-)
This is the one you really need for the site :-) it has the HEX codes which you will use with your blog template. (Yes, we authored a new color on the site! Blazing sunset I named it, yes. haha)
- Create a blog header. Your header is one of the main images visitors will see when they visit your site. Basically, you want to put an image/logo that once again reinforces what your blog is about. Our fictitious blogger of Food Carnival has no brand/personal logo yet since she is new to the world of blogs, thus we will use a photo for the purposes of this tutorial.
Begin by uploading your chosen photo to Picnik. Picnik is like a simpler Photoshop with the advantage of being online :-) You can edit your photos even if you are just using your neighbors computer or blogging from an internet cafe. You do not even need to register to save your photo :-)
With the color scheme in mind, dig in to your personal photo collection and find one that you like. It is important to note that your blog header should be a photo/illustration/artwork/etc. that you own the rights to. If you really must chose someone else's, please ask permission first or buy the rights to it.
Since our blog is about food, we will use this most carnivalish looking photo I could find from my stash (and do you see our two colors? It's Sands of Time and the touch, to feel I believe!)
Let's load it on up to Picnik and work on it. The first thing we want to do is to Resize the photo to the size our header will be (the Resize tool is under the Edit tab). You can find your header size in the template of your blog. Templates whose headers you can customize will give you this option. For this tutorial, our fictitious blog has a header width of 600px wide.
I usually go with the width and don't mind the height at this point. Make sure you check the Keep Proportions box! You never want a distorted header. Unless that's the look you are going for :-)
Next, we will Crop the header to the actual height in the template (some templates are strict with the size of the header). The crop drop-down tool has a lot of sizing options make sure you check it out :-) For our purposes though we just chose No constraints since we had a size in mind.
Move the crop box till your find the view that you can live with.
Armed with your perfectly sized header image, move on to the Create Tab and play around!
IMPORTANT NOTE about Frames: When you add frames, it adds additional pixels to your image, so please take this into consideration when you are resizing/cropping your photo. Remember, it has to fit your template size.
- Choose/Create a background pattern. This part is optional if you choose to just keep a solid background color from our palette/white background. But our fictitious blogger wants a background so here we go :-)
Go back to Coulourlovers and this time choose Pattern from the Create tab. There are many pattern templates you can choose from, or if you are feeling extremely creative, you can even create your own template!
But for our tutorial, we are using an existing template :-) Templates come in a monochromatic scheme, and you can change the colors. So I took the hex codes from our palette and played around with the color placement in the pattern.
Save your pattern and load it up to the web (Flickr, Picassa, Mulitply, etc.) then copy the URL of your image and use this as a background in your template.
This is a seamless pattern and will repeat beautifully. So here we go, our final background:
- Find some cute social media icons! There are many free social media icons as well on the web, so just make a search and choose whatever suits your fancy.
Since our blog is called Food Carnival, don't you think these "Cheers" icons from Smashing Magazine would be the perfect fit?
- Bring it all together ♥. Enjoy!
After you are done, save your banner. You have many options on where to save it to so take your pick :-) Here's the one we worked on:
I hope this little tutorial made sense! Well, if it didn't please feel free to leave a comment and let me know! I would really like to be able to share more simple processes with you all as I have learned so much from others because of the internet, so it's only fair to share something in return :-)
And always remember, nothing is written in stone :-) so have fun, veer away from the palette if you want! What is important is that the mood board gets you started on your road to creating something you really want.
May you all have a wonderful weekend ahead filled with creativity and silliness! xoxo
Peace. Love. Dream. Get Insprired.