В данном примере рассмотрим создание parallax с эффектом вертикального скроллинга. Это самый популярный вид parallax’а для страниц типа Landing Page.

Создавать эффект будет с помощью скрипта Parallax.js. По странному стечению обстоятельств данный скрипт имеет точно такое же имя, что и скрипт из предыдущего примера - “Parallax.js - создаем простой parallax”. Однако, это разные скрипты и авторы у них разные; данный скрипт расположен на странице GitHub по адресу - Parallax.js.

Домашняя страничка скрипта выполнена также с эффектом parallax - Simple Parallax Scrolling.

Parallax.js - создаем HTML-разметку

Разметка для скрипта Parallax.js проста. Это обычный блок, который может быть

1
div
,
1
section
или что-либо еще. Обязательным условием является подключение для блока класса
1
class="parallax-window"
и двух data-атрибутов:
1
data-parallax="scroll"
и
1
data-image-src="images/one.jpg"
.

Второй атрибут в качестве своего значения имеет относительный путь к файлу изображения, которое будет устанавливаться в виде фона. В дополнение можно задать еще несколько атрибутов для ускорения загрузки изображений браузером:

  • 1
    
    data-natural-width
    - реальная ширина изображения
  • 1
    
    data-natural-height
    - реальная высота изображения

Ниже приведу созданные мною четыре блока

1
section
с содержимым:

<!-- begin one -->
<section data-parallax="scroll" data-image-src="images/one.jpg" class="parallax-window">
  <div class="wrap one">
    <h1>Welcome to Parallax!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus consequatur, nulla neque voluptatum deserunt at voluptatibus eos. Magni sapiente rem, suscipit assumenda provident, quaerat doloribus libero? Eaque doloremque, quo sequi!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nemo cum, dignissimos blanditiis iusto quasi, quis! Ducimus aperiam sunt libero deleniti numquam rerum esse architecto, officiis amet, officia recusandae aut.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque reiciendis vitae, amet! Quas saepe consequuntur, nisi quia, cupiditate dignissimos laborum incidunt soluta repellat, libero id quibusdam mollitia maiores omnis tempore.</p>
  </div>
</section>
<!-- end one -->

<!-- begin two -->
<section data-parallax="scroll" data-image-src="images/two.jpg" class="parallax-window">
  <div class="wrap two">
    <h2>Parallax is great!</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi accusamus deserunt ipsum nesciunt odit vero corporis eaque, quibusdam, enim, beatae, repellendus iusto. Amet corporis beatae, inventore officiis est aut. Ab!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime possimus sint a facere dignissimos! Labore at, beatae consequuntur corporis perspiciatis! Asperiores illum esse repellat veniam vero totam debitis! Quos, consectetur.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, totam maxime dolorum similique, ipsa a. Ea illo eligendi, ex, officia id eum sit sint nobis aperiam, error nihil ab dolorum.</p>
  </div>
</section>
<!-- end two -->

<!-- begin three -->
<section data-parallax="scroll" data-image-src="images/three.jpg" class="parallax-window">
  <div class="wrap three">
    <h3>Parallax is easy!</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quia ex doloremque et, eum soluta culpa ipsum placeat consectetur, error at, accusamus iure! Doloribus corporis, earum quo modi omnis hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum ab distinctio omnis repellendus exercitationem maiores ad sed, deleniti dolorem tempore praesentium nobis suscipit nihil quidem qui nostrum debitis ipsam culpa.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, repellendus, qui. Aspernatur reiciendis eligendi, totam eaque iusto illo officia. Facere dicta harum, dolore sit perferendis in neque mollitia eligendi dignissimos?</p>
  </div>
</section>
<!-- end three -->

<!-- begin four -->
<section data-parallax="scroll" data-image-src="images/four.jpg" class="parallax-window">
  <div class="wrap">
    <h4>Let's start use it!</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ab voluptates alias corporis, laborum provident corrupti assumenda dignissimos vel repellendus obcaecati, aspernatur earum ipsum rem. Voluptatum ipsum nostrum in! Rerum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit alias illum minus asperiores culpa, modi veritatis quibusdam, aperiam accusantium repellendus at possimus qui cupiditate dolorem quod accusamus a. Mollitia, repudiandae.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo nulla officia sapiente a tenetur maxime sunt mollitia accusantium aut, eius minus maiores fugit necessitatibus obcaecati ex eos quibusdam sequi.</p>
  </div>
