Раскройка страницы сайта в Photoshop CS5 | Как создать свой сайт

Простая раскройка страницы сайта в Photoshop CS5

Май-29-2009 Автор: VeryOldMan

К Вашему вниманию очередной урок курса по созданию дизайна страницы сайта в программе Photoshop со странным названием — раскройка. Чего кроить то будем? А макет сайта, созданный на  предыдущем уроке! Почему не резать? А потому, что в фотошопе есть для этих целей инструмент с названием раскройка.  Вот им и покроим…

Ну вот, макет макет главной страницы сайтаготов, осталось его порезать. Зачем резать? Дело в том, что графические изображения загружаются браузерами тем быстрее, чем они меньше. Поэтому страница сайта загрузится быстрее, если будет состоять из отдельных фрагментов. На которые мы ее и порежем.

Для этого можно пользоваться двумя инструментами – Рамка и Раскройка. Я пользуюсь раскройкой. Этот инструмент режет намного точнее, что для нашего макета очень пригодится.

Перед началом резки отключите слой со слоганом. Его мы напишем в HTML редакторе. Для этого щелкните по «глазу» в панели слоев, напротив нужного слоя.

Итак, для начала поделим наш макет направляющими на нужные нам части по размерам, которые мы запланировали а именно: шапка (header)– высота 170 пикселей, ширина – по ширине страницы, подвал(futer) – высота 140 пикселей, ширина – по ширине страницы, все остальное нас не интересует.

Для этого активируем инструмент Раскройка, ставим кончик «ножа» курсора верхний левый угол шапки и, зажав левую клавишу мышки, тянем рамку до правого нижнего угла. Отпускаем клавишу. Вот и выделили фрагмент 1. Не получилось? Отмените действие в меню Редактирование – Шаг назад и повторите заново.

Точно так же выделяем футер:

раскройка страницы сайта в Photoshop CS5

Дальше, эти выделенные фрагменты главной страницы сайта, нужно сохранить. И не просто сохранить, а сохранить в специальномдля web-страниц формате, что с успехом делает Photoshop. Для этого идем в меню Файл — Сохранить для WEB и устройств, где вам предложат сохранить все это с определенными параметрами и форматом.

Какие бывают форматы изображений и какой выбрать  Вы можете узнать, если прочитаете статью Дизайн сайта в Photoshop. Форматы изображений

Выбрали параметры сохранения? Жмем Сохранить. Здесь вам предложат выбрать под каким именем и где сохранять. Ну, где сохранять – вам виднее, а вот имя нужно выбрать правильно. Придерживайтесь несложного правила: имена должны состоять маленьких английских букв (нижний регистр) без пробелов, можно добавлять цифры. Вот так, например: fon.jpg илиfon1.jpg. И еще, давайте имена так, чтобы в них была привязка к объекту. Если это шапка – присвойте имя shapka или header. Вам же потом будет легче разбираться, что к чему относится. Мы назовем фрагменты fon.

Дальше – тип файла у нас задан, настройки – по умолчанию, фрагменты — здесь можно выбрать, как вам сохранять фрагменты все вместе или по отдельности. Если хотите по отдельности – закройте окно сохранения и с помощью инструмента Выделение фрагмента обозначьте фрагмент, который вы будете сохранять. Фрагменты сохраняются в папке images.

раскройка страницы сайта в Photoshop CS5

Это еще не все. Для создания фона нам нужно сделать еще один фрагмент. В панели История найдите вариант страницы без разметки. Зайдите в панель слоев и отключите слои, оставив только слой с фоном. Для этого пощелкайте по «глазам» на слоях в панели слоев. С помощью инструментов Раскройка или Рамка выделяем вертикальную полоску по всей высоте страницы, шириной 10 пикселей и сохраняем так же, как и предыдущие фрагменты.

Все фрагменты соберем в одной папке с названием images:

Ну вот, главная страница сайта готова к сборке в редакторе HTML.   И это последний урок по созданию дизайна сайта в программе  Photoshop.  Дальше  нас ждет изучение процесса  верстки страницы сайта.

Если вы готовы — заходите  на страницу Редактор Dreamweaver, где мы разберемся что такое эти редакторы и как в них собираются страницы сайта.***






18 комментариев
  1. mak7mak8 Пишет,

    меня при сохранении в веб выкидывает с фотошопа…

    Подскажите в чем дело?

  2. Павел Пишет,

    Скорее всего это из-за русификатора.

  3. Полина Пишет,

    и что делать если выкидывает?

  4. Panterka Пишет,

    Скачай другой и переустанови. Уменя такая же фигня была. Спаслась только этим.

  5. Артёмка Пишет,

    Я всё сделал потом нажимаю ну сохранить для веб потом сэйв и формат задаю как надо и он не сохраняет подскажите что это?

  6. Кулинар Пишет,

    странно, проблем не должно возникать. пробовал в разных версиях — все просто и быстро

  7. Дина Пишет,

    ))) Отличный урок!

  8. Динозаврик Пишет,

    Отличный урок! спасибочки)

  9. Диана Пишет,

    Спасибо!)) Теперь наконец-то научилась сохранять)

  10. Скачать фильмы Пишет,

    Все нормально, это просто ломаный фотошоп. Либо купите либо ищите другой.

  11. цлсе5н Пишет,

    Подскажите где находится раскройка!

  12. VeryOldCat Пишет,

    В программе Photoshop? Слева в панели инструментов. Здесь не так много значков.

  13. Хикари-асики Пишет,

    У меня нет этого инструмента где можно скачать подскажите а?

  14. VeryOldCat Пишет,

    Инструмент Раскройка встроен в программу Photohop. Например Photoshop CS5 — слева, в панели инструментов, пятый значок сверху, навести курсор, щелкнуть правой клавишей мышки и выбрать из выпадающего меню

  15. Elena Пишет,

    спасибо. нравится учусь
    но совсем непонятен процесс сохранения. меню развернутое, содержит много параметров. что игнорировать, что включать?

  16. sttaun Пишет,

    У меня Photoshop CS5 но такого инструмента там нет. Там, слева, в панели инструментов, пятый значок сверху, это рамка. Хотел бы узнать, где раскройку можно скачать.

  17. sttaun Пишет,

    Ой, нашёл!!! На эту рамку правой кнопкой мыши над нажимать, там окно появляется, в котором раскройку можно найти.

  18. ghtri Пишет,

    Спасибо за полезный мне урок! Многого нового узнал. Ещё раз спасибо!

Добавить комментарий