My Blog Design Resources + A Super Basic Tutorial!

Finally, what you’ve ALL* been waiting for – a post where I share all the places I go to seek out resources to prettify my blog!

*Literally no one has asked me for this.

⭐ PREPARE THYSELF FOR HYPERLINK GALORE! ⭐

happydance

And also a mediocre tutorial… lol

arrow1

I’ve previously delved into this topic in my “Blogging Advice (From a Total Amateur) – 100 Followers Celebration!” post and basically it’s come to my attention that there are people who still remain completely clueless when coming up with a ~design~** and some have even been under the impression that I draw my own illustrations. 😮 I’m here to break your bubble people: I am not that artistic!

** I feel so snobbish when I call it that for some reason??? lmao like who am I kidding, I’m just putting a bunch of free crap together and hope it comes out alright!

Plus I feel like everyone gets so secretive about where they’ve got their resources from, but like…. why?? It’s not like you made it yourself? I just don’t get it. Maybe I’m just like super nice and giving and what not compared to everyone else. #fabulous

iggy-hairtoss

1

It appears to be the lingo that these freely offered graphics and illustrations are referred to as freebies. It took me many hours, days, weeks and essentially this is still an ongoing search to find really awesome freebies that I use to create my header, social media icons, and various bits and bobbles throughout my blog posts.

In particular, I’ve noticed a trend where many, many book bloggers here on WordPress are big fans of Angie Makes (as am I!) as well as the font Playlist.

If you like how those are looking (plus they’re free?! Omg I love these talented people offering their gifts to the world for free!) you can try other design blogs that offer graphic freebies such as: Fox and Hazel, Free Pretty Things for You, Lisa Glanz, Gold and Berry, Twigs and Twine (just one freebie if you subscribe to emails) and We Lived Happily Ever After.

You can also check out various websites that provide free fonts including, but not limited to: DaFontPixel Surplus, Behance, and 1001 Fonts.

Or if you are way too lazy to bother clicking on those and finding stuff yourself, I’ve created a Pinterest board where I keep graphic design resources – keep in mind, not all of them are freebies, but most are!

2

Now one of my favorite ways to get quality freebies is to subscribe via email to these two sites: The Hungry JPEG, and Creative Market. Each week they offer limited time freebies (including graphics and fonts!) so it’s really great to be able to get freebies that normally you’d have to pay for. I’ve been able to snag really beautiful fonts and fun graphics from doing this.

Plus, if you are willing to spend some money, there are really great options on Creative Market that will ensure your blog isn’t looking like everyone else’s. My personal favorite creators include Mia Charro, Twigs and Twine,  Molesko Studio, Lisa GlanzAnna Guz… aaannnd, like, everyone really.

3

I personally use Photoshop CS6 (if you’re desperate to have it too you can delve the recesses of Tumblr for directions…) so this will be a little – super basic – tutorial* for you folks on how I put this stuff together.

*This tutorial is brought to you by Microsoft Paint because I didn’t feel like putting too much effort into this to be honest. I imagine if you have Photoshop, you already know what you’re doing, but I’m here to be helpful soooo…

If you are wondering what free programs you can use to put these together, please see Analee’s post on “Websites + HTML codes all bloggers need!” where she gives a list of all the free programs you can use as well as a very useful tutorial. I seriously cannot recommend this post enough!

 

Let’s begin!

We’re starting with a blank slate. Width is 768px. I think that’s the width for the theme I’m using – I can’t remember and I can’t be bothered to check, but it really doesn’t matter. Feel free to use whatever dimensions you want.

If you’re already confused, the grey and white checkerboard means it’s completely transparent.

So, I’m just creating my little “topic dividers” for ya today.

First, I select the Text Tool like so:

Untitled

And I begin to draw my text box.

Untitled

I’m going to drag it all the way from left to right so I know my text is centered so the formatting doesn’t look wonky when I have it in a blog post.

Untitled

The font I’m using today is Sacramento (which can be downloaded for free right here) and I’m just going to type in whatever my topic is.

Untitled

I wanted to add some color to this just to bring some life to my post so I decided to add these watercolor flowers by Angie Makes as a background.

So I open whichever flower I like and the first thing I’m going to do is crop this giant ass flower to a reasonable size – here I’m starting off with 200px width and I’ll adjust as needed.

Untitled

