However since I started freelancing, I’ve never had to do a website that really bothered me until recently. This potential client really got me thinking, how does our sense of morality effect the clients we work with?

This Isn’t About Tolerance

When I originally tweeted about this issue, some people misunderstood. I’m not talking about having tolerance for other peoples’s religions or beliefs. I’m talking about working on a website that really goes against your sense of right and wrong.

Morality seems to be little discussed in our field, but I think it deserves a bit more attention, especially considering the wide range of our clientele.

Morality In A Full Time Job

At my last full time job, my boss was at the very opposite spectrum than I was in the political sense. Normally, this wouldn’t really bother me and we really got along well together.

However, he started bringing in a lot of website projects from political candidates and groups from his side of politics. While this probably shouldn’t have bothered me as much as it did. I’m pretty outspoken about my political beliefs and felt wrong about “working for the other side“.

I mean, why would I want to help the other side get elected or their issues passed if I felt what they believed in was both morally and personally wrong?

Freedom Of Choice

Since I started freelancing, I’ve never had to deal with this again to recently. I was approached by a potential client that represented a lobbyist group who fought for “things” I believed to be immoral. They stand for things I’m very strongly against. So do I work with them or not?

Weighing Your Options

If you’re hurting for work, you may feel like you don’t have the option to pick and choose in this scenario just because it goes against your personal sense of morality. Hey, work is work right? But how will you feel once the project is over? Especially if your good work helps the cause?

It’s ok to sit back and think of what’s more important to you. I have no problems working on church sites for other religions. Religions (peaceful ones) don’t hurt anyone. But what about these kind of sites?

• Pornographic
• Pro or anti-abortion
• Pro or anti-homosexual
• Political
• Violent subjects

For some developers who really don’t care either way, none of the above websites would bother then, and they’d be happy to work on them. But what if you really cared about these issues and were approached to do one the opposite of your beliefs? Would you still work on it for the money?

Would You Be Ashamed?

Another way to determine if you should work on the project or not is to gauge how ashamed you would be to put your name on it. If it was the best work you’d ever done, would you still put your name on it or in your portfolio regardless of the content or group?

Would It Hurt Potential Business?

What about your potential clients? Putting up a controversial site in your portfolio might turn off a large portion of your potential clients. Is the money from that one project worth losing all of that business?

What if It’s Illegal?

Thankfully, I’ve never had to deal with this, but what would you do if the website the client wanted was actually illegal? Would you do it anyways, pass on it, or turn it over to the proper authorities?

A Quiet Issue

I’m very surprised at how the issue of morality never seems to come up in web development. Especially since we all have our own strong beliefs. I’m sure deciding whether or not to take on a project based on your beliefs isn’t as uncommon as we think.

It’s ultimately up to you to decide if you can be comfortable working on something you disagree with. Most of the time, the stress is simply not worth the money, so it’s often best to pass on something you strongly disagree with.

As for me, I decided to go ahead and work with the client I mentioned above. The company does stand for some things I strongly disagree with, but they also stand for a lot of things I do agree with.

Your Thoughts

How do you approach these kinds of projects and issues? Do you let morality guide you in your business dealings?

Dedicated server hosting from Hosting.com

I wrote that article with the hope of making it the first in a series of articles, and what you’re reading now is the second in that series.

And yes, it’s also all about what makes a great list post.

As some readers may be aware, there are some very strong feeling about list posts in the community these days – and for good reason. Sometimes I look at certain RSS and news feeds, or at some of the stuff that gets passed around on Twitter and it just makes me want to scream in frustration. But, as much as I can get frustrated with all the lists (and especially with lists of lists), I try to keep and open mind and remind myself that not all list-based articles are bad.

In fact, there are some really great list posts out there. So, in this article, I want to look at some of the key elements that I think separate the lists that make me want to scream in frustration from those that actually find their way into my bookmarks.

A Worthy Subject

There is no doubt that list posts are articles, and like any good article, the foundation for success is always a good subject. The first step is always to come up with something that people want to read about. Just because you can put together a collection of websites that have pink flowers in their footer doesn’t mean that you should.

[Note: I just made that up. I have no idea if there are enough websites that feature pink flowers in their footers to actually compile a complete list. Hopefully, you get the point of the example though.]

So, when generating ideas for your next list post, try to make sure that it’s something that readers will be genuinely interested in.

For instance, one list post that I would be really, really interested in seeing would be a collection of websites that actually make intelligent and meaningful use of animated GIFs to add a subtle touch to a design. Too often, I think that people stereotype animated GIFs and think of all those really horrible rotating at symbols (@), sword wielding Diablo sprites or dancing, bikini-glad ladies. However, sites like Denise Chandler‘s actually demonstrate how animated GIFs can be used in interesting ways.

A list post that collected a number of fresh uses of animated GIFs could turn into a very strong and interesting article that could motivate readers and further stimulate creativity. In my books, any article that can accomplish this kind of intellectual stimulation is a good one.

Good Examples

In the vast majority of cases, examples make up the backbone of the entire list post. After all, a list post isn’t much good without the examples that actually make up the list itself. That being said, however, the quality of the examples is incredibly important. Even the best idea for a list post will fall flat on its face without good examples.

But what makes a good example? There are a number of things you could consider:

• Uniqueness – is the example something that we’ve all seen before, or something fresh and unique that may really interest your readers?
• Quality – this is especially important if your title suggests that your list includes all the best examples of something. I hate looking at a post titled something like “20 Best WordPress Themes for Authors”, only to find it full of second or third rate material.
• Relevance – are your examples actually reflecting what you say they are? Sometimes, I think that we can start filling up our lists with examples that don’t entirely fit, just for the sake of inflating it a bit. I think, however, that it would be far better to have fewer highly relevant examples than a large number of less relevant examples that simply dilute the overall purpose of the article.

Of course, the definition of a good example is certainly going to vary from list post to list post, depending on the subject of the article. Regardless, however, any good list will pay particular attention to the quality of its examples.

A Reasonable Number

One of the tell-tale signs of any list post is probably the presence of some kind of number at the beginning of the title. Just look at the most recent list post here on SpyreStudios: “30 Awesome Custom Tumblr Blog Designs.” The name tells you exactly what the list will feature, and the number of examples that you can expect to see.

This is a pretty standard feature of most list posts these days, and as such is probably something worth considering here. I think that there are two very important things to consider when choosing numbers for your titles.

First, be reasonable. In the vast majority of cases, there is really no need to feature 150 examples of some particular trend or design element on various websites. Only a handful of very dedicated people will actually take the time to look at them all in detail. Plus, after the first 20, 30 or (at the most) 50 examples, there probably won’t be anything all that unique about the examples anymore.

So, in most cases, try to keep your lists to a smaller number by focusing only on the absolute best examples you can find. This will also have the added benefit of saving you some bandwidth, and your readers some time.

Also, be honest! I’ve come across far too many list posts with titles that are somewhat misleading – even if it is somewhat unintentional. For instance, though having 31 examples in a list entitled “30+ Clever Logos” is technically accurate, that little plus sign tends to cannot more than just on extra example. In my view, its far better to just come out and say “31 Clever Logos” rather than being somewhat more obscure.

Also, I am always sorely disappointed with a list that is titled “1001 Business Icons” only to find out that it just contains a list of different lists of business icons, which all add up to the total 1001. Again, strictly speaking the title is accurate, but when I come across these kinds of posts I very often feel as though they are not delivering directly on their promise – especially since many of the listed lists will actually contain the same icons, a little fact which tends to completely throw off the count.

