Мой Справочник | WEB-DESIGN | Изображения

Рекомендации:

• НУЖНО СЛЕДИТЬ ЗА АВТОРСКИМИ ПРАВАМИ ФОТОГРАФИЙ
• Старайтесь выбирать фотографии хорошего качества (если фото будет пикселизированным, то это испортит общее впечатление и покажет ваш профессионализм).
• Выбирайте однозначные по смыслу, но притертые пользователям фотографии (например, если вы создаете сайт для авиакомпании, то не ищите первым делом фотографию самолета - это банально, попробуйте подобрать для поиска другие ассоциации).
• Фотография должна быть не просто красивой, она должна нести определенный смысл, который будет подкреплен текстовым блоком

Изображение должно правильно передавать ЭМОЦИИ в соответствии с тематикой сайта

Где искать изображения (ФОТО-стоки):

Бесплатные:

1. unsplash.com
2. pixabay.com
3. freepik.com - SVG

   ---

4. pexels.com
5. freeimages.com
6. splitshire.com
7. flickr.com
8. gratisography.com
9. lifeofpix.com
10. thestocks.im
11. designspiration.net
12. Google - Картинки
13. Яндекс - Картинки

Платные:

1. shutterstock.com
2. depositphotos.com

   ---

3. photodune.net
4. ru.fotolia.com
5. ru.123rf.com
6. storyblocks.com

Вес картинок

• base64 - Конвертёр
• tinypng.com - Уменьшить вес картинок
• Логотипы: 0-20 KB;
• Фотографии: 70-300 KB;
• Используйте подходящий графический формат. Для больших фотографий — это JPEG
• PNG - если нужна прозрачность
• Не растрировать шрифты и png(должно быть в смарт-объекте)

Новые форматы, можно уже использовать

• Jpeg 2000
• Jpeg XR
• Web P

Хороший тон: если картинка достаточно большая или во всю ширину блока, то всё текстовое опсинание должно распологаться ПОД НЕЙ, а не над ней!

---

Обтравка изображений

• Инстремент Перо (P)
• Выделяем контур до замыкания (можно изгибать линии с помощью клавиши Ctrl, Alt)
• Окно -> Контуры -> Круглый пунктирный значок
• Проще ПКМ -> Выделить область -> Поставить радиус размытия 4-5px
• Копируем в новый слой Ctrl + J
• Обработать края ластиком по необходимости
• Исходный слой можно удалить
• Можно также использовать Ластик (Е) или Лассо (L) вместо пера

• Обтравка волос (с обтравкой пером)

• Выделяем пером контур фигуры -> Выделение -> Выделение и маска (ручная настройка)

• Обтравка волос (автомат. режим)

• W -> Выделить пердмет -> Alt + Выделение и маска
• Белый фон, 100% -> Уточнить края (R), +, 60 -> Обработать волосы
• Настройки экспорта -> Новый слой -> OK

---

Коллажирование изображений

Приём, при котором собирается одно изображение из нескольких.

• Изображения должны быть хорошо вырезаны
• Должны быть едиными по стилю
• Соблюдение размеров и пропорций
• Сохранение объёма (тени и блики). Соблюдено падение света.
• Должно быть реалистично для восприятия

---

Правильное расположение изображений

• Картинка сверху, описание под ней

  

• Взгляд должен быть на текст

  

• "Правая подмышка" - хорошо

  

• "Левая подмышка" - плохо (взляд прыгает)

  

• Правильный порядок

  

• Плитка (так можно)

  В таком случае текст не должен уходить сильно вниз, должен ограничиваться картинкой (нужно ограничивать вывод текста, если он длинный)

  

• ---

  Не должно быть строгой сетки для изображений - должны быть АКЦЕНТЫ (как вариант изображение товара, который чаще покупают, должно быть больше)

---

Фоны

Для фона лучше всего использовать светлый цвет (белый, светло-серый и светло-бежевый), это не позволит глазам пользователя быстро устать.

• Фоны, текстуры
• Фоны, текстуры 2
• Градиентные фоны
• Градиенты - Ultimate CSS Gradient Generator
• UI Gradients

---

Форматы изображений

Формат	Описания	Достоинства	Недостатки
JPEG	Фотографии 1991 г. Самый распространнённый формат, подходящий для ФОТОГРАФИЙ, различных изображений, которым нужна полноцветность, но не нужна прозрачность.	Небольшой вес Гибкость в настройке качества (обычно 60-90%) Огромное кол-во цветов (16 млн.)	Не поддерживает прозрачность Сжатие с потерями (появляются артефакты) Не подходит для чертежей и схем, где нужна чёткость при маштабировании Всегда прямоугольник
Можно иммитировать прозрачность делая цвет фона у JPEG такой же как в контейнере
PNG	Поддерживает прозрачность PNG-24 (или просто PNG). Самый лучший и современный формат изображений. Используется для всех полноцветных изображений, которым нужна прозрачность или полупрозрачность, отсутствие изображений, для спрайтов	Универсальный формат и для изображений, и для схем Сжатие без потерь (отсутствуют артефакты) Поддерживает прозрачность и полупрозрачность (255 градаций полу- прозрачности) Огромное кол-во цветов (16 млн.) Современный формат	Большой вес на хорошем качестве
SVG	Векторное изображение (Рисунки создаются математическими уравнениями, а не точками как в растровой графике)	Маштабируемость без потери качества Поддерживает прозрачность и полупрозрачность Огромное кол-во цветов Может быть анимированным Текст в SVG воспринимается как текст	Большой вес при большом содержании Сложность разработки и редактирования
WEBP	Самый современный формат, небольшой вес 2010 год	Разработан Google в 2010 В среднем вес картинок сокращается на 25–35%	Поддержка уже хорошая, но слабое распространение Непопулярность Слабая поддержка программами для работы с графикой
GIF	Анимации 1986 г. Формат для анимаций и мелкой графики, не требующих высокого качества	Небольшой вес Сжатие без потерь (без артефактов) Поддерживает прозрачность Поддерживает анимации	256 цветов Плохое качество изображений Не поддерживает полупрозрачность (прозрачность бинарная: пиксель либо прозрачный, либо нет) Сейчас в основном только для анимаций, просто для изображений уже никто не использует
PNG-8	Устарел1996 г. Напоминает GIF. Используется для мелкой неполноцветной графики как альтернатива GIF	Сжатие лучше, чем у GIF Подходит для схем, чертежей и текста Поддерживает прозрачность	256 цветов При прозрачности требует обводки Не поддерживает полупрозрачность