</section>
<!-- end four -->

Parallax.js - стилизация страницы

Стилизацию страницы буду выполнять на Sass/Compass с использованием вертикального ритма “Vertical Rhythm” - в данном случае он подойдет как раз к месту, как мне кажется:

@import "compass";
@import "compass/reset";

$base-font-size: 24px;
$base-line-height: 36px;
$rhythm-unit: "rem";
$rem-with-px-fallback: true;

@include establish-baseline;

.parallax-window {
  min-height: 1080px;
  background: transparent;
  .wrap{
    margin-top: 100px;
    text-align: center;
    width: 1200px;
    margin: 0 auto;
    @include leader($lines: 7, $property: padding);
    p{
      @include rhythm-margins;
    }
    h1{
      @include adjust-font-size-to(2.074rem);
    }
    h2{
      @include adjust-font-size-to(1.728rem);
    }
    h3{
      @include adjust-font-size-to(1.44rem);
    }
    h4{
      @include adjust-font-size-to(1.2rem);
    }
    &.one{
      text-align: center;
      color: rgba(255,255,255,.8);
    }
    &.two{
      text-align: left;
      color: rgba(0, 0, 0, .8);
    }
    &.three{
      text-align: right;
      color: rgba(255, 255, 255, .8);
    }
  }
}

В этом коде наиболее важными строками являются две - без них скроллинга не получиться:

.parallax-window {
  min-height: 1080px;
  background: transparent;
  ...

Parallax.js - добавление Javascript

Разметка и стили готовы - осталось подключить скрипт Parallax.js и библиотеку jQuery:



jQuery “забираем” с Google, а скрипт Parallax.js - с GitHub-страницы проекта - Parallax.js. Все это “добро” пихаем в самый низ, подвал HTML-документа - перед закрывающим тегом

1
</body>
.

В дальнейшие украшательства вдаваться не буду - это дело техники. Мне важен сам принцип создания parallax с эффектом вертикального скроллинга.

В принципе, у меня все готово для того, чтобы полюбоваться результатом. Открываю страницу в браузере и любуюсь (не забывая скролить саму страницу):

Страница на Parallax.js с вертикальным скроллингом

Отлично! Получился прямо таки совсем неплохой parallax с вертикальным скроллингом. Готовый пример со всеми исходниками можно посмотреть на GitHub - Parallax.js Scrolling.


Небольшой обзор новой для меня темы - создание эффекта

1
parallax
на странице сайта. Вместе с вами буду учиться создавать такой эффект и начну с самого простого - Parallax.js.

Чтобы посмотреть, что примерно мы должны в результате получить, посмотрим на домашнюю страницу этого проекта - Parallax.js. Исходный код скрипта и документация расположена на GitHub - Parallax.js

Кратко о parallax

Что такое

1
parallax
как эффект сам по себе, хорошо видно на самой страничке и расписывать его я не буду. В Интернет есть лучшее и более подробное описание эффекта
1
parallax
. Единственное, что можно сказать по поводу
1
parallax
- появился он в основном как необходимость, дань моде. Своим существованием практически полностью обязан популярным на сегодняшний день
1
landing page
и призван скрасить и разнообразить их относительную монотонность.

Способов реализации

1
parallax
на сегодня сушествует множество. Но практически все они основаны на одном принципе - изменении скорости прокрутки фонового изображения на странице относительно других объектов на ней (поправьте меня, если я неправ).

Одним из преимуществ метода на основе скрипта Parallax.js является то, что в этом случае не требуется библиотеки jQuery. Скрипт может работать и с ней, но ее присутствие совсем необязательно. Получается выгода в весе страницы и скорости ее загрузки в браузере.

Parallax.js - начальная разметка

HTML-разметка для нашего будущего

1
parallax
удивительно простая - это маркированный список
1
ul
с идентификатором (имя его произвольное) и элементами списка
1
li
(имя класса обязательно и неизменно).

Еще одним обязательным атрибутом для элементов списка

1
li
является атрибут
1
data-depth
, у которого значение может меняться в диапазоне от 0 до 1. Чем выше значение в 1, тем выше скорость перемещения объекта на странице.

Внутрь элементов списка помещается изображение, которое будет анимироваться с помощью эффекта

1
parallax
.

Ниже приведен пример такой разметки:

<ul id="scene">
  <li class="layer" data-depth="0.10">
    <img src="images/one.png" height="100" width="100" alt="Image" />
  </li>
  <li class="layer" data-depth="0.80">
    <img src="images/two.png" height="100" width="100" alt="Image" />
  </li>
  <li class="layer" data-depth="0.20">
    <img src="images/three.png" height="100" width="100" alt="Image" />
  </li>
  <li class="layer" data-depth="0.80">
    <img src="images/four.png" height="100" width="100" alt="Image" />
  </li>
</ul>

Parallax.js - стилизация parallax

Произведем небольшую стилизацию нашего будущего

1
parallax
с помощью Sass/Compass. Для элемента
1
ul
добавим фоновое изображение, чтобы был лучше виден эффект parallax.

@import "compass/";
@import "compass/reset";

#scene{
  width: 95%;
  margin: 20px auto 0;
  min-height: 775px;
  background: url(../images/bg.jpg) 0 0 no-repeat;
  img{
    display: inline-block;
    width: 100px;
    height: 100px;
    @include border-radius(50%);
  }
  img[src="images/one.png"]{
    margin: 200px 0 0 200px;
  }
  img[src="images/two.png"]{
    margin: 200px 0 0 1000px;
  }
  img[src="images/three.png"]{
    margin: 500px 0 0 700px;
  }
  img[src="images/four.png"]{
    margin: 600px 0 0 300px;
  }
}

