Monday, January 20, 2014

Creating a Header Graphic


  • Select one or more pictures you would like to incorporate into your header. I chose to make a collage.
  • Go to http://www.picmonkey.com/. (I just used the basic, free version. There is a subscription option with more choices.)
  • Click on the "Create a Collage" tab.
  • Start with the "Photos" section. Select "Your own" from the drop-down menu.
  • Click on "Open Photos" to upload the photos you would like to use.
  • Select "Layouts" which is the second section. The icon looks like a page layout.
  • For a header shape, choose "FB Cover."
  • You can select one of their pre-formatted layouts, but once you start working in it, you may find that you want to move things around and re-size certain frames. That's okay!
  • Now go back up to "Photos" to drag and drop your photos into place. Feel free to play around with layout.
  • If you want to incorporate a quote, leave one of the spaces blank for now.
  • When your photos are arranged to your satisfaction, if you'll be using a quote, go to the third section, which is "Swatches."
  • From there you can select a theme from the drop-down menu. The Spring Fling and School U categories had some nice backgrounds to choose from. Select one of these to fill the blank space as a background for your quote.
  • The fourth section, which looks like an artist's palette, is where you can adjust the spacing, make rounded corners, or select a background color, if you like.
  • We'll be adding the quote and border as an additional process, so for now save your creation to your computer.
  • Once it's saved, go back to the http://www.picmonkey.com/ home page.
  • This time select "Design."
  • From here "Open" the file you just saved.
  • Go to the "Text" section. (Icon is "Tt".)
  • Decide on a font for your quote.
  • Click the "Add Text" button. This will put a text area on your collage. Drag it to the space where you want it and drag on the edges to adjust the size. Then type your quote in it. 
  • Once that is adjusted to your satisfaction, go to the "Frames" section and choose a frame.
  • I used Museum Matte and changed the colors to match the Sonlight website. Clicking on the swatch will show you the hex code and you can change it if you want. Here are the Sonlight hex codes:
    • Logo Blue: 0089d0
    • Dark Blue: 005d93
    • Yellow: f2be1a
  • You can also adjust the thickness of your frame.
  • At this point, I was done. You may want to play around in Pic Monkey to see if there are other special features you'd like to add to your header.
  • Save to your computer.
  • Upload as a picture to your first blog post in the position where you want it. I selected "X-Large" as the size, which made it run off the side on my actual blog, but showed up as a nice size on my Sonlight landing page.
The above directions are how I created my header. There are other ways to do it, if you have other graphic-editing software. Another tutorial using Power Point is available at http://www.makeuseof.com/tag/create-a-website-header-image-powerpoint/.

No comments:

Post a Comment