Home / PS Tutorials

PS Tutorials · Tutorial

Sexy Portfolio Template Making a Gorgeous Splash Page

PublishedDecember 19, 2009
Reading time4 min
Filed underPS Tutorials
Sexy Portfolio Template Making a Gorgeous Splash Page - PS Tutorials Lorelei Web Design Sexy Portfolio Template Making a Gorgeous Splash Page — December 19, 2009

Using the marquee tool, draw a box, not very big one, this is where your website’s name will appear.

Fill the Box with #e85c88 colour.

Press Ctrl + T to Free Transform the box, and rotate it in about 20-30 degrees as shown on the picure…

Sexy Portfolio Template Making a Gorgeous Splash Page - PS Tutorials Lorelei Web Design

Go to Layer >> Layer Styles >> Blending Options and apply this gradient stroke effect to the pink box (same as we used for main template body).

Use the colours: #4fa5a4 … #ffffff … #4fa5a4

Sexy Portfolio Template Making a Gorgeous Splash Page - PS Tutorials Lorelei Web Design

And also a shadow, of the same hue, #4fa5a4

Sexy Portfolio Template Making a Gorgeous Splash Page - PS Tutorials Lorelei Web Design

Select the typing tool and add text to your pink box. Since the layout is rather funky, use some funky font as well, any graffiti like font will work here good, we used “BadaBoom BB”, available free at dafont.com

Sexy Portfolio Template Making a Gorgeous Splash Page - PS Tutorials Lorelei Web Design

Remember how you just make the pink box for the header? Good, make 4 more, only smaller… or duplicate the existing big one and re-size it to a smaller size.
If you are making them anew, do not forget to apply same shadow and gradient stroke effect to each box.

Most important, reduce the opacity of each box, as shown on the picture below, in order to make them just a bit see-through.. we don’t want to fully cover the photo!

Sexy Portfolio Template Making a Gorgeous Splash Page - PS Tutorials Lorelei Web Design

This is what we got…

Sexy Portfolio Template Making a Gorgeous Splash Page - PS Tutorials Lorelei Web Design

Now, again, same like with the header, add text to each button of your layout…

Sexy Portfolio Template Making a Gorgeous Splash Page - PS Tutorials Lorelei Web Design

Now to the main body.
Make a new Layer. Using the marquee tool, draw a box (not too big) and fill it with white. Set the layers fill opacity to 20%, or even less (depending on how dark your photo is)

Press Ctrl + T in order to rotate the box…

Sexy Portfolio Template Making a Gorgeous Splash Page - PS Tutorials Lorelei Web Design

While the are is still selected, switch to the layer where the girl is (the photo) and apply Gaussian blur effect:

Sexy Portfolio Template Making a Gorgeous Splash Page - PS Tutorials Lorelei Web Design

Go to Layer >> Layer Styles >> Stroke, and apply same gradient stroke effect as you did with all the boxes so far, same colours. Adding shadow is optional, we decided not to do it with the text box.

Sexy Portfolio Template Making a Gorgeous Splash Page - PS Tutorials Lorelei Web Design

Add text to the newly blurred box, as a new layer, of course.

Sexy Portfolio Template Making a Gorgeous Splash Page - PS Tutorials Lorelei Web Design

Now, for the final touch, select the Elliptical Marquee tool, and select an area that will “seize” both the header and the pale box for the text…

Sexy Portfolio Template Making a Gorgeous Splash Page - PS Tutorials Lorelei Web Design

Using the Dodge Tool, with 60% exposure, go over the edges of the selected area, in order to make something like this…

Sexy Portfolio Template Making a Gorgeous Splash Page - PS Tutorials Lorelei Web Design

That’s it, this is your final result, just slice and code! This would be ideal for a funky and artistic splash page of any kind.

Sexy Portfolio Template Making a Gorgeous Splash Page - PS Tutorials Lorelei Web Design

Written by

Elizabeth Lorelei Sramek

AI results optimization architect and SEO expert with 20+ years of experience. Crafting strategies that outrank, outperform, and outlast.

6 responses

  1. Josh Chernoff January 3, 2010

    Nice tut, but if I may critique a little bit.

    The type in the main body of text is not contrasting and difficult to read due to the translucency with the girls legs in the background.

    Maybe an old caption trick may fix that by adding a white hard glow around the text.

    Any how. nice work.

    Reply
  2. Tweets that mention Lorelei Web Design » Sexy Portfolio Template Making a Gorgeous Splash Page — Topsy.com January 3, 2010

    […] This post was mentioned on Twitter by HowDo.us, Lars Moelleken. Lars Moelleken said: RT @LoreleiWeb Sexy Portfolio Template Making a Gorgeous Splash Page http://bit.ly/67u8lL […]

    Reply
  3. Christophe Berlin January 19, 2010

    I like this alot gotta use it, thanks!

    Reply
  4. 20+ Helpful Photoshop Web Graphics Tutorials | Tutorials Share | Tutorials, Resources & Tips for Designers! October 19, 2011

    […] 6. Sexy Portfolio Template Making a Gorgeous Splash Page […]

    Reply
  5. 20+ Helpful Web Graphics Photoshop Tutorials | Tutorials Share | Tutorials, Resources & Tips for Designers! November 1, 2011

    […] 6. Sexy Portfolio Template Making a Gorgeous Splash Page […]

    Reply
  6. 20+ Helpful Web Graphics Photoshop Tutorials – Design Bump October 4, 2014

    […] 6. Sexy Portfolio Template Making a Gorgeous Splash Page […]

    Reply

Leave a response