sobota, 19 lipca 2014

czwartek, 17 lipca 2014

wtorek, 1 lipca 2014

The preloader design tutorial in Photoshop

Welcome .
In this tutorial I will show you how to create nice looking preolader in Photoshop .
You can use it for your website . 
It will look like this :

Ok , so lets start .
1.First create new document .
2.Create new layer by clicking "Create new layer " in "Layers" window or by pushing "Ctrl+n"
Chose „Rounded Rectangle Tool ”, set the radius : 30 px , chose a color : d3d5a5
Next , draw a Rectangle like this :

3.Chose a "Pen tool" , set the type to "Shape" .
Draw under the rectangle small shape like on the image :

4.Now we will merge the small shape with rectangle . Chose a layer with small shape. Move it up as it will look like linked with the rectangle . On the layer window chose rectangle layer . Next hold on keyboard "ctrl" and click on the layer with small shape . Now , both layers are selected . Push "ctrl+e". The layers are merged now . It will look like this :

5.Now we will duplicate the rectangle . Chose a rectangle layer , push "ctrl+j" . Now we have 2 layers .with 2 rectgangles.

Chose the second rectangle layer .
We will change the brightnes of the rectangle , so the top rectangle will stay the same but the rectangle under it will be darker .
Push "ctrl+u" , set this options : Hue : 0 Saturation: 0 Lightness : - 21
Chose the top rectangle layer . Click on the bottom of layers window " Add layer mask" . You will see that small icon appeard at this layer .
Now push on keyboard "d" to set colours to white and black .  Now push "g" to chose gradient tool .
Click on the mask icon  . Now click on the rectangle ( at the top of it ) and move it to bottom of the rectangle .You will see that there is transition in colors of rectangles . Like this : 

6.Select the first rectangle layer , set the blending options - layer style .
Chose the "Stroke" - options window :

It will look like this :

7.Now we will create the black shape .
Chose black color , chose "Rounded Rectangle Tool" , set Radius " 30px" .
Now draw small rectangle in the center of the Big Grey rectangle .
You will see this :

8.Now we will add the layer style to this black rectangle.
Click on the layer of this black rectangle .
Click 2 times with left mouse button on the left space of this layer . Blanding options will appear .
Add this :

9.Now we will add text .
Push the "Horizontal Type Tool" , write under the black rectangle text like "please wait" .
I have used "Arial Regular" font , "14pt" big , "Strong" "Anti-Aliasing method" .
Now we will add Layer style to this text :

So it should look like this :

10 .Now we will craete the custom shape .
Chose a "Custom Shape Tool" or press U on keyboard .
I have chosen this shape :

Chose a White colour .
Now , hold the "Shift" button , create the shape - move from the top to bottom .( Move it as it will
be aligned with the big rectangle ) .
It should look like this :

11. Now chose a layer with the white shape .
Chose blending options - "Overlay" .
It should look like this :

12.Change the "Opacity" to %22 . 
It will look like this :

13. Chose a layer with white shape .Push "v" on keyboard - now hold the "ctrl" and click
on the icon of the layer ( on the left of the layer ) .
Now you can see the Selection appeard on the Shape .
Push "m" , now click the right mouse button on the selection .
Now you can see the menu . Chose "select inverse" .
Now click on the layer with shape . Push "delete" on keyboard .    
It should look like this :

14.  Now we will add text on the small black rectangle in the center .
Create new layer over the layer with black rectangle . 

Push "t" on keyboard to chose "Horizontal type tool" . Now you can chose the font , size and other settings . I have use "Arial Regular" font , 14pt size , "Strong" in Anti-aliasing method .
Now set the colour of thext to "d2d4a4" .
We can draw a text . Click on the small black rectangle . You can type now - write "%75" .
 It will look like this :


Congratulations , our preloader is completed .


piątek, 27 czerwca 2014

The second design

New work in Photoshop . Website design .
It is main page and second page .

Please let me know what do you think .

Some of my design skills

My new UI design .

Hello , I have created new website design . Please check it and tell me what do you think .

It tooked me 4 hours to make it .