FOR BETTER DESIGNS » designer

Tutorial: Greeny navigation for your websites

Ali Chorov — Thu, 27 May 2010 10:01:29 +0000

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.

Tutorial: Nice glossy menu

Ali Chorov — Sat, 22 May 2010 08:40:39 +0000

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.

Tutorial: Design glossy grey navigation menu

Ali Chorov — Thu, 20 May 2010 14:15:46 +0000

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…

Tutorial: Design Unique Web Button in photoshop

Ali Chorov — Mon, 10 May 2010 09:16:06 +0000

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.

Tutorial: Design a film strip in Photoshop

Ali Chorov — Tue, 04 May 2010 17:17:22 +0000

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.

Tutorial:Learn to make mosaic of photos

Ali Chorov — Sun, 25 Apr 2010 20:52:45 +0000

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.

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.

Fresh collection of great free icons for your designs.

Ali Chorov — Mon, 12 Apr 2010 14:50:02 +0000

Today I will present you again a new collection of free icons for your designs. This time I’ve searched for the newest icons which have been released in the period of January 01 — April 12 2010. So all of them are fresh and I guarantee that they are really nice. I hope you’ll like this huge collection of awesome icons. Thanks to everyone from the world of design!

The icons I collected this time, are very different and you can use them in many projects and in a lot of ways. For your web sites, for your desktops with files and folders, interfaces and other.

Note: It’s important to read the fine-print before using any icon sets; although they are free, some of them may have restrictions for commercial use (or require that you give credit to the designer).

Web Design icons:

Partner Controll site icons

Copenhagen

PixeloPhilia 32PX Icon Set

Basic Set 2

blue style 5 icons

Art Icons:

This is ART Icons

Windows icons:

Windows 7 icon

Windows 7 icon 2

Windows 8 icon

-

Single icons:

Royal Badge Icon

Apple Fruit Logo

Icon design “bottle ship”

Icon of biplane

Bugs Bunny Icon

Binoculars

CANON 500D ICON

Pencils in a container

Other icons:

Beginning…Android

Cartoon Icons Preview

Littlear icon

Don’t forget to visit the authors pages and thank them for this beautiful icons. They’re really awesome and useful, also read the requirements for using them in their pages.

Feel free to post any comments with questions, suggestions or critique any time and to share this post with your friends.

Copenhagen

25 Amazing vector car illustrations for inspiration

Ali Chorov — Wed, 31 Mar 2010 16:57:44 +0000

Again I need some inspiration, and I think maybe you need too. I’ve searched for some vector cars in Deviantart and I have found a really great works. Here is collection of 25 amazing vector illustrations that I am sure you will like.

Vector art is one of my favourite art, I love doing it and I really enjoy the final results, especially when a person have passion and is talented he can make wonderful things. Here look at this beautiful works I have found and take your inspiration, I am sure you will enjoy them all, as they are really awesome and beautiful.

1. C-West Skyline — Vector by ‘dangeruss

2.Civic SS — Vector by ‘dangeruss

3. Jaguar-XF by ~jay-cozzy

4.NISSAN GT-R by ~mechanix-ugp

5.Vectra GT WTCC Vexel by ~proxe9

6.Toyota Celica Vector by ~steelwagon6

7.S15 Time Attack — Vexel by ‘dangeruss

8. Z28 Vector by ~stlcrazy

9. 69 Camaro SS by ~ygt-design

10.VECTOR Honda S2000 by ~hoshiboshi

11. Dodge Viper SRT-10::Vector art by ~Redxibi

12.Dodge Viper Vector by ~DesertViper

13.Honda S500-2 by ~GraphicDream

14. Chevelle Vector by ~licougarnut

15. Lotus Elise by ~solgas

16. Ford Mustang Vector Portrait by ~bobbyrock

17. Saleen S7R Vector by ~p3nx

18.Silvia S15 Vexel by ~p3nx

19.The Koenigsegg by ~Beowulf-Kennedy

20. Ferrari 575 GTC Toon by ~p3nx

21.Z-0range by ~CRWPitman

22. Corvette C6 by ~E-Serrano

23.Dodge Challenger Vector by ~Wrofee

24.Mercedes-Benz SLR 722 Edition by ~CRWPitman

25. Carrera GT by ~deeesuke

Awesome WOW, all of them are really inspirational. I hope you liked them, for more visit the pages of this authors and search throw their galleries.

Feel free to share and post your your replies to this post anytime.

Till the next time.

.69

Camaro SS by ~ygt-design

Tutorial: Make vector car from photo in Illustrator

Ali Chorov — Tue, 16 Mar 2010 10:33:00 +0000

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.

Photo we’ll use:

Best collection of free twitter icons for your websites

Ali Chorov — Fri, 12 Mar 2010 13:07:31 +0000

We all know how much twitter is important for our online business this days. All site owners and especially Bloggers use it to bring some extra traffic for their web sites. That’s why using attractive twitter icons in your web sites is so much importand. In this post I will show you a very nice collection of free beautiful twitter icons you can use in your web sites.

You’ll see that you can choose from a big variety of beautiful and attractive free icons for your websites.

Zwitscha Twitter Icon

Twitter Bird

Twitter Icon BIRRRDFON

Adiumy Twitter

Twitter Icon Set — Blitter

Twitter Bird Icons 01

Free Twitter Icon Set

40 Cute Free Twitter Graphics: Badges, Icons & Buttons…

Free Twitter Fun Icons

Freebies: 2 Awesome Twitter Icons

Free Twitter Bird Icon Set

Cute Tweeters Icon Set

High Resolution Twitter Bird Icons.

Twitter Icons

FREE Sports Twitter Icons

Free Twitter Icon

Download your Free Twitter Bird

Free Twitter Birds

Birdies: A Free Twitter Icon Set

50 Free and Exclusive Twitter Icons

Icon Texto Twitter Buttons

Follow Me…Twitter Icon

I have tried to collect the best twitter icons I know here and I think I did. I am sure you will like them. We can only say a one BIG thank you to all this people who make this sweet and cool twitter icons.

You can download all icons from the pages of their respective owners. Thank you for reading this.. Have a nice day!