Basically, just avoid anything that can be inaccurate or misleading. Also, if, for whatever reason, you cannot establish an exact count, the leave the number out entirely and devise some other, interesting title. Actually, you may even want to consider coming with with an different and interesting title anyhow.

Meaningful Commentary

Now, while a strong subject, good examples and a reasonable number can all help make for a good list post, the one thing that I think can make a really great list post is a bit of added commentary. It’s all very well and good to put together a collection of examples that demonstrate something particular, but in my experience, it’s even better to take the time to explain to your readers why you chose the various examples in your article.

For example, if you want to show me 20 examples of great comment submission forms, then take the time to tell me why each example is great. Is it the layout, the design or the usability? Is it the creative styling of the form elements or some tiny detail that really sets it apart? Perhaps it’s not even so much the form itself, but rather the way it is framed.

Providing this kind of commentary gives your readers something extra to engage with. Rather than just having an image to look at, your discussion can actually provide them with some context, and something to encourage their own thinking. Even if they don’t necessarily agree with your reasoning, it will still force them to engage the subject on a critical level, and make their own thoughts and judgements on the subject.

And, as I’ve already mentioned, any article (list or otherwise) that can do that is a successful article.

Conclusion

So there you have it: four elements that I think can work to actually produce a really great list post. Of course, I don’t really expect to see any significant change in the community tomorrow, or any time soon. After all, these articles have been experiencing success for a long time, and some of their more enthusiastic publishers are more concerned with traffic and numbers than with providing real value to the design community. So, mindless, poor quality lists will very likely continue to circulate.

Still, for those of you who are looking to deliver great and meaningful content to your readers, there is really no reason to abandon the list post entirely. Instead, consider some of the things that we have discussed here. Hopefully, they can help you put together some of the best list posts that the community has ever seen – the type of lists that will get frequently bookmarked because of the genuine value that they offer.

Your Turn To Talk

What do you guys think? Any time someone opens the lid on the subject of list posts, there’s always the potential for some very strong opinions. Are there any other characteristics that help make a great list post? Feel free to have your say by leaving a comment!

Some people prefer self-hosted solutions like WordPress, but others enjoy Tumblr for its ease of use and because it requires almost no maintenance or even hosting fees.

Today we’ll have a look at some of the best custom Tumblr themes out there. Tumblr provides ready-made templates for users, but customizing or creating your own theme is where the magic happens. Let’s see some examples of what can be achieved:

SimpleBits ↓

David Perel ↓

Allison Weiss ↓

hrrrthrrr ↓

Mark Jardine ↓

Doug Neiner ↓

Art In My Coffee ↓

Gary Vaynerchuk ↓

Gary’s Real Life ↓

MetaLab Blog ↓

Danny Garcia ↓

Vervetbleu ↓

Name That Film ↓

Eat Sleep Draw ↓

Karen Abad ↓

Jeff Finley ↓

Extra Firm Hold ↓

Domo Nom Nom ↓

Faggotry ↓

Kevin Nuut ↓

Moose Garden ↓

Steven Beelen ↓

Matthew Buchanan ↓

HERE ↓

Matt McInerney ↓

9-Bits ↓

52 Weeks Of UX ↓

Heather Rivers ↓

Log.jb ↓

Tumblr Staff Blog ↓

Your Turn To Talk

What do you think? Do you have your own Tumblr blog? Do you know of any other custom Tumblr blog designs? Make sure you tell us by leaving a comment below ;)

• Adding new colors to the Swatches panel
• Applying colors to objects
• Creating strokes
• Creating and applying gradients to objects
• Creating a spot color

Printing Requirements

I’m not going to go over printing requirements in huge detail here, as it pulls away from the fact that series of articles and tutorials is about InDesign, not printing. I will, however, briefly explain a few things that you’ll need to keep in mind when designing using InDesign, or any other piece of software that you plan to commercially print.

There’s no need to worry if you’re just printing from your home/office printer – as I’m sure you know they read RGB color models perfectly well. However when designing commercially, for, let’s say… a brochure, which you plan to get printed 10,000 times, you definitely need to pay attention to your files’ color models and other printing requirements such as using the right color model and setting up bleeds and crop marks.

Unfortunately all commercial printers require different print settings, although the chances are a lot of them use the same or at least similar document set-ups.

In the UK for example (which is where I am based), most printers will require a 3mm bleed, whereas some will occasionally request a slightly larger bleed, so be sure to check with them before you start work! Chris Spooner has written a superb article on how to set up bleed and crop marks.

Color Models: RGB vs CMYK

This is one a lot of people getting into the design industry are never too sure about – you’ll probably be surprised how many pre-press departments at commercial projects receive “print-ready” PDF’s that aren’t print-ready at all – biggest reason being that they have been exported using the RGB color model rather than CMYK.

RGB stands for red, green, and blue, which are then added together to create lots of different colors, the same way you would mix paints together to create a new color, although RGB uses light rather than paint. RGB is used for on-screen design, such as websites or graphics that aren’t intended to leave your display.

CMYK stands for cyan, magenta, yellow and black, and is the color mode used when designing for print, known as four-color of process-color. When designing for print using the CMYK color mode, there is actually four different channels, one for each color. Your artwork will be automatically separated into the channels: one for cyan, one for magenta, one for yellow and one for black. When the artwork is printed, each color is printed separately. Cyan will be printed onto the page, followed by magenta, then yellow, and finally black. Black is last because it is the darkest color, and obviously overprints all the other colors.

How you design your work is up to you; you could either design in RGB and then convert it, or design straight into CMYK. Both options have their advantages.

You may want to read some of the following to increase your knowledge on the different color models:

• RGB [Wikipedia]
• CMYK [Wikipedia]
• Tips for Working in CMYK for Print
• The Ultimate Guide to Designing with Black

Adding Colors to the Swatches Panel

After covering a very small portion of things to keep in mind when designing for print, it’s time to move on to working with color in InDesign. I won’t teach you how to set-up a document, as you can refer back to previous InDesign tutorials/articles in this series for that! So set yourself up a simple document and let’s get started. I’m just going to use a single page document, as I am just going to show you how to work with color in this tutorial, rather than actually producing a ready to export document. Here are the document settings I used:

Open up your Swatches panel. For this tutorial, I’ve dragged it out from my side panel so I can enlarge it. If you can’t find your Swatches panel, go to Window > Swatches to open it back up. If it wasn’t there, it just means you’ve clicked the cross on it and closed it – it’s always very easy to get back, though!

With your Swatches panel now open, click on the New Color Swatch icon at the bottom of your panel. If you can’t click on the icon, just select one of the pre-existing color swatches and you should then be able to click it. You should see a new swatch in your panel, it will default to “black copy” if you had your black swatch selected previously.

Double-click on your new swatch to open up the Swatch Options window. You should be presented with a new window, similar to the screenshot below.

From here you can rename your swatch, and select the color you want. Make sure you keep Process and CMYK selected – this is the standard color model for print – we will learn about spot colors later on. Play around with your cyan, magenta, yellow and black levels until you find the color you want – my settings can be seen below.

If you don’t want to name your swatch, you can name it with the color value by ticking the box directly beneath the swatch name field, as seen below.

Hit the OK button when you’ve done creating your swatch, and you’ll see that it has now been added to your Swatch Panel.

Repeat the step again to add another color.

Swatches allow you to quickly apply the same color to different objects, which we will learn how to do in the following step.

Applying Colors to Objects

There a few different ways in which you can apply color to your objects. You can either click on your object (shape or text) and then select your color swatch, select your object and then select your color swatch from either the fill or stroke drop-down menu in the tools panel, or drag the swatch on to the object you want it to color. What option you choose is completely up to you – it’s all down to personal preference. None are really much quicker or longer than the others.