So all I’m doing is just dragging and dropping this flower into my “topic divider.” I prefer, rather than selecting the flower from that open image, to select the layer that contains the flower and dragging it onto my WIP. You’ll know if you’re doing this correctly if your workspace lights up with a white border and you can see your layer being physically dragged (the opacity will go down on the layer you’re moving around).

Untitled

The flower ended up being a perfect size, but if not just select Ctrl+T so you can transform the image. Once it’s in the transform mode, you can press the Shift key while you adjust the size so it keeps it’s original dimensions.

Since I’m only working with one layer, this new flower layer will automatically go on top. I obviously don’t want my text to be covered so I’m dragging the layer below my text layer.

Untitled

And voila! You’re done!

Untitled

If you want, you can adjust the opacity of the flower so it fades out by moving the slider around.

Untitled

I don’t feel like going this route so I’m just going to save it as a JPEG and call it a day.

arrow6

And that’s all for now!

If you still have any questions, feel free to comment down below or send me an email via the contact form. I have nooo problem helping you out!

I know the tutorial was like super basic, but I imagine that most of you aren’t using Photoshop and those who do have Photoshop should already know how to do this, but whatever! I was determined to be as helpful as possible even if this ends up helping no one at all…

ANYWAY!

I think I’ve dragged this post out for far too long. 😳

letmeknow

Do you enjoy designing your blog?

Where do you get your freebies from?

Was any of this new or helpful info for you? I hope so or else this is really awkward…

‘Til next time! 😀

signature

connect2

instaicon                     goodreads                        bloglovin

twittericon

NOTE: All gifs shown were created by me, but feel free to use wherever (just don’t claim as your own)!

Advertisements

37 thoughts on “My Blog Design Resources + A Super Basic Tutorial!

  1. Saved the link to this post in a draft; I definitely need to check this out. I KNOW my blog lacks any kind of decent design but I’m just the worst at it, haha.
    One day, I’ll get it fixed. One day!

    Thank you for this post; I’m sure it’ll help me out a ton.
    Now to find the time to actually go through it properly..

    Liked by 1 person

  2. I personally use Canva because IT IS SO EASY and FREE which is exactly what I need in my life! I love Angie Makes and the rest of the website you mentioned and am following that Pinterest board right now! I’ve never heard of Gold and Berry though! Thanks so much for this, I think it’s super helpul to newbies in the blogoshphere ❤ Design can be a tricky thing but I love YOURS!!

    Liked by 1 person

  3. I used to use a lot from Angie Makes because her work is gorgeous, and then I also discovered Creative Market and the Hungry JPG! I loved the 6 free goods of the week newsletter! Also, at the Hungry JPG there are a lot of $1 deals! I’ve taken to using those, with the occasional $8 bundle. There’s also a site called Free Design Resources, WHICH I LOVE, because they have a lot of good stuff there! FREE.

    Liked by 1 person

  4. AHHH this post!! BRIDGET. You have saved me from utter design failure. So many resources for freebies ahh thank you so much for sharing those!! I literally only have used Angie Makes and that’s it haha. Your blog is honestly SO GORGEOUS and I cannot thank you enough for sharing these tips and sites! ❤ ❤ (And thank youuu for sharing my post as well !!)

    Liked by 1 person

    • Yay!! Glad I could help! Angie Makes is definitely one of my favorites so you can’t go wrong there!
      And no problem – I figure most people are looking for free programs so I had to link your post which is full of those options! 😀

      Liked by 1 person

  5. Can I just say… I LOVE YOU. You are an angel!! those freebies will seriously be super helpful. It must’ve taken forever for you to find and gather all of those resources, especially because not a lot of bloggers share where they could get their graphics. as of now, I’ve been designing mostly everything myself, and let’s just say it is NOT easy work. :’) BUT SERIOUSLY. YOU ARE ANGEL. I AM BOOKMARKING THIS POST. DID I MENTION I LOVE YOU. ❤

    Liked by 1 person

  6. Great resources! I wish I could illustrate and make my own blog graphics, as well. That would be awesome! But free stuff from talented people also works for us less artistic people. Though my blog button was actually something my co-blogger made.

    Liked by 1 person

  7. This is such a great tutorial, Bridget, thank you so much for sharing this ❤ I'm not the best when it comes to designing my blog and I would love to get better at it. Thank you for sharing all of these free resources, I'm bookmarking this for sure!

    Liked by 1 person

Leave a Reply

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