Using Graphic Bullets in InDesign

paragraph, bullets and numbering

You can use any character of any font available to you in InDesign as a bullet point. If that isn’t enough, you can also use the vector graphic of your choice. Here’s how.

Add bullet points to your text in InDesign. I am using CS4, but this probably works in other versions.

add bullets

Bullet points can be added two different ways.

  1. Select the text.
  2. Go to the options flyout menu on the paragraphs panel.
  3. Choose Numbering and Bullets.
  4. Select Bullets from the drop down menu in the dialog box.

paragraph, bullets and numbering

bullets

-or-

  1. Select the text.
  2. Go to the paragraph styles panel.
  3. From the options flyout menu of the paragraph styles panel, select NEW STYLE.
  4. Name your new style
  5. When the dialog box opens, select Bullets and Numbering from the list at the left.
  6. Select Bullets from the style drop down menu.

The benefit of adding bullet points as a paragraph style is that you can reuse the bullet style with a click.

select new paragraph style

paragraph style of bullets

Note: Only change bullets to graphics when you are finished editing the text. This process changes bullets to text instead of bulleted lists, so they will not be editable as bullets. You can still edit them as text with tabs.

Get your graphic for the bullets.

  1. Bring your vector image into InDesign. I am copying and pasting from Illustrator, but you can also place (file -> place) in InDesign.
  2. Size it to the size you need for the bullets.
  3. Copy your vector image to the clipboard.
  4. Select the bulleted text.
  5. Under Type -> Bulleted & Numbered Lists -> Convert Bullets to Text.

Convert Bullets to Text

Change the bullet to a graphic.

  1. Select the bulleted list.
  2. Go under Edit -> Find/Change.
  3. In the dialog box, make sure you are in the TEXT tab.
  4. Click the flyout menu button to the right of the Find What drop down list.
  5. Select Symbols -> Bullet Character.

symbols, bullet

  1. Click the flyout menu button to the right of the Change To drop down list.
  2. Select Other -> Clipboard Contents, Unformatted.
  3. Click Change All.

clipboard contents

Your bullet points are now graphics!

graphic bullets

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

Everything you need to design a website

960 Grid

Assuming you have basic HTML/CSS skills, you can find everything you need on the web available at no cost to design a nice looking, professional website.

First we will start with some web design tutorials.

Next you need a grid system to hold up your site structure. Try the 960 Grid. Very good, very free.

960 Grid

960 Grid

Then you need a color palate. For the best custom color palates that always look good, use the Color Scheme Designer.

Color Scheme Designer

Color Scheme Designer

Now some graphics. Now that you have an awesome color theme, find some graphics to match. Some free stock photo resources are listed here.

Maybe you want a drop down menu. Try the suckerfish family. It has been built on and improved so many times, you should easily find something suitable. Here is a link to Son of Suckerfish.

How about some cute icons? RSS, twitter birds, download, etc. can all be found by the hundreds from any graphic or web designer that is trying to get web traffic. Smashing Magazine has a post with some really high quality free icons. Here is another good resource for free icons.

Free Icons

Free Icons

If your graphics and icons are looking a little clunky next to each other, you can edit them with Gimp.  Gimp is a free image editing program along the lines of Photoshop.

Gimp

Gimp

At this point, you have everything you need to be able to put together a reasonable looking, valid xhtml/css-based website.

W3C Validation Service

W3C Validation Service

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

How to add a transparent favicon

Your favicon should be viewable across multiple browsers. Different browsers read things differently, so using two separate favicon images will assure the graphic will have a transparent background in all of them.

Create a new 16×16 pixel document with a transparent background in Photoshop. Draw or paste a graphic into the space. Part of a logo or image that carries the brand is best.

Save the file as Windows .ico format into the images folder of the website. In Photoshop CS4, the save as .ico format option is built in. CS3 and below requires an additional free plugin to have .ico as an available format.

Next, use the same imge and save for web. This time use a .png 8 format and 16 colors. Put it in the images folder again.

Put this code in the between the head tags of each page you want the favicon to show up on. If you are using a template or include file, better yet. You only have to do this once.

<link rel="shortcut icon" href="/http://yourdomain.com/images/favicon.png" 
type="image/x-icon" />
<link rel="shortcut icon" href="http://yourdomain.com/images/favicon.ico" />

That’s it! You have a new transparent favicon. If it isn’t working, make sure you uploaded all of the images and the pages.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)