First of all, we need to draw some shapes to color! Grab the Rectangle Tool and draw out a few shapes. The default color will be set to the swatch you currently have selected, in my case, that’s black.

The first thing we can do to color one of our shapes is to select it, and then simple click on one of your swatches.

Next, we can drag a swatch onto our second shape. By simply dragging and dropping the swatch, we will apply the color of the swatch to our shape.

Changing the color of both the shapes (or more, if you have more!) is just as easy. Select one shape, and whilst holding down the shift-key, click on the second shape. Keep on doing this until all of your shapes are selected, and then click on a color swatch, or drag it onto one of your selected shapes. This will change the color of all of them.

Creating Strokes

Creating strokes is once again reasonably easy. Select one of your shapes, and increase the weight of your stroke in the settings panel above your canvas, as seen below. I changed my stroke to 10 pixels.

Now lets change the color of our new stroke. With the shape selected, locate the fill/stroke symbols in your toolbar, once located, double-click on the stroke symbol. Then locate the swatches in your toolbar. The easiest way is to just drag one of your swatches onto the icon to change it, and kaboom! You’ve set your strokes color!

Give your second shape a 10px stroke too, and then select the Eyedropper Tool from your toolbar. With the Eyedropper Tool selected, click on your first shapes stroke – this will automatically apply the same color, an easy way to speed up your workflow.

Select both of your shapes, and in the settings panel above our canvas, click on the drop-down menu directly beneath your stroke weight. You will be presented with a handful of different stroke types.

Select one of them – I chose Japanese Dots. The weight here will determine how big the dots are – I changed my weight to 25px, and ended up with this…

If you want some more advanced stroke settings, you can open up the Stroke Panel by going to Window > Stroke. From here, you can change the alignment of your stroke (such as center, inside or outside), as well as the join and cap type, specifically useful if you are working the Pen Tool and want rounded ends rather than sharp, pointed ends.

Creating and Applying Gradients to Objects

A gradient, as you probably know already, is a combination of two or more colors gradually merging into one another. You can get linear gradients, radial gradients, and, in other applications, several more different styles, such as diamond.

To create a gradient in InDesign, we need to follow a similar process to the one we took earlier to create a swatch. Open up your Swatches Panel, and click on the drop-down options menu.

Select New Gradient Swatch, you will be presented with the following window.

After renaming your new gradient swatch, select linear, and select swatches from your stop color drop-down menu. This basically means we can create a swatch from two or more of our existing swatches, to save you recreating those same colors again. Of course if you want colors that you haven’t previously used in your design, you can select CMYK (or RGB for on-screen design) and create some new colors.

Click on one of your gradient ramp swatches, and then select a color swatch from your stop color area in the gradient swatch window. Repeat the step for the second ramp swatch.

To add a third ramp swatch, you can simply click just beneath your gradient ramp where you want a new ramp swatch to appear. You can drag the swatch about if you want to reposition it on your ramp. You can also reposition it using the location field, which allows you to position it via a percentage; 0% being the far left and 100% being the far right – making 50% smack bang in the middle.

Change your new ramp swatch color. The handles (diamond shapes) above the gradient ramp allow you to spread the distance of the selected color – have a play around with this to make the white take over the green on the left side of your ramp, as seen below. Again, when a gradient handle is selected, you can use the location field to reposition it.

Making sure you have renamed your swatch, click the OK button to save the gradient. It should now appear in your Swatches Panel.

Create a new shape using one of the shape tools, and then drag your new gradient swatch onto it to apply the gradient. You can apply gradients to any of your shapes in the exact same way as we applied colors earlier on in the article.

One great thing about swatches is that they allow you to automatically change the colors of all the objects that have that swatch applied. So, if you had 50 objects throughout your document with the same swatch applied, but the client wants to change that color from green to blue, you can simply change the swatch color in the Swatch Options window to update all of those objects automatically, instead of going through the document and changing each object one by one, which could take hours if you’re working on a long document such as a magazine or book!

Double-click on your gradient swatch to open up the Gradient Options window and change the type from linear to radial. By clicking on the preview button, you’ll be able to see the shape be updated as you update your swatch settings. Play about with the colors and positioning in the gradient ramp, and click OK.

Creating a Spot Color

A spot color, for those that don’t know, is a completely separate color that isn’t made up from any other colors from the CMYK color model. So, on top of a four-color process (CMYK) you would have an additional color printed, usually a very specific color, or even a special ink such as a metallic or glossy color. So, in a single sentence: a spot color is used to create a consistent, individual “special” color outside the CMYK color model.

To get started with creating a new spot color, open up your Swatch Panel. On the drop-down options menu, select New Color Swatch.

When the new color swatch window pops open, rename it, and select Spot from the color type drop-down menu.

From the color mode drop-down menu, you can either select a CMYK color, an RGB color, or one of many HKS or PANTONE spot colors. Choose a spot color – I’m going for PANTONE Metallic Coated 8725C. On the screen, it’ll just look like a color, but when printed, it’ll be a nice shiny spot color. I do, however, recommend asking your printers to view the color on stock before asking them to print it!

Click OK, and tahdah! – you’re now all set to start applying your spot color to your objects. Do keep in mind that spot colors can be very expensive to be print – even if you just use one – so only use one if you really need to!

Conclusion

You should now know how to create swatches, and use them throughout your document to help speed up your workflow. In the next article we will be covering how to work with styles, so keep an eye out for that!

We’ll be back soon with part five of the series. In the mean time, why not check out the others:

• Part 1: Document Basics & Master Pages
• Part 2: Working With Text & Graphic Frames
• Part 3: Importing Text and Playing With Typography

When done right, adding visual cues to your main menu can prove very useful in making things just a tad more appealing to visitors. Let’s have a look at some sites that make great use of icons in their navigation menus.

One trend I noticed while looking for sites to include in this post was that a lot of them used monochrome/greyscale icons – subtle but very effective.

TappGala ↓

Komodo Media ↓

Toffeenut Design ↓

Geng Gao ↓

Narwhal. Co ↓

Fragment ↓

Carbonmade ↓

Carsonified ↓

Dan Wiersema ↓

GreenOlivz ↓

Ecoki ↓

Freelance Folder ↓

Vancouver 2010 ↓

WP Bundle ↓

Dustin Allen Pace ↓

Media Loot ↓

Ministry Spotlight ↓

Scarpo ↓

Jonnotie ↓

Fresh01 ↓

Your Turn To Talk

Which ones did you like the best? Feel free to chime in and leave a comment below. Of course let us know if you found other sites that make great use of icons in their navigation menus :)

To prove this point exactly, we go through five companies that made it big with service ideas that we all knew about, but we still prefer them to others.

Now, not all these companies started with a goal in mind to become successful, many of them started up to share and communicate with friends, co-workers, and family. However, the ideas are general ideas that have been made into services well before they have; all they offer to the game is a twist to the idea.

YouTube

YouTube is definitely no exception to taking a general idea and giving it a twist. The company started back in 2005 as a general video hosting service. Before YouTube launched, many other video sharing sites existed and were built around user provided content.

However, YouTube launched with a twist to video sharing, allowing users to connect with each other and know when each of them uploads a new video. This user connection feature is what users adored, making YouTube the number one most visited video sharing website on the net.

Twitter

Twitter started as a small service to communicate with friends and co-workers quickly. Today, users all over the world use the site. Twitter is a micro-blogging service, which means you can restrictively blog, each of your postings are limited to the amount of characters allowed, in this case, 140.