Parallax.js - добавляем javascript

Наш

1
parallax
почти готов - осталось “вдохнуть в него жизнь” с помощью Javascript.

Тут все просто. Первой строкой подключается файл скрипта Parallax.js. Второй строкой сначала в теле документа отыскивается элемент с идентификатором

1
scene
, который помещается внутрь переменной
1
scene
. Затем создается новый экземпляр
1
parallax
объекта Parallax и ему передается в качестве аргумента эта переменная
1
scene
.

Все - смотрим результат:

Готовый эффект на Parallax.js

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

Мы получили эффект parallax.

Ниже приведен полный код HTML и CSS рассмотренного нами примера:

<ul id="scene">
  <li class="layer" data-depth="0.10">
    <img src="images/one.png" height="100" width="100" alt="Image"
  </li>
  <li class="layer" data-depth="0.80">
    <img src="images/two.png" height="100" width="100" alt="Image"
  </li>
  <li class="layer" data-depth="0.20">
    <img src="images/three.png" height="100" width="100" alt="Image"
  </li>
  <li class="layer" data-depth="0.80">
    <img src="images/four.png" height="100" width="100" alt="Image"
  </li>
</ul><!-- scripts -->
@import "compass";
@import "compass/reset";

scene{
width: 95%;
 margin: 20px auto 0;
 min-height: 775px;
 background: url(../images/bg.jpg) 0 0 no-repeat;
 img{
 display: inline-block;
 width: 100px;
 height: 100px;
 @include border-radius(50%);
 }
 img[src="images/one.png"]{
 margin: 200px 0 0 200px;
 }
 img[src="images/two.png"]{
 margin: 200px 0 0 1000px;
 }
 img[src="images/three.png"]{
 margin: 500px 0 0 700px;
 }
 img[src="images/four.png"]{
 margin: 600px 0 0 300px;
 }
}

Полный исходный код примера можно посмотреть на GitHub - Parallax.js


С недавних пор (чуть больше двух недель) я стал счастливым обладателем Mac OS X. Если быть точнее - это iMac (21.5-inch, Mid 2014).

Неделю чувствовал себя не своей “тарелке” под ним, еще неделю привыкал. Потом все уже пошло по накатанной - система хороша, ничего не скажешь. Для работы - лучше не придумаешь.

