Tutorial9 - Tutorial Bliss.

Easily Create a Beautiful, Unique Website Header

In this tutorial, I’ll show you how you can create a beautiful, unique, abstract website header in just a few easy steps. This abstract lighting technique is one you’ll “Wow” a lot of visitors with!

What We’re Making

This is a technique that I’ve recently used on personal projects of my own, and have impressed a lot of people with. It only made sense to me to share how to accomplish this look with our loyal viewers here at Tutorial9! Here’s a quick look at the effect we’re going to make in this tutorial:

Example of the Abstract Lighting Technique

I’ve never been a huge fan of the standard “Lens Flare” effects Adobe Photoshop had to offer, which is the main reason I came up with this effect.

Now, let’s begin!

Step 1: Setting Up

Create a new document in Photoshop, and use the Paint Bucket Tool to fill the Background layer with a dark color. In my document, I used #191919 — Something dark, but not completely black.

Background Color: #191919

Step 2: Adding Some Light

This effect is ALL about experimenting with color, placement, and size. To create the unique lighting effect, we are going to use a Large, Soft Brush Tool. Select a standard round brush from the options bar or brushes palette, and increase the brush size to around 400px, and the Hardness to 0%.

Now select a bright, vibrant Foreground Color. For my first color, I’ll be using a nice sky blue, #61a6f4. Create a new Layer, and create a splash of color somewhere along the top edge of your banner. Set this layers blending mode to Linear Dodge (This will let it mix with other colors we use later on a bit nicer than the Normal Blending Mode).

Experiment with the Blending Modes of your layers

Step 3: Additional Colors and Blending Modes

We’re going to introduce a few new colors into the fray to make things a little more interesting. One important thing to note here is that each new brush and color you use should be painted on separate layers. Doing so will really make it easy to experiment with blending modes and positioning later on!

Let’s throw a new color onto a new layer. I’m going to be using a bright, pale orange, like #fbb85a. I’m also going to adjust the size of my brush to something a bit smaller, like 300px. After painting, I’m going to change the blending mode for this layer to Overlay.

Add new colors to for your effect

To brighten this area up a bit, I’m going to create a New Layer, and use a soft, White brush with the blending mode set to Overlay directly above the Orange I just created in the document.

Use White, Overlay layers to brighten areas up

Continue to add new colors using varying brush sizes, and different blending modes. After about 5 more layers, using Overlay, Lighten, Linear Dodge, & Hard Light with the 3 colors I’ve used, here is what I’ve got:

Step 4: Adding an Awesome Lens Flare

This is probably the most difficult part of the effect, but only because it requires a little creativity on the designers part. Like I mentioned earlier, I’m really not a fan of the Lens Flare Filter Photoshop has to offer — Which is why we are going to create our own, simpler flare.

How to create a custom Lens Flare

On a new Layer, using the same colors we’ve been using so far (Only this time, with the blending mode set to Normal), use your creativity to put together a flare effect of your own. It’s really a lot easier than it sounds. Establish a direction for your flare in your mind, and then create a series of blotches that follow that direction. To make things easier, you can follow the stages I took in the diagram to create something similar to what I have.

Remember, this is all on the same layer to make things simpler for us. You’ll need to plan what order you paint your colors in though so they overlap correctly.

Here is our finished flare above our other layers:

The Finished Flare

Step 5: Blending the Flare

It’s obvious that the flare in it’s current state simply won’t do. Don’t worry, it’s an easy fix. Remember all those layers you created earlier with different blending modes? All you have to do is position your flare underneath some of those layers (You’ll have to experiment to see what looks best), and the blending modes will mix the colors and hopefully look very nice!

The finished effect

It’s just that Simple!

That’s really all there is to the effect. Not a bad look for something so easy to make.

If you want my opinion, I think this effect is a great touch for a minimalist layout that uses dark colors, as it’s soft, and not very distracting. Text can easily be read over the lighting (provided it’s not to bright or dark where you place your text).

For reference, you’re welcome to grab the PSD File we used in this tutorial!

