This is the web log of Tim Bennett, web designer. He also runs Texelate, offering the best web design Leeds, Yorkshire has to offer

Tim Bennett's Blog

Glossy metal text in Photoshop

January 10th, 2008

 

Note: This tutorial is written for Photoshop CS on a Windows XP platform and assumes you have a basic knowledge of Photoshop. However, this technique will work on most versions of Photoshop or similar graphics package.

You are going to make some glossy metal text like this:

glossymetal_19

1. Create a new canvas 85 pixels wide and 45 pixels high with background colour #CCCCCC.

2. Change the foreground colour to #DCDCDC and choose the font for your text. I’ve chosen BankGothic Md BT but most fonts will work (the bolder the better – try to avoid light fonts). Set the font size to 36pt and the anti-aliasing to Strong. Type DQ onto the canvas.

glossymetal_2

3. Add an Outer Glow layer style like this:

glossymetal_3

4. Your canvas should look like this:

glossymetal_4

5. Add an Inner Glow layer style like this:

glossymetal_5

6. Your canvas should look like this:

glossymetal_6

7. Add a Gradient Overlay layer like this:

glossymetal_7

8. Your canvas will look like this:

glossymetal_8

9. Add a Stroke layer like this:

glossymetal_9

10.Your canvas should look like this:

glossymetal_10

11. Right-Click the DQ layer and choose Duplicate Layer… Name the layer to Outline and click OK. In the layer panel drag the Outline layer so it is underneath the DQ layer but above the Background layer. Right-click the Outline layer and choose Clear Layer Styles. Set the Fill of this layer to 0%.

12. Add an Outer Glow layer style to the outline layer like this:

glossymetal_12

13. Your canvas should look like this:

glossymetal_13

14. Add a Stroke layer style to the outline layer like this:

glossymetal_14

15. Your canvas should look like this:

glossymetal_15

16. Create a new layer above the DQ layer and name it Highlight. With the Highlight layer selected hold down Ctrl and left-click the DQ layer to select the layer’s transparency. The canvas will look like this:

glossymetal_16

17. Set the foreground colour to #FFFFFF and select the Fill tool. Fill the selected area of the Outline layer and set the layer opacity to 50% so it looks like this:

glossymetal_17

18. Select the Rectangular Marquee Tool and select the bottom half of the Highlight layer like this:

glossymetal_18

19. Press Delete. It is now finished and should look like this:

glossymetal_19

Tutorial writing guides – writing the right tutorials

January 1st, 2008

The Internet is awash with tutorials for various programming languages and software tools. Some receive thousands of hits every day. Tutorials are a great way to drive traffic to your website and to give something back to the community. One of the best ways to do this is to submit your tutorials to tutorial directories. However, there is a bit more to tutorial writing that putting your ideas onto a web page and then submitting it to a website. This article give you ten hints on the tutorial writing process from the actual writing through to submitting them to tutorial directories:

1. Study the competition

How much originality is there in your tutorial?  Has it been done a thousand times before?  It’s easy to find out – search the Internet.  There’s no point writing what a numerous people have covered already.  Look at the tutorials that seem to have had a lot of traffic – what is it about their tutorial that is so good?  Conversely, look at the unpopular ones – why might they be receiving less attention?

2. Use correct spelling and grammar

This is an obvious point but important one. Poor grammar and punctuation gives off an unprofessional image; a well-written, articulate article on the other hand is much easier to work through. Some visitors may not speak the language the tutorial is written in as their first language so they may be confused by slang and abbreviations.  If you struggle with spelling and grammar ask a friend to proofread your tutorial or run a spell check in some Word Processing software.

3. Let them know what they’re in for

Give the user as much information about the tutorial as possible.  Clearly explain any prerequisites to the tutorial such as any third party files the user may need, platform versions the tutorial is compatible with and software versions it is will work with. Additionally, try to attach a difficulty rating to the tutorial and give them an estimated time as to how long the tutorial will take.

4. Encourage feedback

It’s very important that you get feedback on your tutorials.  Even if you think your tutorial is great it is academic if no one else does.  If possible allow users to post comments on your tutorial without needing to sign into an account.  If you are unable to do this direct them to a contact form or provide an email link – a commenting system is preferable as users will be more inclined to use it. Feedback from users is useful for future versions of the tutorial and for other tutorials you write.  Take the comments with a pinch of salt though – a handful of negative comments do not necessarily mean your tutorial is not very good.  You may be targeting the wrong people; sometimes users even post criticism out of jealously!  Voting systems are also useful but only to compliment your primary channel of contact (voting systems are easy to manipulate).

5. Write step-by-step

Step-by-step doesn’t mean you have to detail every mouse click, it means the process must be properly documented. If you are targeting beginners then hold their hand and walk them through it.  On the other hand if you are targeting the experienced take them through the fundamentals.  If your tutorial is lengthy break it down into pages as well as steps.

6. Include plenty of non-text elements

A page full of text can be boring and very difficult to get through.  Include anything you can to make the page more pleasing to the eye and easier to follow: code excerpts, diagrams, screen shots.  The types of elements you include depend largely on the subject matter of your tutorial.

7. Describe your tutorial properly

