How in the World I Make My Graphics // A Step-By-Step Tutorial

Introducing The Blogiful Blog Design Event

5 Steps That Will Help You Choose An Awesome Blog Name (ft. A Free Worksheet!)

How to Choose the Right Font for Your Blog

How in the World I Make My Graphics: A Step-By-Step Tutorial

My Branding Journey + Four Questions To Ask Yourself While Rebranding (ft. A Free Downloadable Checklist)

4 Ways To Make Your Free Theme Look Different From Everybody Else’s

An Interview with Web Designer, Hazel From Stay Bookish

Q & A Session + A Secret Reveal

🎶I can show you the world how to make awesome blog graphics. Shining, shimmering, splendid! Tell me, princess, now when did you last let your heart decide work on your blog’s graphics? 🎶

Okay all Disney aside, today we’re going on a wondrous journey together as I show you a whole new world my process for creating blog graphics. This is a topic that many of you have eagerly asked about, so I figured I should probably listen to the peanut gallery the peer pressure is real, folks  and whip up a little something. So, without further ado, I am proud to present to you this step-by-step tutorial on how to I go about making graphics for my blog. It’s going to be a wild ride but hopefully not that wild. I’ve got a lunch date in an hour, so buckle up.

Do you trust me to help you create beautiful graphics for your blog? You do? Oh…*in Flynn Rider’s voice* A horrible decision, really. Haha, jk jk. I’ve got this.

There is nothing quite as satisfying as a well-designed blog. Well, that’s not entirely true. Waffles are pretty dang satisfying, but a beautiful-looking blog is a close second. The problem that most of us have is that WE HAVE NO IDEA HOW TO ACHIEVE THIS. We feel like an ostrich does when it tries to fly (i.e. – hopeful that we know what we’re doing, but in reality, not even close).

How I feel when I try to make my blog look pretty.

But since I’m visually-oriented and a near-chronic perfectionist (a dangerous combination when it comes to blogging), I knew that if I was going to do this thing, I was going to DO it. There is no halfway with me. So, once I decided to start a blog, I also started to learn a bit about designing and how to make my own graphics. (The internet is a wonderful place, isn’t it? Shout out to all the Youtube tutorials I watched late into the night when I should have been sleeping!)

That being said, I am by no means a professional. I’m completely self-taught; I don’t create my images ex nihilo and considering I sometimes struggle to write my own name legibly, drawing is completely out of the question. So, I advise you to take everything in this article with a grain of salt. There are probably better, more effective, ways to do what I do. But this is my workflow and I’m sticking to it.

If you follow these steps, your blog too can look fabulous! Ka-chow!

Step 1: Freepik

The first stop that I always make when designing a blog graphic is the wonderful world of Disney Freepik. This website is MY LIFE. If it wasn’t for Freepik, I would have a wet sandwich for a website. I literally get ALL of my stuff from there. I use it so frequently that I finally broke down and got the premium membership. Was this a frivolous use of my money? Probably. Do I regret it? NOPE. TOTALLY THE BEST DECISION. NOW MY BLOG LOOKS SO PRETTY AND SHINY ✨✨✨✨

Just to be clear, you absolutely DO NOT need a premium membership to use Freepik. In fact, unless a graphic is specifically listed as “Premium Only,” then every single picture on this website is free. I LOVE FREE THINGS, DON’T YOU???? The only thing you have to do is give proper credit to the artist, which you can find out how to do properly here. It is my firm belief that you don’t need to spend a lot of money in order to have a well-designed blog – there are plenty of free resources out there if you know where to look.

Today, let’s pretend that you’re trying to design a logo for your blog called, “Purrfect Pages.” (This is just a fictional blog that I made up – if anybody likes that name, feel free to nab it.) To start, search for cat vectors on Freepik. Once you find one you like, download it by pressing the big blue button that reads, “Download Now.” Not too difficult so far.

My button says, “Direct Download,” because I am a Premium member.

Now, your downloaded file will be a zip folder that includes a few different things:

  1. A .txt file entitled “License Free” – this describes in detail how to properly attribute the author.
  2. A .jpg file of the image –  I usually ignore this file because it isn’t easily edited, customized, or scaled.
  3. A .eps file or an .ai file of the image – These are the files I usually work with. Both of them are easily customized and can be edited however I want. These are vector images and are infinitely scalable, unlike .jpg files.
Sometimes the ZIP folder will have an .ai file, and sometimes it won’t. That’s okay. Both the .ai and the .eps files will work, as far as I am aware.

Step 2: Open the File Using a Vector Editing Software

Next, click on either the .eps or .ai file and open it using a vector editing software. I use Adobe Illustrator CS6, which is bit of an outdated relic now. I also recognize that softwares such as Illustrator can be expensive, so keep in mind that there are free alternatives available as well. Two such options are Inkscape (a downloadable program) and Vecteezy (an online vector website similar to Freepik that allows you to customize an image before downloading it).

In any case, start by expanding the layers of the file so that you can see its contents. Usually the file downloaded from Freepik will have two layers – a background layer and a layer called, “Objects.” This “Objects” layer is where you will find the elements that make up the illustration.

Here you can see see the two different layers. The “Background” layer contains the pink color and the “Objects” layer contains the illustration of the woman and her cat.

Step 3: Change Image Colors

