Creating a Header with Pixlr

In this post, I’m going to be discussing my experience with Pixlr in my quest to create a header for my site. Now, the theme I chose for my blog does not include a header feature, so supposing I did have a header, the image featured in this post is what you would see. Notice the name of my blog isn’t on there, and that is because I thought it would be redundant to have a header image with the name of my blog right next to the name of my blog on my website, therefore I decided to go with a little tagline.

I’m pretty pleased with how it looks as I think it represents the purpose of my blog very well. It features a keyboard and mouse, the first thing that comes to mind when you hear the term “blogging,” and also the tools necessary for translating thoughts into digital words as well as bringing a vision to life. The sticky notes and the bright, marigold lightbulb represent one’s ideas, whether they’re written down all over the place, or floating around in one’s mind. The speech bubble with the tagline “Let’s blog together” is meant to be me speaking through my own personal blog about the topic I wish to cover. Overall, I feel the header ties together the goal of my website well and lets my audience know what the main elements of blogging include.

stratpres header

All the images I used in the header are from stock photo websites, particularly Pexels and Pixabay. Stock photos are a great way to include visuals into your blog because they are generally free to use, but it’s important to check for any restrictions just in case. The keyboard and mouse photo I used is from Pexels, and it was listed as “free for personal and commercial use” in addition to “no attribution required.” This meant that I could use it for my blog without having to credit anyone, but credit is always appreciated and a harmless practice, therefore I still decided to list the source of the image (at the end of the post). The rest of the images – sticky notes, lightbulb, and speech bubble – are all from Pixabay and under Creative Commons CC0. Just like the Pexels image, these are also free to use and require no attribution, once again allowing me to use them for my blog. Creative Commons CC0 images are also allowed to be edited, which allowed me to play around with colors and such in order to personalize my header to my liking.

In all honesty, I found the production process for the header to be quite difficult and frustrating. As someone who doesn’t really have much experience with photo editing other than the filters and adjustments on Instagram, I found Pixlr to be pretty confusing. I’m not sure if I clicked on certain tools in the wrong order, but I had to restart my header from scratch several times because I could not get certain things to work.

Since this was my first time working with layers to create an image, the idea of each photo being a separate layer was a little confusing to me. But in Manovich’s article, he described layers as “a composite of separate parts” that make up what looks like an “indivisible whole” (2011) which helped me to handle the process of editing each layer. His article also mentioned some useful tools that I might not have noticed, such as the “history window” which kind of acted as an undo for every time I messed up and the “layers menu” where I saw how to mess with opacity or blend mode (Manovich, 2011). Reading the article gave me the courage to play around with the different tools, but I still had a hard time figuring out how they worked, specifically the sponge and smudge tools. All of the tools I ended up using were free transform to size the images, paint bucket to change colors, opacity for a little bit of blending, and mode to change colors as well, even though its meant for blending.

Here’s a little breakdown of the details of my process:

  • 3 layers total, 1 text, 1 background
  • keyboard/mouse/pink – the background image
  • lightbulb – originally gray, but I changed it to a marigold using the paint bucket tool; changed opacity to 75 to make it blend in with the background image more because it was really harsh against it at full opacity; changed size with free transform
  • speech bubble – used free transform tool
  • text – changed color to customized yellow; italicized font
  • sticky notes – changed color using “toggle layers settings” in layers box on the right; switched mode to “hardlight” to get the more pastel look because colors were originally really vibrant; free transform tool

Using Pixlr, or any other photo editing software, is very different from software like MS Paint. For example, MS Paint is a bitmap graphics program, meaning that images created on the application are done so through pixels which results in harsher looking images (Davison, 2015). With a single layer bitmap image, resizing messes with the whole image and each pixel can be noticeable as the image is stretched out. However, with a multiple layer image, you can work with each layer at a time and size them separately in a way that won’t disrupt the entire image as a whole. Bitmap images are also limited in the ways they can be edited since there is only one layer, whereas with a multiple layered image, you can experiment with things such as opacity and blending to add depth to the overall image (Davison, 2015). Through this header creation process, I learned that layers can make an image more interesting and detailed, and with more practice on photo editing software, one can create wonders.


Header image sources:

Desk-flatlay-items-keyboard by Lum3n.com from https://www.pexels.com/photo/desk-flatlay-items-keyboard-399160/ (Pexels License)

Bubble by GraphicsSC from https://pixabay.com/en/bubble-comment-cloud-bubble-thought-2244298/ (CC0 Creative Commons)

Post-it-memos by Alexandra_Koch from https://pixabay.com/en/post-it-memos-notes-info-1975179/ (CC0 Creative Commons)

Lightbulb by OpenClipart-Vectors from https://pixabay.com/en/light-bulb-idea-electric-bulb-151383/ (CC0 Creative Commons)

References:

Davison, Patrick (2015) “Because of the Pixels: On the History, Form, and Influence of MS Paint.” Journal of Visual Culture 13(3). [PDF]

Manovich, Lev (2011) “Inside Photoshop” Computational Culture. http://computationalculture.net/article/inside-photoshop

Leave a comment