31 Comments

  1. Reply to this comment
    meline

    Hi i enjoyed this tutorial,it’s a grate one ,but can you help me make a precious stone do you have any tutorials ? i searched the web couldn’t fined any i use corel too thanks.

  2. Reply to this comment
    David Leggett

    Hey, thanks meline! We’ll keep putting together some awesome tutorials here, but if you’re looking for something specific, I’d suggest you go check out our forums — More specifically, the Graphic Design Support Forums here at Tutorial9.

    Hope you find what you need! Thanks again!

  3. Reply to this comment
    Ouchast

    I’m going to use this tutorial now. It looks awesome, keep up the good work :)

  4. Reply to this comment
    Steven

    hey there, ive always loved photoshop and im 17. And all these tutorials are making want more and more from photoshop and from this site. Thank you very much for the good explanations. keep it up David!

  5. Reply to this comment
    David Leggett

    Thanks Ouchast and Steven! I’ll try my best! Your continued support for T9 is greatly appreciated!

  6. Reply to this comment
    melisa

    Hi David,

    This is awesome and quite informative. What Photoshop version did you use here? I’m tempted to have one. I used to study a little Photoshop, but it’s a lower version.

    I’ll take note of your site. I’m still working on my little site. ;)

    Thanks a lot for sharing this. ;)

  7. Reply to this comment
    David Leggett

    Hello Melisa,

    I use Adobe Creative Suite 2, which was the latest installment when I purchased it. I’d go give the latest Photoshop a try from adobe.com, and then consider purchasing anything from CS1 and up (or just a copy of Photoshop alone). To me, there isn’t too much difference between CS1-3 to justify spending the extra cash, unless there is really a feature you like about CS3.

  8. Reply to this comment
    datelus

    You are god! :D
    second awesome tutorial in this night from this site,ive just visited :)
    respect and thanks

  9. Reply to this comment
    gladys

    cool tutorial :)
    thanks!

  10. Reply to this comment
    shou

    very nice and easy to follow tutorial!

    the lens flare effect can make or break its look though, be careful when you’re doing that part.

  11. Reply to this comment
    Edvard

    U guys rock! U turn a simple thing into an incredible piece of art ;)

  12. Reply to this comment
    Matt Strange

    Always wanted to know how to get that lighting effect, seen it here and there on the web, looks awesome!

  13. Reply to this comment
    Ryan

    This is nice.

  14. Reply to this comment
    Bogdan

    Great yet simple to build! Thanks for this nifty tutorial.

  15. Reply to this comment
    Dan

    Lovely! Beautiful outcome! Will try it very soon.

  16. Reply to this comment
    Tom

    Hey, great tutorial, but whenever I set the hardness to 0%, I still get a complete circle and not something that is pictured in your tutorial. Any thoughts?

  17. Reply to this comment
    Tom

    @Tom:

    Ha, nevermind, it was my mistake. I had the wrong option selected.

  18. Reply to this comment
    David Leggett

    @Tom: No sweat mate. Glad you got it sorted out over there :)

Leave a Reply

Trackbacks

  1. Tutorial | Easily Create a Beautiful, Unique Website Header « Flash Enabled Blog
  2. 20 Excellent Photoshop Tutorials for Web Designers | Design Reviver
  3. Simple Grafix » Blog Archive » Design a Coldplay/Apple Inspired Portrait in Photoshop
  4. 40 Photoshop Tutorials for Lighting and Abstract Effects | Vandelay Website Design
  5. Sideburnr » Blog Archive » 20 Excellent Photoshop Tutorials for Web Designers
  6. Vuoi migliorarti con Photoshop? Ecco 40 fantastici tutorial selezionati per te
  7. Tutoriales para Diseñadores Web | XeroBlog - Blogging - SEO - Consejos y Recursos para Bloggers
  8. 40 tutorials photoshop
  9. 35 Tutorials for Mastering Photoshop Brushes | Vandelay Website Design
  10. 35 tutoriales para dominar los pinceles de Photoshop « Bits Nocturnos
  11. 35+ Photoshop Fırça ( Brushes ) Dersleri | Batuhan Bulak
  12. Easily Create a Beautiful, Unique Website Header at Aurore studio blog
  13. Webclave.com » Blog Archive » 40 Tutoriales de photoshop para crear Efectos de Luz (vandelaydesign.com)