Запрашиваемая вами информация
находится по новому адресу:
Приносим извинения за временные неудобства
Гарантия продвижения в ТОП-10 поисковых систем Google и Yandex
Индивидуальный подход к каждому клиенту
ldn@greeweb.com.ua ldn@greeweb.com.ua ldn@greeweb.com.ua ldn@greeweb.com.ua ldn@greeweb.com.ua

Порезка PSD макет перед версткой шаблона - Краснодар

 

     Если необходимо сверстать сайт, чтобы он выглядел в точности так, как в PSD-исходнике. То для этого нужно каждый ярко выраженный графический элемент сохранять в определенном формате: JPG (элементы без прозрачного фона), GIF (анимированные элементы), PNG (элементы с сохранение прозрачного фона) и т.п. Эти три формата наиболее часто используемы в веб-графике. А чтобы сохранить графику в привычных для нее файлах, нам нужно сначала правильно нарезать сам макет. Некоторые верстальщики в процессе нарезки макета отключают множество слоев, оставляя лишь те, которые нужно вырезать. Либо переносить конкретный необходимый слой в новый Photoshop-документ.

 

     В любом случае, весь принцип ручной нарезки заключается в использовании принципов выделения с помощью соответствующих инструментов, принципах скрытия/отображения слоев.

 

     Разберем все на примере. Допустим, нужно вырезать логотип. Как мы видим, сейчас он расположен на градиентном фоне синих оттенков. Это слабо заметно в области его действия, но на деле же градиент мог оказаться намного сложнее и разноцветнее. Поэтому просто так взять, выделить, обрезать логотип нельзя. Основное правило нарезки перед тем, как верстать — всегда отделяйте основной элемент от фонового. Также, как элемент заднего плана от элемента переднего. Уровней может быть как 2, так и более, поэтому продумывать необходимо заранее.

 

     Выделим логотип с помощью инструмента Прямоугольная область (Rectangular Marquee Tool (M).

 

 

      Вокруг выделенной области появится пунктирный контур. Теперь надо обрезать часть макета до выделенного элемента с помощью меню Изображение > Обрезка... (Image > Crop), которая оставит только выделенную часть.

 

     Мы вырезали логотип из основного макета, теперь необходимо убрать элементы заднего плана. В нашем случае таковым является градиентная заливка. Находим слой в панели слоев, соответствующий этой заливке.

 

 

 

     Отключаем видимость фоновых слоев. Слой «фон градиент» — это градиентная заливка, а самый основной фон белого цвета служит фоном для остального контента в макете. Мы отключаем оба слоя, поскольку и слой «фон» действует на область с логотипом. Теперь логотип в окне редактора Photoshop выглядит следующим образом:

 

  

     

     Клеточки за логотипом свидетельствую о том, что это прозрачный фон. Далее нужно обрезать углы логотипа так, чтобы не оставалось лишних пикселей. Это делается с помощью команды меню Изображение > Подрезать (Image > Trim). В появившемся диалоговом окне в блоке На основе (Based On) мы выбираем, на чем основывается обрезка с углов изображения. Это могут быть три способа: Прозрачные пикселы (Transparent Pixels) — обрезать прозрачные пиксели, Цвет верхнего левого пиксела (Top Left Pixel Color) — обрезка в зависимости от верхнего левого цвета пикселя и Цвет нижнего правого пиксела (Bottom Right Pixel Color) — соответственно, обрезка в зависимости от нижнего правого цвета. В данном случае нужно выбрать обрезку только прозрачных пикселей и кликнул ОК. Вот, что получилось:

 

 

     Теперь можно считать обрезку логотипа завершенной! У новичков может возникнуть вопрос, а как вернуться к первоначальному виду макета, чтобы приступить к дальнейшей нарезке графических элементов? Это совсем нетрудно. Просто отмените несколько шагов истории с помощью Ctrl+Z или команды меню Правка > Отменить (Edit > Undo). И вы вернетесь к первоначальному облику макета.

 

     Таким способом продолжайте вырезать каждый элемент PSD-макета и сохранять его в файле JPG/GIF/PNG.