Нонче тут

Сейчас 17 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

Яндекс.Метрика

Проверка тиц

ВКонтакте

Статья о нарезке PSD исходника для вёрстки
Я взяла достаточно сложный PSD исходник и для начала настроила вид окна фотошопа
Наведём guides так, что бы видно было как вы будете резать дизайн.
1)отметим все границы элементов
2) отметим ширину кнопок меню

Теперь можно нарезать и не ошибиться с размерами ;)
1) начинаем выбирать одинаковые куски дизайна, т.е задний фон и фон верхнего меню и бордюр таблицы (растягиваться будет правый край дизайна)
а) выясним высоту верхнего меню по сетке- у меня она 277px (вообщем меня такая высота устроила)
б) найдём и выделим повторяющийся фрагмент

хотя если вы используете инструмент Slise, то нет необходимости напрягаться с выделениями кусков меню. Нам понадобится только общий фон страницы

Возьмём инструмент Slise и начнём резать...
Слои с боковым меню убираем (так удобнее будет резать общий контур)

не забываем выделять слайсами границы таблиц и углы
Вообщем всё готово- осталось перейти в меню File-Save for Web и сохранить нашу нарезку.
Все лишние куски удаляем и нарезка завершена
"Резиновым" наш дизайн будет за счет слайсов №23 и №8. они дадут возможность задать общую ширину таблицы в %%

крайних правых и левых guides отмечают ширину боковой грани

выделяем меню отдельной таблицей- получится таблица с кучей столбикоффф
9 штук и одна строка, при чём столбцы с 1по7 и столбец 9 фиксированной ширины в пикселях, а столбец 8 ширины auto.
Для кнопок верхнего меню удобно будет применить тэг map(мне оказалось влом резать верхний рисунок на более мелкие куски и усложнять таблицу)
вторая табалица при ширине 100% имеет две строки и три столбика.
первая строка центр дизайна и туда в центральный столбик пихают форум
вторая строка фиксированной высоты- там расположена нижняя граница таблицы
столбики- левый(широкий под боковое меню- меню верстайте в дивах) и правый(узкий под грань таблицы) фиксированной ширины, средний ширина- auto

Второй вариант нарезки (более трудоёмкий для вёрстки, но чуть легче по массе графики)
1) разделим верхнюю таблицу на 4 строки... получится тихий ужос...

можно резать разными по высоте кусками и использовать при вёрстке параметры ROWSPAN и COLSPAN (надеюсь не просчиталась)
(кому надо покажу как оно надо резать)
Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.