* PicMonkey affiliate links used in this post. See full note below.
Yesterday was Part 1 of Beginner Blog Design, where we talked about steps 1-4: Gathering inspiration, getting acquainted with PicMonkey, creating blank images, and adjusting your Blogger template.
This is where the fun begins! Now you can use your inspiration and blank images to create the various elements of your blog. My header, welcome/profile image, page links, and social media icons are the main pieces that make my current blog "design." (Designers might be offended that I call this beginner stuff design. There's just no better word.) Background is key to your design too, even if you choose to leave it white.
As you continue, refer to your inspiration board (step #1 >> here) and focus on the colors, fonts, ideas you'll be using. Try to limit your fonts. (I've changed things up so much, I think I'm up to about 4 go-to fonts. I need to work on that.) And stick to a few complimenting colors.
Also, think about things in terms of "above the fold"--basically, what do you see when you first go to your blog. Hopefully readers will be able to see your header (blog title), maybe your own name and photo and a little about info, links to important pages or categories, and links to follow you. It sounds like a lot, but it's pretty easy to get these to all fit in the top portion. All of these stationery elements need to match--these make up your design.
5. Design Blog Element(s)
The process for creating each of these design elements is basically:
load photo // resize or crop // add text + overlays, choose colors // save as png
Here are my tips and tricks on designing in PicMonkey...
Image Size
See how to make a solid or transparent blank image here, then load it to edit. When resizing your image, it's better to start a little bigger than you think you might need (especially if you don't know, yet). It's easier to resize or crop down than it is to try and make it bigger. (Don't try to make it bigger later.) Before you spend a long time on design, it's a good idea to quickly type your title in any font, save it and see how it fits on your blog. Resize if you need to, then continue designing when you're sure of the size you need.
Fonts
When I'm deciding on the font, I type the blog title into the first font, changing it until I find one I like. Then right click and "duplicate text", and change that font until I find another I like. I do this a few times until I have a few of my favorite fonts. Then I eliminate until I decide on the best one. It's a good idea to try out as many of the fonts as you can. Some fonts you wouldn't normally be drawn to, your blog title might actually look really good in.Remember not to go font crazy. Stick to a couple that go well together.
Design Elements
The "Overlays" tab has lots of options perfect for adding that extra pizzazz to your design. Arrows, banners, labels, ribbons, and the new bursting blossoms and leafy stems are all great for blog design. Play around with changing colors, sizes, fading, and layering (right click to bring elements forward or backward). I'm not a designer, so this is where referencing inspiration can help a lot to keep it professional and not cluttered.Colors
Trying to find the same color again is easy peasy. Go here to learn how to color match in PicMonkey and make your own color palette. When you find a couple colors you like, it'd be a good idea to make a color palette to easily use them again and keep them consistent throughout your blog design.
Circle Photos
To make a circle photo, load your photo onto PicMonkey. Crop it down to a square. Go to the "Frames" tab and select "rounded corners." Move it up to 100% and select the "Transparent corners" box. Then, be sure and save it as a png.
Social Media Icons
Each social media site has its own branding which includes their various logos and guidelines in using these trademarks. It's fun to tweak these social media icons to match our own sites--but we're not "supposed" to. Just like I wouldn't want someone to refer to my site by making my logo match their site, it's not great that we're doing this to the big guys like Twitter, Pinterest or Facebook.For specifics and proper icons to use, search the social media site + branding or logo. Here are links to a few: Pinterest | Twitter | Facebook | Instagram | RSS | Blog Lovin' To use these you would save each one, resize them to the size you need, then load them and link them on your blog (instructions to come).
To create your own social media icons (like many bloggers do), you can choose your own fonts or search social media logo outlines to use. Set your background to the size you need. If the icons will be in your sidebar, take your sidebar image width and divide it by however many icons you'll use and that's the width they need to be. For instance, I have my right sidebar images at 270px. I have 4 social media links, so they're each 68px wide x 40px high. This allows white space between each link so they don't look crowded out--and the links are easier to click.
Transparent Backgrounds
Working with a transparent background (see how to make it here) can be difficult because there's no indicator of where the edges of the image are until it cuts off what you're doing. I put a rectangle across the background and change it to white (the same color as the background on my blog) so that I can see the edges of the image, and so I can get a better idea of what it will look like on my blog. Once my design is set, I remove the rectangle before I save the image.
Page Link Images
You can make images for anything you want to stand out. It's a good idea to not go too overboard, and make sure everything goes together. You could make special images for your page links (about, contact, whatever you have pages for) that can go in the sidebar or under the header as a navigation bar. These can be simple text in your chosen font with a background that blends in with your blog background, or you could accent them with overlays--shapes, ribbons, banners, etc. to match the header.What you have the pages link to is up to you. This is where you get to help guide the reader where to go. It's a good idea to have an "about" or "start here" page to help answer questions for new readers. If you have an online store, or are accepting sponsors, or have a quality blog series you'd like to highlight, these are good things to put in pages and have easily accessible for readers.
Set of Design Elements
When I'm creating images that are a set--like the social media icons or page links, where they are all the same size, same design, etc.--I start with making and saving a template. This allows me to easily add more in the future without having to redesign everything. (That would be a huge pain if I didn't remember colors and fonts!) Then, I proceed with making each image. For instance, with the page link images, I would add text that says "about" and save it as "page about." Then, I would change the text, and save as a new name. This makes it really easy to make a set of design elements that all need to match.
Favicon
Have you noticed that little icon that shows up next to Web site names in the internet tab? Your's doesn't have to be that silly orange Blogger icon. This is so easy to update and personalize and adds that element of knowing what you're doing. You're not just a user of Blogger, you are a blogger with your own brand.Your favicon can be a an element from your design (like my
Sometimes it's those little details that matter.
Posts for the Beginner Blogger
Beginner Blog Design part 1 | part 3Encouragement for Beginner Bloggers
PicMonkey Tutorials
Dear Beginner Blogger
Following Our God-Given Purpose with Passion
*Note: PicMonkey affiliate links used in this post. That means that any purchases through these links may earn me a small commission at no extra cost to you. If you find these posts helpful and upgrade to Royale, please doing so through my links above. I then donate a portion of all proceeds. Thank you!
