With this post I want to show you some useful and quickly techniques with photoshop to create nice and modern layout.

Ribbon

3d effects has been a trends the last year, let’s see how  create, quickly, a ribbon in photoshop.

Create a new document 400*500 and call it “Ribbon“.

Set the guides and the rulers as show in the image below(is are hidden, CMD+H to show).

Set the container

Create the container : Create a new layer , I called it wrap, select the Rectangular marquee tool, create a selection 300*500 following the guides and fill it with white.

Container

Set the foreground color  to #d21010, draw a rectangle using the rectangle tool(U),go some pixels “out” of the wrap layer, it should be like this

Create the Ribbon 1

I will not apply particular effect or filter, is only a quick tutorial on how create it, so change background, colors or whatever you want.

Now we’ll draw a new rectangle  above the other layer,  exactly the out of box part of ribbon layer, and fill this new rectangle with a more darker color, to give the illusion of depth, I used #870808

With the new layer selected click CMD+ t or edit->transform -> distort. Drag the bottom left angle of the selection to down.

Release and apply the transformation

The ribbon

Finally, in the layer window, drag the darker layer down the main ribbon layer, this is the final result.

Final Result

Now let’s try to create the same effect, but changing with a rounded depth.

Rounded Ribbons

For a better view rotate the image on 90° CCW, zoom it and select the rounded rectangle tool. Draw a rectangle like this

Rounded ribbon

Select again the rectangle tool and draw a shape like a “base” of the rounded rectangle be sure to give a height like the rounded angle, should look like this

Cmd+E and merge the layers.

Rectangle Marquee Tool, select the bottom rounded middle of the layer and create a new copy layer from this

Flip the Layer vertical, drag  next to the first shape, then CMD+click on the layer in the layer window, and select the original then delete it

Now you should have this

Do the same for the left side and the deselect (CMD+D) and delete the second layer, as we don’t need.

Now we have to create the depth, so simply choose a darker color, as before, and create a Ellipse with the Ellipse Tool rasterize then cut in half, deleting the bottom middle, you can use the marquee tool then delete.

Move the half ellipse down the rounded angle then duplicate the ellipse layer and do the same for the other side.

Finish : move to next the wrap and then rotate again the image for 90° CW, final result

Rounded Ribbon with Photoshop

Inset lines

Another nice effect is the inset lines, like I used in this blog. Do a inset lines is easy.

Create a new document again 400*500 and fill it with #2f3a6b

New layer, change the foreground color with #010101, make a selection with fixed size 100px * 1px and fill it with(G) the foreground darker color. (Zoom with (Z) on the selection if you cant see the line).

inset line with photoshop

Now don’t deselect, move the selection one pixel down, create a new layer then fill it with #ffffff and set the blending level mode to soft light

Done! This is the final result

inset line with photoshop

Inset Typography.

Create beautiful inset typography require excellent skills and knowledge of photoshop, but a good way to starting and understand how obtain this effect is playing with the inner shadow in the layer style, here’s a quickly example.

Create a new document, fill it with #767a8e use a bolder font with big size and write something. I used League Gothic(is free search on google) 100px and #4a4d5e as color for the text.

Now double click on the layer in the window layer and set the inner shadow effects like this picture

Inset typography

And here we go

Inset typography

This is a good start point to work with Photoshop and create Inset Typography. You can work with shadows, gradients and other PSD effects to create your own inset effect.

You can download the PSDs at this link

Download

Jquery is, of course, one the best( or the best) JavaScript framework actually.

With jquery we can create amazing effects on the web pages, writing some few lines of codes, and you don’t need to be an experienced web programmer.

In this post I will show you how to create a nice and simple vertical menu with css and jquery, writing few lines of  code.

You can see the final result at this page, and you can download the complete source code with example from here.
First, download jquery from the official site, and after link it to your document. I’ve chooses to put the source code, for the css style and the javascript-jquery, in another file, you can put all in one if you want, IMHO I think is always better to separate it, it’s your choose.
Create the page and links the javascript file it’s really easy, how I suppose you know :

<link href=”style.css” rel=”stylesheet” type=”text/css”/>
<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/menu.js” type=”text/javascript”></script>

After I’ve created a simple page structure, with the menu,like the “semantic” want,  is  in a  list, in this case unordered :

<div id=”navigation”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Freebies</a></li>
<li><a href=”#”>Tutorials</a></li>
<li><a href=”#”>Downloads</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

Now  style the menu :

#navigation{
width: 200px;
}
#navigation ul{
list-style: none;
}
#navigation ul li{
height: 30px;
border-bottom: 1px dotted #ccc;
}
#navigation ul li a{
text-indent: 20px;
padding: 5px 0;
display: block;
height: 20px;
text-decoration: none;
color: #434343;
background-image: url(bull.png);
background-repeat: no-repeat;
background-position: 5px 6px ;
}
#navigation ul li a:hover{
background-color: #8E8963;
background-image: url(bull.png);
background-repeat: no-repeat;
background-position: 15px 6px ;
color: white;
}

What I’ve done here? Simply :

give to a menu a fixed with, styling the li and the link , give to a link a background image (background-image: url(bull.png); ) and when the mouse is over  (a:hover) , change the background color (not the image) and the link color.

Another thing to note is that I’ve used the backround-position property for the image, so with this I can move the image around  changing the values of the position (X and Y axis) and make this appear aligned with the text.

With Jquery I will “move” and animate the link on the right when the mouse is over, so I need to move the image too, and for the reason that I’ve used the image like background and no like image in the html code, I need to move that when the link will animated, maybe using directly the image in the code the effect will come better, you can try at your own.

Ok now we can go to our javascript and write the jquery-code . Create a new js file and call “menu.js”, write this simple code :

$(document).ready(function(){
var Duration = 150; //time in milliseconds

$(‘#navigation ul li a’).hover(function() {
$(this).animate({ paddingLeft: ’20px’ }, Duration);
}, function() {
$(this).animate({ paddingLeft: ’0px’ }, Duration);
});

});

OK  let me explain this code:

The first thing is to tell to jquery that, when the DOM is loaded ( this is rally important)  :

$(document).ready(function(){
});

This is the first thing that you must learn about Jquery, with this piece of code, you will tell to Jquery this :  “do the instruction only when the entire document is loaded”.

This is great and really usefull because  you don’t have to put any “behavioral” markup in the HTML, and this is the reason why you can separate every Javascript from the document.

After I’ve created the function that must be executed when the DOM is ready :

var Duration = 150; //time in milliseconds

$(‘#navigation ul li a’).hover(function() {
$(this).animate({ paddingLeft: ’20px’ }, Duration);
}, function() {
$(this).animate({ paddingLeft: ’0px’ }, Duration);
});

And it’s all! What it means this? I will try to explain in a simple words :

With the $(), you can get every element of the DOM, an it is like the documentGetElement in the normal javascript.

So I Want that ,when the mouse is over the tag li inside the navigation div, start the animation effect, so I’ll “take” this element with the dollar function

$(‘#navigation ul li a’)

This is the second important thing you must learn on Jquery.

And finally, I’ve used the animation on the menu, using the animate function of jquery, really simple to use, in this case I gave 20px at padding-left css property to make that the text “move” on the right side .

$(this).animate({ paddingLeft: ’20px’ }, Duration);

The $(this) refer to the element that we are using, animate is the jquery function (following the link you can learn more about this function) and Duration is the duration of the time, I’ve used a starting variable to give a value (var Duration = 150; ).

The rest of the code is another function to  ensure that the link returns at the original position.

,function() {
$(this).animate({ paddingLeft: ’0px’ }, Duration);
});

Conclusion : Jquery is the best framework that I’ve ever used, is simple, easy to learn and make the web designer’s life really easy, although you are not a experienced programmer.

Here the link relativies to jquery and maybe utils for this simple tutorial :

Download Jquery

Learn Jquery

The animate function of jquery

Well you can see the final results here :

Simple menu with Jquery.

Download jquery simple menu with example :

Another amazing effect used today in the web 2.0 is the text reflected, another classical sign of a 2.0 web graphic. Usually is used in the logos design, but not only.

I will show you how to do this effect in few simple steps with photoshop. First of all, after opened the program, create a new document 500*300 of dimension and blank background. Choose the Type toll and write your text, for this example I’ve used Georgia like font and a dimension of 48pixels, but you can do this in the way that you prefer. The image now is something like this :

text reflection with photoshop

Duplicate the text level, you can do this from the level menu – duplicate layer or directly from the layers windows, right click on the layer and choose duplicate. With the new duplicated layer selected go to the edit menu and choose – transform -flip vertical, and drag down the level (with the move tool ) until the down limit of the first level, like this image :

duplicat level and drag down

Add a layer mask to the duplicated level , clicking on the 3º button from the left, down in the layers window.

add a layer mask

Now choose the gradient tool, and in the palette color choose black to white and trace a vertical line that start from the lower point of the duplicated level until the start of the text of the original level, look the image to understand what I want to say :

gradient tool

The results will be this

And finally low the opacity of the layer to 30% and that’s all!

The text reflection is ready. This effect is applied to the photoshop fire text tutorial, in the final part to make the reflection.
Hasta Luego!

