• The Facebook Platform

Results 1 to 1 of 1
  1. #1
    Join Date
    Jan 2010
    Lahore, Pakistan
    Rep Power

    Default 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:
    soft glare lighting example - Easily Create a Beautiful, Unique Website Header
    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 - Easily Create a Beautiful, Unique Website Header
    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).
    blending modes - Easily Create a Beautiful, Unique Website Header
    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.
    orange - Easily Create a Beautiful, Unique Website Header
    To brighten this area up a bit, I’m going to create a New Layer, and use a soft, WhiteOverlay directly above the Orange I just created in the document. brush with the blending mode set to
    add light - Easily Create a Beautiful, Unique Website Header
    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:
    colors finished - Easily Create a Beautiful, Unique Website Header
    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.
    the flare - Easily Create a Beautiful, Unique Website Header
    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:
    flare finished - Easily Create a Beautiful, Unique Website Header
    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!
    finished flare andbanner - Easily Create a Beautiful, Unique Website Header
    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!
    Download the PSD

    Find Me On Social Networks

    Facebook | Twitter | Google+


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts