Article written

  • on 30.11.2007
  • at 07:42 PM
  • by Admin
  • with 29,558 views
  • 1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
    Loading ... Loading ...

Layout With Stars At Night 12

Creating this layout is very easy and you can use it for a lot, it can also be used for a DJ website or anything you can think of!

1. Create a new document (800*600).

2. Fill the background with #313b44 and look at the guides I’ve created in the screenshot below.

weblayouto1

3. Now create a new layer (layer – new layer) and select a rectangle like shown and fill it with #0d4a5c.

weblayouto2

4. Adjust the blending options of the previous layer like shown!

weblayouto3

weblayouto4

weblayouto5

5. Now create 2 new layers and select your brush tool… Make sure your foreground color is white #fffff. On the first layers you should brush with this brush (clouds) and on the second layer with this one (stars)! Make sure you select your working area (the box we’ve created earlier) using the magic wand tool… This way we don’t add stars to our background but only to our box! Your layout should look like this, ofcourse you might have used different stars and clouds on different places!

weblayouto6

6. Create another new layer (layer – new layer) because we’re going to use our brush tool again! Use it to brush something like this (I used one of these brushes from deviantart)… Then adjust the blending options to add an outer glow… You can find the settings for it in the second screenshot!

weblayouto7

weblayouto8

7. In this last step I’ve just added some text and content… The title font is lithos pro 16px and the text is arial 10px! The color is white, except for the title which is in #1f6481!

weblayouto9

8. Ofcourse you can adjust everything, this is a screenshot of another outcome with a few differences… A menu can be added under the content box! I realize this is not easy to slice but that isn’t needed if you add text in flash… And there you go, you have a dj site or actually… A store that sells bedrooms could make better use of this design!

weblayouto10

Please Login or Register to read the rest of this content.

subscribe to comments RSS

There are 12 comments for this post

  1. chein says:

    Tutorial was not explained properly. Couldn’t follow it

  2. Admin says:

    These tutorials aren’t step-by-step tutorials! It’s required that you can do some basic things with photoshop… If not then you have a problem like you posted… Please post here to solve the problem, I’d love to improve this tutorials for you and other readers but if you leave a comment like that I can’t help you out!

    Kindest regards.

  3. Agilius says:

    This tutorial is for intermediate users, but an intermediate user could have done this using his/her imagination… Anyway, it’s a nice outcome.

  4. Zoly says:

    This is beautiful tutorial! 1000 thanks!

  5. winniee says:

    im confused… second step :X sorry im nooby w/ photoshop D: whats the rectangle thing? @_@

  6. Admin says:

    You have to use your rectangular marquee tool to select the rectangle and after that you should use your paint bucket to fill it up with a color… Maybe this screenshot can help you!

    http://i18.tinypic.com/6u4yeeq.gif

  7. winniee says:

    ohh okay! thank you so much! you’re awesome !! ^^

  8. Vishal says:

    Hey, cool work! Thanks a lot for the effort! – Vishal, India

  9. cyane says:

    So beautiful result…Thank you !

  10. sedeek says:

    thanks very very much for this tutorial

  11. Ehsan says:

    thanks for tutorial ,

  12. Christina says:

    Great tutorial! I’m definitely going to be deriving my next WordPress theme from this!

Please, feel free to post your own comment

* these are required fields

PhoNuts is powered by WordPress.
Back to Top