Но речь в этой статье не о прелестях Mac OS X - их и без меня (с моими скромными талантами) превознесли до небес. Тема этой небольшой статьи - маленькое приложение Spectacle. Эта небольшая программка призвана улучшить-ускорить-облегчить работу в оконной среде Mac, служа в качестве менеджера этих самых окон.

Другими словами - Spectacle - это оконный менеджер для Mac OS X. Это приложение является не единственным в своем роде. Существуют еще программы - платная (и самая известная) - Divvy, также платная (стоит целых 2$) - BetterSnapTool и бесплатная - BetterTouchTool. Однако, Spectacle (в отличие от Divvy, которая стоит $13.99) - бесплатен.

Проживает программка по адресу - Spectacle. Домашняя страничка приложения очень проста - также, как и само приложение. Кстати, там же можно полюбоваться демо - что умеет делать данная программа.

Установка Spectacle

Установка программы Spectacle под Mac OS X стандартная. Скачиваем с официального сайта архив приложения, распаковываем его и перетаскиваем программку в папку “Applications”.

Настройки Spectacle

При запуске программы Spectacle она появиться в области индикаторов строки меню в виде значка:

Значок Spectacle

При щелчке мыши на нем откроется длинный список загадочных клавиатурных сокращений. Эти сокращения можно редактировать, если открыть окно настроек программы:

Настройки Spectacle

Там же расположен checkbox - “Launch Spectacle at login” - думаю, все понятно и в переводе не нуждается.

Управление окнами с помощью Spectacle

Чтобы разобраться, что это за клавиатурные сокращения, достаточно пять минут поиграться с ними и все станет понятно. Выберем любое приложение (в моем случае это будет окно Terminal) в качестве подопытного кролика и будем нажимать hotkeys.

Следующие hotkeys заставят окно терминала занимать ровно половину экрана монитора, смещаясь при этом в нужную сторону:

  • занять левую половину окна — ⌥⌘←
  • занять правую половину окна — ⌥⌘→
  • занять верхнюю половину окна — ⌥⌘↑
  • занять нижнюю половину окна — ⌥⌘↓

Нижеследующие hotkeys заставят окно терминала “побегать” по углам экрана монитора. То есть, поместиться в нужный угол экрана, при этом размер окна останется без изменения:

  • сместиться в левый верхний угол — ⌃⌘←
  • сместиться в правый верхний угол — ⌃⌘→
  • сместится в нижний левый угол — ⌃⇧⌘←
  • сместиться в нижний правый угол — ⌃⇧⌘→

Еще пара полезных команд для управления окном:

  • окно программы по центру экрана - ⌥⌘C
  • окно во всю ширину экрана - ⌥⌘F

Программа Spectacle умеет перемещать окно приложения таким образом, чтобы оно занимало ровно треть площади экрана монитора. Сочетание - ⌃⌥→ заставит окно перемещаться сперва вертикально, а потом горизонтально по экрану, при этом занимая треть площади. Сочетание - ⌃⌥← заставит окно двигаться в обратном порядке. Попробуйте у себя - интересный эффект получается.

Изменение размера окна приложения достигается с помощью двух сочетаний клавиш:

  • увеличение размера окна - ⌃⌥⇧→
  • уменьшение размера окна - ⌃⌥⇧←

Перемещение окна между виртуальными дисплеями:

  • переместить окно на следующий дисплей - ⌃⌥⌘→
  • переместить окно на предыдущий дисплей - ⌃⌥⌘←

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

Если нужно сбросить настройки для окна проложения, то для этого существует комбинация - ⌥⌘Z. Вернуть обратно настройки для окна приложения - ⌥⇧⌘Z.

Заключение о Spectacle

Программа Spectacle мне понравилась однозначно. Первый фактор - она бесплатна. Второй - она (можно сказать) незаменима для удобной настройки workflow.

Первое упоминание об этой программе я увидел у Sorax. До этого пытался “подружиться” с Divvy, которую рекомендовали ребята из Loftblog. Однако, как-то не получилось у меня с ней работать.

