Article written

  • on 24.02.2008
  • at 02:16 PM
  • by Admin
  • with 44,329 views
  • 1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
    Loading ... Loading ...

Professional Splash Page 7

We’re going to create a splash page or an intro page for a website that needs a professional look.

1. Create a new document (750*750).

2. Fill the background with white #ffffff.

webgraphicsf1

3. Now use your rectangular marquee tool to select a box like shown below in the first image and fill it with white #ffffff using your paint bucket tool. After that go to the blending options of that layer (layer – layer style – drop shadow) and add a drop shadow with the settings from the second image and the outcome of these steps can be seen in the third image!

webgraphicsf2

webgraphicsf3

webgraphicsf4

4. Use your rectangular marquee tool again to select another box on top of the previous one and fill it with #395a6d. Don’t forget to create a new layer (layer – new layer) where you cann fill the selection with your paint bucket tool.

webgraphicsf5

5. Now with the previous layer still selected go to (filter – render – lighting effects) and use the settings like in the screenshot below.

webgraphicsf6

6. This step isn’t really necessary but it certainly makes visitors look at the center of the image! Create another new layer and use your elliptical marquee tool to select a circle like shown below and fill it with white #ffffff! Now deselect your selection (select – deselect) and go to (filter – blur – gaussian blur). the settings can be seen in the picture below. After that you should just change the blending mode of this newly created layer to overlay. The results can be seen in the second screenshot…

webgraphicsf7

webgraphicsf8

7. In this step I’ve just added some demo text, you should use a font that’s big and clear. I’ve used a font called myriad pro with different sizes and this #8b9193 grey color… You can also add a logo if you have one! And that’s it really, it’s extrmely simple but you can even use it as some sort of a business card or a splash page, intro page, banner, etc…

webgraphicsf9

Please Login or Register to download the source files.

subscribe to comments RSS

There are 7 comments for this post

  1. stefan says:

    Ironically, the heading on your splash page, contradicts the use of splash pages :)
    http://www.websiteoptimization.com/speed/tweak/splash/

  2. Admin says:

    I know, I could also just give this a title like “design a huge business card” :p…

  3. Dani says:

    Thanks, Stefan!

  4. Dmitry says:

    But it’s perfect for my new design’s “coming soon.”

    Thanks for the tutorial, it helped me a lot.

  5. offshore software development says:

    This was helpful. I appreciate the initiate taken towards this teaching article.

  6. Aditya says:

    Hmm, yeah that’s right, splash pages are wrong in their very concept, but, they look beautiful, and corporates hound us designers to make sexy splash pages for their websites, which, in turn , leads me to say a big thanks for your tutorial :)

  7. GMCloud27 says:

    A many thanks is in order for your tutorial and I’ve been able to take a lot from it and help develop a cleaner look to my design view.

    Cheers,
    Garrett (Chicago)

Please, feel free to post your own comment

* these are required fields

PhoNuts is powered by WordPress.
Back to Top