This tutorial will teach you how to create a roguish design for your site, whether it is web, sport or miscellaneously based. We recommend that the users have some basic knowledge of Photoshop, and that they know how to use things such as the the toolbox.
1. Open a new document of size 400×400 pixels. Ensure that your background colour is set to black -#000000. Now set your foreground colour to #404040. With this done, insert a vertical gradient from top to bottom using the ’Gradient tool’. The image below should help you to understand this.
2. Now lets add the logo. This is a nice and simply logo to use, as it’s a Photoshop default. Before you try to locate it remember Whenever working on an image, always ensure that you create a new layer before making any alterations. To locate the logo, right click on the Multiple Polygon tools, and select ’Custom Shape Tool’. From this select the shape, as seen above, and using the settings below, paste it into your work in the middle of the canvas, at the size of the image below. If this has confused beginners, do not be alarmed, as we have supplied an animation to go with this instruction.
—————————————————————————————————–
3. Once you have created your logo, duplicate the layer containing it, so that you now have 2 layers on top of one another, exactly the same. Your image should now look something like this.
4. With your bottom of the 2 logo’s selected, go to filter > motion blur, and apply a horizontal blur of size 500 pixels. Your image should now look very similar to below.
5. Now you need to add your apply some extra touches to your top, un-edited logo. Right click on the logo layer, and select ’Blending Options’. From this, apply the following settings.
6. Once applied, you should have a smooth outlining around your logo, with the inside containing a light gradient. Your image should now look like this.
7. Now to add the text. This is where you may want to add your own content. You may also, want to vary the colour scheme used in this tutorial. We have used blues, but you may instead want to use Reds, greens or any other variation. You will need the font ’Das Reight Gut Regular’ to do as I have, and you can download it, by simply clicking here – courtesy of DaFont. If you do not know how to install fonts, click here
8. Select your font, of size 45pt. We suggest that you print small words or initials, for best results (EVO-X = Evolution X). Try to change the colour for each letter to give off a nice result. If you are, as I am, choosing a blue color scheme, vary the brightness of the blue each time, to give off a nice result.
9. Now we will begin to make the lines. Select the ’Line Tool’ from the toolbox, and ensure that it is selected to 1pixel width. Change your foreground colour to white #FFFFFF, and draw a smooth line, on a new layer, below your text.
10. Create a new layer, and select the line tool once more, and make a line with a 1 pixel gap, below the first one, only now make the line #8E8E8E.
11. Create a third line using the same techinque as steps 9 and 10, but this time make the line colour #4D4D4D. Your image should now look something like below.
——————————–
Creates
——————————–
12. Now we are going to add the scan lines. Due to frequent personal asking of this, we have recently made a quick tutorial on the subject. If you already know how to create scan lines, please do so on a new layer. Beginners can click here to find out how to create them.
13. Now we reach a stage were some users may want to end with their result as it is. Other enthusiasts can follow the next stages to adding animation to your logo. If you end now, you may wish to add in a little slogan at the bottom of your document. We suggest using PixelCarnage Mono, with a font size of around 10pt.
Final non-animated logo—————————
——————————————————-
14. If you continue with us, please download the above font as well; you will need it for the animation.
15. Switch to ’Image Ready’ using the button on the toolbox.
16. Once in Image Ready, ensure that the ’Animations’ box is open. If it isn’t in view, go to ’Window > Animation.
17. We suggest that before you begin creating your animation, you create the text messages you wish to use. Use the font ’PixelCarnage Mono’ – above, in size 10pt, and ’Aa’ selected as – smooth.
18. Once you have created your text, duplicate the
layer, so that you have 2 text layers.
19. With the bottom one selected go to Filter > Motion Blur. When prompted to ’Raterize’ the layer or not, select yes. Then use the settings below, on the provided picture.
20. Your image should now look like this – below.
21. Now create another string of text and repeat the process so that you have the ability to make you canvas look something like below.
or 
—————————
If all layers (in my case, mode and demo) are showing, your canvas should look something like below.
22. Now in the animations box – shown below – click the ’duplicates current frame’ button. You should now have 2 different frames.
23. With the first frame selected, de-click the 2nd text (with the blurred text as well, so that you would be, in my example, left with only demo). Then select the 2nd frame, a de-click the ’Demo’, to leave only mode.
24. Once you have done this, hold shift and click on both frames to select them together (windows users). Then click the ’Tween’ button – below.
25. As you click this, a box should appear, and apply the same settings as below.
26. Then click the play button on the animations tab – below.
Your result should be, as below. As you can see the result is not quite to perfection.
27. Now we are going to command Image Ready to stop when it reaches the end and the beginning. Where the Frame Displays ’0 Sec’, click on it, and select ’other’ > ’3 seconds’. – below.
You have now learnt how to blend text into animations with Image Ready. You should now have this result.
At the end of a text animation, remember to blend the last frame with the first to make the animation run smoothly. This can be seen below
With this new learnt skill, you can create you animated slogan text underneath your logo to produce a final image similar to this – below.
Copyright @ EvenICouldDoIt 2007
Dear friends i need your help . i am in the process of developing a website for sites contact page i need email contact form. people can submit their name and email and can send me comment,when they submit form on site i can get it in my emial. query etc. pls help me that how to design such form.
Thanks and Regards
vikas
[...] 2. Ensure that this new document has no background, so that it look like the pictures above. Next on a new layer add some ’scan lines’. If you do not know how to create scan lines please open this link in a new window ’ click here. [...]
Thanks a lot….
Very nice tutorial…