The entire idea is a complete twist to blogging, an idea that has been developed for years now. By just limiting the amount of characters allowed, Twitter hit big over the internet and mobile platforms. It just shows you that users wants and can be fulfilled with just simple changes.

Facebook

Facebook is an interesting company; today, it differs greatly from many other services, however, it initially started like others in its peer. It took social networking to a new level, by making profiles private and limiting registration to certain universities and companies upon its first launch. This kept users connected with their friends and co-workers while away from the rest of the world.

That is what really brought the service to where it is today. While today it is globally accessible and anyone can register, it still maintains to keep users secluded at a smaller level, keeping its essence from day one.

ThemeForest

Themeforest, an Envato service, introduces a new way of purchasing and selling themes. Its twist to buying and selling such items was the fact that you utilize its payment processing system instead of utilizing third party services.

Not only did this save them and their authors money, but it also added to the buying experience allowing authors to spend their earnings at their leisure anytime or withdraw all with a click of a button.

AdMob

AdMob is an interesting company recently launched for businesses and publishers alike. They took the general idea of online advertising and geared their service towards mobile advertising. Not only did this open up a completely new door to advertisers and the advertising industry, it also allows proprietors and small mobile development firms to expand their horizon with income possibilities.

Again, this company took an idea that is has been available in the industry for years and gave it a twist by focusing on mobile platforms, dominating what has not been touched before in its industry.

The Effect

Now that we have looked at a handful of successful companies that took general ideas and modified them a bit, how should this affect our thinking patterns on new internet service ventures?

Most of the companies that we just went over started up by need, which means the idea came to the creator’s mind when they felt the need for such a service. With that said, taking ideas and giving them some pizzazz won’t always works, and is really based on its usefulness compared to what is currently out in today’s world. However, if you are looking into starting your own venture by enhancing ideas already out in the world, how do you know whether it is a good idea or not?

To understand what is great or not in terms of ideas really depends on what niche you plan on jumping into.

For example, if you are jumping into a business-to-business niche, you need to look at the demand of the current niche to see if expanding on the idea is well worth the effort, sometimes business-to-business niches are not large enough to really expand upon.

If the niche is focused on the general population, you need to look at how it copes for everyone, and what it is lacking to enhance the worldwide experience. Once you find a niche that can use great improvement and it seems like it has definite potential, you need to do proper research to see if:

• It has been done before and not marketed properly
• It has been partially done
• Users are demanding more under that niche
• The niche lacks certain user interaction if it is built around users and their content

To Conclude

Overall, approaching niches that have been around for a while and enhancing them may be a lot easier to work with than bringing a new idea to the table.

However, you should note that a great idea that exists and is not doing too well could be the cause of poor marketing. The company may have approached its targeted audience incorrectly, which caused its failure.

For example, large companies such as Microsoft, Google, Yahoo, and others failed with many new services and products they brought forth even though they were great products and ideas. With that all said, my point is, sometimes researching why some ideas failed is a great thing to do as it opens up your horizon and understanding on why users did not like the service or idea or why the company failed to market it or approach it properly.

What do you think? :)

In the third part of this Getting To Grips Series we will be covering the following topics:

• Creating and editing text
• Creating a headline
• Text alignment
• Flowing text (automatically and manually)
• Working with and applying styles
• Loading pre-existing styles from other documents
• Finding and changing
• Spell checking
• Drag and drop text editing
• Using the story editor
• Adjusting vertical spacing
• Viewing and using baseline grids
• Fonts and type styles
• Creating a drop cap
• Adjusting letter and word spacing
• Adjusting kerning and tracking
• Working with tabs

If you like this article, please do spread the word by tweeting, stumbling and digging. There are plenty more InDesign articles on their way, so keep an eye out for them!

Also, please keep in mind that this it a tutorial, and therefore the result isn’t tremendously great – it’s about teaching you how to use InDesign’s tools, not how to use them to create perfect results, that would take lots of practice! Also keep in mind that although this tutorial is long, it doesn’t cover absolutely everything – some things have already been covered in the previous InDesign tutorials, so be sure to check those out!

Creating and Editing Text

InDesign, being a desktop publishing application, holds the ability to enter text directly into your documents using a text frame/box, or importing your text that was previously created using another piece of software, such as Word or OpenOffice Writer. It supports a bunch of files so you shouldn’t run across any problems!

Creating a Headline

Before creating a headline, we need a document – you should now know how to set up a document from previously published tutorials. I used the follow document settings:

Creating a headline, as you’re probably assuming, is super-simple. If you can drag out a text box and type a heading you can probably work out how to do it yourself without any further instructions, but I’ll tell you anyway. Select the text tool and drag out a text frame, type your heading in. That is pretty much it – you can increase the size of your heading, and so on. That’s far too simple though, so I’m going to teach you how to use styles, making it easy for us to apply the same style to each heading throughout our document.

Go to Window > Type & Tables > Paragraph Styles. Although titled as paragraph styles, these styles are used to change the formatting of all kinds of text, from headings, subheadings, body copy, quotes… the list goes on. Click on the create new style icon to create a new style – a new one should automatically be added.

Editing the style is pretty easy, too. Double-click on your new style, you should be presented with a Paragraph Style Options window, looking something like below. Change the name of your style to something suitable, such as “Main Heading”.

Click on Basic Character Formats to begin formatting your style. You can change the font family, style, size , leading, tracking and positioning from this tab alone, as well as having the option to underline or strikethrough the style. Unless you know precisely what you want, making sure the preview box in the bottom left corner of the options window will allow you to see the changes your making to your heading – this is of course once you have selected your title and told it that you want to apply the style to it; you can do this by highlighting the text and double-clicking on your new style. You may need to increase the size of your text frame so that your text fits, we walked through this process in the previous InDesign lesson. You can see my final settings in the screenshot below.

We’re not going to go through the other settings just yet, as we will be playing with these later on. Hit the OK button to save your paragraph style. Let’s repeat our process again, this time creating a sub-heading with its very own paragraph style – you know what to do!

You can use the same technique to create styles for all kinds of text.

Vertical Text Alignment

Vertical text alignment is when you align your text vertically within a text frame; that’s the space between the top of your text and top of the text frame, and the space between the bottom of your text and the bottom of your text frame.

Click on your text frame and go to Object > Text Frame Options. From here you can select your alignment style of your vertical justification, as seen in the screenshot below.

Flowing Text (Manually)

We covered this a little in a one of the previous lessons, but now we’re going to go into it in more detail. Text flowing is when you place text into your InDesign document from another source, such as a .doc document, and then having it flow throughout several (or much more than several) text frames that all linked together – a popular process used when preparing books and magazines ready for press. It is possible to flow text manually in InDesign, allowing you to take more control over your actions, whereas automatically saves a lot of time, which is always a good thing if you’re preparing a book with several hundred pages.

Before moving on, you need a file that we can import into InDesign. I’ve created a quick document containing a bunch of Lorem Ipsum that I pulled off the net (Google “Lorem Ipsum”).

Go to File > Place and select your dummy text .doc (or similar) document. You can click on “Show Place Option”, which will allow you to remove all the existing styles of your text – a good idea if you had headings, fonts and colors in your word processing document. Once passing the options screen (if you decided to view it), you should have a cursor pop up with a preview of your text, as seen in the screenshot below.

You can now either click on your page to automatically create a text frame, or drag one out yourself. We’re going to just click, this is how mine looked just after clicking without any further modifications.

