Unique Web Button

Start by creating a 150×150 px document, with white background. Press Shift + F5 to fill the new layer with 353D44. Create a New Layer, select the Rounded Rectangle Tool and make a rounded rectangle (radious 10px) like this size:

Right-click the shape layer and Raterize Layer, now right-click it again and go to Blending Options:

Parts just needed to be edited will appear

Outer Glow
Blend Mode: Normal
Opacity: 60%
Color: Black (#000000)

Color Overlay
Color: 374756
Blend Mode: Normal
Opacity: 100%

If you want, you add a some white brush to the button:

Done that, create a New Layer (Control + Shift + N), insert your image or text (color: white) and resize the image or text you will use. Right-click layer and go to Blending Options:

Parts just needed to be edited will appear

Outer Glow
Blend Mode: Overlay
Color: White
Size: 10px

If you wont add anything else, then create a New Layer. Holding Control, click on the button layer (rectangular rounded shape) and with the Rectangular Marquee Tool make a selection (holding Alt) of the bottom-half part of the rounded rectangle:

Now, fill that selection with White and apply the White to Transparent 4 style:

*If you dont have this style, click the blue arrow in the Styles Windows and select Web Styles and click Append, now just go to the bottom of the styles list.

Next, just change the Gradient Overlay blend mode to Soft Light:

And thats it! For your site, just use the different colors needed.

Posted in Photoshop Tutorials | Leave a comment

Advanced MP3 Player

Create a 400×400 document with a white BG. then using the Rectangle Rounded Tool, create a standing rectangle and right-click the layer and Raterize Layer:

Then right-click and use this blending options:

Nice, huh. now we will create the screen, then again with the Rectangle Rounded Tool create a rectangle in the top part of the one you made before, raterize layer:

Right-click and use this blending options:

For the Gradient Overlay just choose the “Foreground to Background” and change colors but the two colors have to be in the same range just one darker than the other.
looking nice, now select the Pen Tool. the first Anchor Point put it in the 3/4 (from up down) in the left side of the screen and the other in the 1/4 (from up down) in the right side of the screen:

now something weird will happen, dont worry just close the path:

now with the path closed, raterize the layer and press Ctrl-I. now select the screen layer and select the Magic Wand Tool, click outside the screen and select again the that you just raterized and press DELETE. now just set that layer to Soft Light:

for the screen we will need some icons. go to DaFont and download the CellPic font (so we save a lot of work). now using that font type (all in seperated layers) H, J and N. in the N layer, press Ctrl+T and rotate. Place all layers on top of the screen and under the Soft Lighted one. Now just add the Track number, artist name, song name and some other things you see in a CD/MP3-Player screen. The font i used for text is named DS-Digital, you can find it in DaFont too.

Now we need buttons, create some small rectangles using the Rectangle Rounded Tool. Then right-click the first layer you created and Copy Layer Style then right-click the buttons layer and Paste Layer Style. Now go to Blending Options and in the Bevel and Emboss change the style to Inner Bevel and in the Shading change the angle to 90°.

Now for the Play button, in a new layer holding Shift create a small square then press Ctr+T and rotate, then cut half. And keep doing this until you are finished with all buttons you need.

Posted in Photoshop Tutorials | Leave a comment

Image in Screen

Ok, first you will need a screen photo in which you will insert your image/logo. For this tutorial we can use this one but next time get one with a white background so you can cut it out easily.

Copy the image, open a new document and paste it. Now select the Polygonal Lasso Tool (L), zoom the or create perspective:

Get your image/logo, lets use the one from Unique Logo tutorial. Resize it (Control + T and reduce from the corner) so it will be visible in the whole screen, set Opacity of your image to 40% so you place it where you want:

Now, press Control + T again and holding Control grab the squares until its paralell to the screen:

Choose the Magic Wand (W), select the screen layer and click inside (the part that you cutted out), now go to your image layer and press Control + Shift + I and hit delete on your keyboard. Set Opacity to 100% again and press Control + D:

* If you got this:

Go to Blending Options in your image layer, click Outer Glow y select Normal y change the color to 40403F, leave the rest as it is.

Posted in Photoshop Tutorials | Leave a comment

Futuristic Metal text effect

Open a 300×100 document, with a white background. Press Control + J and fill it with 353D44. Type your text, size: 36 pt, and select two colors for it. I will use 65798B for the first part and D6DBDF for the second:

Now to save some time do this: click on the blue arrow in Styles, select the Web Styles and click append.

Apply the -White to Transparent- Style (the one in the red box) to the text layer:

Now right-click text layer and go to Blending Options:

Outer Glow
Blend Mode: Soft Light
Opacity: 40%

And change color to Black (000000). Leave the rest as default.

Go to Gradient Overlay and change the Blend Mode to Soft Light and click OK. In the Layers window change Fill from 0% to 100%, its on 0% since we applied the style but in order to have it like this, you have to change that:

Quite nice huh? now the last and most important step since it gives that futuristic metal effect. Press Control + Shift + N, to create a new layer. While holding Control click the text layer, once you get the selection, the Rectangular Marquee Tool (M) and holding Alt deselect the bottom-half part of the text:

Fill the selection with white and set the layer to Soft Light and press Control + D to deselect:

Posted in Photoshop Tutorials | Leave a comment

Blurred Dream Glamour photo effect

First of all, open the picture you want to modify in Photoshop, resize it to 400px in width (Image > Image Size) and Auto Level it (Control + Shift + L). Duplicate the layer by pressing Control + J and with the duplicated layer selected go to Filter > Blur > Gaussian Blur and type 3px for the radius and set the layer Blend Mode to Lighten, by now you should have something like this:

Press Control + J to duplicate the blurred layer, set the Blend Mode to Overlay and set the Opacity to 50%, this should be your final result:

Check the change:

Posted in Photoshop Tutorials | Leave a comment

Create amazing photomontages

Create amazing photomontages from DigitalArtsOnline.co.uk

Outcome

When i first saw the outcome i knew i would not find anyother tutorial that would beat this one, even though i kept looking the other tutorials to see if they had a chance but it was not agaisnt this one.

The tutorial is meant for intermediate-experienced people, the only problem i find is that it does not really have a functionality (if you dont think on selling artwork)…it is only to make a good photomontage but if you work as a graphic designer or plan to do it, well this will surely help you get some clients.

Posted in Outsider's Turorials | Leave a comment

Reflected Glass

I will show you how to get this reflected-glass effect for your artwork or the one you are working on:

First, put the color of your glass in A2B4BE or if you already have the shape, then just go to Blending Options > Color Overlay and apply it.
Now go to Blending Options and use these settings (just change the ones listed):

Inner Glow
Blend Mode: Soft Light
Opacity: 70%
Color: Black
Size: 30

By now, it should look like this:

After this, duplicate your glass layer with Control + J and name it Reflexion1. Holding Control click on Reflexion1 layer, (before continuing, please select your Marquee Tool) then right-click inside the selection and select Feather and set it to 15 pixels (the number may vary depending on your glass size), now put your mouse inside the selected area and holding Shift, drag it down a bit and press Delete on your keyboard several times (again, it depends on your glass size) and apply these Blending Options to the Reflexion1 layer:

Color Overlay
Blend Mode: Normal
Color: White

And it should look like this:

Now, duplicate the Reflexion1 layer with Control + J and name it Reflexion2, now, we do the same as before but you leave it thinner like this (the Reflexion2 is in black so you see how thin):

We are almost done so you must have something like this:

The only thing left is some extra reflections in the middle, for this you will need to get a duplicate of the complete glass layer and place it at the top of the other and name it Reflexion3.

With Reflexion3 layer selected, do the same as we did to the first Reflexion1 (the Feather thing) but lets break it up:

After you feathered the selection, bring it down to half the glass:

and press Delete, then press Control + Shift + I (to inverse selection) and bring it up a little:

and press Delete again and thats it, you are done.

I hope this tutorial helps you for getting a nice reflected-glass for your artworks as it worked for me.

Posted in Photoshop Tutorials | Leave a comment

Black Sleek Navigation Bar

Black Sleek Navigation Bar from Photoshop-Garden.com

Outcome

Of all the tutorials I saw today, this was the best simply because of the result. The navigation bar is sometimes the place where a site’s design starts and with this tutorial you will have a great beginning.

The tutorial was made for people that know their photoshop (knows where everything is located) and it is quite short -10 min tut-.
I always have a hard time on details when making a design, the navigation bar result has details but the tutorial does not tells you how to make them…

Posted in Outsider's Turorials | Leave a comment