А вот Spectacle понравилась с первого взгляда. Как мне кажется, из программа разряда “must have”.


Рассмотрим вопрос автоматизации действий в программе Photoshop.

Тема статьи перекликается с предыдущей статей “Macros в Sublime Text 3”, посвященной макросам в Sublime Text.

В Adobe Photoshop также имеется инструмент для записи макросов, только называется он по другому - Actions (Операции). Но от смены названия суть не меняется.

С помощью Actions (Операции) в Photoshop можно записать последовательность действий, а потом запускать их на выполнение каждый раз, когда это понадобиться.

Для чего нужны Actions (Операции) верстальщику? Не поверите, но это очень удобная вешь, которая значительно ускоряет работу в Photoshop. В частности, можно ускорить нарезку изображений из psd-макета.

Буквально за месяц до этого я приобрел лицензию на плагин PNG Hat для автоматизации вырезания картинок:

Плагин PNG Hat в Photoshop

Так вот - я просто на тот момент не знал о существовании макросов в Photoshop! Actions - это намного круче, чем PNG Hat.

Но меньше слов - больше дела. Приступим к изучению Actions (Операции) в Photoshop на простом примере. Создадим макрос для вырезания и экспорта картинок из psd-макета.

Actions - где они живут

Все

1
actions
в Photoshop “проживают”” по одному адресу - в меню “Окно” - “Операции” (если Photoshop русскоязычный). Или же быстрее и проще - через сочетание клавиш Alt+F9. Как и все другие инструменты в этой программе,
1
actions
имеют свою собственную панель:

Палитра Actions в Photoshop

По умолчанию, в Photoshop уже есть готовые операции

1
actions
, расположенные в папке “Операции по умолчанию”: “Виньетка”, “Рамка - 50 пикс.”, “Деревянная рамка - 50 пикс.” и так далее.

Actions в Photoshop не могут жить вне набора операций (правильно такой набор называется “Set”). На скриншоте как раз показаны два таких набора (“Set”) - один от Photoshop, второй - мой собственный.

Внизу палитры расположены шесть кнопок управления

1
actions
. Перечислю их по порядку, слева направо:

  • остановка записи
    1
    
    action
  • запуск записи
    1
    
    action
  • воспроизведение записанного
    1
    
    action
  • создание нового набора
    1
    
    actions
  • создание нового
    1
    
    action

Создаем новую операцию action

В палитре “Операции” кликаем на кнопке “Создать новый набор”. В диалоговом окне вводим название нового набора - “Export-Images-to-Web”, затем сохраняем его.

Созданный набор операций (“Set”) готов, но он пока пустой, в нем нет ни одной операции (

1
action
):

Новый Set для Actions

В самом левом столбце палитры можно напротив каждого Set’а ставить или убирать галочки, тем самым включая или отлючая данный набор операций (

1
actions
).

Треугольнички напротив названия Set’а разворачивают или сворачивают данный набор операций (

1
actions
). Каждый набор операций (“Set”) может содержать неограниченное число операций (
1
actions
).

Предварительно откроем в Photoshop любой psd-макет, из которого можно экспортировать изображения для будущего HTML-шаблона. В палитре “Слои” заранее выделим слой с изображением, которое будем экспортировать (отключим все эффекты данного слоя, если они есть):

Слой с изображением для экспорта

И нажмем кнопку “Создать новую операцию” в палитре “Операции”. Откроется диалоговое окна настройки будущей операции (

1
action
):

Настройка будущего action

В этом окне указываем имя для будущей операции (

1
action
); в какой набор операций (“Set”) она будет входить; назначить “горячие” клавиши для данной операции.

Кнопка “Записать” запускает процесс записи макроса. Внизу панели “Операции” кнопочка “Запись операции” станет красной, что напоминает о том, что запись пошла! С этого момента все мои действия будут запоминаться программой Photoshop, поэтому буду внимательным.

Вырезание картинки из выбранного слоя я буду делать пошагово, в следующем порядке:

  • дублирование активного слоя
  • отрезка прозрачных пикселов (
    1
    
    trimming
    )
  • сохранение полученной картинки для Web
  • закрытие нового документа без его сохранения

