Creating an Orb - Photoshop

Hey

This is only going to be a quick tutorial on creating a cool looking orb. The orb doesn't serve much of a purpose other than looking cool. It could be used for parts of a website or interface. Click any of the images to see the full version.
For this tutorial you will need Photoshop or similar, and a Web 2.0 Layers and Gradients Pack. If you are ready then lets begin.

Step 1)

The first step is to get your canvas ready. Mine is size 500px x 500px. Position you canvas by a window for the best possible natural light.


Step 2)

Now you have your canvas ready you need to begin drawing your orb shape.


Use the circle shape tool to draw on the canvas, use the shift key to keep the ratio of the sides correct.


It really doesn't matter what colour the shape is as the effects will be applied later.


Step 3)

This is an optional step but you may need to remove the background. Click on the white with a magic wand and delete it.


As well as this set the background layer to a new layer, this is vital for the effects to be applied.


Step 4)

The next step is to add the layer effects. I suggest using the Web 2.0 pack. Pick a good gradient and style, although it doesn't matter to much.


Step 5)

The next step is to apply a bevel. Put the size to maximum and reduce the opacity of the shadow. Play around with the settings.


Step 6)

The next step is add an inner glow. Change the colour to white and size to around twenty.


You have a good looking shape, we now need to refine the highlights.


Step 7)

Create a new layer and add a white gradient to transparent in an oval shape.


Step 8)

Rotate the layer

Step 9)

Reduce the opacity so it blends into the colour more.



You can at this point add a black shadow in the same. But it didn't work that well on mine.

Step 11)

The next step is to copy the layer (after flattening) and flip vertically. Position underneath. This will be used for the transparent shadow.


Step 12)

To create the shadow apply a layer mask. Set to reveal all.


Step 13)

Using the black gradient on the layer mask you can remove parts of the shadow.


Add a black background and flatten and you have a cool looking orb.


Using the hue saturation tool you can change the colour of the orb.


Quite cool. Leave a comment to tell me what you think.

Fridays Website - Luis Alarcón

Hey

As part of the weekly ritual of Great Design here is one of the best websites on the internet. Its a Word Press blog with an amazing design. Done mostly in CSS, the header and the layout of the website looks amazing. I can't tell what the page is about. But it does look cool. Click the image for a full version or visit the website here.


Sorry there wasn't a post last week I was really busy visiting Leeds University.

Creating a Web 2.0 Logo From an Exisitng Logo

Hey

This tutorial is going to show you how to change any exiting logo into a cool Web 2.0 style logo. This is with cool gradient styles, reflections and interesting text.
For this tutorial you will need Photoshop or similar and and an existing logo (or the one provided). The Web 2.0 pack may also be useful to use, you can download it here. At any of the image you can click on them to see the full sized image.

If you are all ready and seated, lets begin.

Step 1)

The first step is to create a canvas. I use a default 500 x 500 pixel size. A large size should suffice.


Step 2)

Once you have your canvas find you suitable pre Web 2.0 logo. I've used Digital Points logo. Although any similar style logo would do.


Step 3)

Place or copy this into the canvas. This would be used as both a reference and suppling some of the shapes used.


Step 4)

Use the magic wand or the marquee tool to select the logo. In this logo it is the black shape on the left. I've copied this onto a new layer.


Step 5)

Enlarge and position on the canvas. I've enlarged the image so you can do some fine deatiled work. It can be repositioned later,


Step 6)

These steps are used to apply effects to the logo. If you download the Web 2.0 pack, you have some of the cool styles already included.

This step involved picking a cool layer style and adding some after effects.


One thing that is predominantly used is a drop shadow. I prefer a large dark fuzzy shadow. You can change it to suit as needed.




Looking good. Photoshop is great for this kinda of work. The next step to mimic the work is to add some text.

Step 7)

Web 2.0 text uses a lot of Trebuchet MS, Tahoma and similar sans serif font. Take your pick.


Step 8)

Again use the Web 2.0 styles to add a layer style. Although this can be done manually having a preset style is quicker to do.

Again in the style of the original i've picked green.


Step 9)

Again add a small drop shadow to add effect.


Step 10)

This step is a little tricky if you haven't done this before. This involves creating a reflective drop shadow.

First select and duplicate the layer.


Step 11)

Reflect the layer vertically and position underneath the original. Slanted logos always look good in this configuration.

Step 12)

Apply a black to white gradient to remove parts of the image. Go Layer > Layer Mask > Reveal all. Added areas of black remove parts, white stays the same.

Step 13)

This is an optional step which you can do later. Crop the image to a more suitable size.


Step 14)

One of the little features of the original was the little black bars. These are copied from the original although if needed by they could be recreated. Position as necessary.


Step 15)

The effects look cool. Although with time this could be improved such as the outline of the image It isn't a bad job for 10 minutes work.

Wallpaper Wednesday - Desktop View

Hey

Its Wednesday and its time for a cool image what you can use for your desktop. This weeks it is the time for a cool image for a view out of a window. Click the image for a full version.