I’ve been playing with glow effects lately for an upcoming website redesign, and I’ve been noticing quite a bit of work being done with Photoshop’s pen tool and cool lighting effects, so I figured I’d share some introduction to the pen tool itself as well as a glow/lighting technique which can be used in many, many ways with you guys. Sit back, relax, and enjoy another Photoshop tutorial.

Just as a sneak peak, this is what we are going to be creating…

Okay, Let’s start from the top!

If you’ve never used the pen tool in Photoshop before, you are definitely missing out. The pen tool is great for working with vectors as well as creative bezier curves.

Considering the pen tool in itself is usually classed as a intermediate/advanced tool in Photoshop, we will just touch up on the basics so you can get going with this tutorial.

The Pen Tool

The Pen tool has the following five options:

1. The Pen tool is mostly likely going to be the main tool you use. The ‘Pen Tool’ allows you to create straight lines and curves that make up most your paths.
2. The Freeform Pen tool is designed to let you create paths quickly by just drawing freehand with the mouse. The main downside is that it’s hard to create accurate paths and especially curves due to the nature of drawing with a mouse.
3. The Add Anchor Point Tool allows you to insert additional anchor points into your path, basically splitting a line segment into two. This helps you when you have already started a curve but you want to convert this into a more complex shape.
4. The Delete Anchor Point Tool removes anchor points from your path. What happens as you remove an anchor point is that the anchors on either side of the removed anchor join up to form one longer line segment, as if you have just snapped them into a single line. This tool helps you when you have too many anchor points on your path.
5. The Convert Point Tool allows you to convert a smooth anchor point to a corner anchor point, and convert a corner anchor point into a smooth one.

Even though that was a gentle introduction to the pen tool; today, we will mainly work with the Pen tool itself – so create a new document, 460×460 and let’s go! Try to create the following easy curves and lines by following the simple steps.

If you can get these down-pat, it’ll make the next part easy as anything! NB: I have created a little compass to help you with the angles of the curves. :0) Good luck!

If you have made it this far, I’m assuming that you can now make a straight line, a simple curve, and take a curve a little bit further and create a wave of sorts! Well done..

Okay, let’s create a new document, 460×460 and set background colour to black, #000000. Before we get kicking, let’s make sure we have some settings where they need to be.

Firstly, when you click the pen tool or press P on your keyboard you should see the preceding options on the top of your screen. Make sure you select the second option of the three ’squares’ – the ‘Paths’ option highlighted in green above. Then make sure that ‘Pen tool’ is selected, which should be on by default anyway. Finally, click on the down-ward arrow after the custom shape icon; the star-looking icon. This buttom (down-ward arrow) is tool settings, and as you can see there is a ‘Rubber Band’ option.

What’s the Rubber Band option for?

The Rubber Band option is used to help show you where the curve is heading and how it’s looking before you click to set it on the next segment or anchor. This is a good option for beginners because it helps to show you where the path will go next. The Rubber Band option might be hard to begin with, because even when you are done with a curve, the line just ‘follows’ you. Click escape, ESC, on your keyboard when you are done with a curve and that will get rid of the stalker!

Just a little tip – when you are done with paths and this effect, and you want to draw shapes, make sure you select the first of the three squares, or ‘Shape Layers’ and not ‘Paths’. Obviously we can keep ‘Paths’ on for now because we need this option.

So back to your 460×460 canvas with a black background.

Making sure to incorporate a new layer for each object, draw three objects on the canvas, separating them across the canvas if you can. We want to draw what we have just learnt; a straight line, a curve and a wave.

Don’t worry about the foreground colour for now because we will apply layer styles later to dress each one up. So obviously, create a new layer, call it ’straight line’ or something, draw the straight line and then create a new layer for the curve, and another for the wave. If done right, you should see something like below.

If that’s what you see on your screen, well done! Let’s keep going.

Click the brush tool and select a soft round brush, 5 pixels in size – or if you have a later version of Photoshop, simply select the brush tool, (press B), and then right click on the canvas and change the ‘Master Diameter’ to 5px and leave hardness at 0% (obviously! it’s soft, right!). Select white, or #FFFFFF [thanks Hank!] for the foreground colour for now so we can straight away see a result, then click back into the pen tool.

This is the fun part! You might be wondering why we setup the brush? Well worry no longer, we are about to find out why!

[flashvideo filename="http://www.cheb.com.au/wp-content/uploads/2008/04/Untitled.flv" /]

Okay, let’s recap.

If you right click on the paths you should see a ‘Stroke Path’. What this will do is just what it says; Stroke the path you have made using the option you tell it to. Because we edited brush settings beforehand, we choose ‘Brush’ and make sure we keep ‘Simulate Pressure’ ticked. After that, you’ll want to right click again and ‘Delete Path’ because we now have a stroked layer in its place and don’t need the ‘guide’ anymore!

What exactly is simulate pressure?

Simulate pressure simply gives the curve a more realistic stroke. It does this by tapering-off the ends of the curve/line as if the pressure has started off light, and then eased-off on the end of the curve. Trust me, you want to keep this selected – it makes everything look much better!

