Перейти к содержимому
  • Управление отступами и размерами элементов

       (5 отзывов)

    Евгений Зубов
    • 17 4,25,2,6,20,3,26,27,28,29 4,6,32 https://creatura.club/uploads/monthly_2016_06/17_%D0%A3%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5%D0%BC_%D0%BE%D1%82%D1%81%D1%82%D1%83%D0%BF%D0%B0%D0%BC%D0%B8_%D0%B8_%D0%B2%D0%BE%D0%B7%D0%B4%D1%83%D1%85%D0%BE%D0%BC.mp4.653aa4fbb13529a65799f2cbc37f4348.mp4 11 До 15 минут Евгений Зубов display: none; https://creatura.club/uploads/ Средняя сложность display: none;
      1. Научитесь использовать сетку для проектирования элементов
      2. Перенесите все объекты из макета на сайт в Adobe Muse

      Теперь, когда у нас есть сетка, наша задача – научиться пользоваться данный инструментом. Сетка решает несколько проблем, возникающих у новичков при работе с дизайном?

      1. Проблема отступов между элементами

      Новичок не понимает, какое расстояние должно быть между кнопкой и заголовком, к примеру, или между двумя кнопками. Мы будем показывать работу сетки на простых элементах. Но сетка работает абсолютно так же с любым другим элементом. Нужно придерживаться 2-х основных правил:

      • Размеры любого элемента задаются по сетке

      Например, сделаем кнопку. Создаем текстовый фрейм, пишем "Кнопка", меняем цвет текста и фона. Как нам понять, какого размера должна быть кнопка? Ваша задача сделать так, чтобы высота и ширина кнопки были кратны сетке.

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

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

      Рекомендуем за минимальное расстояние между элементами принимать расстояние, равное ширине одного столбца. При ширине сайта 960 пикселей, ширина одного столбца 80 пикселей. Это значит, если мы создадим прямоугольник с высотой, равной ширине, то у нас получится квадрат. С помощью него мы можем измерять расстояние между элементами, просто перемещая.

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

      Самое главное – не оставлять расстояние между элементами в пределах от 0 до 40 пикселей, а также от 40 до 80 пикселей. Либо оставляем на расстоянии 40 пикселей (середина), либо 80. Других вариантов быть не должно.

      Бывают случаи, когда одной высоты недостаточно. Если мы ставим расстояние между двумя блоками, то в данном случае мы будем брать расстояние 160 пикселей, то есть 2 по 80 пикселей.

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

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


      Жалоба


    Отзывы пользователей


    Слава Баранов

    Видео нет

    Поделиться отзывом


    Ссылка на отзыв
    Genka

    +

    Поделиться отзывом


    Ссылка на отзыв
    Гость Падалко Сергей

    Отлично

    Поделиться отзывом


    Ссылка на отзыв
    Дмитрий Жуков

    Супер, конкретика попёрла!

    Поделиться отзывом


    Ссылка на отзыв

×