Текущото състояние на дизайна трябва да изглежда приблизително така:
Досега са вмъкнати логото и горното меню. Продължаваме с по-голяма графика, която трябва да бъде видима непосредствено под навигацията.
Принципът на създаване на нови слоеве беше обяснен в предишния урок. Затова искам да ви покажа нещо различно. Директно под горното меню ще бъде показано по-голямо изображение. Резултатът ще изглежда по следния начин:
Изображението трябва да бъде в правилни размери, когато го вмъкнете. При нужда го редактирайте предварително. След това стартирайте File>Open и изберете изображението. Избраното изображение ще бъде показано в нов прозорец. Натиснете Ctrl+C, за да копирате изображението в клипборда. След това, за да вмъкнете изображението като слой, който също има правилния размер, стартирайте Edit>Paste as>New Layer. Новият слой автоматично ще има размерите на изображението и ще можете лесно да го преместите на подходящото място. По този начин можете да включите всички изображения, които искате да вмъкнете, в дизайна и да ги поставите там.
След това вмъкнете текстовете на местата, на които наистина трябва да бъдат видими по-късно. В проектиращата фаза обикновено се използва така нареченият "Blindtext".
Преди да седнете и започнете да пишете диво "test, test, test", ви препоръчвам страницата http://www.blindtextgenerator.de/.
Там можете автоматично да генерирате различни видове Blindtext. След това текстовете могат лесно да се вмъкнат в дизайна, чрез Copy & Paste. В този контекст ви препоръчвам и страницата http://dummyimage.com/. Там можете да генерирате Dummy изображения с желан размер. Тези Dummy изображения могат да се използват като заместители за все още неразработени оригинални графики във вашия дизайн.
Проблемът с прозрачните слоеве
Когато вмъквате текстове, те ще се състоят от няколко елемента като заглавия, текстови абзаци и т.н. Затова трябва да групирате свързаните текстове в отделни слоеве. Така можете лесно да ги премествате заедно. Стартирайте Layers>New Layer. След това задайте желаните размери на слоя и при нужда и цвят на фона. Обикновено ще се налага обаче да имате прозрачен фон. Проблемът идва, че е трудно да премествате прозрачните слоеве. Често се случва да хващате подчинен слой. Този проблем може да се избегне лесно. За това са необходими настройките в панела Инструменти. Активирайте инструмента Move. По този начин активирайте опцията Move active layer в долния част на прозореца.
Изрязване на елементите
Когато сте доволни от дизайна, започва практическото му реализиране като уеб сайт. В този момент идва наред Сlicen, или изрязването. Това изрязване не е нищо друго, освен разделянето на дизайна на части, които по-късно ще бъдат сглобени чрез HTML и CSS. Трябва да изрежете всички елементи, които по-късно трябва да се представят поотделно. Изключени от това разбира се са всички графични елементи, които вече са разделни. Първо ще ви покажа как можете да изрежете елементи. Обозначете си нужния обхват и натиснете комбинацията от клавиши Ctrl+Shift+C. (Това важи както за GIMP, така и за Photoshop). След това създайте нов файл. В Photoshop той веднага ще има правилни размери. При GIMP това обаче не става толкова лесно. Трябва да създадете файл с подходящи размери. Чрез Ctrl+V вмъкнете съдържанието от клипборда.
Сега активирайте Crop tool. Задайте обхвата, който искате да изрежете, и след това натиснете клавиша Return-. Изображението ще бъде изрязано до желания обхват. Чрез File>Save as можете да запазите изображението.
За много уебсайтове стилистическото излъчване "Gradient" е важен елемент. Също така на представеният тук дизайн се съдържа такъв "Gradient". За да изрежете "Gradient", изберете тесен обхват на съответния градиент. Фактически е достатъчно да зададете област с ширина от един пиксел. Височината трябва да съответства на реалната височина на елемента. С CSS по-късно можете да настроите графиката хоризонтално, така че да се повтаря докато целият елемент бъде запълнен. Разбира се, може да използвате и по-широка област на изображение. Въпреки това това би намалило производителността на сайта. Затова за ширина на градиентите изберете един пиксел.
С Ctrl+Shift+C копирайте графиката с един пиксел в клипборда и я вмъкнете като ново изображение. След като я поставите в подходящия отрязък, запазете новото изображение.
Така това е основния принцип на "изрязването". Изрязвате всичко от дизайна, което по-късно трябва да принадлежи на уебсайта. Ако вече имате отделни елементи на страницата, които не трябва да се изрязват, използвайте ги директно, без да използвате този метод.
Резултатът трябва да изглежда по следния начин: Имате всички графики, които искате да използвате по-късно на уебсайта. Това включва например логото, фонове, градиенти и други. Докато говорим за градиентите, разбирам, че градиентите могат да бъдат лесно създадени чрез CSS3. Проблемът е обаче, че все още не всички браузъри го поддържат. И тъй като изрязването може лесно да се покаже чрез градиент, аз избрах да демонстрирам използването на графика за изграждането на градиенти в този урок.
