TEWM Logo
An eclectic resource site for those seeking digital autonomy. We do the footwork, so you can create art, music, and philosophy via technology and science.

Home | Site Map | Links | Brain Self-Control | Contact

This work is licensed under a Creative Commons License.

Web 2.0 Graphic Element

In this Adobe Photoshop tutorial I will show you how easy it is to make a Web 2.0 graphic element. The tutorial was actually improvised, I opened Photoshop and started drawing and adding effects. It's not the most challenging and advanced effect, but I think it sums up a lot of issues concerning how to make a simple web 2.0 graphic element.

Here is the final result.

web 2 graphic

Start by making a rectangle selection over the stage as shown below, then fill it with a random color (it will be changed later).

web 2 graphic tutorial

Now in the layers panel, double click the new shape layer to get to the layers style panel and give it styles as shown below.

web 2 graphic tutorial

web 2 graphic tutorial

web 2 graphic tutorial

Now put in your text on top of the rectangle shape in a separate layer, I choose to put in two X's (Don't ask why).

For the shape of text you put in, double click the layer to get to the styles panel and give it settings as shown below.

web 2 graphic tutorial

web 2 graphic tutorial

Make a new layer above all other layers and name it reflection, then hold down ctrl key and click the first rectangle shape layer to load the shape selection. Now with the selection tool subtract from selection as shown below.

web 2 graphic tutorial

Now make a gradient going from white to transparent color and apply it to the selection so you get a result like below.

web 2 graphic tutorial

 


Note: All revenues generated by ads are used to support and maintain this site.

Home | Site Map | Contact Us

Top

Creative Commons License