FOR BETTER DESIGNS » web

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.

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

Download free Vector car design for Adobe Illustrator

Ali Chorov — Tue, 16 Mar 2010 15:01:09 +0000

This is the post with free AI file from the vector car tutorial. It is free for use in any way you like.

Preview image:

Vector car file download (137)

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!

Free pack of icons from graphics designer Umar

Ali Chorov — Thu, 04 Mar 2010 10:05:33 +0000

It is that time again to present you a new packs of free icons. This time the icons are made by very talented graphics designer Umar Irshad.

Umar Irshad is not only icon designer he is doing all kind of designs and you can find all his works on his deviant art page here: Umar Irshad gallery

Now here is his newest released set of icons for your personal designs.

32px Mantra

This ultimate 32px icon pack consists of approximately 50 icons.

You can download this pack of icons from his page here.

More icons from him:

Social and Web Icons

Total 57 icons in total, Format: PNG and Resolution: 64 px

Download link

Social and Web Icons v2

Total 49 icons in total, Format: PNG and Resolution: 64 px

Download Link

Mini Disk Icons

12 iPhone style inspired icon set for Mac OS X.

Format: PNG ICO ICNS and Resolution: 32x32 px 64x64 px

Download link

All the icons are free to use in your personal and non commercial works.

I am sure you will find all those icons very useful! And don’t forget to share this article with your friends.

Have a nice day!

Best food for designers and web developers

Ali Chorov — Wed, 10 Feb 2010 10:41:31 +0000

Designers and web developers can be called the heroes of world wide web. They’re the people who make everything on Internet working, they are the people who make web sites beautiful, functional and if a person got a good idea for web site the designers and web developers can make the idea come true.

As such, the new heroes of our time and Internet need the best food. Don’t ever ever think that being a designer or developer is an easy job. We stay too much on the chare, on our desks, in our offices or in home in front of the computer and we put a lot of effort for a single web site to work well.

In this post I want to show you some of the best food a web designer or developer can have, so his day can be full of energy and he can work with pleasure and not feel hungry all the time.

Many people use to eat some fast foods because they think like that: ” I have a lot of work and I can’t take the extra to eat a real food. 1 fast food and I will be ok”. Yes but not, because after eating it hour or two and you’ll be hungry again.Also this foods don’t give you the enough energy and vitamins your body needs. Go get some real food and you’ll have energy to work much more and most important you’ll be happy…

The good food give you the good mood. Here’s my suggestions:

Foods:

Fish

Fish is one of the best food you can have in your day and in your week. The best is to include fish 2 –3 times in a week if that’s possible. Fish gives high quality protein and a wide variety of vitamins and minerals, including vitamins A and D, phosphorus, magnesium, selenium. It’s very good for the brain and also very delicious

Nuts of almonds and hazelnuts

Nuts of all kinds are useful for the body, but some of the best are nuts of almonds and hazelnuts.

Hazelnut is the best known source for Vitamin E which is essential for the healthy heart muscles and other muscles of the body as well. It is also necessary for normal functioning of the reproduction system. Another benefit of Vitamin E which is found in hazelnut is to prevent the factors which prepare the basis for cancer disease. If cancer is already formed in the body, then it fights to defuse the harmful cells.

Eating almonds has the same effect as the cholesterol-lowering drugs called statins. A one and a half ounce handful of almonds is a leading source of vitamin E and magnesium and offers protein, fiber, potassium, calcium, phosphorus and iron in 246 calories. Also, almonds (and other nuts) contain phytochemicals, which are plant chemicals that may provide powerful protection against heart disease, stroke, and other chronic diseases.

Fruit salad

All fruits have a benefits for the body, they are giving directly vitamins and good amount of energy for you. And they’re also so delicious. There is almost no a person who don’t like fruits. And why not make a fruit salad from your favourites? You can do this after your meal or for your breakfast. You’ll feel fresh and happy for the whole day if you get your fruits at the start of your day. Don’t forget about them!

Chocolate

Chocolate, who don’t like it ? I am including this in this post, but you should be careful with it. Eating it small amounts can give you a lot of benefits but eating it a lot can be harmful. Yes this is a good food but be careful. Seriously!

nuts

Juice of fruits

Juice of fruits are best drinks you can get for the day. It’s better than just water, it’s fresh and cool. But be careful, most of the juice fruits they’re selling on the markets are not so much real juice fruits. You can be sure of that, the best way for you to be sure what you’re drinking is to do it your self. It’s easy, just go buy some lemons. oranges, grapefruit or other you like and squeeze the fruits, you can add water and sugar. That’s the best, it will give you fresh mood, energy and real vitamins.

Be happy people, hope you like this post, off course everyone have his own favourite foods, but in the field this are some of the best and always better than fast foods.

Feel free to reply to me and add any comments with critique, questions and suggestions.

Adding a new plugin ”Twitter badge” to this web page.

For better designs theme 2: Fresh green. Free download

Ali Chorov — Tue, 02 Feb 2010 12:45:53 +0000

My second WordPress theme is called Fresh green and it’s now free for download. The 1st one you can find here: Simple elegant And all my themes will be in category themes of this site.

My next theme is also ready and I will start to work on it immediately after this post. it’s nice fresh and looks just cool. I have a lot of ideas to come after this theme.

The next theme will be the original for this web site and I am stoping with making video tutorials for designing themes. If I’ll make a tutorial they’ll be of another kind.This not means I’ll stop making themes, I will and I will just post them for free download here. But this will be in future, this web site will be transformed in a lot of ways, just as I promies..

Now here is the free Fresh green theme: Fresh Green Theme free download (37)