Професионалните уеб дизайнери разработват шаблони за уебсайтове, обикновено в мощни графични редактори като Adobe Photoshop. Резултатът от работата е файл с изображение, който в тази форма се предоставя на клиента. За да използвате готовия дизайн, тоест, за да изложите уеб страница, трябва да изрежете шаблона.
Необходимо
растер графичен редактор Adobe Photoshop -
Инструкции
Етап 1
Отворете файла на шаблона в графичния редактор Adobe Photoshop. Изберете File и Open от менюто или натиснете комбинацията от клавиши Ctrl + O. В диалоговия прозорец, който се появява след това, отидете в директорията с файла, изберете го в списъка и щракнете върху бутона "Отваряне".
Стъпка 2
Изберете удобен мащаб за разглеждане на изображението на шаблона. Използвайте инструмента за мащабиране или елементите от контекстното меню. Изберете скала, която ви позволява да позиционирате курсора с точност на пикселите. Това е необходимо за точно задаване на референтните линии.
Стъпка 3
Оформете набор от референтни линии над изображението на шаблона. Включете показването на линийки в прозорците на документи, ако вече не е включено. За да направите това, натиснете Ctrl + R или изберете View и Rulers от менюто.
Стъпка 4
Преместете курсора на мишката върху горната линийка, за да добавите хоризонтална референтна линия. Натиснете и задръжте левия клавиш. Преместете курсора на мишката надолу в областта на изображението. По същия начин, използвайки дясната линийка, можете да добавите хоризонтални линии.
Стъпка 5
Добавете необходимия брой референтни линии и ги позиционирайте по границите на разделянето на регионите на шаблона. Редовете трябва да преминават през всички места, където искате да изрежете шаблона. Те трябва да ограничават всички изображения и логически области (лого, заглавка на сайта, хоризонтални и вертикални менюта и т.н.), които ще бъдат представени на уеб страница.
Стъпка 6
Активирайте инструмента за нарязване. Бутонът му е на вертикалната лента с инструменти.
Стъпка 7
Създайте необходимия брой области за рязане с помощта на инструмента за нарязване. Изберете удобен мащаб за показване на шаблона. Използвайте мишката, за да зададете границите на зоните. Указанията, добавени в третата стъпка, ще осигурят точно позициониране на границите на обектите, които създавате. Коригирайте съществуващите области, ако е необходимо, с помощта на инструмента за избор на отрязъци.
Стъпка 8
Променете свойствата на областите за рязане, както е необходимо. Активирайте Slice Select Tool. Щракнете с десния бутон върху желаната област. В контекстното меню изберете елемента Edit Slice Options. В диалоговия прозорец Опции за среза, който се появява, изберете типа област (изображение, празна област, таблица), режима на запълване на фона, посочете, ако е необходимо, името, целевия URL адрес, съдържанието на атрибута alt="Изображение" и други стойности. Щракнете върху OK.
Стъпка 9
Изрежете шаблона. Изберете File и Save for Web & Devices от менюто или натиснете Shift + Ctrl + Alt + S. В диалоговия прозорец Запазване за уеб и устройства посочете формата и параметрите за компресиране на изображения, в които ще бъде изрязан шаблонът. Щракнете върху бутона Запазване. Ще се покаже диалоговият прозорец Save Optimized As.
Стъпка 10
Изберете HTML и Изображения (*.html) в падащия списък Тип файл и в полето Име на файл въведете името на файла, където ще бъде поставена HTML маркирането на шаблона. В списъка Slices изберете All Slices. Посочете директорията за изхода и щракнете върху бутона "Запазване".
Стъпка 11
В целевата директория ще бъде поставен HTML файл, който всъщност е готов шаблон за уеб страница. Поддиректорията с изображения ще съдържа набора от изображения, в които е изрязан оригиналният шаблон.
