В предният модул стигнахме до създаването на тази страница.
Това което ѝ липсва е заглавна част (Header) и крайна част (footer).
Сега ще ги добавим.
Започваме с поставянето на различни елементи, които ще ни трябват за нашата заглавна част.
Първо поставяме логото,
което ще е в горната лява част.
След това ще ни трябва рекламен текст, който
да се вижда добре тези които идват на страницата,
за да разберат много набързо какво се предлага в тази страница.
В горния десен ъгъл ще сложим телефон
и кои дни и часове работи кабинета.
А пък тук под логото ще имаме няколко менюта за различни страници:
За нас,
Услуги и Контакти.
Това са най-стандартните менюта за страница,
като услуги в някои случаи може да се промени на продукт.
В страницата "за нас", даваме описание на фирмата.
Може да добавим снимки на персонала.
В "услуги" даваме списък с услугите, които те предлагат.
В контакти даваме карта, телефон, контактна форма, Skype адрес,
и каквото друго което можем да предложим, като начини за комуникация.
Сега ще премина към подреждането и стилизирането на тези елементи.
Това което не може да правим е да променяме цветовете на логото,
което значи че аз ще ги използва в другите елементи.
Например
Ще си направя лента за менюто.
Тя ще е с този цвят.
И в нея също така ще има и Gradient.
Ще направя бутоните да са с бял цвят, за да имат контраст и да се виждат.
Ще използвам guide линиите за да поставя първият.
Гледам да са на едно и също разстояние.
Сега ще поставя и другите елементи, според guide линиите.
Логото го поставям приблизително.
Тези guide линии, идват от дизайн отдолу и това е подреждането, което получих.
Може би ще е хубаво да сложа сепаратор, между тези бутони.
Сега ще си направя три пикселова линия.
Ще я копирам на някоя места.
След което ще добавя графика тук под менюто.
За целта ще използвам тази снимка.
Може би ще кажете, че няма нищо общо със зъболекарски кабинет,
но случая не ми се ще да свалям зъболекарски столове.
Някои хора могат да изпитват страх от тях.
Може да сложите например снимка на сградата на зъболекарският кабинет, ако тя е хубава.
Пак ще използвам guide линиите.
Поставям снимката, с clipping mask, горе.
След, което може да ги свържа тези двете.
и да донаместя текстовете.
Сега снимката не се вижда, понеже съм сложил градиент.
Трябва да го махна.
Трябва да увелича малко Inner shadow, за да се вижда.
Добавям един Аdjustment Layer Levels на долният слой.
За да го изсветля малко, да не е прекалено тъмен.
След това ще направя един Vibrance Adjusment Layer.
За да увелича наситеността на цветовете.
По този начин оправих контраста между текста и фона.
Вижте как беше преди това, текста едвам се чете.
Сега се виждат и двете.
Разбира се картинката не се вижда чак толкова много.
Тя не ми трябва в момента да се вижда толкова много.
Тук мога да направя промени в маската на Adjustment Layer-a.
Мога да направя от тази страна да се вижда повече например.
футъра го направих, като копирах Header-a.
Лентата с менюта я направих черно-бяла и в нея сложих copywrite text.
Логото го направих черно-бяло.
Така когато имаме малки страници с малко съдържание,
няма да се дублират логата.
Оставих и телефонния номер.
Така някой, който е те стигнал до края на страницата и е решил да позвъни,
да може да види номера.
С това нашият mockup е готов.
Сега можем да процедираме по няколко начина,
за да го превърнем в интернет страница.
С това ще се занимаваме в следващите уроци.
Въпроси и отговори
