Posts Tagged ‘web 2.0’

Again since we started doing requests from our readers, here’s another one cause weve been bombarded by majority of our readers for this request. Its a simple technique usually used on a web 2.0 design concept.

So what were doing today is the reflection technique photoshop tutorial.

This technique is usually applied side by side with the shining or glossy effect for web 2.0 designs, to enhance and make our graphic more realistic and stand out.

Lets now start learning how to make a nice reflection on our graphics.

1) First lets create a new blank white canvass for our tutorial. We can use any size of canvass for this one, but i have used the default web canvass (640×480). File>New>Preset>Web.

2) Now on our blank white canvass, were gonna type our text. You can write whatever you like, but we have used the “TUTORIAL” for this one and were gonna give it a color of #0B7AAE. By the way any color would do on the text, its just my favorite color is blue

3) Next on the layers panel, we select the text layer we previously made and then duplicate it. We go to Layer>Duplicate Layer. And after that we flip that layer vertically just go to Edit>Transform>Flip Vertical, and then nudge it just below the original text layer. Just like so:

4) After we have flipped and nudged our duplicated layer, we add a layer mask on the text we previously flipped vertically. Like so:

5) Now to make the effect, we will now use and set the gradient tool. So on the tool bar select the Gradient Tool(G). And make sure select the gradient settings to foreground to transparent, and the foreground color is black. and the gradient orientation to a linear one.

Now that were done on setting up our gradient, we now apply the gradient, on the flipped text layer with a layer mask. With our gradient tool, try to drag the cursor on an upward direction just like that:

Here’s what we got after we apply the gradient on the masked layer:

6)To finish off the effect, we just adjust the layer opacity of the text layer with the gradient mask, to make a more realistic reflection effect on our text.

After the opacity adjustment, this is what we got

For more cool tutorials, please keep in tune with our blog, or visit our photoshop tutorials page for more cool and premium online photoshop video tutorials.

Also, if you have any photoshop tutorial requests, please do tell us and we’ll see what we can do. Later

Web 2.0 design is the newest trend that goes into web site design. The world wide web is going to change their websites to become more attractive, simple, user friendly, scalable, bright and shiny by designing it with web 2.0 standards. web 2.0 design concept does not only change the web design trend, it is also changing the web marketing concepts, programming concepts, and usability concepts.

So how do you identify a web 2.0 design? There are few design considerations that are the most common
that we see on a web 2.0 design:

1)Simplicity

Web 2.0 design should be simple ,noise free, uncluttered, with little contents, more graphics and large fonts. Look at the screenshot below it will help you to imagine what is simplicity in design:

2)Centralized Contents

The contents of the page should be in the center of the page like the following samples, as you can see the contents are in the center of the page and the left and right space are filled with gradient background.

3)Backgrounds

The backgrounds in web 2.0 have several forms, either to be gradient colors or diagonal line pattern.

4)Reflections

One of the web 2.0 standards is to make some reflection on your images.

5)Round Corners

The new style in corners is to make the corners rounded, in contents boxes or in buttons.

6)Large Fonts

Use large and clear fonts in your web 2.0 design.

7)Bright Colors

Web 2.0 design usually have bright, strong, eye catching, and most of the time unnatural colors. Just like the example color gradients below.