Salam azdizayner oxucusu. Bu günkü mövzuyla veb-dizayn dərslərini davam etdirmək istərdim. Yadınızdadırsa ilk iki dərsdə fotoqraf portfoliosu və konsaltinq şirkəti üçün sayt dizaynı hazırlamışdıq. Bu dəfə isə son vaxtlar bizdə çox populyar olan futbol-xəbər saytı üçün dizayn hazırlayacağıq. Başlayaq...

Keçən dərsdə olduğu kimi dizayn üçün hazır setkanı yükləyib, fona lazımi rəngi verirəm. İşin gedişində mane olmasın deyə tez-tez setkaları söndürürəm. Bunun üçün Ctrl+; əmrini vermək lazımdır. Eyni işi təkrarladıqda setkalar yenidən görünəcək.

Səhifənin aşağı hissəsində böyük ölçülü, zəif kənarlı fırça ilə göy rəngli işıqlanma verirəm.

Eyni qaydada səhifənin sağ kənarına da gördüyünüz effekti tətbiq edirəm. 

Alətlər Panelindən Rectangle Tool-u aktivləşdirirəm. 

Səhifənin yuxarı hissəsinə düzbucaqlı əlavə edirəm. Düzbucaqlının fonu üçün tünd yaşıl rəngi seçdim.

Düzbucaqlı olan qatın Blending Options...-na daxil olub aşağıdakı tənzimləmələri edirəm. 

Pattern olaraq internetdən yüklədiyim ornamentli fonu istifadə etdim. 

Görülən işlərdən sonra düzbucaqlı aşağıdakı şəkli aldı.

Fon hazır olandan sonra digər elementləri hazırlaya bilərik.

Loqo yerinə, yuxarı sol küncə azdizayner.com və xəbər saytının sloqanını yazıram.

Loqonu göründüyü kimi sadə formada saxlamayıb, stilini dəyişirəm. 

Qradientin rəng keçidləri aşağıdakı kimidir.

Bu da loqonun yeni görünüşü. 

Loqodan aşağıda dinamik slayd üçün bölməni hazırlayaq. Burada seçilmiş 3 əsas xəbər növbəli şəkildə əks olunacaq. Rounded Rectangle Tool (U) alətini seçib,

aşağıdakı kimi düzbucaqlı çəkirəm. 

Qatın stili isə şəkildəki kimi olacaq. 

Nəticədə bu sahə gördüyünüz şəkli aldı. Fonun rənginin əhəmiyyəti yoxdur, çünki orada şəkil, müəyyən elementlər və xəbər mətni olacaq.

Seçilmiş xəbər üçün aşağıdakı maraqlı fotonu istifadə edəcəm. Bu şəkli yuxarıda düzəltdiyimiz düzbucaqlının üzərinə qoyub, ölçüsünü tənzimlədim.

 Layers pəncərəsində həmin qatın üzərində mausun sağ düyməsini tıklayıb, kontekst menyudan Creat Clipping Mask əmrini verdim.

Şəklin sağ hissəsində xəbərin başlığı və giriş mətni olacaq. Bu elementlər üçün boz düzbucaqlı çəkib,

qatın rejimini Multiply-a dəyişib, mətnləri yerləşdirdim. 

İndi xəbərin ardını oxumaq üçün lazım olan düyməni əlavə edək.

Düymə üçün stil aşağıdakı kimi olacaq: 

"ardı..."  sözünə də stil olaraq ağ, 1 piksellik kölgə əlavə edib, xətkeşləri aktivləşdirdim. Gördüyünüz kimi dizaynda istifadə etdiyim elementlər əsasən setkaya bağlı olur.

Xəbərlərin dəyişilməsi üçün naviqasiya düymələrini də unutmayaq. Aşağı sol küncdə kiçik olçülü dairə çəkib, 

stilini müəyyənləşdirirəm. 

Passiv naviqasiya düymələrini əvvəlkindən fərqli olaraq boz etdim. 

Sonda xəbər slaydı aşağıdakı kimi alındı. 

Slayddan sağda daha bir seçilmiş xəbər bloku hazırladım. 

Stilini aşağıdakı kimi verdim. 

Blokun mətn və şəklini qoyduqdan sonra oldu konfet! ))) 

Bu da saytın yuxarı hissəsinin görüntüsü:

İndi keçək digər bloklara — kateqoriyalar üzrə xəbərlərə.

Bu bloka da yuxarıda, sağda yerləşən xəbərin fonu ilə eyni stili vermək istəyirəm. Eyni işləri təkrar görməmək üçün, həmin qatın stilini kopyalamaq lazımdır.

Sonra isə yeni yaratdığımız qata tətbiq edirik. Bunun üçün həmin qatın üzərində mausun sağ düyməsini klik edib, Paste Layer Style əmrini veririk.

Blok hazır olduqdan sonra xəbərləri yerləşdirdim.

Blokda üç rubrika üzrə xəbərlər yerləşəcək. 

Rubrikalar arasında ayırıcı xətt qoyaq. Xətt sona kimi davam edib, kobud görünməsin deyə pozanla ehtiyyatla sonluqları silirəm. 

Nəhayət növbə çatdı xəbərlə. Eyni qaydada kontent üçün də düzbucaqlı blok çəkirəm. Ona da eyni stili tətbiq edirəm.

Bu blokda isə 4 xəbər — kiçik foto, başlıq, xəbərin tarixi və giriş mətni şəklinsə olacaq. Yuxarıda slaydda hazırladığımız "ardı..." düyməsini eyni qaydada bura da tətbiq edək.

İndi isə saytın yuxarı hissəsində, loqonun yanında istifadəçilərin qeydiyyatı üçün panel hazırlayacam.

Qatın stilini aşağıdan görə bilərsiniz.

Bundan sonra yeni qat yaradıb, alətlər panelindən Elliptical Marquee Tool alətini aktivləşdirdim. 

Qeydiyyat panelinin aşağı hisəsində müəyyən hissəni qeyd etdim və

tünd rənglə boyadım. 

Menyudan Filter-Blur-Gaussian Blur... filtrini seçib,

parametrini təxminən bu formada verdim.

Gördüyünüz kimi maraqlı, həcmli bir element aldıq. 

Qeydiyyat üçün tələb olunan formaları çəkib, lazımi ölçünü verdim.

Birinci və ikinci formalar üçün aşağıdakı stili verdim. 

Üçüncü düymənin stili isə bir az fərqli olacaq.

 Bu da yekun nəticə:

Facebook və RSS ikonlarını yuxarı, sağ küncə yerləşdirdim.

Qeydiyyat panelinin daha həcmli olması üçün dərsin əvvəlində istifadə etdiyimiz işıqlanma effektindən yuxarı hissədə də istifadə etdim. 

Saytın aşağısında müəllif haqqında məlumatı yerləşdirib, son nəticəyə nəzər sala bilərik (böyük ölçüdə).