Maybe you’re a redhead like me and agree that there just aren’t enough Gingers roaming around out there in the wild. Maybe you decided that you wanted to change the color of the girl’s hair to red. To do this, select the “Objects” layer by using the the Direct Selection tool and then click on the “Recolor Artwork” option. This will bring up a window that lists out all the different colors in the image and allow you to change them.

I’m not going to go into too much detail about this because I’m using an outdated version of Illustrator and my window might look different from yours. (For those of you who actually wish that I would explain more, let me dissuade you. I legitimately suck at explaining things; never ask me for directions. You’ll end up in Walla Walla, Washington. Yeah, that’s a real place). BUT DO NOT FEAR, DEAR READER. There are plenty of great Youtube videos out there that describe how to use Illustrator much better than I ever could. Here’s one that I would suggest by tutvid.

But I digress. Let’s get back to your “Purrfect Pages” logo. Change as many colors as you wish using this “Recolor Artwork” tool and voilà! Now your image is recolored based on your desired color scheme.

Step Four: Open in Photoshop

As I’ve mentioned before, although I can use Illustrator, it’s not my forte. I’m much more comfortable with Photoshop. So, if you’re trying to make a graphic based on this rambling tutorial (heaven help you), then your next step is to open your recolored image in Photoshop. Now, I’m positive that you could do a lot more in Illustrator, but alas, I don’t know how, so… heigh-ho, heigh-ho, it’s off to Photoshop we go.

♬ Insert Whistling Here ♬

Ahem. Anyways, the next step is to open a new project in Photoshop (or perhaps a similar free software such as GIMP) and paste in the recolored image there. Often, you will only be interested in one part of the Freepik Illustrator file. To isolate that desired part, click on the corresponding layer and highlight it. This will allow you to copy and paste only that specific portion of the file.

For example, you might find this image on Freepik whilst working on your “Purrfect Pages” logo:

If you like the look of that middle ribbon there, open the file in Illustrator, recolor it, isolate it, and then copy it over to Photoshop. Repeat this process for as many different elements needed to complete your design.

The “Purrfect Pages” logo was a fairly simple one, so in the end, I pieced together the final design using only four different images. Some projects might require more, some might require less. Here’s a breakdown of the different layers of the design:

Step Five: Put It All Together

After you have all the different components copied over from Illustrator, fiddle around with them in Photoshop. This is where the magic happens – a bunch of separate images come together to create something beautiful. Finish it all off by slapping on some text in a cute font, and TA-DA! You’ve got your final product.

It’s just like magic!

The Final Product

✨Don’t forget to check out my lovely Co-Host’s corresponding Blogiful post for today, where she gives some photography tips

I don’t know if this was helpful or not. What did you think of my explanations?

Do you like the final design for the “Purrfect Pages” logo?

Was it interesting to see my step-by-step process?


31 thoughts on “How in the World I Make My Graphics // A Step-By-Step Tutorial

  1. Oh. My God, Kat, I am SAVING this post because there is no way I am not coming back to this. I can literally already tell you that this is going to be my new obsession and you know what, I am FINE with it. I literally used to think that most of graphic design heavily depends on actually drawing and I’m so not good at it so this sounds *so good*
    Thank you so much for this post, it’s literally a blessing 💛

    Liked by 1 person

  2. Yaayyy, thanks for this post omg. I recently decided to create my own graphics but I’m afraid I’m not that creative, haha! Though I’m exploring a lot of ways but I’m currently using Canva. Not entirely satisfied yet because I want to customize how my blog will look so this is definitely something worth trying!

    Liked by 1 person

  3. I am loving all the Disney references in this post– I don’t want to brag but me and my sister used to always duet ‘a whole new world’ together 😂

    This was really useful– I loved finding out more about the process. I really liked how you explained it as well 😊 Fabulous post 💛 and I liked the logo it looks so cute and pretty!!


  4. Your posts in this series are absolute GOLD, I am loving them all SO, so much, thank you! Thank you for sharing these amazing tips, really, you make it seem so easy to have an absolutely gorgeous blog just as yours is. Thank you for this ❤

    Liked by 1 person

  5. This is an amazing post 😊 Even Freepik is my life too 😃 My blog header is from there only among with many more images. It’s the best. My Photoshop and Illustrator expired so I am no longer able to use them so relying on Canva for now 🙈 I don’t know why are they so costly. But now I am gonna try using the free tools that you mentioned 😊

    Liked by 1 person

  6. Kat I’m seriously sitting here freaking out over HOW CUTE that Purrfect Pages graphic is. YOU ARE SO TALENTED. And so kind for sharing these steps! It’s so interesting to see how create these spectacular designs 🙂 definitely saving this! thank you for sharing!!

    Liked by 1 person

  7. THIS POST is the best thing EVER!! I have always asked myself how you make your graphics (I’ve been longingly staring at the waffles for a while now), so this was super helpful! Thank you so much for sharing your process, I’ll definitely have this bookmarked for future reference!! 😍❤

    Liked by 1 person

  8. KAT YOU’VE SAVED ME OH MY GOODNESS WHERE HAS THIS POST BEEN ALL MY LIFE??? youre an actual genius and we’re soOoOoOoOo lucky to have you going through this whole series and explaining it for us peasants. thank you queeeeen

    Liked by 1 person

Write Your Wafflings

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.