Наша жизнь
Designer vs. Imposer
Сегодня мы с вами попытаемся создать макет для нашего верстальщика.
Что нам понадобится:
• Adobe Photoshop (самый крутой, конечно же – CC. У верстальщика, правда, CS5, но это же не важно?)
• Много места на диске (сайт ведь большой? Нет? Все равно пригодится)
• Мышь, клавиатура. Хотя нет, клавиатура не нужна, мы же не будем округлять значения шрифтов.
Итак, сначала создадим направляющие. Две направляющие для рабочей области 960px, еще одна для разделения левой и правой части контента, одна для меню второго уровня. Мало. Мы ведь хотим, чтобы все было ровно? Добавляем направляющие для полей, разделим правой блок еще на две части. Мало! Добавим направляющие для каждой буквы в заголовке страницы – он у нас будет на две строки, надо чтобы буквы второй строки располагались ровно под буквами первой. Одна, вторая, третья… Ладно, ладно, это уже перебор. Удалять их не буду, вдруг пригодятся.
Пока я ходил на обед, кто-то подкинул мне файлик “GRID_16_COLUMNS.psd”. Открыл, внутри какая-то сетка и много направляющих. Закрыл, потому что у меня их больше, значит и макет красивей будет.
Чтобы нашему верстальщику было проще, не будем закидывать все иконки в один файл, а разобьем на 4. Ой, а вдруг он не поймет на какой файл ему смотреть в первую очередь? Первый файл назовем «иконки!!», второй, соответственно, «иконки!!!». Файл с иконками, которые будут находиться в меню, вполне обоснованно назовем «иконки текст». Вроде все. А нет, еще один, просто назовем его так же, как и второй, только большими буквами и с пробелом.
Эффекты при наведении и нажатии оставим в этом же файле. Скроем их, засунем поглубже в папки, чтобы не мешались. Для разнообразия, при наведении на кнопку будем уменьшать ширину на пару пикселей, видел на одном модном сайте, круто выглядит.
Стараемся нормально называть слои и группы, сначала тяжело будет, а потом названия типа «Слой 13 копия 2 копия 51» будут получаться сами собой!
Конечно же, нам нужно черпать откуда-то вдохновение. Hint: чтобы постоянно не переключаться между нашим IE8 DESEGNER EDITION и фотошопом, можно сделать скриншот открытой в IE страницы и вставить его отдельным слоем в фотошоп. Это особенно забавно, если вы работаете с двумя FullHD мониторами.
Пока я искал, откуда бы взять иконку, мне написал в аську мой старый друг. Попросил немного поправить цвета на фотографии. Приятно, что про меня не забыли, приятно, что мой друг помнит, что я Дизайнер. Оперативную память экономлю, у меня ее всего лишь 16Гб, поэтому картинку открываю не новым документом, а вставляю прямо в макет. Удалю потом. Создаю дубликат слоя, делаю скриншот, посылаю своему приятелю. Он доволен.
Макет почти готов, осталось немного прибраться. Группируем ровно половину слоев, еще четверть переименовываем, чтобы было понятно, что находится на слое. Ладно, он разберется, не первый раз верстает.
В результате вес нашего макета составляет 263Мб. Как-то мало в этот раз получилось, этак мы и за месяц все место на диске не забьем! Скидываем файл верстальщику в скайп и идем пить кофе. Какое же приятное чувство, когда делаешь свою работу красиво и качественно!
