Руководства

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

Изображения HTML и дизайн WordPress Баннеры и движение

Название, задача или инструмент

Найдено: 23

Поиск работает локально по названиям и описаниям. Без JavaScript доступен полный список ниже.

Как уменьшить фото и сохранить детали

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

Прозрачный фон без белой каймы

Прозрачность — это данные альфа-канала. Шахматная подложка в редакторе помогает её увидеть, но не должна становиться частью экспортированного изображения.

Растр или вектор: выбираем по задаче

Фотография состоит из пикселей; векторный рисунок описывает формы. Формат нужно выбирать по содержимому, а не по правилу «вектор всегда лучше».

Скриншот, который помогает решить проблему

Хороший снимок экрана показывает ошибку и её контекст, но не раскрывает пароли, переписку и платёжные данные. Выберите область, а затем проверьте файл перед отправкой.

Вырезать фрагмент фото без потери исходника

Обрезка меняет границы кадра. Уменьшение меняет количество пикселей. Если смешать эти операции, лицо или предмет могут неожиданно растянуться.

Сделать фото чётче без ореолов

Повышение резкости усиливает локальные контрасты. Оно не восстанавливает достоверные детали, которых нет в исходном снимке, и не заменяет правильную фокусировку.

Чёрно-белое фото: управляем светом, а не убираем цвет

Обесцвечивание и осмысленная чёрно-белая обработка дают разные результаты. Важны различия светлоты между объектом и фоном, а не только отсутствие насыщенности.

Повернуть изображение, слой или горизонт

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

Зеркальное отражение: весь кадр или один объект

Отражение меняет левую и правую стороны, но не является поворотом. Оно удобно для композиции, однако может исказить смысл снимка с текстом или узнаваемым местом.

Закруглённые углы без лишнего файла

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

Рамка вокруг изображения: где она должна жить

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

Favicon: маленький знак, который остаётся читаемым

Иконка вкладки должна узнаваться в размере 16–32 пикселя. Уменьшенная копия длинного логотипа обычно превращается в пятно.

GIF-баннер: понятный сюжет вместо мигания

Анимация должна помогать прочитать сообщение. Один тезис, один переход и спокойный финальный кадр полезнее бесконечной смены мелких надписей.

CSS-анимация, которую можно отключить

Движение может объяснять изменение состояния: загрузку, раскрытие или смену шага. Не анимируйте всё только ради заметности.

Вместо Flash: ссылка, анимация и обычный HTML

Adobe прекратила поддержку Flash Player 31 декабря 2020 года. Инструкции по установке старого плагина не подходят для запуска современного сайта.

Обтекание картинки текстом без поломанной страницы

Float подходит, когда строки действительно должны обходить рисунок. Для двух независимых колонок используйте Grid или Flexbox.

Защита WordPress: сначала восстановление, потом плагины

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

Закрепить запись в WordPress и проверить результат

Закреплённая запись может оставаться сверху ленты, но результат зависит от темы и запроса, который выводит записи. Это не то же самое, что CSS position: sticky.

Установить плагин WordPress и не потерять сайт

Репозиторий GitHub подтверждает наличие кода, но не его безопасность и не готовность ZIP к установке. Сначала проверьте автора и назначение пакета.

Язык WordPress: сайт, профиль и переводы темы

Язык посетительских страниц, язык панели пользователя и переводы темы могут настраиваться отдельно. Изменение одной опции не переводит автоматически весь сайт.

Шорткоды WordPress: найти источник и убрать зависимость

Шорткод — текстовая команда, которую обрабатывает ядро, тема или плагин. После отключения обработчика на странице может остаться строка в квадратных скобках.

Читаемая статья: длина строки, ритм и контраст

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

ТЗ на баннер: бриф, который можно проверить

В исходном документе Web Article были цель, размеры, стиль, сценарий, языки и адрес перехода. Эта структура полезна и сейчас; Flash и список площадок из документа не являются современными требованиями.