Blog

How to use Pixlr to create a header for your site

How to use Pixlr to create a header for your site

Everyone who is building their own website is going to need an image editor of some kind in order to crop and resize images that they then upload to their website.  If you’re using WordPress, you will have seen that there is a kind of basic image editor inside the system that allows you to crop and resize images once you’ve uploaded them, but actually, it’s much easier to do this outside WordPress before uploading them.  You also don’t want to upload massive pictures to your website (which most photographs are these days, even those taken with a cellphone), as this will unnecessarily take up space in your hosting setup, so it makes sense all round to work on the images beforehand.

There are some other image editing softwares around and if you have one on your computer that you’re happy with, great – use it.  All we’re talking about doing here is cropping, resizing and using layers in a very basic way and you don’t need any kind of complicated software to do that.  But if you don’t have any software you can use for this on your computer, I always recommend Pixlr.  It works in pretty much the same way as Photoshop, but without all the bells and whistles.  Pixlr is an online tool that lets you store a library of images online if you want to – there is also a downloadable version that you can install on your computer, but the online version is absolutely adequate.

From the Pixlr home page, you need to choose “Pixlr Editor” to launch the app.

Creating a header image using Pixlr

I’ll walk you through the process of creating a header image.

First I open the Pixlr Editor by clicking the “Launch Web App” button for the Pixlr Editor app on the Pixlr home page.  I then need to open an existing image – for this example I am using a pattern that I have downloaded from ColourLovers.com (a brilliant source for gorgeous patterns that you can even colour yourself).  So I choose the “Open image from computer” option, as shown below.

pixlr2

I navigate to the image on my computer and choose it, and it opens up in Pixlr.

The next thing to do is resize the image.  Imagine that my theme requires my header image to be 1600px x 300px.  Your theme will usually specify what size you need to crop your header to.  By the way, measurements are always specified for web graphics with the width first, so here, the width of my header is 1600 pixels.  Something important to know when resizing images for a website, especially headers as they are usually very wide, is that you can’t make an image bigger than the size you originally have it – it will distort and be of horrible quality.  So make sure you use an image that is already as big as you need it to be, or bigger.  This isn’t an usually issue with digital photographs (or scans for that matter) as they are usually huge.  But if you are using a photo from an image library, for example, do check you have downloaded a large enough version.

To crop the image, I click the Crop tool from the toolbox on the left, as shown in the screenshot below.  I then drag it across my image, keeping my eye on the box to the right which tells me the size of the area I’m selecting.  I carefully stop at 1600 x 300.  (Notice that the image hasn’t opened at full size in the browser window – it would be too big to be able to work with, so we are working on it at 47% of its actual size, as is shown at the bottom left of the image; when we save it and use it, it will actually be at its real size.  Also note that if you need to move the image around within the screen area in order to see what you are selecting more easily, you can just drag it to a better position by holding and moving your mouse on the black bar at the top of the image.)

You can see that the crop tool is selected in the toolbox on the left, and that the size of the selected area is shown on the right hand side.

You can see that the crop tool is selected in the toolbox on the left, and that the size of the selected area is shown on the right hand side.

 

If, once you’ve selected an area the right size for your header, you feel you haven’t selected quite the right area, without clicking anything else, you can click within the selected area and use your mouse to reposition the selection, keeping it at the required size.  When you’ve moved the selection to exactly the right place, click anywhere else within the screen.  A query box will come up; click “Yes” to apply the changes and crop the image – that is, if you’re happy with the selection you’ve made.  Pixlr will now crop the image.

pixlr

Don’t worry if you make a mistake at any point – it’s easy to go back a step, without having to start over again; just click the previous step in the History pane to the right (which you can see in the screenshot above).

At this stage you might be happy with what you’ve done and if so, you can save the image.  However before saving the image, I want to show you something else that introduces you to the idea of layers in images.  It quite often happens that you want to add writing on top of a header image (or any image for that matter).  Usually it works well to add writing in white, but in order for it to be easily legible, you will want to darken the original image a little. How to do that that is to add a partly transparent texture as a layer.  Let’s see how that’s done.

First of all I open the texture.  This is one I have downloaded from Subtle Patterns which is a great place to get backgrounds that can be used on websites, though here I am using the file as a dark texture layer and not as a background.  (In theory you could of course use a solid colour and make it partly transparent, but I think a texture is just a little nicer.)

So, I open my texture in Pixlr as you can see below.  (I click “File > Open image” from the Pixlr menu – the texture is in fact already open in the screenshot; I added the arrow to show what I had done to open the image.)

pixlr

I move the black texture to the right by grabbing the black bar at the top of the image – it’s impossible to see what we are doing otherwise.  I then drag the black background layer from the Layers pane onto the image of the flowers as you can see in the two screenshots below.

pixlr

Drag the black background layer with your mouse to the left, onto the flowers and then release.

 

pixlr7

