Jump to content
  • Sign in to follow this  

    Управление отступами и размерами элементов

       (5 reviews)

    Евгений Зубов
    • 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; Средняя сложность display: none;
      1. Научитесь использовать сетку для проектирования элементов
      2. Перенесите все объекты из макета на сайт в Adobe Muse

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

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

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

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

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

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

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

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

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

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

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

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

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


      Report Занятие
    Sign in to follow this  


    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest

    Genka

    +

    Share this review


    Link to review
    Guest Падалко Сергей

    Отлично

    Share this review


    Link to review
    Дмитрий Жуков

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

    Share this review


    Link to review

×
×
  • Create New...