Пользуйтесь стрелками

Пользуйтесь стрелками!
Это удобно

Хотел было написать, что сломал голову на тему, того как можно было сделать 3 идентичных элемента так криво:

Но ответ же очевиден. Поэтому ничего ломать не пришлось — выровнено на глаз. Даже нет. Тут нет речи о выравнивании, тут просто «сделано на глаз». И ведь не только подчеркивание скачет (2, 3 и 4 пх), но и кружок прыгает как ему хочется.

Как избежать проблемы с кривым выравниванием? Делаем первый блок элементов > объединяем его в группу > копируем 2 раза. И потом просто-напросто меняем текст и длину подчеркивания. Все будет ровненько. Думаю, это очевидно для большинства дизайнеров, даже новичков. И тут вопрос: «Таки-да, о чем заметка вообще?»

Да, вернемся к нашим баранам, просто шокировало умение скопировать по-горизонтали так, чтобы по вертикали все сломалось :) Проблема в том, что на глаз выравнивают далеко не только новички. Вот, например, фрагмент работы, которую можно выделить на фоне работ «я вчера установил фотошоп, что дальше?»:

fail_2

Но ребя… Это даже не 1 пиксель разницы, тут добрых пять будет:

fail_3

Как сделать секси-подчеркивания, а не дубовые толстые и некрасивые палки под текстом.


Совет

Пользуйтесь стрелками!
Это удобно

Судя по всему, стрелки — самые недооцененные кнопки на клавиатуре. Я ими пользуюсь постоянно, так как я выравниваю все в своих проектах. Но еще чаще я пользуюсь комбинацией правый «шифт» + стрелки. Это совсем космос!

keyboard

Одно нажатие и элемент переместился ровно на 10 пх. Все блоки выравниваю относительно друг друга через шифт со стрелкой. 20 или 30 пх — самое популярное расстояние между элементами. Это всего 2-3 нажатия (не считая выбора необходимого слоя / слоев / группы), а в результате все ровненько, все круто. Не стыдно перед заказчиком, и перед верстальщиками.

Стрелками удобно делать одинаковые расстояния у подчеркиваний. Рисуем линию по нижней границе текста и через 1 нажатие «шифта» со «стрелкой вниз», линия опускается ровно на 10 пх. Делаем тоже самое у второго заголовка и у нас подчеркивания на одинаковом расстоянии. Ништяк!

fail_5

Стрелками удобно делать крутой вертикальный ритм. Почему крутой? Потом что он выровнен! 5 нажатий шифта со стрелкой — и получили расстояние в 50 пх. 5 нажатий шифта со стрелкой и получили 50 пх в другом блоке. И эти расстояния одинаковы, что может быть лучше?

fail_6w

Стрелками удобно делать все. Хотите аккуратный выровненный дизайн? Используйте стрелки!

  •  
  •  
  •  
  •  

Добавить комментарий

Такая эл. почта уже зарегистрирована. Воспользуйтесь формой входа или введите другую.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

7 комментариев

сначала новые
по рейтингу по хронологии сначала новые

Вообще даже интересно как так вышло и дизайнер делал выравнивание в идентичных элементах на глаз вместо того, чтобы склонировать и заменить текст.

А вообще да, Shift, Ctrl и alt с хоткеями в фотошопе чудеса творят.

Алексей, Алексей.... )))

В, В.... а у меня в хроме все ок. Но я не верстальщик (и этого не скрываю), поэтому на все браузеры не загоняюсь. Пусть будет эгоистически — у меня ок, значит, ок :) На скрине, кстати, ужасно толстое слово «Контакты». Пользуйтесь хромом. В реале (в хроме) это слово больше секси :)

У меня хром) Вот скрин: http://joxi.ru/L21pK0Rh5DyqmX

а, вижу, что уже всё подправили) гуд

Плагин обновил. Забавно, что сыросить ОС вызвала восторг (https://www.dropbox.com/s/99qtd1u9cbzou14/1984364.jpg?dl=0 «загрузки» и «проводник» так же как электронная почта), а то что форма съехала относительно левого края на добрых 60 пикселей никак не смутило https://www.dropbox.com/s/ccgh4o3vsqm0eap/83aa21e88c.png?dl=0 Хотя еще раз повторюсь, у меня все ровненько (вин7). Сначала поставят сырую ОС, а потом удивляются почему криво все :) И хватит оффтопать.

Спасибо за статью , гифка открыла мне пару ньюансов с отступами)

Еще можно почитать