Resize your text frame so that it hits the top margin of your page, and then use the Enter-Key to nudge your text down a few lines so that it appears beneath your headings. Click on your text frame, and give it two columns (as taught in the previous lessons). You should now have something that looks like the screenshot below.

You’ll notice that there is a little red plus sign in the bottom right hand corner of your text frame, this is just to tell us that there is more text in the frame that isn’t currently visible. We’re going to make the rest of this text flow into a brand new frame. Click on the little red plus, and again you should see the cursor with the text preview. Go down on to the second page and click to create another new text frame. Give it two columns, and kaboom, we have two linked text frames.

One great thing about this technique is that you can still add images right into the center of our documents text frames – by wrapping the text around the images, the text will automatically carry on throughout the linked text frames.

Flowing Text (Automatically)

Flowing text automatically is virtually the same as doing it manually, it just saves a few minutes (or hours if you have a lot of text!). You still go to File > Place, your still select your document, and you still have to create a text frame (or insert it into a ready-made one). The only different is when you click, instead of just clicking, hold the Shift-Key down and then click. This will automatically create new text frames until all of the text is visible. Handy, eh? It’s so simple, I’m not even going to include a screenshot!

You can manually select areas of text or other sub-headings within your placed text to apply styles to them.

Loading Pre-Existing Styles From Other Documents

If you’re creating a newspaper or magazine, the chances are you’ve done it before, and are just creating a new issue. If this is the case, and you’re not completely restyling the publication and want to keep the same styles throughout your work, you can load pre-existing styles from your other/older documents.

It’s a pretty quick and easy thing to do. Open up your Paragraph Styles window by going to Window > Type & Tables > Paragraph Styles as we did earlier. Click on the more options tab (seen below).

Click on Load Paragraph Styles. You’ll be presented with the normal Open a File window. Browse for your file, and open it up. You’ll then be able to choose which styles from this particular document you’d like to import. Simple!

Finding and Changing

The finding and changing tool is probably one of the most used tools in the desktop publishing and web development industry. A very simple one, but a very useful and time-saving one, too! Like other finding and changing tools in other applications, the tool allows you to search for and replace a certain piece of text. For example, you want to change all your individual letter “i”‘s to “I”‘s. Or change all of your “and”‘s to “&”‘s.

To do so, go to Edit > Find/Change. You’ll see the Find/Change feature built-in to InDesign is a little more complex than those of simple text editors. Don’t get scared off, though, it’s simpler than it looks. The reason it looks slightly more confusing compared to others is because you have the ability to change Text, GREP, Glyphs and Objects, as well as being able to search for text within locked layers, locked items, hidden layers, master pages and footnotes. You can also choose whether you want your search to be case sensitive. You also have the option of changing the style of your found piece of text.

Spell Checking

InDesign, thankfully, has a spell checking utility that works in a similar way to word processing applications. You can check your spelling in a selected piece of text, an entire text frame, or an entire document.

To open up the spell checking utility, go to Edit > Spelling > Check Spelling. Your check spelling window should pop-up.

From here, you can click the start button to search for spelling errors throughout your whole document. Alternatively, you can select you text using the text tool and then hit the start button to scan for errors through that one piece of selected text, rather than the whole document.

If any spelling errors are found (which in my case almost every word is an error as we are using lorem ipsum text!), you can select the word you want to replace, and type what you’d like to change it to, as seen below.

If the spell checking tool finds a word that is actually spelt correctly (quite often the case with names) you can add it to the dictionary. Click on the dictionary button and another window will appear. From here you can add the selected word to your dictionary. You have the option of what dictionary you would like to apply it too – InDesign has many dictionaries as standard. You also have the option to set the target of your word – basically meaning you can apply this new word to the InDesign dictionary (allowing it to be spelt correctly in every InDesign article), or you can apply it to just your documents InDesign document, meaning if you were to spell the same word in a new document, InDesign will not recognize it. This is good if there is a specific article that contains the same unrecognised word more than once, and you are unlikely to use it in any following documents, such as names.

If you’d like your document to check your spelling as you produce it, you can enable dynamic spelling. This will highlight your incorrect spellings as you type or place in your text, allowing you to keep on top of your mistakes instead of having to do it at the end of a document, something that can become very time consuming if you have a 250,000 word book to spell check!

To turn dynamic spell checking on, you can go to InDesign > Preferences > Spelling (or Edit > Preferences > Spelling on a Windows PC). All you need to is check the enable dynamic spelling checkbox. You can change the colors of your misspelled words, repeated words, uncapitalised words and uncapitalised sentences. Red, green, green and green are set as defaults.

You can also enable and disable dynamic spelling by going to Edit > Spelling > Dynamic Spelling, however you can’t change the other settings doing it this way.

Drag and Drop Text Editing

Drag and drop text editing allows you to simply drag and drop a selected piece of text from one place in your text frame to another. You’re not restricted to just dragging and dropping you text within a frame though, you can drag and drop it into other text frames, layout windows and even other documents. A good example of when this can be used is when you decide you want to change the order of a couple of sentences, or you accidentally typed your new text into the wrong place.

As probably expected, dragging and dropping is as simple as, well… dragging and dropping! If you’re a Mac user you probably do this all the time anyway. You do however need to make sure drag and drop text editing is enabled. To do so, go to InDesign > Preferences > Type (Edit > Preferences > Type on a Windows PC). Under the Drag and Drop Text Editing section, make sure Enable in Layout View is checked.

Select a piece of your text, I’m just going to use the first sentence.

Hover your text tool cursor over the sentence, and drag it into your new place. You can drag it into another document, another text frame, or somewhere in the existing frame. I’m going to put the sentence at the end of my paragraph.

If you want to duplicate a sentence instead of just moving it you can do the exact same thing whilst holding the Option-Key (or Alt-Key on a Windows PC).

Using the Story Editor

In the last step I mentioned that you had to have the drag and drop text editing checkbox checked. What that did was enable us to use drag and drop text editing in our Layout View. The layout view is the normal view that you see on our screen, which is basically exactly how the document should print, with the text, images, wraps and so on.

The other mode you can view your work in is the Story Editor, which is basically just a way to view the text, without the distraction of images and other elements. To view your document in story editor mode, select one of your text frames and go to Edit > Edit in Story Editor. You should have something similar to the screenshot below pop up on your screen.

You can easily edit your text this way, although the standard view is a little bit messy and hard to read. You can change this by going to InDesign > Preferences > Story Editor Display (or Edit > Preferences > Story Editor Display on a Windows PC). From here you can edit your text to make it suitable for you to read. I have used Times New Roman at 18pt with a soft anti-aliasing and singlespace line spacing – you can see my settings below.

This is how my story editor now looks; much better!

The story editor is basically there to make it easier for you to edit your text. It comes in super-handy when you have a huge amount of type to edit – close the story editor once you’re done with editing and your text frames in your Layout View mode will automatically update.

Setting up and using a baseline grid to vertically align text

Using the baseline grid to align your text is similar to writing on lines, as if you were typing directly onto a lined notepad. First, we need to create a grid. Go to InDesign > Preferences > Grids (or Edit > Preferences > Grids on a Windows PC) to open up the grid preference window.

We need to base our grid around our pages margins. Start your baseline grid at the same distance as your margins (should be set as default) and set your increment every field to the current leading your text is set to (found in the control panel when you select your text). Click OK.

To view your grid, go to View > Grids & Guides > Show Baseline Grid.

Select your text tool and select your text, you can click in your text box and hit the Cmd+A (Ctrl+A on a Windows PC) to select all of your text. Once your text is all selected, in the control panel (above your document) click on the align to baseline grid button (seen below). This will align your text to your grid.

