Този, който разбира от разработката на уебсайтове, знае, че обикновено не започва с HTML структурата. Вместо това се използва графична програма, където се създава изгледът на страницата. (Този, който работи в агенция, получава изгледа от графиката или клиента). След това задачата е да се построи страницата на базата на този изглед. Точно за това става въпрос сега.
Свързано с преработването на изгледите, винаги ще се сблъсквате с двете термина Slicing и Dicing. На практика това означава, че се взима предварителният образец или дизайн, се разрязва с графичната програма, след което се сглобява отново чрез HTML.
Правилната графична програма
Всеки има своите предпочитания относно софтуера, който най-радетелно използва. Така е и с графичните програми. В контекста на професионалния уебдизайн обаче нещата изглеждат малко по-различно. Там почти изключително се работи с Photoshop. В действителност повечето дизайнерски проекти са в PSD формат. И този формат не може да се отвори или дори да се редактира във всички програмите.
Този, който няма Photoshop, не е напълно изоставен. Една възможна алтернатива е GIMP. Програмата може да се изтегли безплатно от страницата http://www.gimp.org/. Ще ви покажа основните стъпки за създаване на изглед чрез GIMP. Това работи по сходен начин и в Photoshop.
Създаване на собствен изглед
Първоначално мислите за основните дизайн аспекти:
• Каква ширина трябва да има изгледът?
• Колко колони трябва да съдържа?
След това създайте работната площ чрез Файл>Нов и задайте размера. Въпреки че създаденият от мен изглед ще бъде "пълен на екрана", реалното съдържание има ширина от 1000 пиксела. За височина на изгледа задавам 887 пиксела. (Като височината на уебсайта впоследствие ще зависи от съдържанието).
С OK се потвърждават данните. След това работната площ е готова и може да се попълни със съдържание. (За удобство работя в черен фон за прегледност. Този фон няма да бъде видим на уебсайта по-късно).
Типичен елемент, който трябва да бъде на уебсайта, е логото, което обикновено е визия. За да го вмъкнете в изгледа, отворете Файл>Отвори и изберете логото си, което трябва да бъде в PNG, GIF или JPEG формат. Потвърдете избора с Отвори. Сега натиснете Ctrl+C, за да копирате логото в клипборда. След това превключете към реалния уебдизайн и натиснете Ctrl+V. Вмъкнатото лого все още няма да бъде на желаното място. Чрез инструмента Преместване може обаче лесно да се премести на правилната позиция.
Ако изображението не може да се премести, първо трябва да активирате слоя. Съответните настройки ще откриете под Прозорци>Прикачими диалози>Слоеве.
За по-добра организация трябва да включите Линии за помощ. За целта кликнете с мишката върху Линията и я плъзнете с натискане на лявото копче на мишката в желаната позиция.
Така може да включите колкото се желаете много линии за помощ, по които да насочвате елементите на уебсайта.
Сега създайте още един слой. Този слой трябва да включва горното меню.
Може да наречете слоя Горно меню. Създайте слоя с OK. Изберете Избор-правоъгълник и извлече го по начина, по който ще се вмъкне навигацията.
В текущия пример приемам, че фона на горното меню ще има цветов градиент. За целта кликнете върху Градиент: Избор с градиент (попълване).
Градиентът трябва да се движи от сиво към черно. Съответните цветове могат да се настроят чрез Цветни полета. Задавам вид на градиента Отгоре-надолу, така че той се простира от Пред- към Фоновия цвят. Сега докато държите натиснат клавиша Ctrl, плъзнете линия в избраната област отгоре надолу. След като освободите лявата мишка, областта ще има желания градиент.
По принцип вече имате две възможности:
• Да оставите областта за навигация, както е.
• Да вмъкнете отделните елементи на менюто, за да може вече в проекта да видите по-точно какви шрифтове и т.н. използвате.
Коя от двете варианта да изберете остава на ваше усмотрение. В случай че обаче искате да представите дизайна на клиента си, препоръчвам ви във всички случаи да включите елементите на менюто. Опитно е, когето на много клиенти липсва въображение по този въпрос.
Първо трябва да изберете Шрифт. В GIMP ще намерите съответните настройки под Прозорци>Прикачими диалози>Шрифтове.
През този ред вече е обсъден проблема с шрифтовете в контекста на CSS и HTML. В теория като уебдизайнер можете да посочите практически всеки шрифт. Не знаете обаче дали този шрифт е наличен на компютъра на посетителите на страницата и дали ще бъде показван. Следователно резултатите, особено когато използвате много екзотични шрифтове, са трудно контролируеми. Ще се върна на този аспект още в този ред, когато става въпрос за шрифтовете на образцовия уебсайт. За текущия изглед аз се решавам за следните настройки:
• Verdana bold
• 20 пиксела
• Бял цвят на шрифта
Вие вече можете да вмъкнете отделните елементи на менюто по този начин. Най-добре е да копирате нивото, в което се съдържа първият елемент на менюто, и го поставите като ново ниво. След това можете да промените текста на нивото. Така създавате горното меню.
Горното меню трябва да получи Hover ефект. Когато преместите мишката върху отделните елементи на менюто, фона им се променя. Този аспект трябва също да бъде визуализиран в предварителния проект. За тази цел задайте желания цвят при хоумет и копирайте едно от съществуващите нива на менюто. Този цвят се задава на нивото. В текущия пример предполагам, че ще бъде синьо. След това вмъкнете текста на елемента на менюто. Така вече ще имате представа за това, как ще изглежда менюто накрая.