Okay, if you followed the video, you should now have something like below.

Cool hah? Okay, let’s get some glowing happening.

If you apply the following Layer effects to your now-stroked paths, your glow should start forming.

When you select the above layer styles; if the paths are all on one layer (even though we talked about splitting them up before), as an example, should start looking something like this:

Cool hah?

Quick Tip 2.0

If you want to make your life easier, you can click the “New Style” button as seen in the above Layer style selection screens; immediatly under ‘Cancel’. This will let you clone all the settings that are open on the current Layer style screen to be used on another layer/path, etc. When you want to re-use the settings, go to: ‘Layer > Layer Style > Blending Options’, click on the ‘Styles’ tab, on top of ‘Drop Shadow’, and ‘Inner Shadow’, etc – and then select your new style from the list; press ‘OK’ and you’re done!

So there you go! Experiment with your curve, brush master diameter and type, and also your lighting (fill/layer effects) and you could come up with something like below…

So there you go people, hope you learnt something about the pen tool today and some effects you can create using stroke paths.

Enjoy and drop a comment if you liked the tutorial or you need something explained – or feel free to share it with your mates. Get on the RSS Feed to keep up to date about when I next post!

Thanks for reading, Cheb.

No, really – What makes a great website?

That really is the million dollar question. Many people have tried to tie this down to mitigating factors – but at the end of the day, in my opinion – a great website is one which meets the following rules:

Content

Content is easy to find

It’s simple – if a user can’t find information they are looking for, they have no reason to be on your site. You need to make sure content is easy to find; and in a variety of ways. For example, on Cheb 2.0, you can search the site for any keyword which will return a list of matching articles/posts, or you can click on ‘Archives‘ menu here on Elastique’s blog to show every article posted sorted by date. Further to that, there is a tag cloud to search by keyword or a direct link to each month with the number of posts that were published during that month.

You might be wondering why I have left that as a way to search for posts? Well, in essence it was a really easy decision. Not only does it just add another form of search – but there are times when monthly archives make sense. For example, if a website regular was to go on holidays for 2 weeks in one month and then come back to your website next month, all they want to see is what they missed out on – and this is where monthly-archiving achieves a sense of purpose.

Besides, my reporting/stats definitely show people are using it! 172 uniques can’t be wrong, right?

All in all, make sure you take every step you can possible to make sure the user experience is a good one; allowing them to find content easily will definitely help that endeavour.

Original and fresh content that brings people back

Elastique has lots of RSS subscribers. I’m a huge advocate of RSS feeds! It means people can stay in touch with your website/blog/online endeavour and not have to worry about constantly reloading for new content. On the flip-side, it’s that new content that keeps people coming back. Whether or not they actually physically click on your site to see it, or read it through their RSS; they are still a visitor and they still have to be tracked!

Google itself considers the freshness of a link a massive importance when determining PageRank and relevance. Make sure you set yourself a blogging/posting/editing schedule and follow it to the best of your ability! SEO-wise, make sure you keep your homepage fresh and beaming with new content – but importantly, do not neglect your inner pages as well.

When I say inner pages, I don’t mean to go back and worry about a blog post you did 10 months ago; we’re talking about your ‘About’ page, or your ‘Services’ page! Keeping those integral pages fresh makes sure: 1) they don’t fall into supplemental results, and 2) Google and other search engines show you some love for those pages too!

Aesthetics/Look and feel

The website is physically appealing to look at

Let’s face it – the only reason people still visit UseIt – Jakob’s usability portal is because of his tremendous advise. No one is going there to admire his website design!

Unless you are an online giant who already has a user-base that will never deplete, i.e. Google, (who when you think about it has great website design because it’s fit for purpose) – you really need to make sure you look into your website design. It doesn’t have to be glitzy and glow; just appealing to look at.

I mean you might have people looking at the screen whilst browsing your site or blog for more than 5 minutes on end (or you hope, anyway!). Do you want them to not come back because they found the site looked a little too 1998?

I’ve seen numerous websites my friends have set up with an amazing idea, or great content that have simply given way due to the in-assurances that come along with badly-designed websites.

Things are where the user expects them to be

This is an important one. If you can’t get your website to look ‘amazing’ – meet the user half way and at least promote a sense of structure and conformity. You need to make sure you set out your page elements to be where the user expects to see them. Unless you are going for an ‘outlandish’ theme or look which you are trying to get noticed for [i.e. Cheb 2.0] – make sure you take into consideration what I’m going to call the ‘6 section grid model for website layout’.

As you can see to the right [click to maximise], web users are now confortable with the following grid on many websites. Unless you are trying to break the Interweb apart [laughs] – make sure your logo is on the top-most left section of the website. Same goes for your site search (if any) and top-level navigation.

You might be thinking – but why doesn’t Cheb 2.0 have navigation directly to the right of the logo? Obviously that’s not the point I’m trying to make. My navigation is easily recognisable, as well as still sticking to the top right section of the page. Please keep in mind these grids are only meant to be a guide and are not meant to be followed to the ‘tee’.