Fonts and Type Style & Text Wrap

In this section we’re going create a quick quote box in our document and make use of a different font and color. We’re also going to wrap our existing text around a new text frame. Select the text tool and drag out a new frame, it only needs to be a small one. Copy a piece of your box that you’re like to quote, and paste it into your new text frame. Alternatively you could duplicate it using the technique taught earlier.

Position your text frame into place and go to Window > Text Wrap. Select the wrap around bounding box text wrap option (I’m going over this briefly as we have already learnt how to text wrap in a previous tutorial) and add some offset, I’ve used 5mm.

Select your new quote text and change the font, size and color. You may need to change your types leading (the field beneath the font size) to get it to fit nicely onto our baseline grid.

Creating a Drop Cap

A drop cap is something we tend to see in elegant publications, as well as some magazines and newspapers. It is basically a large first letter (or sometimes even word) at the beginning of an article. They are incredibly easy to use in InDesign. The first word in my document is only three letters long, so I’m going to make my first three letters become drop caps.

Click on the text frame that you would like to add a drop cap and using the text tool, select your first word (or letter). In the control panel and locate the drop cap number of lines field.

Enter a number in to the field; the number represents the number of lines the first word or letter will take up. I’ve selected two.

As you can see, it has only drop capped our first letter. The field next to the one we just edited is called the drop cap one or more characters option. The number entered into this field represents the amount of letters that become drop capped. In my case I want this to be three.

Leading, Kerning and Tracking…

Leading, kerning and tracking are often overlooked when it comes to typography. By just slightly adjusting your leading, kerning and tracking you can completely transform how easy your typography is on the readers eyes. A little more space between those paragraphs can make things much easier to read, whist not spoiling the design. They are all very easy to change, in fact, it’s exactly the same as changing your font size, so you already know how to do it. The only difference is you have to change the leading, kerning and tracking fields rather than the font size. All of these can be found in the text tools control panel beside the font size.

You can quite easily find out what each setting does by just playing with the settings, but I’m going to explain it all anyway.

Leading is the spacing between your lines. The higher the number, the bigger the space between the bottom of your characters and the top of your characters on the next line. Typically, the tighter the leading, the harder your writing is to read, but have it too large and it may look unprofessional and again may be hard to read. You need to find what is right for your particular font and it’s size – it’s different every time!

Kerning allows you to manually adjust the amount of space in between two individual characters. Some fonts may be tighter than others, especially two specific characters combined, which can sometimes look like another letter if too close. Although sometimes you may want to make two letters closer together.

Tracking is the same as kerning, apart from it controls the distance between all of your characters rather than just individual one. It is recommended that you find a suitable tracking figure, and then leave it alone, making any further modifications by playing around with the kerning figure.

Conclusion

So there we have it, the end of the third part of the “Getting To Grips With InDesign” series. You should know how to import and edit text, and how to play with a selection of InDesign’s powerful typography tools.

We’ll be back soon with part four of the series. In the mean time, why not check out the others:

• Part 1: Document Basics & Master Pages
• Part 2: Working With Text & Graphic Frames

With the words embedded metadata we refer to a way to add invisible information in an HTML/XHTML document. These informations will be machine readable, by Google or Yahoo for example, but will not be seen in the browser. Basically we’re going to add some properties to our HTML elements that will say to Google: “Hey, this h1 title is my name, and this h2 title is my work title, I’m a web developer“. As a result Google will show in the search results, under our page title, a little line with our name and our work title.

There are three main embedded metadata specifications that are struggling to become a standard, and probably none of them will be 100% standard like it’s happening with HTML5, so it’s better to have a basic understanding of how all of them work. The projects are:

• RDFa: a specification strictly connected with XHTML, supported with the XHTML1.1 doctype
• Microformats: the most diffused specification till the arrive of HTML5
• Microdata: the HTML5 specific set of instructions.

The history of the formats shows how RDFa started the topic, basing everything on the Resource Description Framework; it’s complex but well supported.

Then arrived Microformats, with his friendly structure and became very popular. With HTML5, the group decided to create his own version of interconnected information organization. Let’s avoid asking if we really needed another specification for this standard, and let’s start seeing some example on how enrich our HTML with a machine readable representation of data.

We’re going to see how the three different standards can be used to represent our name and our work title, in a typical about me page. These informations could be added to google search results and every future applications that will use embedded metadata.

RDFa

Let’s start with an RDFa example:

	<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
		<p>Name: <span property="v:name">Marco Lisci</span></p>
		<p>Title: <span property="v:title">Web Developer</span></p>
	</div>

First of all RDFa needs a proper name space when working with it, to avoid conflicts in the XML tree. So we’re going to add the xml schema, with xmlns:v=”http://rdf.data-vocabulary.org/”, the official Google RDF schema. Then we have to declare the type of what our informations are going to represent, in this case a Person adding typeof=”v:Person”.

If you look at the documentation, there are a lot of other types that can be used, according to our needs. Then, using the v root, we’re going to add the properties to our span elements. Using v:name, we’re telling to the system that will read our page that what’s inside the span is the name of the person we want to represent. And the v:title will be read as the title of the current person. As you can see, you’re not breaking the XHTML, it’s about adding some little properties that can be really useful. You can find the entire specification on the W3 website.

Microformats

Microformats are far simpler that RDFa. The reason is clear, there’s no need to specify an xml schema and use properties. It’s all about using special names in classes. So our previous example will be:

	<div class="vcard">
		<p>Name: <span class="fn">Marco Lisci</span></p>
		<p>Title: <span class="title">Web Developer</span></p>
	</div>

Yes, it’s really so simple. Just add the class vCard to the wrapper element, and add fn to the name span element (the fn is the only required class), and title to the work title span element. This is the representation of hCard microformat element. By doing this, Google and other softwares will be able to grab the info and use them.

There are a lot of other elements that you can use to enrich your hCard representation, all listed at the official hCard page. There’s also an hCard creator, a little form to create an hCard representation from your info. I think that Microformats are really great, but if you’re following the HTML5 train, you can’t miss microdata.

Microdata

Microdata are the Microformats for HTML5. and this spec has it’s own DOM API, so it could become the standard when HTML5 will be widely spread. We can already start using it since Google announced microdata support. So, let’s take a look at how it works:

	<div itemscope itemtype="http://data-vocabulary.org/Person">
		 <p>Name: <span itemprop="name">Marco Lisci</span></p>
		 <p>Title: <span itemprop="title">Web Developer</span></p>
	</div>

You can see more than one similarity with RDFa. Also in this case you have to add a data vocabulary with itemtype. We used again the official Google vocabulary for microdata. The other important thing is to add itemscope to the wrapper element of all your informations. Then with itemprop we can assign to our spans the name and title values. It’s a little bit complex compared to Microformats, but could become the standard.

Useful links.

When you’ll get a little confidence with these three standards you’ll want to add more and more infos to your pages. Every one of these standards has schemas and properties for the most common informations used on the web, even nested elements, but they’ll follow the simple structure described here. The official specification page of RDFa is at the W3 website, it’s a little bit complex, but useful to understand deeply the Resource Description Framework.

There’s also the Microformats Wiki, and it’s the project with the best documentation among the three. Then there’s the microdata specification.

Remember that all of them are Google ready, so pick one and start experimenting! I personally use Microformats, but I’ll switch to HTML5 Microdata if it will show a solid foundation.

Your Turn To Talk

I hope you found this article useful. Please feel free to chime in by leaving a comment below! ;)

Sites such as Wikipedia have taken the words online community to a much higher level of freedom, while social networks such as Twitter have taken them to a new interactive high. This is all part of the web’s evolution of course, and as we continue to expand so will the technologies we utilize.

