Перейти к основному содержимому

Изображения

Бесплатные фотостоки (нужен VPN)​

Платные​

Фоны, паттерны, градиенты​

Оптимизация изображений​

  • tinypng.com - Уменьшить вес картинок
  • iloveimg.com - Уменьшить вес картинок 2 base64 -->

Гифки​

giphy.com - Бесплатный хостинг гифок

Скачать гифку: кликнуть на гифку --> Share -> Copy Gif Link -> Открыть ссылку в браузере --> ПКМ --> Сохранить изображение как

Если скачались файлы с разширением .gif, то их можно сразу загружать в соц. сети, если скачались файлы с расширением .webp, то нужно их конвертировать в .gif, например через сервис webp-to-gif.

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

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

img1.jpg

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

img2.jpg

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

img3.jpg

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

img4.jpg

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

img5.jpg

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

img6.jpg

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

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

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

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

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

Вес картинок​

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

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

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

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

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

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

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

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

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

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