Matt Blake: Internet Newspapers and Magazines

Digital type

While other types of text exist in online communication, journalists primarily use two methods of type creation for web publications: image- and plain text (made with a simple text editor). Today we will create the image-based text with Photoshop but first let’s discuss the advances and disadvantages of each.

Plain text

Used for most written content online, including headlines, subheads, lists, captions, paragraphs.
Advantage: Loads much more quickly and small text appears more clearly in plain-text format.
Disadvantage: Font choices restricted to those available on audiences' computers.
Nevertheless, the vast majority of your Web text should be plain text that is modified with a stylesheet.

Image-based text

Text that is written in an image-editing program and saved as a separate image file, usually PNG and used to create large, complex logos or mastheads
Advantage: Displayed fonts are not restricted to what is available on users’ computer

This is because it is an image, not a traditional text-based font

Advantage: Displayed fonts can employed design tools offered by Photoshop, including shadowing, strokes, gradients, etc.
Disadvantage: Image-based fonts require must more data than traditional plain-text bit-based fonts.

This NYTimes.com logo is 36 kilobytes, small in terms of digital images but large compared to a plain-text writing of “The New York Times” (18 bytes)
In other words, it is great to use Photoshop text for graphics and logos but not for large chunks of text.

Spare the visitor a long download with sparse use of image-based text; use only for logos, mastheads, infographics and advertisements

Photoshop text

Here we begin by creating a simple text graphic before adding layers and layer styles. Creating a text graphic is similar to the steps required to make a shape graphic:

Start a new document (CMD+N).
Enter a size in pixels, preferably with horizontal aspect ratio and transparent background.
Select the type tool from the toolbar
Move the mouse to the canvas and type your name.

At this point, we could “Save for Web and Devices” as a PNG and import to a webpage. Instead, we will make a more complex graphic.

After typing your name, hover over the text until a vertical text selector appears. Click from the beginning and drag to the end of your text to select it.
Experiment with tools in the options bar at the top of the screen, these change text direction, color, weight and other options.
Save your image for the Web as a transparent PNG. If you like your creation, also save it as a PSD to revisit it later as an editable file.

Layers and layer styles

Look at the bottom right of your screen and you should see a layer palette (if the layer palette is absent, from the menu bar choose “Window > Layers”).

You will notice your name, indicating the automatic creation of a layer when we earlier typed our names. This is a layer in the layer palette.

We use the layer palette extensively when building graphics because it organizes and “stacks” the various elements of a graphic.

Adding a new layer

When multiple elements, such as shapes, text or photographs, appear in a single graphic, it is wise to place each in a new layer.

The new layer will appear as “Layer 1” and will be highlighted in blue, meaning that it is prepared for content to be added. To create a multi-element graphic, let’s add a shape to our new layer by selecting our shape tool and drawing a shape. Your “Layer 1” will now be renamed “Shape 1”.

Now reorder the layers by clicking on the layer with your name and dragging it above the “Shape 1” layer.

Before moving further we should save this file as a PSD file by selecting “File > Save As” from the menu bar. Save the file into an appropriate directory. This will allow us to later reopen the file with our layers and other Photoshop options in an editable mode.

Photoshop layer styles

While the layer palette allow us to stack and reorder the position of elements within a graphic, it also permits more advanced visual effects to be applied to elements within each layer. This is done with layer styles.

Clicking on the “fx” icon at the bottom of the layer palette opens the layer style interface. What appears is a menu of layer styles that can be applied to the selected layer.

Selection of any of the 11 options available automatically applies the default style and opens a menu that allows additional adjustment. To make additional changes to the style, click the style name in the left menu to adjust its settings.