How to make a Facebook profile image without Photoshop?

This tutorial has been created for Afro-Disiac DJs and presenters to advertise their coming shows but it can be used by anyone.

So here it is, a tutorial to help you to create your own Facebook profile image without Photoshop.

It will allow you to do simple designs like the one I posted recently: see the image on the right ->

I will explain step by step how I created this image and you can then adapt it to yourself.

Firstly, please note that you will need the following images to be able to finish this tutorial so please just save them somewhere on your computer (click to open in full and then right click – save as)

Secondly, you won’t be able to use the same font as me because you are unlikely to have it on your computer.

It doesn’t matter, just use any for now and then go to www.dafont.com to download a font you like.

To install a font, here is the instructions for Mac: – and the instructions for Windows:

Ok let’s start

Go to this website:
http://pixlr.com/
And click “Open image editor”

Select “create a new image”
Name it whatever you want
Change the width to 200 and the height to 600
Click ok

Ok so now you have a brand new document.

Importing photos

Now open the photo of LA Williams

File -> Open image -> find the photo on your computer and click ok

The photo will now be open on a new window.

From there:

Select everything: Edit -> Select all (or ctrl+a)
Copy: Edit -> copy (or ctrl+c)

Go back to your empty document (click somewhere on the window) and paste the image: Edit -> paste (or ctrl+v)

On the “Tools” bar on the left, select the “move” tool (top right, the small arrow).

You can now move the photo and place it where you want.

If you want to resize it, go to: edit -> free transform. Tip: if you want to keep the proportions right, just hold the “shift” key while resizing.

Effects

Ok now the fun part, I converted it in black and white with a strong contrast.

To do that, go to “Adjustment” -> “Hue & Saturation”
Set the saturation to -100 and click ok.
Then go to: Adjustment -> Brightness & Contrast
Set the contrast to around 30 and click ok.

You can also try some effects here. Go to Filter -> and try some of them. If you don’t like it just undo it (edit -> undo or ctrl+z)

Ok now do the same thing with the afro-disiac logo.

So open the logo, select all, copy, go back to your design, paste, place and resize if needed.

I also added my logo in the same way.

Typography

Last but not least: the text.

There is nothing overly technical there, just select the text tool on the tools bas (the big “A”).

The big thing about Typography and fonts is: don’t go crazy! It’s tempting to go for a funny looking font and put crazy effects and colours but PLEASE don’t do it. Keep it nice, simple, clean it will look more professional and will be easier to read. Oh one last thing, DO NOT choose the font called “Comic sans ms”. Don’t ask. It’s a designer thing.

Click somewhere on you design and type one line of text (for me: “VS”). From here you can see that you can adjust the size, the colour and choose the font.
Just make it fit your design, leaving a small margin on each side.
Then go to your second line (LA Williams for me), create a new text layer by clicking on the text tool again and clicking somewhere else on your design (you can move it around later).

To move or modify any of the text line, make sure you select the correct layer on the “layers” window on the right. Then use the “move” tool to move it, and the text tool “A” to change the text.

For the last three lines I use a trick of resizing each line so that it has the same width as the others.

For me: