Another green web navigation tutorial from me. This one is the last from this kind, hoep you will find it useful.

(You can click on the images to view them in bigger size)

1.Start this tutorial with opening a new Photoshop document. My dimensions as you see are 800 width x 308 height but that’s not so important.

2.Take the rounded rectangle tool and set the radius to 30px. Choose a green color: 78aa12. And then draw a shape like in the image below.

3.Next open the blending options of this shape and follow the settings from next few images. Drop shadow:

4.Inner shadow:

5.Inner glow:

6.Gradient overlay. The gradient is default black to white here with lower opacity: 10%

7.Stroke:

8.Take the rounded rectangle tool again with radius of 30px and just change the color to grey c9c9c9 now. Draw a shape same or similar to the picture below.

9.Duplicate this shape 4 or more times, depending of what you want to do.

10.Take the text tool and type some texts Home About etc…

11.Next let’s make the over button. Duplicate some of this button shapes we already have and clear it’s layer style. Right click with the mouse on the layer and choose clear layer style.

12.Now click twice on this layer shape and change it’s color to green. Or if you use other color, the color should be the same as this of the center of our bar.Remember we have used some layer styles like inner shadow so choose the color from the center.

13.Take the text tool again and type the same text for this button but this time the color will be white.

14.Now make a selection of this button. Hold CTRL and Click with the mouse over the layer icon then take the rectangle marque tool and while holding ALT remove the half of this selection.

15. Fill this new selection with white color, change it’s layer style to: soft light then lower the opacity to 50%.

16 We have this nice gloss here but I want it to be more soft. So make the selection from our button again. Like described in step 14.

17. And now use a filter: Gaussian blur. I am using a radius of 6.1

18.Next take the text tool and type some texts on our bar. Link1 link2.

19.We need a logo don’t we I have found one here: http://www.iconfinder.net

20.Again let’s type some text below our logo. And as you see we’re ready.

This is our design and I hope you like it. Feel free to ask any questions if you have, I am always happy If I can help you.

Related Posts

No related posts found

In this tutorial I’ll show you how to make nice looking web menu for your websites.  It’s look is almost glossy and metallic, hope you’ll find it useful.

1. First make a new document with this dimensions: 800px x 180px

2.So here I have made a background and something like a logo.  This is where our logo maybe should be. And the background color here is: 92adbe

3.Now select a Rectangle tool and use fixed size for example I use: 800px 30px but you can experimetn offcourse! And the color of the shape we’ll draw is: 186f90. Which is not so importand now because I thing to use a special gradient with no change to opacity. And also everyone can change this color to whatever he wish or like   But for the same result use the settings in the image…

4.Now when you make the shape, open the blending options of this layer and change the settings like on the next few images, drop shadow:

5.Inner Glow:

6.Gradient Overlay is special here. Well the colors are 1: #d6eaf7 2:#c2d4e0 3:#b5c6d0 4:#d8e1e7 5:#eff4f7
and the 3 and 4 are very very close to each other. Almost over each other.

7.Here the next thing you can do is to draw a shape under this menu like in the image. The color is blue and I use a Gradiend Overlay from the Layer style window:

8.Next select the Rounded Rectangle Tool and use fixed size: 100px 30px.

9.Click on the menu and this will be our button! Place it somwhow like in the image below:

10.Type some text over it:

11.Now open the blending options of the button shape and use settings from next few images.

Inner Shadow:

12.Inner Glow:

13.Stroke:

14.Take the Line tool and draw a line next to the button home. I use a blue color for it.

15.Now select the 3 layers: the button shape, text and the new line and group them.
To do this after select hit shortcut CTRL+G

16.This group I called 1 and then duplicate this group for or more times.
Easies way to duplicate just take the group and drag it to the new layer icon in the bottom of
the window.

17.After all this you should have something like in the image below:

18.So change the names of other buttons to whatever you like and your nice
web menu is ready. Hope you like it.

Related Posts

No related posts found

In this tutorial I will shot you how to make a very nice looking glossy grey navigation menu for your web site.

(You can click on the images to view them in bigger size)

1.Start with a new document: 800px 150px. I’ll draw a shape with rectangle tool which I’ll use as a background. Color: 738594

2. Adding a place for the logo and description…

3.Take rounded rectangle tool with color: e3e3e3 and radius of 35px.

4.Now open the blending options of this shape and follow settings from next few images…
Drop shadow:

5. Inner glow:

6. Satin:

7.Gradient Overlay:

8.Now add some text with a nice font and lines between the buttons:

9.I’ll add 2 shapes for the roll over state!

10.Let’s continue with the search box… Draw 2 shapes like the example on the next image…

11.Copy and paste the same layer style like the navigation bar…

12. And add stroke to this layer style with color: 858585

13.Now take the Ellipse tool.

14. And draw a shape with it. This will be our GO button. Color: white.

15.Paste the same layer style like before…

16.Here we’ll change the stroke a little bit: Size:2 and Opacity: 19%

17.Add 2 texts Search and GO like in the next image…

18. Now let’s add a little bit of a glossiness… Draw a white shape over our first shape.

19.Take the rectangle tool and use subtract from shape area and cut the half of our new shape…

20.Lower the opacity: 25% and change the layer mode to Soft Light

21.You can move this new layer down… But at all we’re done

Hope you like it and it has been useful for you…

Related Posts

No related posts found

In this tutorial I’ll show you how I design an awesome 3D color graph in Photoshop.

(You can click on the images to view them in bigger size)

Step 1.
First open a new image. The bigger dimensions are better for this tutorial.

Step 2
Take the rectangle tool and draw a shape like the mine in the image: This is where our 3d graph will stay.

Step 3
Next take the custom shape tool and and choose the grid shape I am showing you here:

Step 4.

Draw a shape with this custom shape and then duplicate it as much as it needs to get the look of this image:
(It’s good to group all this shape layers you’ll duplicate as I did. )

Next with the text transform tool CTRL+T use perspective and distort and try to make it look something like in my image:

Next go to the first shape you draw and add a layer style. Gradient color and choose the colors you wish.

Step 8.
Use free transform CTRL+T and perspective and make it look like the image below:

Step 9.
Duplicate this same shape and flip it horizontally. Also using free transform you must reduce the width of this shape. Make it smaller.

Step 10
Make the color of this shape a little bit darker.

Step 11.
Group this 2 shapes now and duplicate them. Move the new group below the first one.

Step 12.
Then resize it using free transform tool.

Step 13.
Click on this shape to change the color and make it lighter.

Step 14.
Repeat steps from 11 to 13 as much as you need.

Step 15
And change the colors also.

Step 16
After all this is what I have to the moment. It’s actually almost ready

Step 17
But the right side of this graphs must be a little bit darker. So click on it and in from the blending options let;s add an inner shadow.

Step 18
Copy and paste the layer style to all other right sides of this graph.

Step 19.
It’s done but let’s make a reflection to make it look more real and good. Just group all this and duplicate it once. After you duplicate use free transform tool CTRL+T and flip it vertical

Step 20.
Reduce the opacity of this layer.

Step 21
Let’s add a shadow. Again duplicate 1 time this group and place it beneath the first group. Use free transform again and distort to make it look like in my image:

Step 22
It’ should look something like in the image below:

Step 23
After this is done merge this group CTRL+E and change it’s color to black.

Final:

Reduce the opacity of our shadow and you’re done: Looks nice

Hope you like it. Feel free to post your replies with questions and suggestions.

Related Posts

No related posts found

In this tutorial I’ll show you how to make a nice unique web button. I hope you will like this.

1. Take the rounded rectangle tool with radius 35px and draw a rectangle similar or same like in the picture:

2.Open the layer style window of this rectangle and follow the settings from the next few steps. Drop Shadow:

3.Inner Glow:

4.Bevel and Emboss and you can use contour here If you want the settings are default with the lower opacity:

5.Satin:

6.Stroke:

7.After this you must have something like in the picture here and now make a selection of the shape of this button (Hit CTRL+one mouse click on the vector mask thumbnail)

8.The next thing you should do is to take the rectangle marque tool and cut the bottom part of the selection. So now we’ll have a half selection. To cut with rectangle marque tool hold ALT keyboard key and drag with the mouse.

9. Make a new layer and feel it white color. Use CTRL+Backspace to do this much faster, but remember your foreground color must be white while doing this.

10.Make the layer mode to soft Light opacity: 25% like in the picture:

11. Take the type tool and with some nice font with a white color type the text you want (About us in my case):

—So now If you like the button as it is, you can leave it like that. If you want you can continue to see how to make the other part of it.—

12.Take the custom shape tool now and choose the shape I am shown in the image:

13.So on a new layer draw this shape in right side of the button.

14.Take the direct selection tool and while holding CTRL+ALT+SHIFT try to make the shape like in the next image:

15.Use the free transform tool to flip the shape horizontal.

16. While you have something like that, you can follow the settings in the next images:

17.Drop Shadow:

18.Inner Shadow:

19.Stroke:

20.Inner Glow:

21.Gradient Overlay:

22.Now here you can make a selection again and you do the same for this shape like in the step 7 and step8.

23.Make the layer mode to soft light again and maybe change the opacity. And this is it.

24.The final result of this button in different colors. Hope you like it.

Related Posts

No related posts found

In this very easy to to follow tutorial I will show you how to make a nice design of film-strip tutorial in Photoshop. It is completely done from scratch just using pen tool and shapes. Hope you’ll find this useful.

The dimensions in this tutorial are important to achieve nice results!
(You can click on tutorial images to view them in bigger size)

1.First open new document with dimensions: 800px 236px;

2.Create new layer and with the rectangle tool make a shape with black color like in the picture:

3.Hit CTRL+R to show the rulers and in this case position guides as shown in the picture: 0, 14, 28, after that if something is not right it can be fixed later…

4. Two more guides on 7, and 21

5.Now take the rectangle tool again and use fixed size from rectangle options: 190px 140px

6.Now select the shape layer and with rectangle tool select subtract from shape area (-) and then hold the ALT+ SHIFT and click in the middle of first 2 guides between 0 and 14 (in the centre)

7.After that you can select direct selection tool (A) and select the points of this shape. Copy then move to the right
using arrow keys…

8.When you’re ready take Rounded Rectangle tool and use fixed size again: 15px 23px.

9.Again select subtract from shape area Shortcut: (-) and then click in the middle of this guides like in the picture:

10.You can take direct selection tool (A) and select the points of this shape too.Copy then move to the right using arrow keys… same as before…

11.When move to the right and to the left I use SHIFT…

12.You should have something like that to the moment:

13.Then after all copy and paste you can take type tool and type some numbers 1,2,3… somewhere after the second rounded shapes…

14.We’re ready with our basic film-strip now we’ll make it a bit longer… Use canvas size:

15.I’ll make a little re-position of the points in my work using direct selection tool (A).

16.After that group all layers to the moment and duplicate the group… Move to the right and change the numbers…

17. I added some images to it, that’s where the fun part comes, everyone can add any pictures he wants and
let’s play a little with this film-strip on the next steps…

18.Duplicate all groups now (depends of how long film-strip you have made) then…

19.And merge this groups (but don’t merge the original! we make this merged layers so we can experiment a lil with them)

20.Using free transform tool I’ll rotate the film-strip a little…

21.Use some perspective…

22. Now go to filter -> Distort -> Wave…

23. And you can experiment with the settings, also you can use twirl filter too. Here are my settings I have used in this tutorial.

24.I’ll add and some Drop shadow to this:

And here are the final result with different settings:

Hope you like it.

Related Posts

No related posts found

In this tutorial I will show you a very interesting and nice effect for creating a Mosaic of photos from a photo in Photoshop. The final effect is very interesting and nice looking. I hope you’ll like it.

1. First step open new document in Photoshop and insert some image that you’ll like to use. The dimensions I use for this tutorial are: 1280px x 1024px.The image layer must be above the background image Like it’s shown in the picture:

2. Now duplicate the image layer and with free transform tool (CTRL+T) resize it a little bit and centre it in the middle of the white space.

3. Next, using rectangle tool make a shape, a little rectangle in the one of the corners of the image, duplicate it and then move it a side. Like in the next image.

4. Continue doing this until you have first row of rectangle shapes (little tip: if you rectangles don’t fit the image properly just use free transform tool select them all and resize them!),the easiest way to duplicate is: take the layer with the mouse and move down to the new layer icon:

5. To make the rectangles much more interesting, use free transfrom tool (CTRL+T) and warp feature there.

6. When you’re ready with all of this little rectangles, group all of them (CTRL+G) If you’re still not, because we’ll need that for the next step.

7. Once you have the first group of rectangles, take the group and move with the mouse to duplicate:

8. When you duplicate, a good idea here is to flip the group of rectangles horizontal or vertical, so they will not look all the same. This can be done for all the groups that will be duplicated.

9. To do it much faster take more than one group and continue to duplicate:

10. After you’re done with all that move to the next step where the easiest part comes:

11. Open one of the rectangles layer style window and here use the settings from below images:

12. Blending options custom: Fill opacity:0

13. Stroke: Size 1px colour: white.

14. Drop shadow: Angle: 175, Distance:1px, Spread:0px, Size 4px

15. Now you must copy this layer style to all other rectangles. Click with the right mouse button and choose Copy Layer style.

16. Then paste on all another. You can use Shift keyboard key to select the layers easily.

17. You must have something like in the picture below at the moment:

18. Almost the final ;D, The next step: need a selection of all of this rectangle shapes. TO do that Hold CTRL and click with the mouse on the Vector mask icons of little rectangle shape layers . This is a little boring here!

19. Once you have the selection of them, go and select your picture like shown in image below and hit shortcut CTRL+J.

20.Now you will have a new layer with images from the selection, a small little pictures that make the big one! Just hide the old layer of your picture and you’ll see it!

21. So to use this effect for every picture you want now, you just need to insert a picture. Move it to the centre make a selection of layer 1 in my case where the effect is used (no need to make selection of all rectangles one by one again!) and then hit CTRL +J and hide the old image layer. That’s all. Hope you liked it.

FINAL:

Hope you like it.

Related Posts

No related posts found

In today post I will present you a new tutorial from me. It’s a detailed tutorial of how to make a vector car from photo in Adobe Illustrator.

In this tutorial I will show you the basic techniques and some tips for making vector objects using pen tool in Illustrator. For this tutorial we’ll not draw directly, but we’ll draw with pen tool over a photo. Before we start let’s choose a good photo, I will use a stock photo from sxc.hu which you can find here: http://www.sxc.hu/photo/953130

Photo we’ll use:

Step 1:

Open the car photo in Illustrator and take pen tool. Select yellow color and start drawing with pen tool on a new layer. Look my work on the image:

Step 2:

Continue the work with pen tool and look carefully about the details.

Step 3:

Continue the work with pen tool and look carefully about the details.

Step 4:

Continue the work with pen tool and look carefully about the details. Here I use lower opacity, so I can see better what’s going on around.

Step 5:

If you’re following the tutorial step by step, look carefully at the points I make.

Step 6:

If you’re following the tutorial step by step, look carefully at the points I make.

Step 7:

And here we’re almost at the final. After we close the path of this shape we’ll have the basic shape for the car, but we’ll need to make some changes for it.

Step 8:

We will need the Pathfinder panel so if it’s not open go to Window menu and choose Pathfinder

Step 9:

We need to cut out the windows and the lights and also some other parts of our car. Let’s start with this light below. Begin to draw with the pen tool and make the exact same shape.

Step 10:

When you’re ready with the shape, select on both shapes, the both and the one for the light then click on Subtract from Shape Area button in Pathfinder panel

Step 11:

Using the same technique you can cut out the other parts. Below is the result you should have if everything is done right.

Step 12:

The next thing is to draw some of parts which are black and behind the body of the car. Do this on a new layer and move it below the 1st one.

Step 13:

Again on a new layer draw the windows shapes.

Step 14:

Next let’s continue with the wheels. Begin to draw the threads of the tire.

Step 15:

When you’re done with them draw the tire. It should be behind them so make on new layer again and move it below.

Step 16:

Use the oval tool and draw a shape. Then you can adjust it using free transform and direct select tool.

Step 17:

Copy and paste this exact shape and make it smaller. Then select both shapes and click on Subtract from shape area button in Pathfinder panel.

Step 18:

Using the same techniques let’s make the other wheel.

Step 19:

Also making of the rims can be done using same methods. This is the car until now.

Step 20:

Now make the sign for the car number using pen tool.

Step 21:

Lower the opacity of the car body start to draw the lines of the car, but use only border color here.

Step 22:

Continue that for all the lines of the car.

Step 23:

Make the light shade for the windows. Draw them choose white color and lower the opacity.

Step 24:

You can also use a gradient color for them. Here is how they look now.

Step 25:

Make the lights of the car using the same techniques and methods we have used until now.

Step 26:

Here’s a whole car preview again: Here I have add the handle for the door.

Step 27:

In that way you can add all the details you like for the car, it takes some time but at the end the results are better if you spent more time on it. Here I also played a bit with some colors and so on.

Step 28:

Now let’s make some shades of light for the car. There is very different methods for making this, you can use mesh tool or gradient colors. It depends on you, here I will show you simple way. Just draw the shape where you see most of the lights reflection are and choose white color for them.

Step 29:

When you’re done, lower the opacity a bit, as much as you like.

Step 30:

And here I also add a shadow beyond the car. Black color with lower opacity.

Final:

Here is the final vector car we have. I hope you like it.

Thank you for reading this. I hope you like it and you’ve learned something here. Or at least you find it a bit fun. In a separate post later I will give you the free Ai file of this vector car so don’t miss it.

Feel free to share this tutorial with your friends and you’re welcome to comment and ask any questions or to say you critique.

Related Posts

No related posts found

I have just finished my latest artwork called I love the coffee smell. It’s made from scratch in Photoshop and Illustrator. In this post I will show you the final artwork and a brief explanation of how I made it.

It’s a mix of vectors and paintings which give this nice look and feel. Hope you like this.

Step 1

First I started this artwork willing to design a simple cup of coffee in Illustrator. So the first image was this cup I designed:

The cup looked nice but too simple. I was not satisfied of this result. So a friend suggest me to change the colors of this.

Step 2

The more good looking coloured cup:

This one is much better, the red colors give a new look of the cup and they fit good with the hearts.

Step 3

Need a background:

The beautiful cup need a beautiful background. So I have copied the cup from Illustrator and paste in Photoshop as a Smart object. Started to play with the brush tool, adding the background, the table first, the window and the curtains. Feels better but still simple.

Step 4

This curtains does not look so much good. Change them!

Here a friend give me those suggestions: The curtains not look good, add book and maybe a vase and work on the window. Yes this tips are useful and exactly good critique. The book and the pen are vector here. Other objects just a drawing.

Step 5

This curtains need to be more transparent.

That is a good tip again for this artwork and definitely worked well. Just played a bit with the opacity of the curtains layer to make them a bit more transparent.

Step 6

Add a picture at the wall and we’re done.

So added a picture and moved the cup and the book around till I like it. That’s my final artwork.

Hope you like it and feel free to reply to this with your questions, suggestions or critique.

Related Posts

No related posts found

I am continuing with my works on this wordpress blog again. I have made a little pause, having some other stuff to do and now I am back with new ideas.

It take some time for this tutorial to be done, the reason is I make the whole design in 1 tutorial this time. As I said I have promised I’ll made a change with my tutorials and that’s it. You should not wait for tutorials to come 1 by 1 but I decided to make it in on big tutorial.

So here it is: 2 videos, 5 minutes each will give you a brief explanation of how this theme was designed. It’s called Fresh green. Later on a new post I will post this theme for free download, but until then you can watch this tutorial, and why not try to make theme like this for wordpress too.

The best way for learning is practice, so why not try. Hope you find this tutorial useful…

First of all we should made the design for our theme in Photoshop. For this I have made this big tutorial in 2 parts, where you can see how I have designed this theme:

Part 1

Part 2

After your design is ready, the hard work comes…

Yes that was the fun part, next you should crop the theme, I have already make a tutorial for this and you can find it here: Crop Theme tutorial

In short. First you should crop the header background image. The search box image and search button, the post and sidebar background images. Also the footer and so on…

All this you can find in my earlier tutorial there.

After you crop the theme you should begin to work on the CSS and HTML. You can find all my tutorials which can help you about this here: Design WordPress Theme Tutorials

In short, you can begin with the header. Let me show you what’s new I have add in this theme:

For the header:

My old header was 1 div with fixed width and height where my logo and search box placed. In the new header I was having the need to add a background image. So I make a new div called Header wrapper where I placed the old Header div.

The Header wrapper CSS is like this:

#headerwrapper{
background: #9daa74;
width: 100%;
height:134px;
}

The header CSS is this:

#header{
background-image:url(images/header.jpg);
background-repeat:no-repeat;
width: 1200px;
height:134px;
margin-left:auto;
margin-right:auto;
}

The purpose of this is to make our header background in the center and the Header wrapper width to be infinite. In this way my header background will be always in the center and the wrapper green color will be at 100% of your browser window always no matter if you resize it or zoom in zoom out the page.

The search box

The searchbox is made with the same technique as in my  Design a simple search box and search button tutorial. The only difference is the image I am using are other.

The navigation.

It’s almost the same as the old one except I use another image which duplicate itself and the width is at 100%  also, so only the CSS is a little bit different:

#menupages{
width: 100%;
padding-top:3px;
height:31px;
background-image:url(images/navigation_img.jpg);
background-repeat:repeat-x;
border-bottom:3px solid #cebb95;
font-size:11px;
font-weight: bold;
margin-left:auto;
margin-right:auto;
}

#menupages li{
display: inline;
margin-right:1px;
color:#000;
height:30px;
width: 75px;
}

#menupages li a{
color:#000000;
display: inline;
float:left;
height:25px;
width: 75px;
line-height:0px;
padding:5px 5px;
text-transform:uppercase;
}

#menupages li a:hover, {
display:block;
background-color:#eeeeee;
color:#808b60;
}

#menupages li.current-cat a {
background:#79939a;
}

The posts area is much different from my first theme.

Every 1 of my posts have a rounded corners at the top and at the bottom. For that purpose I have made a new divs which i have placed in all of my pages like this:

<div id=”posttopimage”></div>

All the divs like content, tags and php which we need for our post to work is here

and at the end of this code is this:

<div id=”postdownimage”></div>

And Here is the CSS for this:

.posttopimage{
height:13px;
width:801px;
float:left;
background-image:url(images/post/post_img_top.jpg);
background-repeat:no-repeat;
}

.postdownimage{
height:13px;
width:801px;
float:left;
background-image:url(images/post/post_img_bottom.jpg);
background-repeat:no-repeat;
margin-bottom:7px;
}

The side bar is made with the same technique.

The last thing I want to mention in this tutorial is the footer. I wanted to make a 3 column footer for this theme, which I have made using tutorial. The tutorial for this you can find here: Tutorial: Add 3 Centered Columns to WordPress Footer and I just changed the CSS to fit my needs.

Well that’s all about this theme. In my next post I will give you this nice theme for free download. I will modify it a little bit. I hope you like it and feel free to share this post, to comment and ask questions, give suggestions, and tell me your critique.

You can download the the free PSD for this theme here: Fresh Green Theme PSD (134)

Related Posts

No related posts found