Мой Справочник | WEB-DESIGN | Изображения
Рекомендации:
- НУЖНО СЛЕДИТЬ ЗА АВТОРСКИМИ ПРАВАМИ ФОТОГРАФИЙ
- Старайтесь выбирать фотографии хорошего качества (если фото будет пикселизированным, то это испортит общее впечатление и
покажет ваш профессионализм).
- Выбирайте однозначные по смыслу, но притертые пользователям фотографии (например, если вы создаете сайт для
авиакомпании, то не ищите первым делом фотографию самолета - это банально, попробуйте подобрать для поиска другие
ассоциации).
- Фотография должна быть не просто красивой, она должна нести определенный смысл, который будет подкреплен текстовым
блоком
Изображение должно правильно передавать ЭМОЦИИ в соответствии с тематикой сайта
Где искать изображения (ФОТО-стоки):
Бесплатные:
- unsplash.com
- pixabay.com
- freepik.com - SVG
- pexels.com
- freeimages.com
- splitshire.com
- flickr.com
- gratisography.com
- lifeofpix.com
- thestocks.im
- designspiration.net
- Google - Картинки
- Яндекс - Картинки
Платные:
- shutterstock.com
- depositphotos.com
- photodune.net
- ru.fotolia.com
- ru.123rf.com
- storyblocks.com
Вес картинок
Новые форматы, можно уже использовать
Хороший тон: если картинка достаточно большая или во всю ширину блока, то всё текстовое опсинание должно распологаться ПОД НЕЙ, а не над ней!
Обтравка изображений
- Инстремент Перо (P)
- Выделяем контур до замыкания (можно изгибать линии с помощью клавиши Ctrl, Alt)
- Окно -> Контуры -> Круглый пунктирный значок
- Проще ПКМ -> Выделить область -> Поставить радиус размытия 4-5px
- Копируем в новый слой Ctrl + J
- Обработать края ластиком по необходимости
- Исходный слой можно удалить
- Можно также использовать Ластик (Е) или Лассо (L) вместо пера
Обтравка волос (с обтравкой пером)
- Выделяем пером контур фигуры -> Выделение -> Выделение и маска (ручная настройка)
Обтравка волос (автомат. режим)
- W -> Выделить пердмет -> Alt + Выделение и маска
- Белый фон, 100% -> Уточнить края (R), +, 60 -> Обработать волосы
- Настройки экспорта -> Новый слой -> OK
Коллажирование изображений
Приём, при котором собирается одно изображение из нескольких.
- Изображения должны быть хорошо вырезаны
- Должны быть едиными по стилю
- Соблюдение размеров и пропорций
- Сохранение объёма (тени и блики). Соблюдено падение света.
- Должно быть реалистично для восприятия
Правильное расположение изображений
Фоны
Для фона лучше всего использовать светлый цвет (белый, светло-серый и светло-бежевый), это не позволит глазам
пользователя быстро устать.
Форматы изображений
Формат |
Описания |
Достоинства |
Недостатки |
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 цветов
- При прозрачности требует обводки
- Не поддерживает полупрозрачность
|
-
GIF-анимация (6,5 MB)
-
GIF (51 KB)
-
JPEG (68 KB)
-
PNG (207 KB)
-
WEBP (89 KB)
-
SVG (96 KB)