Web Site Yapımı

[St.ONe]

Hello my friends

Today i will show you how to create a business layout

This is the Tutorial Number 99 from our 100 Tutorial Marathon
Soon this marathon will end, and i will start another one. I will not tell you how many tutorials i will create in my future marathon

This is what we gone do today



Open a new photoshop document
Size 760 x 780 pixels
Background color : White

Select Gradient Tool and create the following gradient:



Then with Gradient tool, apply the following gradient. Follow the green arrow



Now find some Clouds brushes over the internet , or make your own brushes if you want , and on a new layer, add a a few clouds.



Select Rounded Rectangle tool, ( set the radius to 5 pixels ) and start making some rectangles



Then add the same layer style for all the rectangles from the top









This is the result



Then for the big shape add the following layer style





This is the result



Now create a new pattern
Create another document:


Zoom this document to 1600% and with the Pencil Tool Draw 3 points:



After that go to Edit > Define Pattern...
Choose a name for your pattern and press OK
To learn more about patterns , please visit the following link.


Then you can close this 3 by 3 pixel document , and go back on our main layout

Now select one button, hold the CTRL key down and press on the layer thumbnail with the left mouse button.



You can see that a new selection will be visible around your button



Create a new layer ( press CTRL+SHIFT+ALT+N )
Select Paint Bucket tool,
Use the following settings



And press one time inside your selection
Go to Select > Modify > contract ( and choose contract to 3 pixels )



Choose Select > Inverse , then hit one time the " Delete " key from your keyboard
Now press CTRL+D to deselect



Press on " Add layer mask " button



Select Gradient Tool
Use the following settings:



Then make a small line from Top to Bottom ( please follow the red arrow )



Then duplicate this layer with this pattern , and place it on each button



Now add some tech brushes on your header, and also some text on the buttons



Now you can add another rectangles



Then add the following layer styles









This is the result



Now create some dots with Type tool. rasterize the type , and rotate this layer. I want to add some dots like in the image



Now zoom your document to 1600 %. Choose Pencil tool ( use a square brush ) and add some simple squares on your buttons



Now create a new layre , Select Brush tool ( use a smooth round brush ) and make some random lines. like in the following image. you can use 2 -3 colors if you want



Then go to Filter > Blur > Gaussian Blur



Then you can reduce also the layer opacity to 50 %, and you can also change the blending Mode to overlay



This is the result. It looks almost like water



Now you can add some images on your layout. I will add one Oil Rig , and i will combine with a octopus. the effect is very simple. you have to cut different parts from the octopus , and place it under the oil rig

You can see that i have another sea creatures on the bottom of the layout. now you can add as many details you want. if you have stock images.
this is my final result



Thank you

[sn_gurkan]

türkcesi yok muydu

[chattzz]

bişey anladıysam arap olam

[St.ONe]

ingilizce ps kullananlar ıcın bence kolay anlasılır bır ders.menu ısımlerı ıngılızce anlatıldıgı ıcın .. neyse cevırı yapmaya calısırım ..

[fatihbeyc]

türrkçesini verecekmisiniz lütfenn

[St.ONe]

Merhaba Arkadaşlar

Bugun yapacagımız sey ;



Yeni bir photoshop dökümanı açın
Boyut : 760*780
Arka Plan rengi: Beyaz


Gradient Tool 'u secin ve asagıdaki ayarları yapın :



Gradient ı resimdeki gibi ayarladkıtan sonra yeşil ok u takip edin



Şimdi internet birkaç bulut brush ı bulun veya istiyorsanız kendiniz yapın..Ve yeni bir layer a bu brush ı uygulayın



"Rounded Rectangle Tool" u secin ve "Radius" 5 px e ayarlayın ve bir kaç dikdörtgen yapın



Aşağıdaki layer tiplerini bütün dikdörtgenlere uygulayın









İşte sonuç



Büyük dikdörtgen için aşağıdaki layer tipini ugulayın





İşte sonuç




Şimdi yeni bir model(pattern) oluşturalım
Yeni bir Döküman oluşturun :



Dökümanı %1600 yakınlaştırın ve pencil tool la aşagıdaki gibi 3 tane nokta çizin



Bunu yaptıktan sonra Edit>Define Pattern"e tıklayın..
Model (pattern) niz için isim seçin ve OK ye basın
Bu üç noktalı modelinizi/pattern) kapayın ve ana tasarıma geri dönün


Bir tane buton seçin ve CTRL e basılı tutarak layer a sol mouse la tıklayın



Şimdi butonunuzu seçili bir şekilde görebilrsiniz



Yeni bir layer olusturun (CTRL+SHIFT+ALT+N)
Paint Bucket Tool u Secin
Aşagıdaki ayarları uygulayın



Ve bir kere secili alan a tıklayın
Select > Modify > contract ( 3 px seçin)



Select > Inverse yapın ve daha sonra klavyenizden bir kere "delete" tusuna basın
Ve Secili alanı kaldırmak icin CTRL+D yapın



"Add Layer Mask" butonuna basın



Gradient Tool u secin
Ve aşagıddaki ayarları uygulayın :



Sonra kücük bir cizgi yapın üstten altta dogru ( kırmızı ok u takip ederek)



Daha sonra bu modelli layer ı kopyalayın ve her butona bu stili uygulayın



Daha sonra header (üst kısım) a biraz teknik brush ve butonlar a da yazı koyalım



Ve simdi diger dikdörtgenleri ekleyebilrisniz



Daha sonra asagıdaki stilleri layer a uygulayın









Ve işte sonuc



Şimdi type tool la bir kaç nokta yapaılm..Type ı raster ettikten sonra (layer a sag tıklayıp "rasterize" yapın)
layer ı çevirin..Ben resimdeki gibi bir kaç nokta eklemek istiyorum



Resmi %1600 yaklastırın ve pencil tool u secin..Butonlarınıza basir kareler yapın "basit



Yeni bir layer olusturun,Brush tool u secin ve resimdeki gibi rastgele cizgileri cizin .isterseniz 2-3 renk kullanabilrisniz



Filter > Blur > Gaussian Blur



Layer opcity sini %50 azaltın ve blendgin mode u "Overlay" seçin



İşte sonuç, neredeyse bir su gibi görünüyor



Şimdi tasarımınıza birkaç resim ekleyebilrisniz

Bir çok resim kullanarak tasarımı şekillendirebilrsiniz







Türkçe Ceviri için Kuzenime teşekkür ediyorum...

[Kaiser_Dealxa]

Eğitim Şart

[St.ONe]

Evet Kankam ya egitim şart kesin ingilizce egitimi mi alsak

[ChaWusH]

peki bu butonlara link felan nasıl vereceğiz?

[Kaiser_Dealxa]

resimleri slice olarak keseceksin web sayfası olarak kaydet dediğinde o sana otomaik olarak verio herşeyi.

[reXus]

güzel döküman olmuş eline sağlık

[tilkici]

çok güzel olmuş

[coskun_46]

Bu Bölümü Sadece Kayıtlı Kullanıcılar Görebilir.

sLice ToLL (K) seçeceğin yeri seçiyorsun sonrasında iki kere tıkladıktan sonra rL bölümüne urL yazıon +rep