то все в порядке, продолжайте читать. Если же вы не нашли такого инструмента, значит у вас более старая версия Photoshop и вам придется резать в ImageReady.
Итак, предположим у нас есть вот такой макет сайта (взят из шаблона):
Для начала выключим все текстовые слои, а также иконки, поля ввода и все прочее, что, либо верстается в HTML, либо сохраняется отдельно (иконки, кнопочки...). В итоге должно остаться вот что:
Теперь опустим направляющие, деля ими макет на структурные элементы (возможно они у вас уже есть). Если у вас не отображены линейки, то выберите в меню: Просмотр -> Линейки или нажмите Ctrl+R. Чтобы опустить направляющую подведите курсор мыши к верхней линейке, нажмите левую клавишу мыши и тащите направляющую вниз. Так можно опустить сколько угодно направляющих. Аналогично подведите курсор мыши к левой линейке, нажмите левую клавишу мыши и тащите направляющую вправо.
У меня получилось вот так:
Если мы разрежем по направляющим, то получится много лишних частей макета. Например, в первой строке у нас будет располагаться название фирмы, т.е. это единая картинка. Поэтому подумаем внимательно как лучше резать, представляя мысленно как потом это будем верстать.
Определились и двигаемся дальше. Берем инструмент "Раскройка" (Tools), его еще называют ножик, потому что он имеет такой вид. Начинаем резать. Для этого подведем курсор мыши (в виде ножика) в левый верхний угол макета, нажмем левую клавишу мыши и растянем по форме первого фрагмента. Отпускаем.
В левом углу фрагмента появится номер фрагмента (он синего цвета, т.к. активный), а ниже появится номер следующего фрагмента (серого цвета). Желтые маркеры на сторонах фрагмента позволяет его подкорректировать. Если это нужно ухватитесь за них мышкой и подвиньте границу фрагмента.
Снова подводим курсор мыши, теперь уже к левому верхнему углу второго фрагмента и снова растягиваем рамку. Так поступаем со всем макетом. У меня получилось вот так:
Вы можете разрезать по-другому, так, как считаете нужным. Остался последний шаг - сохранить эти фрагменты. Для этого выбираем в меню: Файл -> Сохранить для Web, выбирайте самый, с вашей точки зрения, оптимальный формат JPEG (можно и GIF, но для основы сайта я предпочитаю JPEG), щелкаем "Сохранить". В открывшемся диалоговом окне сохранения укажите следующее:
Место, куда сохранить, выберите сами. Жмем ОК. В итогое получаем папку Images, внутри которой наши фрагменты с именами images_01.jpg - image_11.jpg. Т.е. имя файла, которое вы написали при сохранении, является основой имени для всех картинок. Теперь вы можете их переименовать.
Теперь возвращаемся к нашему макету и сохраняем отдельными картинками иконки, кнопочки, линии и т.д.
На этом можно было бы и закончить, но давайте посмотрим еще раз на фрагменты, которые мы сохранили. В основном это прямоугольники разных коричневых оттенков, которые будут фоном в вашем будущем сайте. А рационально ли хранить картинку шириной 780 пикселов, если можно сохранить ее часть, скажем шириной 10 пикселов и замостить ею фон?
Да, не рационально. Поэтому заменим фрагменты 2, 3, 5, 7 и 8 одноименными оптимальными фрагментами (т.е. шириной в 10 пикселов). А фрагменты 1, 6, 8 и 10 нам и вовсе не нужны, ведь это картинки белого цвета, поэтому при верстке сайта мы воьзмем лишь их размер. Впрочем это уже другая тема, она подробно изложена в разделе Делаем сайт - табличная верстка.
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Главная → Уроки Photoshop - полезные навыки
→ Как разрезать макет сайта
Photoshop - Как разрезать макет сайта
Итак, вы подготовили макет сайта и хотите разрезать его на фрагменты, дабы сверстать из них сайт. Рассмотрим, как это делается в Photoshop. Посмотрите на панель инструментов, если у вас есть вот такой инструмент:то все в порядке, продолжайте читать. Если же вы не нашли такого инструмента, значит у вас более старая версия Photoshop и вам придется резать в ImageReady.
Итак, предположим у нас есть вот такой макет сайта (взят из шаблона):
Для начала выключим все текстовые слои, а также иконки, поля ввода и все прочее, что, либо верстается в HTML, либо сохраняется отдельно (иконки, кнопочки...). В итоге должно остаться вот что:
Теперь опустим направляющие, деля ими макет на структурные элементы (возможно они у вас уже есть). Если у вас не отображены линейки, то выберите в меню: Просмотр -> Линейки или нажмите Ctrl+R. Чтобы опустить направляющую подведите курсор мыши к верхней линейке, нажмите левую клавишу мыши и тащите направляющую вниз. Так можно опустить сколько угодно направляющих. Аналогично подведите курсор мыши к левой линейке, нажмите левую клавишу мыши и тащите направляющую вправо.
У меня получилось вот так:
Если мы разрежем по направляющим, то получится много лишних частей макета. Например, в первой строке у нас будет располагаться название фирмы, т.е. это единая картинка. Поэтому подумаем внимательно как лучше резать, представляя мысленно как потом это будем верстать.
Определились и двигаемся дальше. Берем инструмент "Раскройка" (Tools), его еще называют ножик, потому что он имеет такой вид. Начинаем резать. Для этого подведем курсор мыши (в виде ножика) в левый верхний угол макета, нажмем левую клавишу мыши и растянем по форме первого фрагмента. Отпускаем.
В левом углу фрагмента появится номер фрагмента (он синего цвета, т.к. активный), а ниже появится номер следующего фрагмента (серого цвета). Желтые маркеры на сторонах фрагмента позволяет его подкорректировать. Если это нужно ухватитесь за них мышкой и подвиньте границу фрагмента.
Снова подводим курсор мыши, теперь уже к левому верхнему углу второго фрагмента и снова растягиваем рамку. Так поступаем со всем макетом. У меня получилось вот так:
Вы можете разрезать по-другому, так, как считаете нужным. Остался последний шаг - сохранить эти фрагменты. Для этого выбираем в меню: Файл -> Сохранить для Web, выбирайте самый, с вашей точки зрения, оптимальный формат JPEG (можно и GIF, но для основы сайта я предпочитаю JPEG), щелкаем "Сохранить". В открывшемся диалоговом окне сохранения укажите следующее:
Место, куда сохранить, выберите сами. Жмем ОК. В итогое получаем папку Images, внутри которой наши фрагменты с именами images_01.jpg - image_11.jpg. Т.е. имя файла, которое вы написали при сохранении, является основой имени для всех картинок. Теперь вы можете их переименовать.
Теперь возвращаемся к нашему макету и сохраняем отдельными картинками иконки, кнопочки, линии и т.д.
На этом можно было бы и закончить, но давайте посмотрим еще раз на фрагменты, которые мы сохранили. В основном это прямоугольники разных коричневых оттенков, которые будут фоном в вашем будущем сайте. А рационально ли хранить картинку шириной 780 пикселов, если можно сохранить ее часть, скажем шириной 10 пикселов и замостить ею фон?
Да, не рационально. Поэтому заменим фрагменты 2, 3, 5, 7 и 8 одноименными оптимальными фрагментами (т.е. шириной в 10 пикселов). А фрагменты 1, 6, 8 и 10 нам и вовсе не нужны, ведь это картинки белого цвета, поэтому при верстке сайта мы воьзмем лишь их размер. Впрочем это уже другая тема, она подробно изложена в разделе Делаем сайт - табличная верстка.
16.06.2009
www.site-do.ru
www.site-do.ru
Главная → Уроки Photoshop - полезные навыки
→ Как разрезать макет сайта
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.