FOR BETTER DESIGNS » articles

Photo of the day: Happy summer

Ali Chorov — Thu, 27 May 2010 10:14:35 +0000

The hot sunny days are now here and looks like the summer has already come. With today’s photo I wish you all readers of my blog a happy summer. Hope you’ll like this shot.

Few words about the flower:

Chamomile or camomile is a common name for several daisy-like plants. These plants are best known for their ability to be made into a tea which is commonly used to help with sleep and is often served with either honey or lemon. You can read more about it in Wiki

Anyway hope you like the photography

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

Photo of the Day: Between heaven and earth

Ali Chorov — Tue, 04 May 2010 18:39:43 +0000

Here is my newest photograph, it’s from a place I sometimes visit when I’m in holiday. It is known with it’s beautiful landscape and water-scape views either in summer and winter. I’ve tried to catch the best capture for you from there.

It was day with fresh atmosphere, spring is still here but the snow in the mountain still not melt down. It is beautiful place but far away from my home, and I am so busy always and I was worrying it will melt and I’ll be unable to take this beautiful shot. But thanks God I did it. I really like the view and hope you” like it too. Enjoy!

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