الحزيـــــــــن
10-16-2006, 04:40 AM
Step 1
Create a new work space, I used 400px by 400px, fill the background with a light colour or whatever you like best, we'll be creating a dark navigation, now draw a verticle rectangle.
Step 2
Before filling the rectangle let's add some smooth edges, go to 'Select > modify > Smooth > 5px' and fill it with a colour, I've used #383333.
[عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط]
Step 3
Create a new layer and once again go to 'Select > Modify' but this time select 'Contract', do something around 4-5 pixels this way the edges don't get distorted, fill this with a lighter colour than the previous.
[عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط]
Step 4
Drop shadow ([عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط]) Inner shadow ([عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط]) Outer glow ([عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط])
gradient overlay ([عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط])
Now use these settings for the first layer you created, this will be the border of the navigation, you should have something like this.
[عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط]
Step 5
Now create a rectangle with a decent size for some text to fit into, I then used a slight gradiant overlay to make it more exciting than just a blank colour, then i added a 1pixel line underneath the recent created rectangle, this is to seperate this from the next image, just simply duplicate this layer down till it's full(some may need adjusting, the top and bottom because of the curving edges)
[عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط]
Step 6
Now it should look something like this, you can add some more blending options to the link bgs if you wanted, I added a inner shadow and a glow to make it look a little better, just play around and add links / images depending on your site.
[عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط]
Final preperations
I'm going to add some extremely basic things to the navigation such as text and maybe some images, such as ones found on tutorial websites, just to make the navigation look complete.
[عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط]
- Depending on your background of your website, some settings could need tweaking!
Written for [عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط] by PicoDeath
Create a new work space, I used 400px by 400px, fill the background with a light colour or whatever you like best, we'll be creating a dark navigation, now draw a verticle rectangle.
Step 2
Before filling the rectangle let's add some smooth edges, go to 'Select > modify > Smooth > 5px' and fill it with a colour, I've used #383333.
[عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط]
Step 3
Create a new layer and once again go to 'Select > Modify' but this time select 'Contract', do something around 4-5 pixels this way the edges don't get distorted, fill this with a lighter colour than the previous.
[عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط]
Step 4
Drop shadow ([عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط]) Inner shadow ([عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط]) Outer glow ([عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط])
gradient overlay ([عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط])
Now use these settings for the first layer you created, this will be the border of the navigation, you should have something like this.
[عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط]
Step 5
Now create a rectangle with a decent size for some text to fit into, I then used a slight gradiant overlay to make it more exciting than just a blank colour, then i added a 1pixel line underneath the recent created rectangle, this is to seperate this from the next image, just simply duplicate this layer down till it's full(some may need adjusting, the top and bottom because of the curving edges)
[عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط]
Step 6
Now it should look something like this, you can add some more blending options to the link bgs if you wanted, I added a inner shadow and a glow to make it look a little better, just play around and add links / images depending on your site.
[عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط]
Final preperations
I'm going to add some extremely basic things to the navigation such as text and maybe some images, such as ones found on tutorial websites, just to make the navigation look complete.
[عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط]
- Depending on your background of your website, some settings could need tweaking!
Written for [عزيزي الزائر يتوجب عليك التسجيل بالمنتدى لمشاهدة الرابط] by PicoDeath