Post by ::Ellen:: on Sept 27, 2006 1:37:39 GMT
This is a too long tutorial and In This Tutorial, we are going to make a Tech Logo with the Manu and its buttons set together.
For this job, first wee need to create a New Document in our desired size, the size, which we like, our logo be in, we should choose the wide similar to our forum wide.
For example, here I have chosen 750 as wide and 200 as height.
Then we need to create a New Layer on it and then start to create basic shapes on it.
For this job, you need to choose Rounded Rectangular Tool from your Photoshop Toolbar and create a Rounded Rectangular like mine:
Image
Now again create a New Layer, again choose Rounded Rectangular Tool, and create another smaller rounded Rectangular in the left side of the bigger Rectangular.
Image
Now, go to Menu, Edit and from there choose Transform Path and then Skew. Now try to deform your shape like mine:
Image
Now until here, we are going to add effects on both Rectangular which we have created before. First, choose the first Rounded Rectangular shape layer and add these effects on it gradually like me:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
Effect 8
(To add effects, Double Click on the Layer, then a box will appear to you, and then start adding effects like me)
Now you should have something like this:
Image
Now you should add all those effects again on the second rectangular layer. For this job, you can Right Click on the bigger Rounded Rectangular Layer and choose Copy Layer Style, Then another Right Click on the Smaller Rounded Rectangular Layer and choose Paste Layer Style.
Now you must have something like this:
Image
Now, we are going to add other parts. First, we work on Bigger Rounded Rectangular shape. First, create a New Layer and then choose Rounded Rectangular Tool from your Photoshop Toolbar, and create another Rounded Rectangular like mine:
Image
Now add these effects Step by Step like me again on this New Rounded Rectangular. First a right click on the New Rectangular layer, an effect box will opens to you and you need to add these effects on it:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
Now again create a New Layer, Then press CTRL and choose this new Rectangular layer to make it selected like this:
Image
Now, is the time to adding Brushworks on the New Layer, which you have created before. Choose Brush Tool from your Photoshop Toolbar and add Brushworks like mine:
Image
I have used d31 Brushes, which I have downloaded from Deviantart. Now go to Menu, Image and from there Adjustments and then choose Hue and Saturation and choose this format and numbers like me:
Image
Now you must have something like this:
Image
Now your Rounded Rectangular Layer is selected yet, you must choose your Brushwork Layer and go to the Menu, Edit, and choose Stroke.
Now you need to add a dark Stroke in 2A2A2A color, Outside and 1px size, and then click on OK.
Now you must have something like this:
Image
Now create a New Layer again, and choose Rounded Rectangular Tool from your Photoshop Toolbar and create a little Rounded Rectangular and use Skew on it to make it fit with the smaller Rectangular like this image:
Image
Now add these Effects Step by step like me on this new rounded rectangular, Right Click again on the new rectangular layer, an effect box appears to you, now add effects:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 5
( Color = B7E1F7)
Effect 6
Now you must have something like this:
Image
Now create a New Layer again, we are going to make a shape like a pipe between Bigger Rounded Rectangular and Smaller Rounded Rectangular.
Now create a New Layer and then choose Rectangular Marquee Tool and set its Feather to 5 px and create a square and fill into it with black color. Choose Paint Bucket from your Photoshop Toolbar and then fill into it like this:
Image
Choose that Rectangular Marquee Tool again and create another square like the image and then Press DEL on your keyboard like second image:
Image 1
Image 2
Now change the Feather of Marquee Tool into 0px again and create another square like this image and press DEL on your keyboard like second image:
Image 1
Image 2
Again create another square like image 1 and press DEL on your keyboard like image 2:
Image
Now you must have something like this:
Image
Duplicate your layer and then create another new Layer on it.
Now you need to choose Brush Tool and choose Rounded Brushes and set its size as 5 px. Then start to adding these lines on a New Layer. Like the image:
Image
Now choose your First Duplicated Layer, the First Cuted Square Layer and press CRTL on your keyboard and then Click on Your New Layer which you added lines on it to make it selected. Then Press DEL on your keyboard.
Now you must go back to your First Cuted Square Layer and add these Effects on it Step by Step:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
Effect 8
Then choose the Duplicated Layer and press CTRL on your keyboard and then Click on it to make it Selected and then choose Paint Bucket From your Photoshop Toolbar and fill into it with your favorite color, here I have used a light blue.
My image after adding effects and colors is like this:
Image
Just after all works I have explained you at the top, you can work on the pipe yourself and make it well groomed and match with your other parts of header.
Now here we are going to add a text and some objects on the bigger Rounded Rectangular. How about some circles?
For this job, first create a New Layer, then start creating a tiny circle by using Ellipse Tool from your Photoshop Toolbar :
Image
Now you need to add these Effects on your Circle Layer step by step like me:
Just double Click on the circle shape layer and then an Effect box will appear to you, now add effects:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Now you must have something like this:
Image
Now first create a New Layer, then choose Ellipse Tool again from your Photoshop Toolbar and create another circle but this time in a smaller size:
Image
Now again, double click on the layer and add all previous effects, which we added on the bigger circle, here, also you can do something different.
First a Right Click on the bigger Circle Layer and choose Copy Layer Style, then a Right Click on this new Smaller Circle Layer and choose Paste Layer Style.
Now you must have something like this:
Image
Now you need to create a New Layer, then choose Ellipse Tool from your Photoshop Toolbar again and create another smaller circle to complete the decoration.
Here again you need to add all previous effects on the smaller circle. After that you must have something like this:
Image
Attention! : all these Decoration which I have added, is something for example, you can add your desired decoration on your logo. Also you can choose your favorite colors. Here I just like to show you how you can assemble objects and use effects and brushes to create a logo. All is just for example.
Now is the time to add your Forum’s name on your logo. First create a New Layer, then choose Text Tool from your Photoshop Toolbar and add your text on your logo. Here I have chosen Mingle Font you can download from Dafont and its size is 36.
After creating your text, now is time to add effects on the text. Text effects are completely up to you. Here I have added these effects on my text, you can add on your text too:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
Effect 8
Effect 9
Now you must have something like this:
Image
Now create a New Layer again and add a text or something you like on the smaller Rounded Rectangular. Here I have added a text.
When you added the text, you can add your desired effects on it, just Remember here because of the animation which we are going to have on this text, wee need to have a Color Overlay Effect. In the first Text, I have used This color code 03F9F6 as Color Overlay Effect. Now you should have something like this, just remember your effects maybe are different from mine. Just Color Overlay is the same:
Image
Now go to Menu, Layer, and from there choose Duplicate Layer, now you have another copy from your Second Text Layer. Go to this New Duplicated Layer and there, choose Color Overlay from Effects in Layer Palette and double click on it, now you need to change the Overlay color into another color, For example here I have chosen FFFF00 color, or Yellow color as Duplicated Layer Color Overlay:
Image
Now Create a New Layer and then choose Rounded Rectangular Tool from your Photoshop Toolbar and create a tiny Rounded Rectangular like mine:
Image
Now here you need to go to Layer Palette and choose the Small Rounded Rectangular Layer and right click on it, choose Copy Layer Style. Then come back on your new Tiny rounded Rectangular Layer and right click on it and choose Paste Layer Style.
By this job, you must have something like this:
Image
Now go to the Menu, Layer, and from there, choose Duplicate Layer and create a copy from this Tiny rounded Rectangular and then move it to another corner of your banner by arrows on the keyboard.
Now you should have something like this:
Image
Now it’s the time to add animation on our logo. Send your image to ImageReady, now there you need to first turn off the eye beside the duplicated layer:
Image
Now go to the Animation Palette, Set the time on 0.2 and delay forever. Now create a new Frame and then go to the Layer Palette and now turn on the eye beside the duplicated Layer. Now your animation is ready, you can go to the Menu, File, and from there choose Preview in Browser. Now you can see your image in the Internet Explorer Window.
Its time to save your image. If you like you can add more decoration on your logo, but here, because its just a practice, I’m going to save it here in Image Ready.
For this job, you need to go to Menu, File, and then from there choose Save Optimized As, and save it as gif image, (Animated Gif)
Here you have finished your job on the logo, and now its time to start creating menu and its buttons.
Here something is really important for you to make your menu and its buttons completely match with your logo, you must remember the size of the space between two tiny Rounded Rectangular. You can find it by using ruler in the photoshop. If you like to see Ruler in your Photoshop page, you need to press CTRL+R on your keyboard, now Ruler appears on your Photoshop page.
Now you need to right click on the ruler and there choose Pixels and by this way, find the size of the space between tiny rounded rectangulars.
Now we are going to make menu and then its buttons. For this job you need to create a new document in your forum wide size. Here I have chosen 750px as wide and 80 px as height.
Now first you need to create your menu butoons background in the size of the space between tiny rounded rectangulars in logo just you need to create this shape a few bigger than this space to make it match with your logo.
Here first create a New Layer and then choose Rounded Rectangular Tool from your Photoshop Toolbar and create a Rounded Rectangular from 50px on your Ruler to 450, and then add it all Effects which you have added on the bigger Rounded Rectangular when you was creating the Logo, also you need to move it a few to the bellow and let a few free space at the top for decorations. Now you must have something like this:
Image
Now it’s the time to add some Decoration on your Menu, remember here we need to add this menu to the Logo, for this job, we need to make pipes like which we created to connect Bigger Rounded Rectangular to Smaller Rounded Rectangular.
Then create a New Layer and create pipes again, here you can create a pipe like image and then duplicate both its layers and move them to another side to have something like this:
Image
(Put these pipes by using ruler on 51 and another on 410.)
Now your menu background its ready, but if you like you can add some decoration like this images on it as your taste:
Image
Now your menu background is ready. If you like to have PM bar also, you can create something like menu bar but a few smaller, beside menu bar for PMs. Also you can attach it to the logo by adding pipes or something like on this.
Also you can use your Smaller rounded Rectangular as your Pm bar. All of them is up to you and you can make it yourself by your taste.
Now here you have menu and logo and just need menu buttons match with your menu bar. For this job you need to use , menu bar background and create buttons from that background, when you saved you menu, let it be open and now start adding your menu buttons texts on the menu background first like this:
Image
Now you must choose Crop Tool from your Photoshop Toolbar and Crop them one by one:
Image
After Crop, you will have something like this:
Image
This is your Home button. Now you can save it. If you like to have Rollover menu buttons, you need to save it as Home_off.
Now to creating next button, you should first press CTRL+Z on your keyboard to undo your action, now choose next button to Crop:
Image
And about all other buttoms you need to repeat all previous actions. And remember to save all of them “Button_off” if you like to have Rollover menu buttons.
When you finish your work on all your buttons and saved them, you need to make your ON buttons for your Rollover form.
Open your button. Then go to Menu, Image, and Adjustments and from there choose Hue and Saturation and set the setting like mine:
Image
Your ON button is ready, now you just need to save it as “Button_on”
And you must do this on all other buttons to create your ON buttons.
Finally, this job has finished and now you have your logo, menu and its buttons completely match together.
Just you need to put them by their codes in your forum. Please for any questions, post here, also if you need more explains about a part in this tutorial, post here I will post here for you more explain.
Now I just made this tutorial as a sample for you to show you how you can make a tech logo and menu and its buttons.
I will post another tut here for you about making Pipes in several forms and styles, to show you how you can make Tech Pipes and add on your logo and somewhere you like. Also here I have choose a white background to show you everything better, you can choose your desired color for the background.
Enjoy!
and it will be your banner and menu with a button after you added into your forum.
Final Image
here maybe I have some faults because I have made it so hotfoot. please if you see something wrong post here, Ill edit it
thanks
Created By Ellen
For this job, first wee need to create a New Document in our desired size, the size, which we like, our logo be in, we should choose the wide similar to our forum wide.
For example, here I have chosen 750 as wide and 200 as height.
Then we need to create a New Layer on it and then start to create basic shapes on it.
For this job, you need to choose Rounded Rectangular Tool from your Photoshop Toolbar and create a Rounded Rectangular like mine:
Image
Now again create a New Layer, again choose Rounded Rectangular Tool, and create another smaller rounded Rectangular in the left side of the bigger Rectangular.
Image
Now, go to Menu, Edit and from there choose Transform Path and then Skew. Now try to deform your shape like mine:
Image
Now until here, we are going to add effects on both Rectangular which we have created before. First, choose the first Rounded Rectangular shape layer and add these effects on it gradually like me:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
Effect 8
(To add effects, Double Click on the Layer, then a box will appear to you, and then start adding effects like me)
Now you should have something like this:
Image
Now you should add all those effects again on the second rectangular layer. For this job, you can Right Click on the bigger Rounded Rectangular Layer and choose Copy Layer Style, Then another Right Click on the Smaller Rounded Rectangular Layer and choose Paste Layer Style.
Now you must have something like this:
Image
Now, we are going to add other parts. First, we work on Bigger Rounded Rectangular shape. First, create a New Layer and then choose Rounded Rectangular Tool from your Photoshop Toolbar, and create another Rounded Rectangular like mine:
Image
Now add these effects Step by Step like me again on this New Rounded Rectangular. First a right click on the New Rectangular layer, an effect box will opens to you and you need to add these effects on it:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
Now again create a New Layer, Then press CTRL and choose this new Rectangular layer to make it selected like this:
Image
Now, is the time to adding Brushworks on the New Layer, which you have created before. Choose Brush Tool from your Photoshop Toolbar and add Brushworks like mine:
Image
I have used d31 Brushes, which I have downloaded from Deviantart. Now go to Menu, Image and from there Adjustments and then choose Hue and Saturation and choose this format and numbers like me:
Image
Now you must have something like this:
Image
Now your Rounded Rectangular Layer is selected yet, you must choose your Brushwork Layer and go to the Menu, Edit, and choose Stroke.
Now you need to add a dark Stroke in 2A2A2A color, Outside and 1px size, and then click on OK.
Now you must have something like this:
Image
Now create a New Layer again, and choose Rounded Rectangular Tool from your Photoshop Toolbar and create a little Rounded Rectangular and use Skew on it to make it fit with the smaller Rectangular like this image:
Image
Now add these Effects Step by step like me on this new rounded rectangular, Right Click again on the new rectangular layer, an effect box appears to you, now add effects:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 5
( Color = B7E1F7)
Effect 6
Now you must have something like this:
Image
Now create a New Layer again, we are going to make a shape like a pipe between Bigger Rounded Rectangular and Smaller Rounded Rectangular.
Now create a New Layer and then choose Rectangular Marquee Tool and set its Feather to 5 px and create a square and fill into it with black color. Choose Paint Bucket from your Photoshop Toolbar and then fill into it like this:
Image
Choose that Rectangular Marquee Tool again and create another square like the image and then Press DEL on your keyboard like second image:
Image 1
Image 2
Now change the Feather of Marquee Tool into 0px again and create another square like this image and press DEL on your keyboard like second image:
Image 1
Image 2
Again create another square like image 1 and press DEL on your keyboard like image 2:
Image
Now you must have something like this:
Image
Duplicate your layer and then create another new Layer on it.
Now you need to choose Brush Tool and choose Rounded Brushes and set its size as 5 px. Then start to adding these lines on a New Layer. Like the image:
Image
Now choose your First Duplicated Layer, the First Cuted Square Layer and press CRTL on your keyboard and then Click on Your New Layer which you added lines on it to make it selected. Then Press DEL on your keyboard.
Now you must go back to your First Cuted Square Layer and add these Effects on it Step by Step:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
Effect 8
Then choose the Duplicated Layer and press CTRL on your keyboard and then Click on it to make it Selected and then choose Paint Bucket From your Photoshop Toolbar and fill into it with your favorite color, here I have used a light blue.
My image after adding effects and colors is like this:
Image
Just after all works I have explained you at the top, you can work on the pipe yourself and make it well groomed and match with your other parts of header.
Now here we are going to add a text and some objects on the bigger Rounded Rectangular. How about some circles?
For this job, first create a New Layer, then start creating a tiny circle by using Ellipse Tool from your Photoshop Toolbar :
Image
Now you need to add these Effects on your Circle Layer step by step like me:
Just double Click on the circle shape layer and then an Effect box will appear to you, now add effects:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Now you must have something like this:
Image
Now first create a New Layer, then choose Ellipse Tool again from your Photoshop Toolbar and create another circle but this time in a smaller size:
Image
Now again, double click on the layer and add all previous effects, which we added on the bigger circle, here, also you can do something different.
First a Right Click on the bigger Circle Layer and choose Copy Layer Style, then a Right Click on this new Smaller Circle Layer and choose Paste Layer Style.
Now you must have something like this:
Image
Now you need to create a New Layer, then choose Ellipse Tool from your Photoshop Toolbar again and create another smaller circle to complete the decoration.
Here again you need to add all previous effects on the smaller circle. After that you must have something like this:
Image
Attention! : all these Decoration which I have added, is something for example, you can add your desired decoration on your logo. Also you can choose your favorite colors. Here I just like to show you how you can assemble objects and use effects and brushes to create a logo. All is just for example.
Now is the time to add your Forum’s name on your logo. First create a New Layer, then choose Text Tool from your Photoshop Toolbar and add your text on your logo. Here I have chosen Mingle Font you can download from Dafont and its size is 36.
After creating your text, now is time to add effects on the text. Text effects are completely up to you. Here I have added these effects on my text, you can add on your text too:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
Effect 8
Effect 9
Now you must have something like this:
Image
Now create a New Layer again and add a text or something you like on the smaller Rounded Rectangular. Here I have added a text.
When you added the text, you can add your desired effects on it, just Remember here because of the animation which we are going to have on this text, wee need to have a Color Overlay Effect. In the first Text, I have used This color code 03F9F6 as Color Overlay Effect. Now you should have something like this, just remember your effects maybe are different from mine. Just Color Overlay is the same:
Image
Now go to Menu, Layer, and from there choose Duplicate Layer, now you have another copy from your Second Text Layer. Go to this New Duplicated Layer and there, choose Color Overlay from Effects in Layer Palette and double click on it, now you need to change the Overlay color into another color, For example here I have chosen FFFF00 color, or Yellow color as Duplicated Layer Color Overlay:
Image
Now Create a New Layer and then choose Rounded Rectangular Tool from your Photoshop Toolbar and create a tiny Rounded Rectangular like mine:
Image
Now here you need to go to Layer Palette and choose the Small Rounded Rectangular Layer and right click on it, choose Copy Layer Style. Then come back on your new Tiny rounded Rectangular Layer and right click on it and choose Paste Layer Style.
By this job, you must have something like this:
Image
Now go to the Menu, Layer, and from there, choose Duplicate Layer and create a copy from this Tiny rounded Rectangular and then move it to another corner of your banner by arrows on the keyboard.
Now you should have something like this:
Image
Now it’s the time to add animation on our logo. Send your image to ImageReady, now there you need to first turn off the eye beside the duplicated layer:
Image
Now go to the Animation Palette, Set the time on 0.2 and delay forever. Now create a new Frame and then go to the Layer Palette and now turn on the eye beside the duplicated Layer. Now your animation is ready, you can go to the Menu, File, and from there choose Preview in Browser. Now you can see your image in the Internet Explorer Window.
Its time to save your image. If you like you can add more decoration on your logo, but here, because its just a practice, I’m going to save it here in Image Ready.
For this job, you need to go to Menu, File, and then from there choose Save Optimized As, and save it as gif image, (Animated Gif)
Here you have finished your job on the logo, and now its time to start creating menu and its buttons.
Here something is really important for you to make your menu and its buttons completely match with your logo, you must remember the size of the space between two tiny Rounded Rectangular. You can find it by using ruler in the photoshop. If you like to see Ruler in your Photoshop page, you need to press CTRL+R on your keyboard, now Ruler appears on your Photoshop page.
Now you need to right click on the ruler and there choose Pixels and by this way, find the size of the space between tiny rounded rectangulars.
Now we are going to make menu and then its buttons. For this job you need to create a new document in your forum wide size. Here I have chosen 750px as wide and 80 px as height.
Now first you need to create your menu butoons background in the size of the space between tiny rounded rectangulars in logo just you need to create this shape a few bigger than this space to make it match with your logo.
Here first create a New Layer and then choose Rounded Rectangular Tool from your Photoshop Toolbar and create a Rounded Rectangular from 50px on your Ruler to 450, and then add it all Effects which you have added on the bigger Rounded Rectangular when you was creating the Logo, also you need to move it a few to the bellow and let a few free space at the top for decorations. Now you must have something like this:
Image
Now it’s the time to add some Decoration on your Menu, remember here we need to add this menu to the Logo, for this job, we need to make pipes like which we created to connect Bigger Rounded Rectangular to Smaller Rounded Rectangular.
Then create a New Layer and create pipes again, here you can create a pipe like image and then duplicate both its layers and move them to another side to have something like this:
Image
(Put these pipes by using ruler on 51 and another on 410.)
Now your menu background its ready, but if you like you can add some decoration like this images on it as your taste:
Image
Now your menu background is ready. If you like to have PM bar also, you can create something like menu bar but a few smaller, beside menu bar for PMs. Also you can attach it to the logo by adding pipes or something like on this.
Also you can use your Smaller rounded Rectangular as your Pm bar. All of them is up to you and you can make it yourself by your taste.
Now here you have menu and logo and just need menu buttons match with your menu bar. For this job you need to use , menu bar background and create buttons from that background, when you saved you menu, let it be open and now start adding your menu buttons texts on the menu background first like this:
Image
Now you must choose Crop Tool from your Photoshop Toolbar and Crop them one by one:
Image
After Crop, you will have something like this:
Image
This is your Home button. Now you can save it. If you like to have Rollover menu buttons, you need to save it as Home_off.
Now to creating next button, you should first press CTRL+Z on your keyboard to undo your action, now choose next button to Crop:
Image
And about all other buttoms you need to repeat all previous actions. And remember to save all of them “Button_off” if you like to have Rollover menu buttons.
When you finish your work on all your buttons and saved them, you need to make your ON buttons for your Rollover form.
Open your button. Then go to Menu, Image, and Adjustments and from there choose Hue and Saturation and set the setting like mine:
Image
Your ON button is ready, now you just need to save it as “Button_on”
And you must do this on all other buttons to create your ON buttons.
Finally, this job has finished and now you have your logo, menu and its buttons completely match together.
Just you need to put them by their codes in your forum. Please for any questions, post here, also if you need more explains about a part in this tutorial, post here I will post here for you more explain.
Now I just made this tutorial as a sample for you to show you how you can make a tech logo and menu and its buttons.
I will post another tut here for you about making Pipes in several forms and styles, to show you how you can make Tech Pipes and add on your logo and somewhere you like. Also here I have choose a white background to show you everything better, you can choose your desired color for the background.
Enjoy!
and it will be your banner and menu with a button after you added into your forum.
Final Image
here maybe I have some faults because I have made it so hotfoot. please if you see something wrong post here, Ill edit it
thanks
Created By Ellen
