от Photoshop в HTML

Ето някои основниправила, които спазвам при създаването на сайтове от
предварително зададен дизайн, независимо на каква графична програма е
направен (Adobe Photoshop,
Illustrator, Corel Draw, Gimp...).
Надявам се да се окажат в помощ на хората, които ще се занимават с
реалното програмиране(оживяване) на самият сайт от една
обикновена
картинка.

Подготовка
Изисквания към дизайнера
Добре
еотделнитеелементиот дизайна слоеве(layers) да са групирани, но не в
огромен детайл(по 20-30 слоя за едно меню), защото това много
затрудняваизолирането им,
с цел крайното им поместване в
сайта.(става въпрос за безполезно лутане, включване и изключване на
слоеве ). Най-добре работя, когато слоевете са отделени на 2 нива: текст
и основно фоново(background)
изображение, за да мога, като първи
етап да позиционирамтова изображние, а самият текст да поставя и
стилизирам след това отгоре - всичко това с помоща на
css правила. В
случая Photoshop опцията Select Group Layers на Select Tool е много
полезена, за избирането на комплексни обекти. За изолиране на даден
елемент(ако дизайна е прекалено сложен) минавам през следните три
стъпки: 1.Crop tool - така ограничавам областта от която се интересувам,
комбиниран с 2. отделяне видимостта (visibility) на слоевете с цел
точно достигане до обекта и 3.Trim(за намаляне на обграждащата
прозрачност до минимум), докато се стигне до финалното Save for Web.

Изходни
формати на изображенията
Желателно е форматите, в които ми
сепредлага дизайна
еда поддръжат прозрачност. Като изходна
резолюция на изображенията,използвам 72пиксела/инч. От крайните
растерни формати избирам JPEG - highза по-комплексни изображения(с
много цветове и обекти), както и PNG-24, PNG-8, акожелая да представя
прозрачност в крайния сайт.

Позициониране
След като се
сдобия с приличен дизайн по точка 1, е време да помисля, за най-общата
структура на сайта и по-точно, къде и как ще бъдат разположени отделните
блокове от информация(примерно: менюта, основно съдържание, заглавна
част, заключителна част). Най-лесно и практично в случая ми е: с 1 молив
си ги рисувам на лист под формата на правоъгълници, които да представят
най-общо
комплексния дизайн. След това, на база на тези
правоъгълници се опитавам да определя, колко колони щеима самият
дизайн - примерно 2-3(1 основна и 2
отстрани и т.н.). След това
създавам неговата главна структура(CSS+HTML). Като не забравям още в
самото начало, да използвам reset.css, който ми помага за
зануляването/определянето на някои елементи, така че сайта да остане
съвместим с различните браузъри. Разбира се съществуват и много добри
grid системи, които също могат да се използват за едно точно
позициониране.

Структура
След като имам главния скелет,
по който ще се ръководя започвам да изчиствам детайлите. Става въпрос
за кодирането и стилизирането на отделни малкиелементи
като менюта,
кутии, заглавни части и др.
Тук най-важно(може би от целия процес!)
за мен е спазването на линейния принцип: да се работи от горе като се
слиза на долу. Естествено след направата на отделен елемент тествам на
няколко браузъра за съвместимост за да се уверя, че не се получава
разместване на елементите, адизайна функционира,
както е бил
предвиден.(сигурно знаете за какво става въпрос, когато даден елемент се
размести, след като сте финиширали с програмирането - обикновено всичко
започва почти отначало).

Пропорция: изображения / текст
Опитвам се почти всичко, което е под формата на текст да бъде
представено с html текст и подходящо css форматиране(шрифтове, големина,
позиция), единствено, графичен текст с множество ефекти(сенки и др.)
ставям като отделно изображение в крайния дизайн. Разбира се съществуват
техники за използване и вграждане на нестандартни фонове в съдържанието
на един сайт(директно или чрез флаш заместители) - но опита ми е
показал, че те не са толкова ефективни в едно реално приложение. Същото
се отнася и за използването на flash или javascript за представяне на
менюта и др.

Финална подготовка
Накрая …