Online communities can be a variety of virtual endeavours dispersed in several entities that are obviously beyond the geographical. In today’s Internet we can build an online community in minutes using applications such as Ning, however, no matter how you decide to build your online community there is still a good “chunk” of things (both technical and theoretical) that have to be addressed.

Identifying the Needs for a Community Driven Site

Online communities or better yet “virtual communities” have always acted as a catalytic between large social or professional groups. Communities can be formed out of necessity or for the pure purpose of exchanging some type of information whether it’s found to be needed or simply wanted.

Before you begin to build an online community you should identify and address the needs for one. Of course anyone can create they’re own virtual community at any time, however, for someone who’s seriously considering the need for one it’s vital that they know if it’s the right time to start the building process. You wouldn’t want to strive towards the inception of an online community only to find out that it was prematurely launched and failed due to lack of planning and guidance. There are those that put the blindfolds on and succeed, but not every case is the same.

If you’re looking to start a community then you should be aware of the amount of sacrifice it takes. Simply said, are you ready for those sleepless nights, the immense dedication, and the amount of dedicated time that will be required? This is just the icing on the cake, once your community begins to progress then the work load can become unmanageable for one person and you may need to ask trusted friends to help with the responsibilities.

Next we’re going to touch base on the different and important aspects of online communities. It’ll help you address your own needs or the ones of your clients as well.

Diving Into Its Mechanism

Although there may exist similar reasons for the commencement of one online community when compared to the next, they will more than likely differ in terms of structure, targeted audience, options, overall goals and more. For example, Twitter and Digg may have a common desire to facilitate the distribution of information throughout specific groups or niches, however, they will definitely differ in the way they deliver it.

It’s all about how you want your online community to convey, process, and have its user’s interact with information. Here we plan on dissecting the variations that exist in virtual communities.

Fluid Distribution of Content Communities

These online communities rely heavily on the flow of information from the individuals who manage the community or group rather then equal interaction. At times users can even be limited in their ability to voice themselves, and the overall goal is to produce and deliver content regardless of what anyone has to say. It’s more of a give rather than take relationship.

The most common manifestation of these communities would be blogs, wiki’s, and email subscriptions. Although when it comes to blogs there are those communities that encourage user interaction, that’s not always the expected. In fact, weblogs were started to freely voice one’s thoughts and opinions with the understanding that not everyone may interested in them. Also, even though I may get flamed for including wiki’s within this type of community, you must understand that sites such as Wikipedia are there to first inform while keeping user to user interaction at a minimal.

Liberal and Self-Imposed Communities

These types of online communities started with an overall goal in mind that allowed users to voice their needs and wants. These communities are usually open to anyone and strive to either solve or exploit issues. We’ve seen this type of community implemented in forums, online customer feedback (i.e. getSatisfaction), open source software projects, questions and answers communities, and more.

Socially Integrated Communities

Just as the above reads these communities are at its peak when they’re most socially active. There is also a constant flow of content from the users and/or the individuals who manage the community. They’re also well organized, provide the user with various features/options, and usually remain committed to the overall focus of the community. The most common forms of socially integrated communities are sites like Flickr, Twitter, Facebook, YouTube and many others.

Commercially Oriented Communities

Most communities have some level of managing, however there are those that are strategically managed to increase the conversion of visitors to members. When you visit one of these sites you will more than likely be required to purchase some type of membership. They are usually socially active and range in an unprecedented number of markets.

One of the most popular examples of this type of community is Netflix. Although Netflix can be seen as something much more than a community, it does provide extensive user interaction between the sites interface (rating movies) and other users as well. This is what you would normally look for in a commercially oriented community. Communities such as CrowdSpring or MediaLoot are also within this category.

Your Turn To Talk

I hope you enjoyed this post! Please take a minute to chime in and leave a comment below ;)

• Creating, editing and resizing text frames.
• Creating and editing graphic frames.
• Placing graphics into an existing frame.
• Resizing frames.
• Converting graphic frames into text frames.
• Converting shapes.
• Working with frames and the Pathfinder Tool.
• Wrapping text around a graphic.
• Aligning multiple objects and scaling grouped objects.

Don’t forget to take a look at the first “chapter“: Document Basics and Master Pages.

If you like this article, please do spread the word by tweeting, stumbling and digging. There are plenty more InDesign articles on their way, so keep an eye out for them!

Creating, Resizing and Reshaping Text Frames

Open up your document. I am going to be using the document from the last post of this Getting To Grips Series, so feel free to do the same! I’ve actually deleted everything from the original document, but have kept the page layout, bleeds etc the same. This just saves setting it up all over again!

When working with publications such as newspapers and magazines, you’ll find that you will most probably have to work with text frames, therefore they are very widely used and powerful feature offered in InDesign. Text frames are created using the Type Tool, and can be edited in various different ways. The size, location and shape of a frame determines how the text is displayed on the given page.

We’re going to create our own text frame right now. Create a new layer in the layers palette. We’re going to use layers so that we can easily hide all of the text at once without having to manually select it and then hide it. To create a new layer, just click on the new layer icon in the layers palette – if you can’t see it, go to Window > Layers to open it up, or press the F7 key. Rename the layer to Type. The layers are very similar to those we use in Photoshop and Illustrator, so there’s no need for a detailed explanation!

With the new layer selected, select the Type Tool. Click and drag a new text frame from our page margin on the left hand side, to the page margin on the right hand side.

Type something of your choice into the new text frame. I’m going to type “Spyre Studios Rocks!”. If you have finished with this particular text frame, you can automatically adjust it to fit it’s contents. Hover your mouse cursor over the bottom center handle (the little square we use to resize the frame) and double-click. This will automatically make the height of the frame the exact same size as the type that fills it.

We can also reshape a pre-existing frame. Select your frame again (with the Selection Tool). With the frame now selected, change tools and use the Direct Selection Tool rather than the Selection Tool (the white arrow rather than the black arrow). This tool is similar to the Selection Tool, apart from it lets us edit/resize more accurately, for example, the Selection Tool can select a path, whereas the Direct Selection Tool can select the anchors that make up that path.

With the Direct Selection Tool selected, the four handles in the corners of your frame should have turned into even smaller handles. You can drag these little handles around, reshaping the size of your text frame. The content inside it will automatically fit to this shape, as seen in the screenshot below. Copy and paste your text a few times, and try reshaping your own frame.

Creating & Editing Graphics Frames

In this section we’re going to be learning how to draw graphics frames, place graphics into your frames, edit existing frames, and replace a frames contents.

First of all, make another new layer and call it “Graphics”. Select the Rectangle Frame Tool from your tools palette. This tool is basically like a standard rectangle shape tool, but allows us to place graphics directly into it. With the tool selected, and us still viewing our graphics layer, drag out a rectangle shape where you would like your image to be displayed.

Select the Selection Tool, and with the graphics frame still selected, go to File > Place and select an image you would like to insert into your page layout. I’ll be using one of my own photographs.

You’ll see from the screenshot above that the image has been placed into our graphics frame at its full 100% size, which is clearly far to big for our tiny little frame. By enlarging the graphics frame itself using the Selection Tool and its handles, you’ll notice that it just displays more of the photograph it contains, rather than changing the actual size of the graphic.

You can also change the shape of the graphics frame by selecting the Direct Selection Tool and then dragging the frames handles – just like we did earlier with the text frames.

Revert back to what we originally had a couple of screenshots ago, as we’re now going to learn how to resize the image that the placeholder contains, rather than just resizing and reshaping the frame itself.

