Blogging for Beginners: Week Four: Creating Free Graphics

I can't believe it's already week four of my blogging series! If you missed week 1 (Where Do I Start?), week 2 (Choosing a Blogging Platform and Theme), and/or week 3 (Domain Name, Web Hosting, and FTP), it's not too late! Catch up by clicking the links! bloggingforbeginners3

I’m going to start out this post and tell you upfront that I have zero design background and extremely minor Photoshop experience that I can’t even remember from high school anyway. So this post is for the novice bloggers who would like to be able to edit photos and/or create graphics, like blog buttons, without too much time spent on the learning curve and without investing a lot of money into a program. You CAN do it!

 

Here are some of the FREE programs I use to create my graphics:

  • PicMonkey- Love this site, even though they recently made fewer options for free. You can edit photos, add fun overlays, add text, and create collages.
  • Pixlr- This site has three options: Advanced, Efficient, and Playful. Advanced is much like Photoshop, but user-friendly; Efficient gives you fun filters and allows you to add text; Playful provides basic  vintage and retro effects
  • Gimp- This downloadable program is basically a free desktop version of Photoshop. I have had some bugs with Gimp (possibly because I have a Mac), but it is probably the most customizable option of the three.

Let’s create a basic blog button using each program.

 

PicMonkey:

You have to start out with some photo to edit. You can’t just use a blank image, like you can in Pixlr Advanced and Gimp. To get around this, you can google a blank image and save it to upload, but that may take extra time. So upload your image by selecting it from your files.

How to Create a Button with PicMonkey

  1. Open your image.
  2. Using the menu to your left, crop your image to a square.
  3. Resize your image to the appropriate size. Most blog buttons range from 100 pixels to 300 pixels.
  4. Click the "P" on your left menu. Add text over your image. You can choose your font, color, size, and more.
  5. Make sure your text can be read easily. Click and drag it to the location you desire.
  6. You can add "overlays" (which are shapes) to your image to make it a little more interesting.
  7. Ta-da! Sorry for the pixel-y blown-up button here, but you get the idea!

Pixlr:

In Advanced, you can begin by creating a blank image. If you use Efficient and Playful, you have similar options to PicMonkey. Here’s how to use Advanced:

How to Create a Blog Button with Pixlr

  1. Select "Create a New Image"
  2. Choose a size. Most blog buttons are 100x100 pixels, 200x200 pixels, or some variation in between.
  3. Add text by clicking the "A" button on your toolbar, clicking and dragging a textbox, and typing your text. You can change the size, font, color, and placement.
  4. If you want to add a picture or image, select "Open Image" under your toolbar.
  5. Copy and paste your image into your new image. You can crop it or change the size and opacity before copying and pasting if you need to.
  6. Add any further text now that your image is in place.
  7. Save the button. I usually save my buttons under a PNG format because it displays graphics and text clearly.

Gimp:

Just like with Pixlr Advanced, you can create a blank image and customize it according to your liking.

How to Create a Button Using Gimp

  1. Open a new image and select the size you desire. Here, I've set it to 150 x 150 pixels.
  2. Next, open any other image you would like to transfer to your new image. You can make changes to it first before inserting it into your new image. For example, you may want to resize it, make it opaque, change the coloring, etc. Here, I've opened my same bird and flower image that I want to crop, resize, and make opaque before I insert it into my new button.
  3. Select the dotted box option from your toolbar. Draw a box around the section you want to crop. Under Image in your menu, select Crop to Selection.
  4. Next, under Image again, select Scale Image and choose the size you'd like to make it to. Because I want it to take up my entire button background, I also made it 150 x 150. You could make this any size you'd like.
  5. Next, under Select, choose all. Then copy and paste it into your new button image.
  6. Next, make sure your new layer is still selected and use your "Layers, Channels, etc." toolbar to change the opacity, if you'd like.
  7. Next, click the "A" button in your toolbar to add text. You can change the font, size, color, placement, spacing, etc.
  8. Finally, save your button as a .png and you're done!

Oftentimes, I find that I will use a combination of these three programs to create an image I really like.

For example, to create the main image for this recipe post, I created the collage in PicMonkey, saved it, then opened it back in the edit image side of PicMonkey, added the banner, then saved it again. Then I opened it in Pixlr and added the text. Easy, right? 

Or to create the blogging basics graphic, I created a blank image in the pixel size I wanted in Gimp, saved it, opened it in PicMonkey, added the triangle design, saved it, and opened it back up in Gimp to add the text, as both PicMonkey and Pixlr do not have my Pacifico font. Convenient, huh?

I know, it seems like a bunch of hoops to go through, which often makes me want to purchase Photoshop right away! But for now, I enjoy creating my own graphics because it makes my blog a lot more personal and visual.

Any questions? Don’t hesitate to ask!