Loading ...Black & Green Layout 23
Pages: 1 2
11. We’re going to adjust the blending options of this search box and the button so go to (layer – layer style – blending options) and add a drop shadow with these settings. Make sure your copy the layer style (layer – layer style – copy layer style) from one rectangle to the other one so they both have a shadow effect!
12. In this step I’ve created very tiny bars on a new layer to use between every menu button using my rectangular marquee tool and my paint bucket… This makes the design cleaner and more professional! Take a look at the screenshot to see what I’ve done. Basically I’ve just created two 1px strokes with a heigth of 35px and duplicated (layer – duplicate layer) them as many times as I wanted to create the menu! The left bar is in #e4e4e4 and the other one in #ffffff. If you can’t figure this one out you can also just skip it or download the .psd file at the bottom of the page!
13. Now I just added a little bit of text using the font microsoft sans serif in different sizes… the title is just white #ffffff, the green text in the search box and the content box is #99ff00, the blue text is #00ccff (used for links and stuff like that) and the grey text for the menu etc is #666666… And there you go, a good looking and clean webdesgin with mainly green and black colors!
Please Login or Register to read the rest of this content.
Pages: 1 2
Yet more nice work! Keep it u and keep sharing!
Danny
I Like your web 2.0 skin, and love your wordpress themes..thanks your tutorials
Good stuff, clear tutorial! Props to you!
good one i like it..i want some more ………..?
Thx for the comments! More web designs can be found right here (http://phonuts.org/?cat=14)… I’ll do my best to add a few tutorials each month!
very nice
i want some more
Cheers for the tutorial, has really helped with coursework !!
I like the way you’ve done this..
It’s a simple clean design and it surely fits my style..
You make good tutorials.. Ill be browsing on more..
Thank`s a lot
Quite a nice style you have going on here. I’m not overly keen on the overpowering glassy effect, but it’s still rather attractive nonetheless.
Kudos!
Will you be making a tutorial on how to code this properly in Adobe Dreamweaver??
Would love it if you could!
No, I’m sorry myke but I only write tutorials on how to design these layouts and sometimes I code one and sell it… I suggest you just go to this site and browse some of the tuts! I’m sure you’ll be able to code this yourself fi you try hard enough! Thx for the comments everyone!
Kind regards.
…Or he can just pay some good moolah to get it done properly
!
Whew great design. I like your tutorial. Thank’s
This is a very good tutorial.
I have a question:
I have created the tutorial but now I want to use it. Do I save the file as a image or can i export the tutorial in some web format.
thanks
Hello,
you should read the previous comments, this question was already answered…
“No, I’m sorry but I only write tutorials on how to design these layouts and sometimes I code one and sell it… I suggest you just go to this site and browse some of the tuts! I’m sure you’ll be able to code this yourself if you try hard enough!”
Kind regards and thanx for all the comments!
A very interesting site with top design and contents!
This is a really good tutorial! Thank you so much!
Great tutorial! I based the template of my website in it
I think it turned out quite well!
Brilliant! I found your site by searching for a clean black and green layout. I hope you don’t mind if I borrow bits from your design?
Hello, thank you for all the comments! You are free to do what you want with these design, a link to this site would be nice ofcourse! Kindest regards.
First of all, thank you! This tutorial was really helpful.
I have a question though, I put an iframe in the content area, and then of course when the actual content exceeds the length of the design, that ugly scrollbar appears. How do I make the design never-ending, so to say?
I’d really appreciate an answer, thanks in advance!
You could try using a div and 2 arrow images to scroll. Download this file (http://www.dyn-web.com/zipped/dw_scroll.zip), open scroll_v.html and you’ll see what I mean!
Regards.