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

Question

[Viktor S]

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



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

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

Пример "кривых" исходников.


Пример файла отображающегося корректно

Comments

[Froggyweb]

по вертикали можно выровнять, визуально чтобы смотрелись одинаково - либо только руками, либо (если нет белых полей с помощью формулы) и то вряд ли получится при одинаковом масштабе ауди и foed не будут равнозначны

Answer 1

[Орхан Гасанлы]

Здравствуйте!
1) обработайте ваши иконки в фотошоп и приведите к одинаковому размеру. Например, создайте холст размером 50х50 пикс. Затем помещайте каждую иконку в центр.
2) добавьте изображения в html + стилизуйте их при помощи CSS. Например, используя флексбокс или еще что.

Comments

[Viktor S]

Когда в текстовом блоке WP их вставляешь как медиафайлы в ряд по сути и получается Flexbox? Они прекрасно адаптируются под мобильный вид, сжимаются, расжимаются, переносятся на другую строку, или это не то и в чем будет плюс флекса?)

[Орхан Гасанлы]

Когда в текстовом блоке WP их вставляешь как медиафайлы в ряд по сути и получается Flexbox?

Во-первых, вы не сказали о каком текстовом редакторе идет речь. Gutenberg, Classic text editor, TinyMCE Advanced и др.

Когда в текстовом блоке WP их вставляешь как медиафайлы в ряд по сути и получается Flexbox?

Во-вторых, если вы хотите сделать это из админки, не влезая в код, то вставляйте изображения одинаковых размеров и нет, это не флексбокс.

Прочитайте про флексбокс - flexbox Я точно не помню, что там прописано, скорее всего картинки просто вставляются в ряд.

или это не то и в чем будет плюс флекса?)

У флекса много плюсов. Однако, достичь адаптивности можно и другими способами без флекса

Answer 2

[Арсений Матыцин]

Дополню ответ azerphoenix.

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

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

Comments

[Viktor S]

Когда в текстовом блоке WP их вставляешь как медиафайлы в ряд по сути и получается Flexbox? Они прекрасно адаптируются под мобильный вид, сжимаются, расжимаются, переносятся на другую строку, или это не то и в чем будет плюс флекса?)