Creating Center Text for Website Wireframe: Step-by-Step Guide

In this video, we'll be creating the center text for our website wireframe. So let's begin by creating a new layer. We'll double-click our new layer, retitle it 'Center Text,' and hit ENTER. With this layer selected, we're now ready to add our center text.

To do this, we'll be using the Type tool, shortcut T on the keyboard. With the Type tool, let's begin by dragging from the center of our center guide. We'll click and drag to the right, and then, holding ALT, the Type tool's bounding box will be dragged from the center. We'll release right about here, and instead of the Lorem Ipsum, let's simply type 'Home Page Title.'

We can then increase the size by selecting all the text, clicking and dragging over it. Let's increase the size to 60 by double-clicking the font size within our control bar. We'll type 60 and hit ENTER.

Next, we'll want to center our text.

To do this, we'll go to Paragraph and select 'Align Center.'

From here, we now have our home page title, so let's simply move it down. We'll hit Escape on the keyboard to exit type mode, and then simply drag it down, holding Shift until the text is right above the center line.

If you prefer, we can also double-click the circle on the right-hand side so that our text can be modified with the bounding box only around the text.

Next, let's change the font of our text. We'll select the text, then go to 'Character.' We can click and begin typing 'Nevis Bold.'

We'll then select it from the dropdown, and we have our home page title.

Now, let's add the text below.

To do this, we'll again use the Type tool, shortcut T on the keyboard. We'll start from the guide in the center, click and drag to the right while holding ALT, and release right about here.

Currently, this text is a little too big. We'll go to our control bar, double-click the font size, and this time, let's type 30 and hit ENTER.

I like the size of this a little more; however, the text is still a little too bold, so let's change the font we're using.

We'll go to the top and use the other font we've pre-loaded. Double-click and this time, let's use 'Chivo' and see our options below.

Feel free to choose whatever font you'd prefer; however, for me, I'm going to choose 'Chivo Light' as I like the contrast between the bold title and the text below.

Next, let's fill up our entire bounding box with placeholder text.

We'll right-click and go down to the bottom, or we'll select 'Fill with Placeholder Text' or 'Lorem Ipsum.'

Lorem Ipsum will provide text so we can see what additional text will look like.

I always like to edit my Lorem Ipsum by deleting what's unnecessary. In this case, I want to leave it at just two lines and finish with a period.

Feel free to allow as many lines as you'd prefer, and remember, if you hit Escape on the keyboard, we can add additional lines to our bounding box for the text.

Next, I'm going to move my bounding box a little lower so it's not right on the halfway line, giving it more space between the title.

I'll then click outside, and let's view what we've created.

This looks good. We have our title up top in bold font, lighter font below on two lines, and I like the look of this.

Let's save our work using CTRL + S on the keyboard, and in the next video, we'll begin adding the buttons below.

See you there!