byassir
07 Jan 2007, 07:32 PM
درس تصميم هيدر جد إحترافي لموقعك
متال
http://www.ara4des.com/image/header.jpg
ولكنه مترجم حبيت انقله للفائده
بسم الله الرحمان الرحيم
اليوم وجدت لكم درس رائع في أحد المنتديات الأجنبة فحبيت أن أشارككم به
أعتدر على عدم ترجمة الدرس لضيق الوقت ولكن أعدكم برجمته في المرة القادمة بإدن الله
Step 1 - Creating your WorkSpace : Lets start by creating your workspace i used 800x230 depending on how big you will need the header for your Layout but since i am just making one to show you how to get the ffect i used a fairly small size.
This is up to you what size that you decide to use so please feel free to make it bigger you will just need to remember everything else you will make will need to be a slight bigger then what we have done with this tutorial.
http://img101.imageshack.us/img101/5637/step1lp6.jpg
Step - 2
Using the Retangular Marquee Tool make a selection like this one below
and then go to Select > Modify > Smooth > and then set it to "4".
http://img149.imageshack.us/img149/4839/step2us7.jpg
Once you have done that it's time to move to the next step i mean wow that wasnt too hard was it :)
Step - 3
Keep the area you just done selected and use the gradient tool to add the color of the background and again depending on what color you want to use you will need to chance it.
I used a plain blue for this with these settings...
http://img97.imageshack.us/img97/3319/step3gq9.jpg
Step - 4
Once you have chosen the settings you wanna use (Or have the ones we have used) then fill the area that should still be slected with it and you should end up with somthing that looks a little like this...
http://img83.imageshack.us/img83/2736/next1pt2.jpg
Step - 5
Create a new Layer un the Main header you just done and then do exactly what you did before but make the size button sized like this one ...
http://img85.imageshack.us/img85/80/step4pz8.jpg
If you place this under the header half way so that u see some of it and then fill it with the same gradient color and then it should look like you main header.
Once you have done that duplicate the layer and space them out across the header to make a Navigation.
Here is what i done i also added some ******************** but this is upto you u can add it later not a problem.
http://img85.imageshack.us/img85/5116/step5ac5.jpg
Step - 6
Once you have done that then go back to the main header and then make a selection half way down and like the following ...
http://img214.imageshack.us/img214/3621/step6jo8.jpg
Step - 7
Select your gradient tool again and use these settings and then fill it again..
http://img85.imageshack.us/img85/6498/step7wb9.jpg
Then you should have somthing that looks like this....
http://img85.imageshack.us/img85/2726/step8vi8.jpg
Step - 8
That is pretty much it you can add whatever you want from here i added a Login Bar to make it look a little better but you can add whatever you want maybe some more effect on the background it's 100% upto you.
Here is what mine looked like in th end
http://img85.imageshack.us/img85/8266/step9gu2.jpg
متال
http://www.ara4des.com/image/header.jpg
ولكنه مترجم حبيت انقله للفائده
بسم الله الرحمان الرحيم
اليوم وجدت لكم درس رائع في أحد المنتديات الأجنبة فحبيت أن أشارككم به
أعتدر على عدم ترجمة الدرس لضيق الوقت ولكن أعدكم برجمته في المرة القادمة بإدن الله
Step 1 - Creating your WorkSpace : Lets start by creating your workspace i used 800x230 depending on how big you will need the header for your Layout but since i am just making one to show you how to get the ffect i used a fairly small size.
This is up to you what size that you decide to use so please feel free to make it bigger you will just need to remember everything else you will make will need to be a slight bigger then what we have done with this tutorial.
http://img101.imageshack.us/img101/5637/step1lp6.jpg
Step - 2
Using the Retangular Marquee Tool make a selection like this one below
and then go to Select > Modify > Smooth > and then set it to "4".
http://img149.imageshack.us/img149/4839/step2us7.jpg
Once you have done that it's time to move to the next step i mean wow that wasnt too hard was it :)
Step - 3
Keep the area you just done selected and use the gradient tool to add the color of the background and again depending on what color you want to use you will need to chance it.
I used a plain blue for this with these settings...
http://img97.imageshack.us/img97/3319/step3gq9.jpg
Step - 4
Once you have chosen the settings you wanna use (Or have the ones we have used) then fill the area that should still be slected with it and you should end up with somthing that looks a little like this...
http://img83.imageshack.us/img83/2736/next1pt2.jpg
Step - 5
Create a new Layer un the Main header you just done and then do exactly what you did before but make the size button sized like this one ...
http://img85.imageshack.us/img85/80/step4pz8.jpg
If you place this under the header half way so that u see some of it and then fill it with the same gradient color and then it should look like you main header.
Once you have done that duplicate the layer and space them out across the header to make a Navigation.
Here is what i done i also added some ******************** but this is upto you u can add it later not a problem.
http://img85.imageshack.us/img85/5116/step5ac5.jpg
Step - 6
Once you have done that then go back to the main header and then make a selection half way down and like the following ...
http://img214.imageshack.us/img214/3621/step6jo8.jpg
Step - 7
Select your gradient tool again and use these settings and then fill it again..
http://img85.imageshack.us/img85/6498/step7wb9.jpg
Then you should have somthing that looks like this....
http://img85.imageshack.us/img85/2726/step8vi8.jpg
Step - 8
That is pretty much it you can add whatever you want from here i added a Login Bar to make it look a little better but you can add whatever you want maybe some more effect on the background it's 100% upto you.
Here is what mine looked like in th end
http://img85.imageshack.us/img85/8266/step9gu2.jpg