Be as specific as you can when naming your tutorial.  For example “Good Effect in Photoshop” doesn’t tell the user anything about your tutorial.  It’s especially pointless if they find it in a Photoshop directory and in the Effects section!  Remember the words in the title of your tutorial are the ones that the search engines and tutorial directories will use to identify it when people search for it.  Ask yourself the question: if I were searching for a tutorial like this what would I enter into the search engine? If the tutorial has a graphical element and requires a thumbnail ensure the image you choose encapsulates the tutorial sufficiently. Finally, ensure you choose the right category.

8. Linking not hosting

Try to avoid websites that host your tutorial rather than linking to it.  You want to make a good name for your website and drive traffic to your site.  It is also important to note that most search engines do not like to see exactly the same content served from multiple domains so you may end up with a duplicate content penalty for serving your own tutorial!

9. Submit to as many directories as possible

Prioritise those with high rankings (go to the site, search for similar tutorials and see what kind of traffic they get) but submit to as many as you can – even if they don’t seem to be getting much traffic. Tutorial directories are visited by other tutorial directory owners and are often networked through affiliate schemes. In the long-term this can build a good name for your site. It’s not uncommon to get webmasters emailing you asking you to add to their site.

10. Keep a submission diary

A submission diary is a list of tutorial directories that details which of your tutorials you have submitted to which websites. The best way to do this is with a spreadsheet – keep your sites down the side and the tutorials directories across the top. Check off which tutorials have gone where. This diary helps you keep track of your progress and also serves as a directory of directories.  You may think you can remember but you’ll find you soon forget. This is important as some directories will reject a tutorial if it is submitted twice regardless of how good it is.

Aged / word photo in Photoshop

August 7th, 2007

 

In this tutorial you are going to learn how to take a photo like this . . .

agedphoto_photo

. . . look worn and aged like this . . .

agedphoto_14

1. Import this image into the Photoshop canvas.

2. Choose Image > Adjustments > Desaturate

3. Choose Image > Adjustments > Levels and drag the sliders to these positions:

agedphoto_3

4. This creates a greater contrast in the image by adding more pure black and white to it. It should look like this:

agedphoto_4

5. Choose Select > Color Range and click on any pure white area on the canvas and set the fuzziness to 50. Click Ok. This selects all the white on the canvas.

6. Double click the Background layer and click Ok. This unlocks the layer.

7. Press Delete. This removes all the white from the image leaving transparent areas:

agedphoto_7

8. Load this image into Photoshop and drag it onto the original canvas and place it in the bottom-right corner. Place it as the bottom layer:

agedphoto_8

9. Select the top layer and choose Edit > Transform > Scale; drag the top-left control point so that the top layer is roughly the same size as the bottom layer (it can overlap a little but it must not be smaller that the bottom image).

agedphoto_9

10. Hold down Control and click the bottom layer to select its transparency then choose Image > Crop.

11. The colour image needs to be made to look old too; select the bottom layer and choose Image > Adjustments > Desaturate:

agedphoto_11

12. Choose Image > Adjustments > Brightness/Contrast and set Contrast to +15:

agedphoto_12

13. Choose Filter > Noise > Add Noise and set Amount to 5%, Distribution to Guassian and check Monochromatic:

agedphoto_13

14. Set the Opacity of the top layer to 75% and set the Blending Mode to Hard Light:

agedphoto_14

Cross browser JavaScript image opacity changing function

July 11th, 2007

This bit of code will let you change the opacity of an image using JavaScript; unlike most scripts it works on Safari and Opera as well as IE and Firefox. Simple send the id of the image and a value between 0 and 100 to change the opacity (0 being invisible and 100 fully visible).

function changeopacity( imageobject, opacity ) {

    var object = imageobject.style;

    object.opacity = ( opacity / 100 );

    object.MozOpacity = ( opacity / 100 );

    object.KhtmlOpacity = ( opacity / 100 );

    object.filter = “alpha(opacity=” + opacity + “)”;

 

}

Hyperspace effect in Photoshop

June 13th, 2007

 

Note: This tutorial is written for Photoshop CS on a Windows XP platform and assumes you have a basic knowledge of Photoshop. However, this technique will work on most versions of Photoshop or similar graphics package.

You are going create a hyperspace effect like this:

hyperspace_8

1. Begin by copying the image below, obtained from a stock photography site, into Photoshop:

hyperspace_1

2. Choose Filter > Blur > Radial Blur – set the Amount to 33, the Blur Method to Zoom and the Quality to Best:

hyperspace_2

3. Choose Filter > Sharpen > Sharpen. Hold down Ctrl and press F twice (this reapplies the Sharpen filter twice). your image will look like this:

hyperspace_3

4. Choose Image > Image Size; ensure Constrain Proportions is checked and set the width of the image to 600px. The height will adjust automatically.

5. Now we will change the colour of the stars. Choose Image > Adjustments > Hue/Saturation and set the Hue to -100. The shifts the colours of the image so it will look like this:

hyperspace_5

6. Right-click the Background layer and choose Duplicate Layer and click Ok.

7. On the new layer choose Filter > Blur > Guassian Blur and set the radius to 3.0 pixels:

hyperspace_7

8. Set the blending mode of the new layer to Screen. You’re finished:

hyperspace_8

Do you need a website or web-related service?
I run an award-winning web design studio.