FOR BETTER DESIGNS » photoshop

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 awesome 3d Graph in Photoshop

Ali Chorov — Sat, 15 May 2010 20:02:28 +0000

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. )

Step 5.

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

Step 6.

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

Step 7.
Take the rectangle tool again, choose a color and draw a shape like mine.

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.

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.

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

20 Amazing vector illustrations from me

Ali Chorov — Tue, 23 Mar 2010 13:22:19 +0000

Today I will present you my collection of vector illustrations. I have been working from around a year on them. I’ve posted them one by one in my other websites and blogs. Yesterday I finished the collection with the last work and here you can see them all in 1 place all toghether.

This have been a lot of work in my spare time. Some of them I made for fast like in 10 — 15 minutes and some did take more than 5 hours. All done in Photoshop using pen tool and custom shapes Here they are all and I hope you’ll like them a bit and you’ll get some inspiration. I’ve really improved my skills doing this.

Vector background collection 01–20

01 Summer fruits

02 Rainbow

03 High Road

04 Sunny day

05 Over the sea

06 In the sea

07 Winter time

08 Truck in the desert

09 City in night

10 Arctic world

11 Between the clouds

12 Mushrooms hill

13 Garden of flowers

14 Night in the forest

15 Rainy day on the sea shore

16 Sunset time

17 Flying back home

18 In the end of the day

19 Old streets

20 Moment of beauty

The images are not free for use in your works, you can use them only as a wallpapers. This is a review of my work and an inspirational post. Hope you like them.

Feel free to post any comments and share this with your freinds.

Have a nice day.

Vector-Background-Collection-13-Garden-of-flowers

Download free flowers custom shapes

Ali Chorov — Sun, 21 Mar 2010 12:45:15 +0000

Today I am giving you a free custom shapes of flowers for Photoshop from me. This are free to use any way you want, there is few cool flower shapes in this pack.

In this preview wallpaper image I made using this shapes you can see some of the flowers you will find in this archive.

Use the download link right here: Flowers custom shapes (68)

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!