Sci-Fi Style Website Header

Today I’m going to walk you through the redesign of OWeb2.com’s banner. We went with a sci-fi feel on this one.


While serviceable, this logo does the job. But I decided to go with a little more personality rather than a logo on a reflective floor…

I did want to retain the over all blue color scheme so I used the Eyedropper Tool to sample the gradient colors. I used the Magic Wand Tool to select the blue area to paint in. The radial gradient option was chosen and then clicked/dragged to create the gradient.

Another radial gradient was used here on a new layer but black was chosen to create more contrast. Also, take note that black to transparent was chosen instead of color-to-color.

This is a photo of a galaxy and some stars that was used as a focal point for our space scene.

I went to Image>Canvas Size to increase area for more stars. The Clone Stamp Tool was used by holding in Alt to sample and then brushing normally to paint more stars.

Another layer was created on top and filled with blue. It’s blending mode was changed to “Color” to change the entire…well color of the scene.

And then it was dropped onto the gradient header and cropped to fit. The blending mode was set to “Screen” to get the stars to show through just right.

I right-clicked the layer and Duplicated it. Filter>Blur>Motion Blur made the following effect like so.

Now onto the logo. After finding a font that I liked, I double clicked the layer where the type was and clicked the Outer Glow layer style. I played with the color, spread and style until I ended up with this.

Now this is going to seem extensive for a single text shine, but I think the result is worth it. First I used the Eliptical Marquee Tool to create this circular selection and filled it with a radial gradient from white to black. At this point it looks like a simple sphere.

Then I pressed Ctrl+T to transform the selection and stretched it out left and right making sure it covered all of the text.

Then I went to the text layer and Magic Wanded the area outside of the type with the “Contiguous” option checkmarked Off. This should create a selection where it’s everything but the lettering. Even the spaces inside of the letters. At this point I deleted the gray oval. At least the parts that are in the selected area.

I grabbed the Pen Tool and created this shape that we are eventually going to use to subtract even more from the gray details.

The Paths tab is located in the same window as the Layers. Once opened, I pressed the perforated circle at the bottom of the windows panel. This turns the pen path into a dancing ants selection. I hit Delete and killed the art within the selection.

The final touches were adding some light shafts. I turned the Marquee Tool back into a rectagular one then drew out a simple box. The top of the box was lightly brushsed with white.

The blending mode was set to Overlay to pull some vibrant blue into them. It was also rotated at an angle.

The light shafts were duplicated and rotated to taste for the final touches of the new website header design.

By Mark Rivera

Mark is an animator and ad designer for WebProNews. He has a passion for illustration and 3D art.

Leave a comment