Не забываем нажать кнопочку “Остановить запись”. В принципе, все мои действия очень легко прочитать внутри самой операции (

1
action
):

Созданная операция (action)

Настройка операции (action)

По большому счету, созданная мною операция полностью готова к работе. Можно ради любопытства выбрать любой другой слой с изображением и нажать клавишу F3. Произойдет практически мгновенное экспортирование изображения в этом слоя для Web.

Но что может не устраивать нас в этой операции? Все, кроме одного - возможность самому выбирать, куда Photoshop должен сохранять экспортируемое изображение.

Для этой цели существует колоночка с пустыми квадратиками напротив каждого действия в записанной мною операции (

1
action
).

Если навести курсор мыши на любой из них, то всплывающий tooltip подскажет, что это - “Возможность установки или отмены установки диалогового окна”.

К слову сказать, все операции (

1
actions
) в Photoshop делятся на два вида:

  • автоматические (без вмешательства пользователя)
  • полуавтоматические (с частичным вмешательством пользователя)

Нам как раз нужно из автоматической операции (

1
action
) сделать ее полуавтоматической. На этапе “Экспортировать” нужно сделать так, чтобы Photoshop спрашивал нас, куда нужно сохранять изображение.

Делается это очень просто - достаточно кликнуть мышью в нужном окошке:

Диалоговое окно экспорта изображения

Попробуем снова экспортировать изображение по нажатию клавиши F3. Вуаля - видим, что открылось окно Photoshop, в котором можем задать параметры для экспорта изображения. И в том числе - куда необходимо сохранять изображение:

Экспорт изображения для Web

Заключение

На этом можно закончить тему создания операций (actions) в Photoshop. На самом деле эта тема большая и достаточно сложная. Я видел даже специальный курс для дизайнеров по написанию actions под Photoshop.

Но для верстальщика нет необходимости создавать большие и сложные операции. Поэтому этого уже достаточно для ускорения и облегчения своей работы. Попробуйте - оно того стоит!

На этом все.


Недавно познакомился с тремя способами вырезания фонового изображения на макете. До недавнего времени знал о существовании только одного способа, с которым познакомился еще на сайте htmlbook.ru.

Чтобы было яснее, рассмотрим пример psd-макета страницы:

Страница с фоновым изображением

Видим, что на странице имеются множественные фоновые изображения. И как вы думаете, каким образом нужно вырезать такое изображение? Чтоб потом замостить им фон страницы или фон блока-контейнера?

До недавнего времени я бы сделал так. Попытался визуально отыскать повторяющиеся фрагменты в фоне, одном и втором.

Если бы удалось обнаружить таковой фрагмент, то вырезал бы его с помощью инструмента “Crop”. Если бы фрагмент не обнаружил, то просто бы вырезал кусок фона размером побольше (что называется “на глазок”), опять-таки, с помощью инструмента “Crop”.

Немного позже я узнал, что существует три подхода к вырезанию фоновой картинки для будущего HTML-шаблона. Первые два способа простые и неточные. Третий способ - более медленный, но точный.

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

Описание выполняемых действий приведено в локализованной версии Photoshop.

Простое вырезание фона

Фон страницы на psd-макете представляет из себя растровое изображение, у которого имеется всего один слой. И при этом визуально не получается выделить повторяющиеся фрагменты в этом фоне.

В этом случае нужно поступить только одним способом.

Свести воедино все видимые слои с помощью сочетания клавиш Shift+Ctrl+E.

Инструментом “Crop” с зажатой клавишей Shift (чтобы получился квадрат) выделяем на фоне psd-макета квадрат побольше, размера

1
50x50px
или
1
100x100px
. Размер должен быть побольше именно для того, чтобы гарантировать бесшовность такого рисунка в фоне.

Затем экспортируем его в Web и используем в CSS для установки в качестве фонового изображения.

Вырезание фрагмента фона

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

Инструментом “Crop” вырезаем из фона обнаруженный фрагмент, сохраняем его для Web и используем по назначению в CSS.

Pattern в Photoshop

Третий способ основан на понятии

