vitek112
@vitek112

Как выровнять масштаб и положение картинок в блоках для сайта в Photoshop?

На сайте WP имеется блок, в который вставлен текстовый блок, в него вставлены около 30 маленьких картинок PNG, JPG (марки авто). Исходники картинок естественно есть.
При вставке их на сайт и группировке их в линию - все они расположены криво по вертикали, какие то слишком увеличины относительно других.

5ebadaf74852b169621676.png

Как понимаю проблема в самих файлах картинок, а не в CSS ?
Тоесть надо перед заливкой их выровнять?
Сначала привести к одному разрешению а потом уже масштабировать содержимое?

Вопрос: Как быстрее и правильно привести их все к одному масштабу и расположению по горизонту?
Владею Фотошоп на среднем уровне, могу это сделать сам костылями, но хочется узнать как это делают специалисты правильно?

Пример "кривых" исходников.
5ebad9d8cbb2e031060591.jpeg
5ebad9e0c897b165013022.png
Пример файла отображающегося корректно
5ebada0411ebe760869743.png
  • Вопрос задан
  • 53 просмотра
Решения вопроса 2
@azerphoenix
Здравствуйте!
1) обработайте ваши иконки в фотошоп и приведите к одинаковому размеру. Например, создайте холст размером 50х50 пикс. Затем помещайте каждую иконку в центр.
2) добавьте изображения в html + стилизуйте их при помощи CSS. Например, используя флексбокс или еще что.
Ответ написан
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
Дополню ответ azerphoenix.

Все иконки стоит обрабатывать вручную, так как:
1. В верстке они регулируются только по ширине. Да, можно задать условия выравнивания относительно друг-друга или захардкодить размеры, но чем дальше, тем сильнее сердце сжимает от костыльности решений. Базово это ширина. Следовательно, чтобы все они были +- на одной горизонтальной оси — их надо сделать одинаковой высоты и выровнять прямо в ФШ. Верстальщик, если это не ты, спасибо скажет.
2. Все иконки имеют разный визуальный вес и за счет масштабирования ты, как дизайнер, можешь привести их к единому знаменателю, опять же, вручную.

3. Их всех стоит загнать в сетку, к примеру на flex-ах, вместо того, чтобы прямо картинки в ряд выстраивать.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы