Adding text to a photo for web use

Open the photo in Photoshop by going to File > Open
Screen Shot 2016-06-12 at 11.51.43 AM

Prepare the photo size by following the steps in this tutorial, then make the picture large enough to work on by pressing the command key and + key together several times.

Select the T for text tool on the left hand side:

Screen Shot 2016-06-12 at 11.52.04 AM

Click on your photo where you would like the text to be placed. You will see a little square appear where you clicked:

Screen Shot 2016-06-12 at 11.52.23 AM

In the top tool bar select a font, size and weight (bold, italic, regular – or any other options your font offers) and whether you want it centered, left or right justified:

Screen Shot 2016-06-12 at 11.52.32 AM

Add your text by typing it as usual. A line will appear beneath your text, but it is not part of the text.

Screen Shot 2016-06-12 at 11.52.39 AM

To change the text formatting, highlight it by dragging the cursor over it:

Screen Shot 2016-06-12 at 11.52.46 AM

Then use the options at the top of the screen to change the appearance of the text. I made my text heavier, larger:

Screen Shot 2016-06-12 at 11.57.05 AM

I then changed the color from white to grey by clicking on the rectangle to the right of the justification options. This brings up a screen where you can select your new color. The little circle will begin on the original color. If you want it darker of lighter, slide the circle up and down in a straight line. If you want a completely different color, move to the rainbow section and select a general range of color and work from that. When you have selected your color, click on OK:

Screen Shot 2016-06-12 at 11.53.00 AM

You can keep changing the size and color of the text. You can also move it around by clicking on the main selection tool at the top left:

Screen Shot 2016-06-12 at 11.53.07 AM

Touch the text with this tool and you can move it around as you wish:

Screen Shot 2016-06-12 at 11.53.14 AM

When the text is in its final position, look to the right and you will see this panel showing that the photo is on the bottom layer and the text is on another:

Screen Shot 2016-06-12 at 11.58.43 AM

To make the photo usable for the web, these two layers have to be made into one. Go to the top and select Layer > Flatten image;

Screen Shot 2016-06-12 at 11.53.41 AM

Now re-save your file by going to File > Save as:

Screen Shot 2016-06-12 at 11.53.48 AM

And add in the word “text” or whatever will help you identify this photo again later on:

Screen Shot 2016-06-12 at 11.53.57 AM

Click on “Save” and then the image option of 7-8. You now have a photo ready for the web with text on it:

Screen Shot 2016-06-12 at 11.54.04 AM