К Вашему вниманию очередной урок курса по созданию дизайна страницы сайта в программе Photoshop со странным названием — раскройка. Чего кроить то будем? А макет сайта, созданный на предыдущем уроке! Почему не резать? А потому, что в фотошопе есть для этих целей инструмент с названием раскройка. Вот им и покроим...
Ну вот, макет макет главной страницы сайта готов, осталось его порезать. Зачем резать? Дело в том, что графические изображения загружаются браузерами тем быстрее, чем они меньше. Поэтому страница сайта загрузится быстрее, если будет состоять из отдельных фрагментов. На которые мы ее и порежем.
Для этого можно пользоваться двумя инструментами – Рамка и Раскройка. Я пользуюсь раскройкой. Этот инструмент режет намного точнее, что для нашего макета очень пригодится.
Перед началом резки отключите слой со слоганом. Его мы напишем в HTML редакторе. Для этого щелкните по «глазу» в панели слоев, напротив нужного слоя.
Итак, для начала поделим наш макет направляющими на нужные нам части по размерам, которые мы запланировали а именно: шапка (header)– высота 170 пикселей, ширина – по ширине страницы, подвал(futer) – высота 140 пикселей, ширина – по ширине страницы, все остальное нас не интересует.
Для этого активируем инструмент Раскройка, ставим кончик «ножа» курсора верхний левый угол шапки и, зажав левую клавишу мышки, тянем рамку до правого нижнего угла. Отпускаем клавишу. Вот и выделили фрагмент 1. Не получилось? Отмените действие в меню Редактирование – Шаг назад и повторите заново.
Точно так же выделяем подвал:
Дальше, эти выделенные фрагменты главной страницы сайта, нужно сохранить. И не просто сохранить, а сохранить в специальном для web-страниц формате, что с успехом делает Photoshop. Для этого идем в меню Файл — Сохранить для WEB и устройств, где вам предложат сохранить все это с определенными параметрами и форматом.
Какие бывают форматы изображений и какой выбрать Вы можете узнать, если прочитаете статью Дизайн сайта в Photoshop. Форматы изображений
Выбрали параметры сохранения? Жмем Сохранить. Здесь вам предложат выбрать под каким именем и где сохранять. Ну, где сохранять – вам виднее, а вот имя нужно выбрать правильно. Придерживайтесь несложного правила: имена должны состоять маленьких английских букв (нижний регистр) без пробелов, можно добавлять цифры. Вот так, например: fon.jpg или fon1.jpg. И еще, давайте имена так, чтобы в них была привязка к объекту. Если это шапка – присвойте имя shapka или header. Вам же потом будет легче разбираться, что к чему относится. Мы назовем фрагменты fon.
Дальше – тип файла у нас задан, настройки – по умолчанию, фрагменты — здесь можно выбрать, как вам сохранять фрагменты все вместе или по отдельности. Если хотите по отдельности – закройте окно сохранения и с помощью инструмента Выделение фрагмента обозначьте фрагмент, который вы будете сохранять. Фрагменты сохраняются в папке images.
Это еще не все. Для создания фона нам нужно сделать еще один фрагмент. В панели История найдите вариант страницы без разметки. Зайдите в панель слоев и отключите слои, оставив только слой с фоном. Для этого пощелкайте по «глазам» на слоях в панели слоев. С помощью инструментов Раскройка или Рамка выделяем вертикальную полоску по всей высоте страницы, шириной 10 пикселей и сохраняем так же, как и предыдущие фрагменты.
Все фрагменты соберем в одной папке с названием images:
Ну вот, главная страница сайта готова к сборке в редакторе HTML. И это последний урок по созданию дизайна сайта в программе Photoshop. Дальше нас ждет изучение процесса верстки страницы сайта.
Если вы готовы — заходите на страницу Редактор Dreamweaver, где мы разберемся что такое эти редакторы и как в них собираются страницы сайта.***
меня при сохранении в веб выкидывает с фотошопа...
Подскажите в чем дело?
Скорее всего это из-за русификатора.
У меня такое было.
и что делать если выкидывает?
Скачай другой и переустанови. Уменя такая же фигня была. Спаслась только этим.
Я всё сделал потом нажимаю ну сохранить для веб потом сэйв и формат задаю как надо и он не сохраняет подскажите что это?
странно, проблем не должно возникать. пробовал в разных версиях — все просто и быстро
))) Отличный урок!
Отличный урок! спасибочки)
Спасибо!)) Теперь наконец-то научилась сохранять)
Все нормально, это просто ломаный фотошоп. Либо купите либо ищите другой.
Подскажите где находится раскройка!
В программе Photoshop? Слева в панели инструментов. Здесь не так много значков.
У меня нет этого инструмента где можно скачать подскажите а?
Инструмент Раскройка встроен в программу Photohop. Например Photoshop CS5 — слева, в панели инструментов, пятый значок сверху, навести курсор, щелкнуть правой клавишей мышки и выбрать из выпадающего меню
спасибо. нравится учусь.
но совсем непонятен процесс сохранения. меню развернутое, содержит много параметров. что игнорировать, что включать?