1
pattern
в Photoshop. Этот способ самый точный и надежный. В нем мы как-бы “опираемся” на силы самого Photoshop, который должен “помочь” нам обнаружить
1
pattern
в нарисованном дизайнером psd-макете.

Я не дизайнер (и никогда им не буду), поэтому могу сказать по поводу того, что такое

1
pattern
в двух словах.

Это образец узора какого-то определенного размера (который может быть любым) -

1
102x102px
,
1
20x20px
или же
1
5x5px
. Этот образец узора может быть любого рисунка (завитушки, полосочки, цветочки и т. д.).

Вся задача pattern’а - служить образчиком, которым дизайнер выполняет заливку слоя. То есть, ситуация получается в точности такая, как у верстальщика. Имеется маленький кусочек рисунка, которым дизайнер “мостит” весь слой.

Задача верстальщика при нарезке psd-макета - выделить этот

1
pattern
из psd-макета в отдельное изображение. Чтобы увидеть, что в данном слое используется
1
pattern
, достаточно открыть палитру “Слои” и активировать нужный слой. В качестве примененных к слою эффектов должно стоять “Наложение узора”:

Фоновый слой с pattern

Все! Наша задача наполовину выполнена - мы знаем, что для этого слоя дизайнер применил

1
pattern
в качестве заливки каким-то там рисунком.

Осталось только найти этот

1
pattern
, что является задачей чисто технической. И нам в этом поможет сам Photoshop.

Дважды кликаем мышкой по выбранному слою с фоновым рисунком. Откроется окно “Стиль слоя”, в котором активируем пункт - “Наложение узора”. В правой части окна будет показан конкретный

1
pattern
, с помощью которого дизайнер выполнял заливку данного слоя.

То есть, Photoshop показал, какой

1
pattern
использовал дизайнер в анализируемом нами слое. Нам осталось “вычленить” этот
1
pattern
и в этом нам снова поможет Photoshop:

Pattern для выбранного слоя

В этом же окне нужно навести курсор мыши на окошко с

1
pattern
‘ом (окно “Узор”) и немного подождать, пока рядом с курсором мыши не появиться всплывающий tooltip, в котором будут показаны размеры данного
1
pattern
‘а.

Запоминаем (или записываем на листике бумаги) эти размеры - они нам понадобятся в дальнейшем.

Щелчком мыши на маленькой стрелочке справа от окна с образцом

1
pattern
‘а открываем палитру паттернов (
1
patterns
):

Палитра паттернов (patterns)

В этой палитре нам необходимо добавить выбранный нами

1
pattern
в свою коллекцию паттернов. Это нужно для того, чтобы потом использовать этот
1
pattern
в своих “коварных” целях. Для этой цели кликаем на круглой кнопочке со стрелкой - далее можно разобраться, что и как добавлять.

Закрываем окно “Стиль слоя” и создаем новый документ Ctrl+N с размерами, как у нашего

1
pattern
‘а:

Новое изображение с размерами pattern'а

Здесь самое главное - правильно указать размеры будущего документа (как правило, все

1
pattern
‘ы имеют форму квадрата), все остальное для нас неважно.

Создаем новый документ. Затем в меню Photoshop переходим по пути “Слои” - “Новый слой-заливка” - “Узор”. И в открывшемся окошке “Новый слой” просто кликаем по кнопке ОК, все остальное для нас опять неважно:

Заливка нового слоя с помощью pattern'а

Откроется еще одно окошко, в котором выбираем нужный нам

1
pattern
:

Выбор pattern'а для заливки слоя

Как результат получаем новый документ с заливкой слоя выбранным нами

1
pattern
‘ом. Это хорошо заметно чисто визуально, в основном окне. В палитре “Слои” также видно, что к слою была применена заливка узором:

Готовое изображение для фоновой заливки

Картинка для фоновой заливки готова! Осталось только экспортировать ее для Web и применить на странице силами CSS.

Например, таким образом:

background-position: 0 0;
background-repeat: repeat;
background-image: url(../images/bg_body.png);

Все - задача выполнена!

Заключение

Вот мы и познакомились с тремя способами вырезания фонового изображения из psd-макета.