Doing this is incredibly easy. Instead of using the Selection Tool to resize the photograph, we will be using the Direct Selection Tool. Select the Direct Selection Tool and hover your cursor over the graphics frame. A white hand should appear; by clicking and dragging, you can move the frames contents around.

When clicking on the frames contents using the Direct Selection Tool, you probably noticed another bounding box come up (the purple line seen in the screenshot below).

By clicking on this bounding boxes handles and then dragging, we can resize the frames contents. Remember to hold the Shift-Key to keep the image in proportion.

The title “Graphics Frame” is pretty much just another way of describing a crop box, as you may now have realised. The frame can give you the ability to resize graphics at any time, without losing any detail, as well as having the power to easily change the shape of the image. Using the Direct Selection Tool, change the shape of the frame.

Now we’re going to duplicate our frame and replace its contents, a good tip to know if you’re going to be using a lot of images on your pages and want to keep the same style throughout.

Select the frame with your Selection Tool and, whilst holding the Alt-Key, drag your frame onto another area of your page.

After resizing and moving your graphics frame using the Selection Tool, we can replace the frames contents with a new image. To do this, all you need to is repeat the step we took to put the original image in. Click on your frame using the Selection Tool, and then go to File > Place and select your new image. I’m going to use a colored version of the same image. Use the techniques we used earlier to resize the frames contents. You can also fill the frame with the graphic by going to Object > Fitting and selecting one of the many options, although this is sometimes only suitable for frames with 90 degree corners.

You can also change the frames shape using the Pen Tool. To do so, all you need to do is select the graphics frame using the Selection Tool, and then select the Pen Tool and click on the frames path to add a new anchor point. Still using the Pen Tool, you can then drag these anchor points out, making them curve in the process. For more on the Pen Tool, check out this guide on About.com.

Wrapping Text Around a Graphic

Wrapping text around a graphic is probably something you will have to do on a regular basis if you are planning on going into the desktop publishing industry. Unlike simple word processing applications, InDesign offers much more control over what you wrap around your graphics. You have the ability to wrap your text around the frame, or the frames contents, as well as giving your wrap an offset.

We’re going to be wrapping some text around one of the graphics frames we made earlier. Before we start, we need some more text. Using the skills we learnt in the first “Getting to Grips with InDesign” tutorial, insert some text into one of your pages. I’m going to use some Lorem Ipsum dummy text.

Resize one of your graphics frames and its contents so that it is of a suitable size for what we’re about to do, and place it into the middle of your new text.

Select your graphics frame with the Selection Tool and then go to Window > Text Wrap to open up the Text Wrap window.

With the graphics frame still selected, select the Wrap Around Bounding Box option. This will wrap the text around your photos bounding box (the actual size of the image) rather than the graphics frame.

Select the Wrap Around Object Shape option, and the text will wrap around the Graphics Frame rather than the frames content.

This option is clearly too squashed due to the odd shape of the frame, but is easily fixed. In your Text Wrap window, you’ll notice several fields where you can put a digit in. The field we’re going to be using is the “Top Offset” field, which will basically add a cushion between the graphics frame and the text. Filling this field in will automatically change the others. I used an offset of 6mm to give me the following results, but you may want to play around with the setting to get a result that suits your frame shape.

You can also play with various settings which allow you to only wrap the text in certain areas of your image, for example, you could make the text wrap on only the side that is away from the spine by selecting the Side Away From Spine wrap to option.

Working with Frames & the Pathfinder Tool

The Pathfinder Tool is a powerful editing tool that allows you to subtract shapes from other shapes, add shapes together and so on.

Select the Rectangle Tool and draw a shape over your text as seen below. Fill it with a color of your choice.

With the Selection Tool selected, select your type and copy and paste it in place to make a duplicate copy of it. With the Selection Tool still selected, click on your new text frame, and whilst holding the Shift-Key, select your new (blue) rectangle. This will select both of your objects at the same time. Go to Object > Pathfinder > Exclude Overlap. This will fill the text area with blue, but subtract the blue rectangle that we already had. Try it out yourself to see what I mean! Also, try giving the other Pathfinder options a go – this is usually a tool you need to experiment with unless you know exactly what you want!

I have lowered the opacity of my new shape, and readjusted my type a little to fit its new background. Remember, this isn’t meant to look good – it’s purely to teach you how to use the different InDesign tools.

We’re now going to add a new image into our page, using another frame. This time we’re going to be converting a shape (created using the shape tool) into a graphics frame. Click on the Rectangle Tool and hold your click until a new group of tools appear. Select the Ellipse Tool and whilst holding the Shift-Key, drag out a circle onto your page.

With the Selection Tool selected, select your new circle shape. Go to File > Place, and find a graphic to place in to the circle. InDesign will recognize that you are treating the shape like a graphics frame, and will automatically change it into one for you. Change the size of your graphic inside the frame using the Direct Selection Tool like we did earlier on.

Our text is currently wrapped around our graphic, instead of our graphics frame. Change it so that it wraps around our frame, and give it an offset of 3mm.

Rotating Graphics Frames & the Images Within Them

There are a couple of ways in which you can rotate a frame in InDesign; either from the control panel, where you have a more control over the precise angles you rotate a frame by, or by using the Rotate Tool, where you can literally click and drag, much like the Transform Tool in Photoshop. Select one of your graphics frames, I’m going to be rotating the frame that contains my black and white Beetle model photograph. With it selected, the control panel at the top contains a bunch of fields, drop-down menus and icons. Locate the Rotation Angle field, and enter a digit, I’ve entered 45 degrees, as seen in the screenshot below.

Frames can also be edited using the Rotate Tool which can be found in the Tools panel. To use this tool, you simply need to select it, and then click and drag around an image. If you’re not sure of the exact degree you want your frame to sit at, this is the tool to use.

Rotating the graphic within your frame is just as easy. Instead of selecting your whole frame, use the Direct Selection Tool to select just your frames content. Once you have selected the graphic, use the Rotate Tool to rotate it within the frame. You can also use the more precise Rotation Angle field in the control panel.

Aligning & Scaling Multiple Objects

It’s always handy to be able to align objects to certain areas, whether it be a spread, a singe page or a frame. I’ve purposely moved one of my images so I can teach you how to precisely center it into the middle of the page. To get your alignment window open, go to Window > Object & Layout > Align.

Select your image with the Selection Tool, and open up your alignment window. We have several options. The first one we need to go to is actually half way down the window, and should default to Align to Selection. Change this to Align to Page.

Click on both the Align Horizontal Centers and Align Vertical Centers to align our frame directly into the middle of the page. By using different drop-down modes (i.e. page, spread, margins etc) we can get different results.

To align multiple objects at the same time, it’s just a matter of selecting them all, and repeating the process. To select them all, select the first object with the Selection Tool, and then select the others whilst holding down the Shift-Key.

We can also group items together to not only align them, but to scale them down (or up), helping to keep everything in proportion with the other elements of the design. Select your two images using the Selection Tool and Shift-Click method, and go to Object > Group. Your objects are now grouped together. With the Selection Tool still selected, you should now be able to rotate, scale and align these items together, using the techniques demonstrated throughout this tutorial. This is especially handy with objects such as icons that are equally spaced, and similar objects.

Conclusion

So there we have it, the end of the second part of the “Getting To Grips With InDesign” series. You should now know how to work with frames, and understand why they are used as much as they are. They offer a quick and simple way to crop and resize images without having to actually edit them in another application such as Photoshop.

We’ll be back soon with part three, which will cover how to import text, and working with typography in InDesign. See you soon!