Photoshop site tasarım


Photoshop ta site tasarlama



Open Photoshop and create a new document 1020 by 1100px



Next select Rectangle Tool and create a large rectangle over your document. I have used this color: #e5e4e4


I will select ellipse tool and I will create this white shape




I will go to Filter>Blur>Gaussian Blur and I will apply a radius of about 35px




I will lower the opacity to 4% also




Next I will select Rectangle Tool and I will create this 3 shapes at the top:




With Type Tool I will write “Elegant Website” and as a tagline I will use “a design by trendyTUTS”. The font used is Ariston, with 48pt in size.
For “Elegant” I have applied this layer styles:





For “Website” this layer styles:




My result:




On this step I’ll make use of our Premium Files again. This time from Universal Vector Icons 2, I’ll select a badge icon and I will add it on my document.



I will apply the following layer styles to my badge:





Here is my result:




With Type Tool I will add some text on the right side. I will write “Call us – 1-800-elegant”




I will use Rectangle Tool and I will create this black shape.




Having Rectangle Tool selected I will create another shape on the top of the shape created Step 6. I have used a red color just for demonstration proposes. When you create this shape you will need to use this color: # e5e4e4




Make sure that the layer of the shape created on step 8 is selected on your layer palette,select Direct Selection Tool and drag a little bit from the bottom left corner of the shape. Please see the screenshot:



Proceed in the same way for the right side. Here is my result:




With Rectangle Tool I will create this shape. Color used: # d67474




With Ellipse Tool I will create this shape:



And I will apply a Gaussian Blur of about 34px. My result:




I will surround the navigation with this sign “——————————”. To create a nice effect I will apply this layer styles:



My result




With Type Tool I will add the text for navigation
I have used Ariston font with 24px in size




With Pen Tool I will create this arrow wich it will act as an selector for navigation.




With rectangle Tool I will create this shape on the middle of the page. Make sure that the layer of the shape created is selected on your layer palette, select Direct Selection Tool and drag a little bit from the top left corner of the shape. Please see the screenshot:



I will proceed in the same way for the right corner, then I will apply this layer styles:







With Rectangle Tool I will create another shape and I will apply this layer styles:







With Pen Tool I will create this triangles at the bottom of the shape created on Step 15



I will apply a Gaussian Blur of about 40px.
My result




Next I’ll make use of Premium Files. From Universal Vector Icons 2, I will add a Light Bulb
and from Hand Drawn Vector Ornaments, I will use some ornaments.


With Type Tool I will add some text




To enhance the title “We Bring Ideas to Life” I have used 2 type of fonts: Arial and Ariston. I have used also 6 lines (3 on the left and 3 on the right side of the title). For this lines I have applied this layer styles:








With Pen Tool I will create this 2 triangles and I will apply a Gaussian Blur of about 10px




On the top of the triangles created on Step 21, with Rectangle Tool I will create this shape and I will apply this layer styles.








Having Rectangle Tool still selected, I will create another shape on the top of the shape created on Step 22, I will apply this layer styles and with Type Tool I will add some text









Because this area it will be a jquery slideshow, we will need to create the arrows as well. I will select Line Tool with 10px weight I will draw 2 identical lines, than with Free Transform Tool (Ctrl + T) I will arrange them to create an arrow. I will apply this layer styles also:








Now I will create the content area. I will select Type Tool and I will write “Latest Project”. I have applied this layer styles:








With Pen Tool I will create this 2 triangles and I will apply a Gaussian Blur of about 10px.



Over this triangles I will add an image. I will repeat the same process and I will create a total of 6 similar thumbnails.

Here is my result:





Barbaros Kızılelma