create your own

Making Hubs Prettier Part 2: Paragraph Breaks and Headers

64
rate or flag this page

By Squimpleton

Paragraph Headers and Breaks

Now this is Part 2 and it's about these wonderful things called Paragraph Headers and Paragraph Breaks (Who calls them that? Why I do, silly)


Remember that Header?

That was the one I used in my last tutorial.

The Difference Between Headers and Breaks

Headers introduce a paragraph, they tell you what is going to happen next. Breaks simply provide a pleasant picture to take away from the reading such as the following.

There are two types of Breaks I'll be talking about: Solid and Repeated. Solids use a large unique designs while repeated uses a small design and repeats it across the canvas.

What you must know about making a header or break picture

  • Use the Photo capsule
  • Don't put in a Capsule Subtitle
  • Name the picture after its text (if any) or purpose so that you may at least get some SEO in there
  • The width of the Photo module is 520, you don't have to use that however if you do you will be able to control exactly how it looks onscreen.

Header Examples

This is a header with 100px of height. I like this height because it is easy to remember and it looks good.
This is a header with 100px of height. I like this height because it is easy to remember and it looks good.

Making Headers

Headers are probably the easiest things to make because they don't have to be that pretty.

All you do is pick your text, preferably short, and write it big on your canvas. You can add extra little images if you want but if you can't (or if you have Paint), little lines in the middle or bottom or side that blend with the canvas color (white) can make almost anything look snappy.

How to make pretty side images? Well you can get some free images on the net and paste them or you can use the Pen tool (Photoshop + Fireworks) and just do random lines until they connect. Fill in with a color, and then edit at will.

Solid Breaks

This is the solid Break (or Fill in) I used in my last tutorial.
This is the solid Break (or Fill in) I used in my last tutorial.
This is a paragraph header I made for Squidoo because the html manipulation allows me to write directly under it. However, in Hubpages, it is best use as a Break.
This is a paragraph header I made for Squidoo because the html manipulation allows me to write directly under it. However, in Hubpages, it is best use as a Break.

Making Solid Breaks

Solid Breaks are possibly the hardest pics of this hub. They're "Solid" because they're not repeated. The example above only has a symmetrical repeat.

How to make one:

There's no specific way of making one but you can never go wrong with a tube design, like the one above. That is a design that is basically a big line (tube), with little details added to it. Then you just play around with colors and gradients until you find something.

NOTE: It's easier to make nice editable designs if you use the PEN tool and not the brush or pencil tools.


Repeated Patterns

There are two ways of making great hubpage Breaks of repeated banners.

The simple way is to draw your pattern, open a canvas (a picture editor), and paste it over and over. The best part of this method is that, if you save it as png, you can edit each pattern separately later. However that may not be the most artistically accurate way. You're using eye measurements for distance after all.

Another way is great if you have Dreamweaver (or Scribefire or some sort of html). You use your pattern and save it by itself. Then you just make a paragraph of width 520 and the desired height, and use that pattern as a background. Preview your page, and take a screenshot! Then you just copy paste the image you wanted into an image editor and save. This way is best if you want an equally spaced pattern, but not great if you plan to edit each individual pattern later.

This is what I put in my Dreamweaver code (fillinmini.png is my pattern)

Using the HTML method

Click thumbnail to view full-size
This is the pattern
This is the pattern

Manual VS Automatic

Result of the Break photo done manually by copy pasting the pattern into Fireworks (Photoshop)
Result of the Break photo done manually by copy pasting the pattern into Fireworks (Photoshop)
Result of the Break photo by using a dreamweaver code and taking a screenshot of the result.
Result of the Break photo by using a dreamweaver code and taking a screenshot of the result.
Art and Design in Photoshop Art and Design in Photoshop
Price: $25.00
List Price: $39.95
Digital Character Painting Using Photoshop CS3 (Graphics Series) Digital Character Painting Using Photoshop CS3 (Graphics Series)
Price: $25.00
List Price: $49.99

Comments

RSS for comments on this Hub

SirDent profile image

SirDent  says:
17 months ago

You sure seem to know a lot about these things. I believe it will work great on HP for those who want to use them.

Your instructions are very well written. Good job.

Squimpleton profile image

Squimpleton  says:
17 months ago

Thank you. I'm sure there are people who do like these things, especially if they have a lot of text because it can get tiring for a reader to simply view text and ads.

This hub is particularly targeted at Squidoo users who want to dabble in Hubpages - over there using images or borders to break up text or making it stand apart is very common, but it's mostly done with html, which is why many have a hard time when trying out HP. So this tutorial is really about giving a Squidoo feel to Hubs. I guess that means I'm teaching how to make Squbs lol.

SirDent profile image

SirDent  says:
17 months ago

Squbpages? :P

02SmithA profile image

02SmithA  says:
17 months ago

Good stuff. I hadn't figured out how to deal all this stuff with hubpages yet. A lot of different ways to make it look nicer it seems.

Submit a Comment

Members and Guests

Sign in or sign up and post using a hubpages account.


optional


  • No HTML is allowed in comments, but URLs will be hyperlinked
  • Comments are not for promoting your hubs or other sites

working