As long as content is easy to find, sections are split into bite-sized chunks of similarly-grouped information, and your content area is the most-prominent section of your layout, you should be good to go!

Consistency in colours and scheme

Make sure you try to keep everything consistent! Colours, headings, everything! Sometimes plugins, and other things like Google ads might not help you because they only allow you to change certain bits of detail. Don’t let that stop you from making sure everything that is in your power is consistent. There’s nothing worse than 43.5 different types of link styles. You don’t want one link to have an underline, one not!

Consistency above all means that users find it easier to connect to your website and also get more a feel for how everything works and what stands for what – e.g. links.

User-centered

Usability and accessibility is practiced

This one is important for many reasons. Check that you have taken adequate steps to enhance the usability and accessibility of your website. If you have forgotten the difference between accessibility and usability, check out ‘10 reasons to justify a website redesign‘. I will be blogging in more detail about accessibility more than anything else in a future post – but for now, a little teaser:

Make sure you check how your website, and more importantly, links – look to someone who suffers from varying degrees of colour blindness.

For example, the thumbnail on the left shows how Cheb 2.0 looks to someone suffering from Protanopia (Red-Green colour blindness).

You might think that checking things like that are ‘way too left-field’ – but something as simple as this can be checked in 10 seconds and can mean the difference between someone with colour-blindness not being able to distinguish between your linked content and non-linked content! You still thinking it’s not worth it?

If there was anything I could do to give everyone equal chance of viewing my content/website or what I had to offer – then of course I’m going to do everything in my power to achieve that!

Look carefully at the link colour on “Continue reading Facebook launches chat toolbar. Now they’re talking!”. Notice how it’s already changed from the real, default colour that non-colour blind people should make out?

The user always has an opportunity to right their wrongs

Make sure there is always a way out for the user. A top navigation, side navigation, search and links back home are great players in this field. No matter how good your website is, there will always be users who get lost along the way. Depending on the type of site you are running, you might want to try the Hansel and Gretel tactics of ‘breadcrumbs’. Whatever you choose, make sure the user has ways to right any wrongs they create along the way getting them off-track!

Meaningful file names

This isn’t only great for SEO; it works wonders for the user experience. The address http://www.cheb.com.au/what-makes-a-great-website/ is a lot better than http://www.cheb.com.au/index.php?pageid=283&level=2. I mean it’s not rocket science! Make your URL’s as easy to follow as possible. I should know what the link is about before I even click it! Cloaking or hiding information in strange URL’s kill the user experience and kill user-confidence in your website. Don’t do it!

Site architecture

Logical site structure

Make sure your website structure makes sense. Top-down, there should be a logical flow. The header should come first, followed by navigation (if not already part of your header section), followed by the content with any sidebars or side-navigation, and ultimately followed by the footer of the page.

Footers are just as important as headers. a good footer helps the user determine if the page has fully loaded. If the user doesn’t see what they are used to seeing at the base of your page, they should know that the page has not fully loaded yet; bet you didn’t think about that one!

Folksonomy and taxonomy

Tag your content as much as you can. Tagged content means related content. Try to relate articles wherever you can. It doesn’t have to be a ‘Related articles’ or ‘related posts’ section. It could be as easy as linking the user to relevant articles/web pages based on the current content of the page. Don’t just link-out for the fun of it – or to get more hits!

The way you classify and connect your information is just as important as the information itself! Keep that in mind when you are writing your next article or designing your upcoming website.

Purpose

At the end of the day, if there is no purpose to your website, then it won’t survive for long. Find a niche if you can and tackle it. if you are dealing with something that is ‘way beyond your marker’ or something which is totally hard to place yourself in; whether it be ‘Web design’ or ‘Get rich quick schemes’; the process is the same: find a reason to bring visitors back for me! Whether it is super-cool, fresh, relevant content, or a cool flash game that people just can’t get enough of!

Everything you create online should have an ultimate purpose to succeed!

Tracking and reporting

Finally, great websites learn from their mistakes! Use tools such as Google Analytics to help you determine popular and not-so-popular sections of your website. See if you can get down to the reason why ‘x’ is not as popular as ‘y’.

Good webmasters compare pages that work and don’t work and will simply weed-out or unpublish something which just isn’t pulling in the visitors as it did before. Great webmasters/designers will isolate the page and find out WHY it is failing.

Did you recently put some plugins such as text-ads or any other plugins which may have affected that page? Is there even a way to reach that particular page from other prominent sections of your website?

Put it this way: articles which you may have written 12 months ago, may become tomorrow’s most popular article online! History can and does repeat itself. What was last year’s news may, for whatever reason become popular again. Do not unpublish articles or remove pages simply because ‘they are getting too old’ or ‘you are running out of space’. Get more space!

There you go guys – another one bites the dust. Hopefully these articles/tutorials are hoping you achieve the best you can out of your website and online experience. Please digg/stumble this post if you enjoyed it and subscribe to the RSS feed to keep updated.