Haziran 26, 2019, 05:53:12 ÖÖ
Haberler:

Yeryüzünü size boyun eðdiren O'dur. Þu halde yerin omuzlarýnda (üzerinde) dolaþýn ve Allah'ýn rýzkýndan yeyin. Dönüþ ancak O'nadýr.(Mulk -14)

Learn how to create a tech psd template in Photoshop

Başlatan Fussilet, Haziran 11, 2010, 04:46:02 ÖÖ

« önceki - sonraki »

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

Fussilet

Let’s start the tutorial. Open Photoshop and create a new document (Ctrl + N) and as a background choose #80827e

Step1 – Creating the top navigation  First I will select Rectangle Tool and I will make this shape (510 by 385px). As a color I have used #edc804.

On the right side I will create a similar shape but with a different color: #464e3f

Next I will add my logo and on the right side using Type Tool (T) I will add the links for navigation:

Now with Rounded Rectangle Tool with 10px radius I will create a small shape just above the Home link and it will serve as a hover/selection. As a color I have used: #9d9d9d

Step 2 – Creating the Featured Area  Select Rectangle Tool and create a similar shape. Mine has 940X436px and as a color I have used: #d6d6d6

I will apply this layer styles


My result

On the top of this shape I will create another one, using Rectangle Tool (U). Dimensions 914 by 413 and as a color I have used #f2f2f2

To make it looks better, I will apply a shadow:

My result:

Because on this area it will be a slideshow, we will need to create some arrows. To do that, I will select Ellipse Tool and I will make this circle (to create a perfect circle, hold down Alt+Shift key while you’re creating the circle) as a color I have used: #d3d3d3
I will apply also this layer styles:

My result:

Next with Pen Tool I will make this arrow:
Then I will right click on it and I will choose Make Selection (please, make sure that you have Pen Tool selected)

Once you have a selection, press Ctrl + Shift +Alt + N on your keyboard (to create a new layer on your layer palette)

Now I will choose Paint Bucket Tool and I will fill my selection with black

To unload the selection press Ctrl + D
Once you have done that, please apply this layer styles for your arrow:



My result:

I will proceed in the same way for the right side, then using type tool I will add some text on Featured Area. I will add also an image with an iphone and ipad.

Featured Area is almost finished. I will need to add a button at the bottom of the article.
To create the button I will select Rectangle Tool and I will make a black shape:

Then I will apply this layer styles:





Then with type tool I will add a text “See more…” and I will apply this layer styles. By applying this layer styles I will obtain so called  letterpress effect




Next with Ellipse Tool I will add a shadow.

And I will apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a radius of 4.8px and I will lower the opacity 53%
Final result for the button

Final result for Featured Area

Step 3 – Creating the middle navigation  To create the middle navigation I will select first Rectangle Tool (U) and I will create this shape (just below Featured Area). Dimension: 940 by 59px

Then I will apply this layer styles:



Here is my result:

With Type Tool (T) I will add some links. For each link I have applied this layer styles:



My result:

Step 4 – Creating the content area  I will select first Rectangle Tool and I will create this shape below Middle Navigation
Dimensions: 940 by 561px

Then I will apply this layer styles:


Now under this shape we will create another one using this color #464e3f and dimensions: 1020 by 230px

Next with Rectangle Tool I will create 6 shapes. Dimensions for each of them: 292 by 199px

Then I will apply this layer styles for each shape:

My result

Next I will use some images, with Type Tool (T) I will add some text. Also, you will notice that I have add a button on each shape. It’s the same button used for featured area.
Here is my result

As you can see at the bottom we have some empty space. Because this psd template was designed to be used for a technology website/blog I will add some well known logos.
First I will select Line Tool and I will add this 2 lines. They will serve as a separators. My dimension for the lines: 913 by 1px
Please see the bottom screenshot. For the first line I have used this color #eae4e4 and for the second one: #a0a0a0

Now I will add some logo. I will demonstrate how I have turned them grey with the Microsoft logo.
Please use this image
Open it in Photoshop. As you can see is jpg image and it’s uses a white background. If you will place it in our template we will came to something like this:

It looks kind horrible, that’s why we will need to remove the white background. The simplest way to do that is to use Magic Wanted Tool (W). First select Magic Wanted Tool (W) and click on the image (you will need to click on the white background). Once you have clicked on it, you will have this selection

All you have to do now is to hit Delete on your keyboard. Voila! The white background is removed!
Now I will add the Microsoft Logo on my template

And I will apply this layer styles:



I will add few more logos…
And here is my result:

Here is my final result for this layout:

The tutorial is finished now. Soon a tutorial on how to code this psd template in CSS/HTML will be posted. Stay tuned!
içimdeki tüm putlarý kýrdým ve sana yöneldim Rabbim...
Bu geliþimi kabul et, beni benden al, beni sana baðýþla...
-Fussilet-
_____________________________________________
Bugün gam tekkegahýnda feda bir canýmýz vardýr
Gönül abdal-ý aþk olmuþ gelin kurbanýmýz vardýr
Çimende bülbülü gördüm yaman efgan ile söyler
Dili kahhar ile her dem gül-i handanýmýz vardýr


Urfalý Abdi


Oruç nedir?, Orucu Bozan Haller ,  Ramazan Orucu...