Create A Gorgeous Simple Night Style Website Layout
September 24th, 2007 in Designing, Tutorials, Web Layout by kailoon
Recently I am busy with my company product video (yes, again…) So, I take some free time to create my first ever web layout Photoshop Tutorial. Since this is my first time, I bet that it must be some error or unclear section. Please comment as I can make it better for my next one. Thanks.
Step 1
Ok, lets start then. Create a new document with 800 x 800 px, 72 resolution, RGB. Background color set to #434343.
Step 2
Grab the text tool, type your site name and I use “YourSite” here. I use moonstar with 48px, white. Place it nicely on the top left of the page. Press F5 to bring out the brushes setting. Check the Shape Dynamics and use a 3 px hard brush. Create a new layer above of the text layer and name as line_layer. Grab the pen tools and select path. Draw the wave as shown below. This is very depend on you and how the shape you like. After draw a line, right click and select stroke path, check the simulate pressure and stroke with brushes.

Step 3
After complete the desired shape or wave, double click text layer or right click and select blending option. Check Outer Glow,color #009cff,Opacity 80%, Size 6px, Blend Mode Screen. Right click the text layer and copy the layer style. Paste into the line_layer. CTRL+J to duplicate the line_layer to make the glow lighter. Create a new group and name it as Logo and copy all layers except the background layer, into the group.

Step 4
For the top navigation bar, I use the simple but nice custom symbol as shown. To match with the theme, here are what I use. For the activated icon, simply paste the layer style that we had copy just now. I use 11pt Tahoma. Grab the Rounded Rectangle Tool, with 4px radius, draw a small shape (#2f2f2f)that can cover the icon and text as shown. Bring out the blending option. Use Stroke, 1px inside white stroke with 45% opacity. Inner Glow, normal blend mode, 45% opacity, 4px size, black. Put all these layer into a new group named as Nav.

Step 5
Grab the Rounded Rectanlge Tool, draw as shown below, about 2/3 of the page. Apply the blending option shown.

Step 6
Draw the shape shown below with the rectangle tool using color #2581de. Create a new layer below the blue layer and use the Polygonal Lasso Tool draw out the shape to make the drop shadow. With the new empty layer selected, fill it with black, Goto Filter > Blur > Gaussian Blur > 4px. Type the date with Tahoma, Bold, 30pt. and the month and years with Arial 9pt.

Step 7
Grab the Line Tool and draw a line. CTRL+J to duplicate the line. Press the up button the bring it 1px up. Use the color shown.

Step 8
You will get something like this. Put all layers into a new group named Body.

Step 9
For the sidebar, It is simple and the technique is excatly same with what we do for the logo. Here is this. For the gallery boxes. Appy this blending option. 1 inside white stroke 30% opacity. After all done, put all layers into a new group and name it as SideBar.

Step 10
Goto the Nav group and create a new layer, put it at the bottom in the group. Grab the Rectangle Tool and draw the shape. Apply the blending option shown below.

Step 11
Create a new group and name it as Footer. Draw the rectangle with the blending option applied.

12. Hurray! DONE!!!
Hope you enjoy this. Any comment will be welcome!
Nice tutorial. Thanks for sharing
Amazing tutorial. For me Interesting thing in this tutorial is font. Moon star font is fantastic. Thanks for the resource kailoon.
i like goat penis
Nice tutorial, very nice effect. Thank you.
Nice tutorial, very nice effect. Thank you.
what is the font called and do you know where i can get it
I know this reply is kinda late, but I think I found the font. It is called “Moon Star” and you can get it here: http://www.dafont.com/moon-star.font
nice post, thanks :)
thank you brotha!
good content. thank you dude.
good tutorial. thanks for sharing.
Astonishing post. Thank you very much! :]
Thanks for giving this nice tut.
thank you for sharing
This style would really look good on childrens sites specially those about books,clothing and games.
Wooh.. it’s good design tutorial!
Thanks :) hope you guys having fun here.
Amazing Tutorial indeed! I am still new to some tutorials,… ^_^
Sweat tip, just what I have been looking for! Well Pleased…
Hi Pami, glad that you like this. I am using CS2. I just right click on the path that I draw. I am not so sure about CS3. Sorry about that.
Hi Kailoon!
I love the look of this but like Freedom I’m using CS3 and am having some trouble with step 2.
Your directions say:
“Grab the pen tools and select path. Draw the wave as shown below. This is very depend on you and how the shape you like. After draw a line, right click and select stroke path, check the simulate pressure and stroke with brushes.”
The last sentence is where I get lost.
“After draw a line, right click and select stroke path”
Where do I right click to get the dialog box to check the simulate pressure?
I read your response to Freedoms question and I still don’t understand…Sorry and thanks for your help and hard work!
çok çok teşekkürler (thanks :D)
Another great tutorial.
I’m gonna fave your site!
Freedom :
Hi there, the option will appear in the pop up window when you click on stroke path, justs check it and using brush as tool.
Neomah :
Welcome! :) you can learn it here if you want :P
Rly nice
yo bad i dotn understand anything of adobe yet :
Hey, i carnt seam to fin the “Simulte Pressuer” option =(
any idea where i can find it? im useing Photoshop CS3
Welcome!
Thanks kailoon
Hi JinX, thanks :)
I generate the text from here.
Very nice effect created in this tutorial :)
I have a question what is the site where I can find the Lorum Ipse …. the auto-created latin text
Thanks! :)
very nice
to bookmarks! :)
Steven & DEV :
Thanks! Welcome :)
very nice ……………
This is nice, really really nice design, I must say. Brilliant work, kailoon!
Nice to see you expanding the reach of your tutorials…
Creating web-visuals can be a very daunting task, especially when faced with a blank canvas…
Wonderful tutorial, thanks. Very easy to follow and nicely done.
Save it in your control panel > fonts.
Goto Control Panel > Fonts. File > install new font…
Hope you get it :)
hm… yeah I downloaded the font where do i save it so i can use it?
@> Dragolux : Ohoh..thanks! :)
@> kephanxetcuoicung : Wow, your name is looOOooong..
@> Gehlhaar : Welcome :) Free free to visit here always :)
@> Mr Man : The font call moonstar , I provide download in the post already.
what is the font called and do you know where i can get it
thanks, nice one tutorial
Good , Thank
This is so amazing! Thanks for sharing! It has inspired me to actually use the pen tool. :P
@> levian : Thanks!
@> Kenneth: Thanks! Lazy to recode already. Hahaha…. Hmm.. I alos wish to know. Some many Merdeka contest just din show the result yet.
@> å®èŒ¹ : Haha…Glad you like it!
@> Cometh : Really? Hmm.. good :)
@> yipguseng : Thanks, dude :) Ur car nice too! when come find me yamcha?
kewl and awesome!
Yoh, cool tutorial…. hohohoho..Gettign better and better jorr.
Keep it up man
Yay! Another Kailoon masterpiece! :)
Good tutorial..thanx…why not u use this??
and one more thing…do u know the result yet?? for exabyte..that….merdeka contest~
*whistle*
such pretty design !! :D