OK, so we now have the black background on the flowers, but it isn’t big enough.  We want to duplicate the layer so we can use it to cover the remaining space.  Right-click on the black layer in the layers pane of the flowers image, as shown, and select “Duplicate layer.”

pixlr8

Now, select the Move tool from the toolbox on the left – it’s the little cross at the top right.  Having selected it, use your mouse to move the second layer of the black texture to the right, so that the black texture completely covers the flowers.

The Move tool is indicated at the top right of the toolbox.

The Move tool is indicated at the top right of the toolbox.

 

Now we want to join the two dark layers together so that we can make them partly transparent at the same time.  Right-click on the top dark layer in the layers panel and choose “Merge down.”  This will make the two layers one.

pixlr

Now to add some transparency.  Click the tiny button at the bottom left of the Layers pane; an Opacity slider will appear.  Slide it to about 35 and you’ll see the flowers becoming visible underneath the dark texture.  This is dark enough for my white lettering to show up, so I am ready to save the image.

pixlr11

When you make your own header, you may need to add lettering to it.  On some websites, the post title appears on top of the header image so you don’t need to add anything to the image itself, however if you are making a header for your home page, you may want to add lettering (or perhaps your logo.  You know how you’d do that – you’d open it, then drag it from the Layers panel onto the header image).  If you want to add writing, click the “A” in the toolbox, which is the Type tool; you can easily change the font and the colour in the Text box that comes up (see below), and move it around by selecting the Move tool.  (A great thing about Pixlr is that although it’s an online tool, it can access all the fonts you have on your computer.  So if you have a special font installed on your computer that you use for your logo, for example, you will be able to access it and use it on graphics that you make using Pixlr.)

pixlr

So, for the purposes of my header, this walkthrough is nearly finished.  All we need to do now is save the image.  Click “File > Save” from the Pixlr menu.  (It’s easy to automatically head up to the “File” element of your browser menu instead, right up at the top of your screen, but it’s obviously the Pixlr menu on the black bar that you want, as shown below.)

pixlr

Name the image however you want to name it, slide the Quality slider up to 100 (keep an eye on the file size – it’s above the “OK” button – you want to make sure it is under 1MB) and save the image to your computer.

You now know how to create a header in Pixlr – as well as how to crop an image, and the basics of layers.  There is just one more thing I would like to tell you before we finish this tutorial, and that’s how to resize an image.

Resizing images using Pixlr

First of all, open the image that you want to resize and crop it just as we did above, using the Crop tool, so you have the image the way you want it, even if it is too big overall.

If you just want to make it a certain width (or height), but you’re not bothered about the corresponding height (or width), that is simple to do.  (An example of this scenario would be if you were writing a blog post, and you wanted all the images in the blog post to have the same width so that the post would look tidy, but the height of the images wouldn’t matter.)

So, with the image open and cropped the way you want it, click on “Image > Image size” from the Pixlr menu as shown.

pixlr

Now, change the measurement in the “Width” field to the width you want the image to be – in this example, 600 pixels.  Make sure you keep the “Constrain proportions” box checked, as you want the height to change automatically, so that the image keeps the correct proportions.  Don’t write anything in the “Height” field – the software will do it for you.

pixlr

When you click the “OK” button, you’ll see that the image jumps to a smaller size – don’t worry if this looks tiny as you’re just seeing the image at the same scale it was viewed at before.  (You can check it in the bottom left corner and if you like, just to check, you can type “100” there so that the image jumps to its correct size.  This won’t make any real difference though – you are only changing the way you are viewing the image.)  All you need to do now is save the image, just as we did with the header.

If your image is the wrong size and doesn’t have the same proportions as is needed, things are marginally more complicated but there is an easy way of rectifying things without distorting the image.  First, crop it so that it is more or less as you want it to be as the finished item, even if it is much bigger.  Then, resize it exactly as we did above, using for the width the width you want the finished image to have.  (Keep the “Constrain proportions” box checked, exactly as we did before, even if the height now isn’t the right size.)

Supposing the height is now smaller than is should be, change the height to what it is supposed to be and let the width size itself accordingly.

Now, create a new blank canvas that is the same size as the desired image size.  Choose “File > New Image” and in the box that appears, type in the desired size of the image, as in the example below.  (Just ignore the Presets dropdown.)  Click OK.

pixlr

Now click the original image and drag it to the right if needed, so that you can see both the images at the same time – the original, resized picture, and the new blank canvas.  Drag the original image (clicking and dragging the Background layer in the Layers pane) onto the new, blank canvas; use the Move tool to adjust the positioning if necessary.

pixlr

Drag the image from the Layers tab onto the new blank canvas, and use the Move tool to adjust the positioning, if necessary.

 

Save the image.

You now know the basics of resizing, cropping and working with layers in Pixlr.  Unless you need to do anything really complex, this is probably as much as you will ever need to know how to do with Pixlr.  (If you want to make interesting, shareable graphics for your website, take a look at the amazing tools talked about in this post.)

 

You Might Also Like

No Comments

What do you think? Anything to add, or any questions?