Спрайти

Створення спрайтів

Спрайти - це об’єднання елементів дизайну, іконок в один файл.

Це робиться для того, щоб оптимізувати швидкість завантаження веб-сторінки і економії ресурсів сервера: один файл завантажиться значно швидше, ніж десяток-два маленьких файлів, запит до сервера буде лише один замість декількох десятків.

Приклади спрайтів:

Sprite
Набір іконок
Sprites of google
Спрайти гугла
Very big sprite
Бувають спрайти, що містять дуже багато елементів
Sprite socicons
Іконки соціальних мереж, зібрані у спрайт

Практичне завдання

Можете використати іконки з макету Iskander або взяти будь-які свої.

Один з варіантів створення спрайту:

1. Визначаємо які елементи будуть міститися у нас на спрайті і визначаємо розмір спрайта. Якщо в майбутньому у спрайт потрібно буде добавити елементи - збільшення розміру зображення не стане проблемою.

Change size
Змінення розміру спрайта: Image > Canvas size

2. В фотошопі створюємо нове зображення потрібного розміру.

Увага! Між елементами спрайту залишайте по 2 вільних пікселя. Закладіть ці відступи у розрахунок розміру зображення.

Наприклад, нам потрібно створити спрайт з 8 соціальних іконок, ми вирішили, що розмістимо їх по 4 у два ряда. Розмір кожної іконки - 32х32 пікселя. Отже, 32 * 4 = 128 пікселів в ширину, 64 пікселя в висоту. В рядах між іконками буде три відступи по 2 пікселя, отже, 128 + 6 = 134 пікселя. Між двома рядами всього один відступ, 64 + 2 = 66 пікселів. Створюємо зображення 134х66 пікселів.

3. На цьому порожньому зображенні лезом розмічаємо місця для наших майбутніх іконок:

Empty sprite
Заготовка

4. Копіюємо елементи з різних файлів і вставляємо на наш спрайт, вирівнюючи відповідно до сітки.

5. Вимикаємо білий фон і зберігаємо спрайт у формат PNG.

Спрайт в форматі PSD теж бажано собі зберегти в папку з макетами - велика вірогідність, що вам доведеться щось добавляти, міняти.

Sprite
Елементи спрайта на прозорому фоні

Не варто всі елементи зі всього сайту, з різних сторінок запихати в один великий спрайт. Краще намагатися розподілити елементи по декільком спрайтам, які будуть завантажуватися за потреби, а не завжди, на кожній сторінці.

Використання спрайтів

Для використання спрайтів в стилях нам потрібен блок фіксованого розміру, що відповідає розміру елемента на спрайті. В прикладі вище іконки мають розмір 32х32 пікселя, отже, нам потрібно створити блоки такого ж розміру: <ul class="social">
  <li><a href="#" class="tw">Twitter</a></li>
  <li><a href="#" class="fb">Facebook</a></li>
  <li><a href="#" class="gp">Google Plus</a></li>
</ul>

.social li {
display: inline-block;
}
.social a {
  display: block;
  width: 32px;
  height: 32px;
  text-indent: -9000px;
  overflow: hidden;
  background: url(../images/sprite_social_icons.png) no-repeat left top;
}
.social a.fb { background-position: -34px 0;}
.social a.gp { background-position: -68px 0;}

/* .social a.tw не задаємо, у нього іконка і так на своєму місті */

Координати задаються від’ємні:

Coordinates
Визначення координат елемента спрайта

Ці координати ви можете підглядати в фотошопі у властивостях вирізаного прямокутничка (слайса).

Домашнє завдання

  1. Застосуйте спрайти у проекті Minecraft, об'єднайте соціконки, прапорець і значок скайпа в спрайт.
  2. Застосуйте спрайти у проекті Iskander. Якщо ще не почали працювати над цим проектом - в першу чергу виріжте всі іконки і об'єднайте у спрайт.
  3. Виріжте зі всіх PSD проекту "Житловий масив Сонячний" декоративні елементи та об'єднайте їх у спрайт.
  4. У проекті Таблиці (jpg) зверстайте першу секцію Navigation. Зверніть увагу на приховані шари.

Відеоурок по спрайтам.