Bu gün veb-dizayn silsiləsindən daha bir materialı sizin öhdənizə verirəm. Əvvəlki mövzuda sadə portfolio hazırlamışdıqsa, bu dəfəki dizaynın quruluşu ona nəzərən nisbətən mürəkkəb olacaq. Tutaq ki, bizə hansısa bir konsaltinq şirkəti üçün veb maketin dizaynını hazırlamaq tapşırığı verilib. Bu tapşırığı yerinə yetirərkən aşağıdakı işləri görmüş olacağıq. Başlayaq...

Birinci dərsdə olduğu kimi, səhifənin və xətkeşlərin hazırlanmasına çox vaxt sərf etməmək üçün, 960.gs saytından hazır setkanı yükləyib, onunla işə başladım. Fonu tam qara olmamaqla tünd rənglə boyadım. 

Aşağıda gördüyünüz stok fotonu saytın əsas elementi kimi istifadə edəcəm. 

Bu fotonu maketə yerləşdirib, ağ-qara edib, kontrastı artırdım. 

Sonra Layers (F7) pəncərəsində foto yerləşən qatın Blending Options-nı açıb aşağıdakı tənzimləmələri verdim.

Bundan sonra fotonun kənarlarında aşağıda gördüyünüz kimi zəif, boz xətt və az bilinən kölgə əmələ gəldi.

Bu qatın altına seçilsin deyə, fondan bir az tünd rəngli daha bir qat əlavə etdim.

Bu qata bir az pattern (təkrarlanan fon) əlavə edəcəm. Pattern-in hazırlanma qaydasını soldakı linki tıklayaraq oxuya bilərsiniz.

Amma qısaca olaraq yada salım: kiçik ölçülü boş sənəd yaradırıq.

Pencil Tool alətini aktivləşdiririk.

Aşağıda gördüyünüz formada xəttlər çəkdim.

Menyudan Edit-Define Pattern... əmrini verib, hazırladığımız təsviri pattern-ə çeviririk. 

Pattern hazır olandan sonra yuxarıda çəkdiyim qatın Blending Options-undan Pattern Overlay-i seçib, hazırladığım pattern-i seçdim.

Belədə həmin qatın fonu gördüyünüz kimi zərif, xırda naxışlı alındı.

Saytın fonu hazır olduqdan sonra, elementlərin hazırlanmasına başlaya bilərik. İlk olaraq loqodan başlayaq.

Loqo üçün foto olan qatın xətti ilə eyni rəngli düzbucaqlı çəkdim.

Museo şrifti ilə azdizayner-imizi həkk etdim )).

Yenə də Blending Options-a müraciət etdim. İlk olaraq kölgəni aşağıdakı kimi tənzimlədim. Mətnin rəngini də fonda olduğu kimi qaraya yaxın tünd rənglə boyadım.

Sadəcə "konsaltinq" yox, guya bir az yenilik edib "dizayn-konsaltinq" izahedici sözünü loqonun aşağı hissəsinə əlavə etdim.

İndi isə Menyunu hazırlayaq. Loqonun fonuna paralel daha bir boz rəngli fon çəkdim. Bir az ara məsafəsi saxlamaqla bu hissəni daha dinamik etdim.

Qatın rejimini dəyişib, Multiply etdim.

Menyunun bölmələrini sadə formada, ağ rənglə, 13 pt ölçülü Arial şrifti ilə daxil etdim. Kursoru menyunun bölməsinin üzərinə gətirdikdə adətən bir dəyişiklik olmalıdır. Mən hər-hansı bir effekt verməyib, sadəcə rəngini dəyişib (#46b2c6), altına xətt əlavə etdim.

Menyudan sonra saytın əsas hissəsinə keçək. Adətən korporativ saytların ana səhifəsində şirkət və xidmətləri haqqında məlumat yerləşdirilir. Başlığı şərti olaraq "Dizayn-konsaltinq" qoyub, aşağıdakı kimi şəkil və mətn əlavə etdim.

Başlığı Museo şrifti ilə, 24pt ölçüdə yazdım. Rəngi menyuda işlətdiyim rənglə eyniləşdirdim. Əsas mətni isə 13 pt ölçülü, Arial şrifti ilə yazdım. Rəng olaraq #666666 kodlu boz rəngi seçdim.

Saytın sağ hissəsində şirkət xəbərləri bloku olacaq. 

Xəbərin daxilolunma tarixini standart deyil, aşağıda gördüyünüz formada yerləşdirdim.

Xəbərin giriş mətni tarixdən sağda, üç sətirdə olacaq.

Bir blokda ən son daxil olunan üç xəbər görünəcək.

Vizual olaraq qarışıqlıq yaranmasın deyə, xəbərlərin arasında zəif nöqtəli xətt əlavə etdim.

Photoshop-da bu tipli xəttlərin hazırlanması bir az fərqli olduğundan onu izah etməyə çalışacam.

Alətlər Panelindən Pencil Tool (b) alətini aktivləşdirib, Layers pəncərəsində xətt üçün yeni qat yaradırıq. Sənədin üzərində mausun sağ düyməsini tıklayıb, aşağıdakı kimi ölçünü 1piksel, sərtliyi 100% edirik.

F5 düyməsini basıb, Brush alətinin geniş tənzimləmələri olan pəncərəni açırıq. Spacing bölümündə nöqtələr arasında olacaq məsafəni təyin edirik.

Hazır olduqdan sonra, Shift-i basıb saxlamaqla düz xətt çəkirik.

Xəbərlər bölümündən aşağıda sosial şəbəkələrin və RSS-in ikonunu əlavə etdim. İkonların yanında izləyicilərin sayını göstərən ədədləri daxil etdim.

Daha aşağıda axtarış bölümü üçün loqonun fonuna uyğun fon hazırladım.

İndi daxiletmə formasını və axtarış düyməsinin dizaynını hazırlayaq. Alətlər Panelindən Rectangle Tool (U)-u aktivləşdirdim.

Nəzarət Panelin-dəki ikonların görüntüsü belə olmalıdır.

Axtarış blokunda lazımi ölçüdə düzbucaqlı çəkirik.

Blending Options-dan aşağıdakı tənzimləmələri etdim.

Daxiletmə forması aşağıdakı kimi oldu.

Eyni qaydada düyməni hazırlayaq.

Qatın stili aşağıdakı kimi olacaq.

Blokun mətnlərini daxil edəndən sonra, görüntü aşağıdakı kimi olacaq.

Bütün bu işlərdən sonra saytın dizaynı gördüyünüz kimi olacaq.

Ən sonda saytın aşağı hissəsində yerləşən "footer"-i (ayaq hissəni) hazırlayaq. Burada adətən saytın müəllifi və heç kimə lazım olmayan "Copyright 2011" və s. bu tipli məlumat daxil edilir.

Bu da dizaynımızın son görüntüsü. Real ölçüdə baxmaq üçün tıklayın...