How-To Design Graphics to Brand your Small Business or your Blog

Our posts contain affiliate links.  If you make a purchase after clicking on these links, we will earn a small commission, which helps to keep our content free.  You don't pay a cent more than you would otherwise, since that would be tacky! Read our full privacy and disclosure policy here.

There are many, many things to consider when you start a blog or a small business, though a blog can become a small business {you can read more on the business side of our site HERE}. Most of the “how to do it” you just have to figure out as you go along or search online for help.

how-to-design-blog-graphics
Today I am going to share with you an easy way to get your graphic branding off to a quick start. If you are just starting out, or not happy with what you are currently using, or maybe even just thinking of someday starting a blog, this will show you a simple way to create graphics without paying for a graphic designer. If you have no intention of ever starting a blog, this tutorial may be helpful in creating invitations and other printed or digital graphics so don’t click away yet!

 

OUR LATEST VIDEOS
computer-armoire-cards
My background is in graphic design and marketing, so the graphics side of this blog is of particular importance to me. We’ve had many “looks” over the almost five years we’ve been blogging–some of them better than others–and our identity has evolved just as the website has. We often get emails from people asking about the graphics we use, particularly the swirl we’ve used since day one around our “11 Magnolia Lane” in our header. Unless you are familiar with a design program like Adobe Illustrator, creating something that looks like that is pretty challenging, and purchasing a graphic can be expensive, especially since tastes change and eventually you may want to use something else.

I have found an excellent resource for all your graphic needs, which will save you so much time and energy, it’s called GraphicStock, and they offer unlimited membership which gives you access to literally hundreds of thousands of graphics. Stay tuned, I will walk you through how to use their graphics in just a few minutes, but the selection on their site is unbelievable.

Let’s say you have started a blog or another type of small business–be it anything from opening a brick and mortar store to creating a product that you can sell on ETSY. One of the first steps is to decide on your graphic identity. You will at the minimum need some sort of signage {or in the case of a blog, a header}, and business cards to pass out to help spread the word. Bloggers will need both business cards and probably a digital signature logo for your blog email to help tell the world about your new site. If you sell on ETSY you may need packaging–labels, stickers etc. all of this you can easily create for yourself.

business cards
In addition bloggers, while you don’t need to do it right off the bat, should eventually create a media kit to give or send to potential advertisers and sponsors if you intend to monetize your blog. A professionally done media kit will go a long way toward bringing in revenue once you are at that point. Christy and I have both this page at the top of our blog, and a printed and digital media kit {that we keep updated with our current google analytics} to send when we get requests from potential sponsors.

Since most businesses don’t have big budgets when starting out, if you can create your own graphics you will save money and still look polished. Today I am going to walk you through using pre-made graphics and images from GraphicStock so you can confidently create your own materials. While these examples are related to business and blogging, their graphics would work perfectly to create wedding or other invitations, Christmas cards, baby announcements and other fun stuff. If you are a blogger, you could also create buttons for your sidebar, headers for your posts, and even printables for your readers.

In the following scenario, I am going to give you a basic step by step on designing an identity for a blog.

Before you start these are some questions to ask yourself:
1) What do I want the identity to say about my site/business?
2) What look and feel should it have? {modern, edgy, vintage, clean, loud, fun, trendy, retro, rustic–I could go on and on!}, for inspiration browse around other blogs, I keep a Pinterest board called Design Inspiration {click to see my ideas} and when I see something I like graphically or font ideas I pin it there. It’s great resource when I need a new idea.
3) What colors, themes, patterns do I want to use? Do I want graphics or real pictures?

 

Once you have answered these questions, you can start your search on GraphicStock to find your graphics. The great thing about GraphicStock is you can sign up for a free 7-day trial, or purchase a membership month by month, or annually for $99 {that is such a bargain!}.

Once you know what you want, you will need to search through GraphicStock, find your graphics and download them. You can search by things like “patterns”, “backgrounds”, “colors” etc. using the ‘search images’ box.

For this scenario, since I am creating a hypothetical new blog in our niche of home decor/DIY, I picked this floral background for our new blog header.

graphics-stock-background-sample

While I primarily create graphics in design programs like Photoshop and InDesign, for today I chose to use Pixlr. It is a free online photo editing site that anyone can use. The learning curve wasn’t too difficult, so hang in there, you can master this!

First I started by resizing my background so it would work as a blog header. You will need to check your blog to see exactly what size you should run otherwise it will get cut off. In wordpress that is on the sidebar under the appearance>header. If you aren’t using wordpress, you probably need to migrate there and we cover that more in this post.

Open the Editor in Pixlr {I used the web-based version}.

pixlr step 1

File>Open Image and click on your saved file {you can save as a .jpeg}.

Click on the crop tool shown below:

pixlr step 2

Pull the crop tool over your background until you have a rectangle the size of your header. You may need to resize it and resave it too using Image>Image Size. It’s important to begin in the exact size you want to end with to save headaches later. Once you have cropped and resized the image, save as “header-blog-name” . I found Pixlr crashed on my computer occasionally so be sure to save frequently.

Once I had my background all set, I wanted to add a label behind my title text. I found this page of awesome labels on GraphicStock.

label-shapes