Well … after the tutorial to make fire text with photoshop, In this tutorial I’ll show you how to make a badge with Photoshop.

The are is a tipical graphic elements of the web 2.0, a lots of site use the badge. Usually I see that are used a lots in the Header of the pages, some in the logos, with reflection text, anyway, this give to your website a little touch of 2.0.

If you don’t want to make your own badge but you want something like “download and use”, you can download a fantastic badge sets, psd source included, from Dezinerfolio, a great blog with a lots of free resource, one of my favorite blog.

Open Photoshop and create a a new document 300*300 px with blank background.

From the Tools Palette, choose the Polygon tool, and use these settings :

badge 2.0

Now draw the badge usig #dc0b0b like first color now you have this :

badge

Now go to blending options (right click on the layer in the layers window) and use these settings :

Drop shadow opacity 50% , distance 5 spread 0 size 15

Bevel and emboss size 2 soften 0 direction up

stroke size 5 position inside color #FFFFFF

And this should the result :

badge settings

Now we need to create the blur on the top of the badge. With the elliptical marquee tool, make a selection in the top left corner of the badge and create a new layer from the layer menu :

Switch the main color to white and select the gradient tools and from the gradient color menu choose foreground to transparent and trace a line from the top left corner to the bottom right corner of the badge, after deselect all, ctrl +d and apple+d in mac, go to the layers window and low the opacity to 35% and fill to 75%, this should be the results :

badge

Finally you can personalize the badge on your way :

badge 2.0 with photoshop

Enjoy!

With this tutorial I want to show you how to create a text on fire using photoshop. First of all open your photoshop and create a new document 400 *400 pixel. with a black background and white text on. I’ve used the fonts Impact and a font size of 36px , but you can use another fonts or dimension. ok let’s go now and create the fire text!

Write your text using white color for the text.

text on fire

Now duplicate the text layer from the menu layer – duplicate layer. Now go on the level window and deselect the original layer, so we can see only the new duplicated layer, like this :

hide original text layer

Now go on layer menu and select : merge visible, so we will have only two layers, the original text and another layer from the background and the copied layer, this last is the layer were we will work on.

merge visible layer

Now rotate the canvas using the menu : Image – image rotation – 90 º CCW.

rotate canvas

Now is time to use the Photoshop filters. Go to Filter -Stylize – Wind and apply this settings :

wind filter photoshop

Reapply the filter another 2 times, with ctrl+f or command +f if you are using a Mac, until you will have an image like this :

the wind filter

Now rotate again the image, on 90º CW to reput the text on original position and apply the Filter blur – Gaussian blur with a radius of 1.5, or more it depend how do you want the fire effect), here the settings of the blur filter :

blur filter settings

Apply this filter another time and we have this image :

blur filter photoshop

Now it’s coming the more personalized part .. So we’re going to use the liquify Filter, the results depend on your “hands” , this effect is to make the Flames, so use the filter at better, you can learn something about this filter at this links. This is my image with the flames.

flames

Now go to the menu : image – Hue/Saturation and apply this settings (remember to click on colorize):

hue settings

The results will be something like this :

text fire hue settings

Now duplicate the level and , in the new level, reapply the HUE/SATURATION but this time without click on colorize and use these settings :

hue/saturation

Now with this new level selected go in the window levels and choose , from the select menu,Color Dodge (always with the background copy selected).

merge levels

You will have an images like this

fire

Now show the original text layer, and go to blending options ( right click directly form the layer window and choose blending options), and apply a gradient (I’ve used grey to black) and outer glow and inner glow, better if you use yellow like color for this last inner and outglow. Finally you will have something like this :

fire text photoshop

And this is the fire text!

But we can do something better now. We can make this text more web 2.0, adding some nice effect used today in web 2.0.

For example a reflection and create something like this :

fire text 2.0

On the next tutorial I will explain how to create this reflection effects.

Hasta Luego!

Here we are! This is my first post on my blog!

I want to start with a simple tutorial for Photoshop, how to manipulate the weather and add rain to a sunny day on the beach.
So… Let’s start with my first post on lastwebdesigner.com.
This is a simple tutorial on how to make a rain effect on a photo, in 6 simple step, using Photoshop.
First of all, we need a Photo to use and modify, I’ve used this :

rain effect photoshop

Open this photo with photoshop.

1. Create a new layer : Menu layer -> new layer from the menu :

Create a new layer with Photoshop

2. Filter – Render – Clouds

Add clouds filter

3. Change the opacity to 65%.

Low the opacity level

4. Filter – Noise – Add noise, using this parameters :

add noise filter

5. Filter – blur – motion blur and use this settings :

add motion blur filter

6. Finally, from the select menu on the left of the levels window choose “overlay”.

rain effect photoshop