Обработка деталей очень важна в веб-дизайне. Лично я часто наблюдаю за веб-сайтами Gringo и обнаруживаю, что в превосходных дизайнах веб-сайтов очень продумана обработка деталей. Советы, которыми я делюсь с вами сегодня, очень просты, но они могут значительно улучшить детали всего веб-сайта. Поэтому я думаю, что эти советы также помогут улучшить уровень дизайна вашего веб-сайта.
И вы заметите, что все эти методы вращаются вокруг одного слова «пикселизация», которое просто означает несколько маленьких линий размером 1 пиксель и 2 пикселя. Хорошо, поехали.
1. Линия-разделитель пикселей. Первое введение — это линия-разделитель. Посмотрите на панель навигации на рисунке ниже.
Обратите внимание на линии в красном круге на рисунке и на линии разделения между кнопками. Эти линии выглядят утопленными, создавая хорошее ощущение линии разделения. Далее я увеличу эту картинку и давайте посмотрим на принцип.
Мы видим, что эти разделительные линии состоят из двух смежных прямых линий толщиной 1 пиксель, причем один цвет темнее, а другой светлее, чем цвет фона. Далее рассмотрим метод:
Выберите инструмент «Карандаш» (не выбирайте кисть по ошибке) и установите размер 1 пиксель.
Выберите цвет темнее цвета фона, например темно-синий на картинке, зажмите Shift и нарисуйте прямую линию.
Выберите более светлый цвет и нарисуйте еще одну прямую линию. ХОРОШО
PS В процессе рисования линий вы можете увеличить холст (Z) для наблюдения.
Как насчет этого, эффект намного лучше, чем от одного разделителя цветов, верно? Давайте посмотрим еще на несколько примеров использования этого метода разделителя:
2. Край пикселя
Для начала давайте посмотрим на исходное изображение без «краев пикселей»:
Далее что добавлено:
