How To Make Thread Desing

I had some time today so I made another how to Thread Design tutorial but this is a little more complex. I spend a lot of time on my tutorials, so please comment and tell me what you think!

Details:
Difficulty: Intermediate with some advanced techniques
Time: Varies-- Generally 30 minutes and up

Final Preview : here

How to make animated signature like this:


Requirements:

Photoshop



Welcome to my tutorial on How to make an animated signature just like the one shown below! In this tutorial you will have the knowledge on how to make a simple gif and how they're created. I will go in depth as to what you will need to do in each step and provide clear screenshots and indicate where everything is in each step.

In this tutorial I'll show you how to make a simple shine on text like shown below.




1. Create a new canvas and put in the words you wish to make shine, for this tutorial I'll be using my name. For anyone wishing to know my font it is Lobster.




2. Next create a new layer and call it Gradient, this is what will make your imagine look like a shine is going over it.




3. Next head over and select the Gradient tool over on the side. If you cannot spot the tool it can be hiding behind the bucket tool so go over to it, right click it and select the Gradient tool.




4. Next head to the top of the page and you should see a little Gradient display of what Gradient you currently have, we need to change it so double click on it to open up the Gradient Editor menu.




5. Now that you're in the Gradient Editor menu, go down and double click on the arrow along the bottom and on the LEFT side (Red Circle), for this tutorial I will be making it white but you can make the colour anything you wish. Once you've chosen your colour, go to the top right of the box and select that by clicking it once (Blue Circle), you should see a menu along the bottom and a box that says Opacity, change that to 0%.




6. Once you have done that, now select your Gradient layer and go from the left side of the canvas and go in about 1 cm, do NOT go across the whole canvas.




7. Now that you have your gradient, go over to your Gradient layer and duplicate it by right clicking the layer and selecting "Duplicate Layer"




8. Select your Gradient copy layer (Green Circle) and press Ctrl + T (Blue Circle) and head up to the top menu, change the degree of the first box to "-180" to make it flip (Red Circle) and then press the tick to save changes.




9. Now move your original Gradient layer over and put it up against the other Gradient so that they touch and make a fade in and fade back out effect like show below (Red Circle). Once you've done that right click your Gradient copy layer and go Merge Down (Blue Circle), MAKE SURE YOUR ORIGINAL GRADIENT IS UNDER THIS LAYER.




10. Once you have your two gradients in one layer, go down to your layers, hold the Alt button and put your mouse in-between your text layer and the gradient layer and click and it should clip like so. You'll know if its worked if your gradient is now only inside your text (Blue Circle) and that there is an arrow pointing down to the layer underneath (Red Circle)




11. Now that everything is ready you'll need to be able to view your Animation bar, by default you shouldn't have this on but if you do skip this step. To see your animation bar, go up to "Window" and click on "Animation", a bar along the bottom should appear as shown below.




12. Now the fun part, move your gradient so it isn't sitting inside of your text but right next to your text so it is ready to move. Once you have starting point, press the paper icon similar to the one when you create a new layer (Red Circle) to make a new frame, now with your gradient selected and the move tool selected, hold your right arrow key for about each second and keep making a new frame after each movement. Don't make them too big or else it won't look realistic enough. If you don't want it to keep looping, add about 5-10 extra frames at the end so it stays normal for a little bit.




13. Now since gifs don't allow transparent particles around images, we'll need a background colour, make sure it completely fits the area in where you want the gif to go, for this example it will be inside this thread, take a screenshot of the thread area, open it up in Photoshop and copy the colour and make that colour the background of your gif. In the end you should have around 30 frames if you followed everything I did and 3 layers, Background, Text and Gradient.




14. With everything complete go up to "File > Save for Web & Devices". If you wish to know what my settings are they're shown below, make sure you have selected GIF and select save. Select the Format as "Images Only" and make sure when you save your file you add .gif on the end. For example Sir.gif so it saves as a gif file.




You should now have a fully functional animated signature! Just upload it to an image sharing site such asthis to see it live and upload it to a forum or set it as a signature. Using this exact same method you can do a whole heap of other things such as making normal text go from normal and slowly blurry and back to normal, be creative make things disappear and reappear! Thank you for using this tutorial and any feedback would be great!

Creating Your First Website Design In Photoshop!

What We'll Be Producing
Large image:


Things You'll Need

Mandatory:

An editing program (I highly advise using Adobe PhotoShop CS2 or higher versions to follow along)
To be able to read material of the English language

Optional:

Creativity
960 Grid System
The Source File

Explanation of the 960 Grid System

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.
The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.

In Layman's terms, 960.gs is a guideline to make sure to keep your whole design in organization.

Preparing Your Design

Before you begin actually designing a website, it's good practice to actually draw it out first, or produce it as a rough draft.
This technique is coined as wireframing, it puts down a foundation of your design before you put countless hours of work into it, so that you can spot out what you should add in and cut out!

From the above diagram, you can see that this is what many websites look like.
It has a logo at the top right, a navigation bar to the right of it, below this there is all the content of the website, and finally below the content there is a footer.
It's good practice to include these three things in all of your designs.
The wireframe I started off with looks like this (and yes, it doesn't have to look pretty, at all).

Time To Design

I prefer to work from top to bottom, so lets go with that for this tutorial.
First of all, we need to create the header.


Make a #ff7132 rectangle however wide your canvas is (my canvas is 1200 pixels wide) and the height of this container will be 450 pixels.


After, let's put in our logo and navigation text so that our users can flip through our other pages.


Lets add in some text to draw our traffics attention to some type of graphic process we are advertising.


As you can see there is a lot of empty space on the right, so lets throw in a picture to go with the text on the left.
This is very crucial, as this can make or break your page. These images need to match the mood of the rest of the webpage, and correspond with the content.


Adding In Content

Now that we have the header built, we need to add in some content for our viewers to learn about who we are.
On this particular design, I took the easy way out for times sake and split the 12 columns into 3 separate columns of 4, and this is a very simple and bold effect.

Here is what we are going to reproduce

For times sake, I'll explain what this is composed of.
This is three columns have a separation of content, but are structured nearly the same, each column is 300 pixels wide (add 60 pixels from gutter space in between all three columns and that will lead you with 960 pixels).

They each compose of: An icon, to portray a certain trait or characteristic event about the below content, header text, to identify the above picture and foreshadow the content text below, and the content text, to explain that particular section of information.
Repeat this process three times, and you have your content for the page!

Additional Content

This is an optional step, but I went ahead and did this for those of you who may be more interested in this tutorial.
I added in a website description area, and a monthly newsletter form area.
Many websites choose to have these on their website as well, or place them in the footer area.

Both columns are 460 pixels wide, and there are only two columns instead of three this time, this equals out to 940 pixels in width, with 10 gutter pixels on each side to leave us with 960 pixels (see where it all comes into play?)!
I shouldn't need to explain how this is done, but if someone needs me to, I'll replace this text with the process of it.

The Footer

The footer area is the area where viewers will reach after the content of the website is all browsed over.
The footer can redirect the view to other pages of the website, inform them of some crucial statistics, or may some external links, the choice is up to the webmaster.
However in the footer we are creating today, it will contain some links as there are above, and a new link "The Team" replacing the "Portfolio" link.

My footer is 100 pixels tall, and of course, 1200 pixels wide.

Final Result


Side Note

This tutorial was designed to help out those who aren't familiar with the program make a sleek and easy approach to a well-thought design.
This isn't a programmed version, and you don't have to follow my color scheme is you don't choose to, I encourage you all to try something new and different!
I took a lot of time to design this website design and tutorial to put you one step further into designing than you were, the least you can do is private message me saying thank you, or writing on this thread telling me what you might have learned from it.
Also, post your results here or on a separate thread so I can see it.
Here is the source file of the website design I designed, for those of you who want to use it to learn more in-depth or see how i structured everything together

Photostop Tutorial #1

TUTORIAL #1


how to make signature like this?

First off if you want to replicate this image you will need 2 things, the first thing is the font used and the second thing is the image used. I have put both of these into a zip folder for you. You can download the .ziphere.Now that you have those things we can get started. Just follow these steps and you will be fine.

1. In photoshop click File-New2. Set the dimensions as follows. Width 450. Height 175. And set background contents as Transparent.3. Now make another layer. You can do this by holding Shift+CTRL and pressing N.

4. Once you have 2 layers you will want to make layer 1 a dark color, I use the color of HF grey because that is what my signature was made for.

5. You will want layer 2 to be your image layer (when I say image I am referring to the picture contained in the .zip folder I provided for you)

6. Make sure Layer 1 is selected and click the text tool. This will create a new text layer on top of layer 1. 

7. Using the font in the .zip you can create the text you want, I used iEchO.

8. After you have the text you will want to double click the text layer, this will bring up the “Layer Styles” window.

9. Check the box next to “Stroke” and check the box next to “Outer Glow”

10. Now click on Stroke, and set the size to 1 pixel and the color to white.

11. Click Outer glow and set the color to white. After this click “OK”

12. Right click on Layer 2 and select “Clipping Mask”

13. At this point you should have your text with the nova image inside of it with a grey background.

14. Now you can create a copy of layer 2 and move it under your text image but above layer 1.

15. Change the opacity of layer 2 copy to about 40-50% 

16. Now use the eraser to adjust layer 2 copy to look how you want it to.

Your layers should look like this.

Now Just hide or delete layer 1 and save as .png.

If you followed the steps correctly it should look like this.