To use these labels, download the page and save them in the same way you saved the background. Use the lasso tool on the sidebar to then select the one you want to use. {There is a good tutorial here if this part confuses you.}. After you select the label you want to use, click copy, then paste it into a new image.

Here is my label after I saved it as a new file.

 

pixlr step 4 label REV

 

isolated new image step 5

Next make the background transparent, that way only the label will show when it is placed on the background without a white box around it. I used the magic wand tool {the third on down on the left} to select all the white in the background {this will work best if “contiguous” is checked and you give the tool a tolerance of “1”.} Once the background is selected, you can “clear” it under Edit on the top menu. You should then have the checkered background indicating transparency.

Since I had blue on my header background, I need to make the label blue so it would match the graphic identity I wanted to use. It would be easier to use these “As-Is”, so if you can use the label as black you can skip the next part. To change the black label to blue {or whatever color you want}, follow these steps:

Go back to your background and using the eyedropper match the color to the blue in the floral graphic. This is an extra step, but it will give your final header a more professional look.

 

pixlr step 7 eyedropper sampleREV

 

Below is what comes up, a color picker, and always make sure you use a dark enough color so it is readable against your background. The sampled color should then be saved at the very bottom {where you see the two rows of small black buttons} of your side tool bar so you can quickly pull it up to use it again.

 

pixlr step 6 color picker REV

 

You will next click on the original color you want to replace using the magic wand tool {the third one down on the left on the toolbar}, just click this tool on the black so it will select and highlight all the black. Once it is all highlighted, click back on the new blue color you want to use, and then use the paint can tool to “pour” the blue over the black just by clicking in the black area.

You will need to repeat these steps until everything is the color you would like. I had to select the interior white label outline, match to the cream background of my floral, then poured the cream color in that white to change that color to cream. Then do the same thing with the outer black rim–this was challenging because it is thin, so I just enlarged it using the zoom and pulled the graphic so I could see it with the hand tool. Remember to save your work!

 

pixlr step 8 text on graphicREV

 

Once your graphic is ready, you can then add Text by using the Text Tool {The A on the side tool bar}, type in what you want your header to say, size it and select your font, and then save your work. I’d recommend selecting a font you really like and using it throughout all your materials for polish and consistency.

Once this is done remember to save it. If you lose your transparent background when you save {if you are creating a .jpeg you will} Then you can just use the magic wand to reselect the white background, then under Edit>Select Inverse {so only the label is highlighted}>Copy.

Go back and open your original Header background file and paste your label in.

If it is too small, use Edit>Free Transform to enlarge it to the right size.

 

final header image 640x220

And there you have it– your new header!

After you have created that, you can work with the same graphic from there to create business cards, a media kit, notecards, labels for products either by resizing the graphic and following the steps above.

For instance, below shows how I used this same file to make business cards:

business card graphic

 

And a header for a media kit…

sample media kit REV copy

 

Once you have created your core “look and feel” you can easily create all your paper or digital marketing materials all on your own. I know you can do it 🙂

{This is a sponsored post by GraphicStock via Syndicate, but as always the opinions written here are truly my own.}

Thanks for stopping by!
AB New Headshot Small Blog

icon-facebook-1icon-instagram-1icon-mail-1icon-pinterest-1icon-twitter-1NEW Google+

Comments

  1. Great tips, Amy! I’ve not worked with GraphicStock before so thank you for the introduction! xx, b

  2. Fantastic, Amy! I am as far removed from technical talent as anyone could be. 🙂 Your instructions are easy to read and the photos help a lot. One of these days, I may jump in and try it!

    xo
    Pat

  3. I hope this is not a duplicate post ~ not sure what happened to the original. :/ This is a fantastic post with so much great information! I’m very technically challenged but I may try this some day.

    Thanks so much!
    xo
    Pat

  4. What’s best package to start off with on WordPress? Is there a way to just have time to design your blog before having it hosted and actually put on the web? Can you just download a template from WordPress, design it how you want it and then when ready, host it on BlueHost?

  5. Vector or Raster?
    or Photoshop?
    I’m on the Graphic Stock website…what type do I want to download?
    I eventually want to use them in photoshop or a similar program.

  6. Loved the post! Basic graphic design can be SUCH a pain to learn and often takes a lot of YouTube videos, but once you’ve got the hang of it it makes such a huge difference to aesthetics of any blog and improves readability a ton!

    • Agree with you but it will be worth if you take the pain to learn that through those tutorial videos. It will remain as an asset and you will be able to use for the rest of your life. There are huge demand for good quality designers.

  7. Handy + Helpful + Hands on!! You’re giving us the stuff that we’d have to otherwise opt in for, pay for or get frustrated with. I also find it interesting that so many people are suggesting that style guides are only for the big blogs but I like the idea that it should be started sooner than later to help represent the brand from the get go.

  8. Hi Amy!!
    Excellent and Informative information. Your instructions are easy to read and the photos help a lot. I will defiantly use these tips. I have some Graphics Design experience using Photoshop and Illustrator. Please tell me is it enough for me ? because i want to design a unique a beautiful logo for my business. I totally Agree with you but it will be worth if you take the pain to learn that through those tutorial videos. Thanks and keep sharing more posts with us.
    Regards:
    Diane F. Cassity

Speak Your Mind

*

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

© 2017-2019 All Rights Reserved