DIY Design #3: Combinations (Creating Color Palettes and Font Combinations)

It’s time for our third topic of DIY Design! If you missed Clara’s last post on fonts, go to her post on her blog here.

Today I’m going to give a few tips on combinations. Namely, color combinations and font combinations. I’ll start with color combinations.

Color Combinations with Color Palettes

I like to use color palettes for my designs. If you pick a color palette for your blog, then you can make your blog’s graphics with those colors. You can find already-made color palettes on Pinterest, or you can make your own. Here are two ways to make your own color palettes.

Option 1: Create Color Palette Collages in PicMonkey

Yet again, I turn to PicMonkey to make my designs. But before you make the collage, find your photos.

Step 1: Find Some Photos

Know what colors you want and then go choose some photos. Unsplash.com has some beautiful and free photos, but if you aren’t going to post your color palette or share it, then you can look for photos on Pinterest too. Here are the pictures I chose (off of free photo websites) for my example collage that I’ll be making.

waves.jpg beach umbrellasea-1283168_960_720  vw-camper-336606_960_720

Step 2: Open Your Photos in PicMonkey.com

To do this, go to PicMonkey.com and click on “collage”. Then, when it says “choose images to collage”, click on “computer”. Select your photos and click open.

color palette collage

Step 3: Choose Your Layout

Now go to the second icon down on the left sidebar. There are quite a few layouts to choose from, but for this tutorial, look for what size you want. If you want a longer collage, go to the Ducks in a Row section. Don’t worry about how many cells they have.

For my collage, I just stuck with the layout that PicMonkey automatically gave me. It’s the first one in the “Biggie Smalls” section.

color palette collage1

Step 4: Add and Remove Cells

And now you get to customize the layout of your collage. To remove unwanted cells, mouse over the right hand corner of a cell and click the x that will appear. To add a cell, drag one of your photos to the place you want it to be. You can easily drag your photo to another cell if you’d like.

color palette collage2

Step 5: Re-sizing Cells

To resize the cells, hover over a line between cells and then click and drag the cell to the left, to the right, up, or down.

color palette collage3

Step 6: Add Color Cells

Once you have the right amount of cells for your palette, you can add color cells. These should be fairly small cells. Repeat step four and make three to five cells (there’s no set number, but I suggest three to five), but delete the photos to leave empty cells.

color palette collage4

Step 7: Color the Cells

Go down to the last icon on the left sidebar (the paint palette) and under the section “color” click “cell”. Select the eyedropper tool and hover over a your photos until you find a color you like. Click and fill an empty cell with the color you’ve selected. Repeat this until you’ve filled your color cells.

color palette collage5

Ta da! You now have your very own color palette. Here are some of the ones I’ve created.

color pallete (4)

fruit color palette

color palette

color palette (3)

color palette (1)

For that last one, I added the color codes of the colors so I can easily use those exact colors in my blog design. I use the last palette for my flower blog.

Option 2: Using the Coolors.co Color Generator

Coolors.co is a color generator. You can easily create color schemes three different ways: randomly generating color schemes, building your own color schemes by selecting colors (randomly generate a color scheme then hover over a color to drag it, adjust the hue, or change the color completely), or making a color scheme with a photo. Here is another color palette I made using a free photo and Coolors’ color palette maker.

MPP color palette collage

Font Combinations

Now it’s time to get into font combinations. To learn more about fonts themselves, check out Clara’s latest DIY Design post here.

The main thing to remember with font combinations is that opposites attract. Two swirly fonts do not look very good together. Example:

font combinations 1

font combinations 2

In the second one, “coffeebreak” is a bold, script font in all lowercase while “glober” is a straight, thin font in all capitals.

I’ve made a collaboration of a few more fonts that work well together.

font combinations 3.jpg

If you don’t know the difference between a sans and a seriff font, click HERE.

I think that’s about all for today. Make sure to visit clarascraftcorner.com next week to check out Clara’s post on free photo and clipart websites! And feel free to share or pin any of my graphics I’ve made in my post (just don’t take credit for them).

do you use color palettes for your graphic design?

did you learn anything new?

megan signoff

Advertisements

25 thoughts on “DIY Design #3: Combinations (Creating Color Palettes and Font Combinations)

  1. Wow, this is great, Megan! 😀 I loved all the different color palettes you made. 🙂 I keep a list of all the color codes I use in my blog design, so I guess that counts as a palette? XD

    -Clara ❤

    Like

  2. Ooh, I really liked this post, Megan! The color palettes were beautiful! 😀 And I also really liked the font combinations. 🙂 My favorite font combo is script with tall and skinny. 🙂

    Like

Leave a Comment! (Please, keep it clean.)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s