Загрузка...

Создание Web-графики в Фотошоп

Фотошоп для подготовки
Web-графики

Разделение изображения на отдельные части

Ранее было сказано, что все графические элементы, находящиеся на web-странице, должны быть только прямоугольными. Это связано с тем, что в файлах могут сохраняться изображения только такой формы. Поэтому после того, как вы подготовите макет сайта, вам придется «нарезать» его, то есть разделить на отдельные изображения, которые затем будут сохранены в файлах и помещены на сервер.

Резать удобнее на отдельные части не состоящее из множества слоев, а «плоское» изображение, содержащее один слой (в большинстве случаев этот слой является фоновым). Для того чтобы «склеить» слои, следует использовать специальные команды, находящиеся в меню палитры Слои (Layers), а также в меню Слой (Layer). К этим командам относятся:

  • Объединить с нижним (Merge Down) — активный слой объединяется со слоем, расположенным под ним (накладывается на него);
  • Объединить видимые (Merge Visible) — объединяются все слои, видимые в данный момент (слои, для которых на палитре Слои (Layers) установлен символ видимости). Объединение производится в том порядке, в котором слои расположены на палитре Слои (Layers);
  • Объединить все (Flatten Image) — объединяются все слои, находящиеся в редактируемом файле. Если часть слоев невидима (отсутствует на экране), то на экран выводится запрос о том, следует ли их отбросить или же необходимо сохранить. Объединение производится в порядке расположения слоев.
  • ВНИМАНИЕ. Перед тем, как производить объединение («склеивание») слоев, сделайте резервную копию файла. В противном случае вы можете, нечаянно сохранив объединенные спои, лишиться возможности дальнейшего редактирования элементов изображения.

    СОВЕТ. Вызвать меню палитры можно при помощи кнопки Разделение изображения на отдельные части со стрелкой, расположенной в верхнем правом углу панели.

    Получив «плоское» изображение, приступайте к его нарезке. При этом вы должны четко представить себе структуру будущей страницы, форму и размеры ее элементов. Если предполагается использовать рисованный фон (текстуру), то удобнее подготовить его в виде отдельного файла. Это упростит сохранение фона в пригодном для использования на web-странице виде.

    Для выделения элементов в Adobe PhotoShop удобнее всего использовать инструмент Разделение изображения на отдельные части Rectangular Marquee (Прямоугольное выделение). С его помощью можно легко выделять прямоугольные фрагменты изображения и переносить их (через буфер обмена) в новый файл. Этот файл затем можно сохранить в оптимальном для него формате, подобрав параметры, обеспечивающие максимальное сжатие.

    СОВЕТ. Если вы создаете новый файл, а в буфере обмена Windows уже находится изображение, то файлу по умолчанию будет присвоен размер этого изображения.

    Готовить изображение к сохранению и регулировать параметры сжатия вы можете вручную при помощи различных команд. Также можно воспользоваться командой Файл > Сохранить для Web (File > Save for Web). Она позволяет оптимизировать сжатие файла, непосредственно наблюдая за тем, как вносимые изменения влияют на качество изображения и его размер на диске. Подробнее эти процедуры рассматриваются в следующем уроке.

    Для того чтобы облегчить выделение различных элементов (а также их размещение на макете страницы), полезно создать в файле макета отдельный слой и раскрасить его, обозначив тем самым области изображения. Пример такой разметки приведен на рис. 7.12.

    Разделение изображения на отдельные части

    Рис. 7.12. Пример разметки макета

    В дальнейшем вы сможете легко выделить нужную область, например при помощи инструмента Волшебная палочка (Magic Wand).

    отдельных файлов — инструмент Разделение изображения на отдельные части Нож (Slice). С его помощью изображение «разрезают» на области, которые затем можно сохранять по отдельности (при помощи команды Сохранить для Web (Save for Web)), используя для каждой из них свои настройки сжатия. При помощи инструмента Разделение изображения на отдельные части Выбрать область (Slice Select) можно получить доступ к области после ее создания. Это позволит вам, например, перемещать область по холсту.

    Загрузка...

    Рейтинг@Mail.ru