Что такое плашка в дизайне
10 способов усилить внимание на объекте
“Как делать интересные нескучные работы?” — многие задаются таким вопросом.
Дизайнеру важно уметь управлять вниманием пользователя и вызывать живой интерес к работе. А что делать, если мы попали в следующую ситуацию: подготовили макет — выстроили логику, расставили доминанты, выровняли все отступы, продумали композицию, избавились от лишних элементов. Но такое ощущение что чего-то не хватает, какая-то пустота, что даже грустно становится.
Выход есть!) Исправить ситуацию нам поможет правильное использование и расстановка акцентов.
Акценты решают следующие задачи:
· усиливают внимание на объекте;
Внесу ясность: под объектом мы подрузамеваем фотогафию, текст или отдельный блок сайта.
Итак, 10 способов сделать акцент на объекте:
1. Поместить геометрический элемент за объект или вплести в него;
В качестве геометрического элемента может быть: круг, прямоугольник, эллипс, линия, фигура нестандартной формы. Зачем? Это позволит сделать объект сильным.
2. Расположить геометрический элемент на объекте или рядом с ним;
Используйте те формы, которые подходят именно вашей тематике. Помните, что разные формы способны доносить разные эмоции. Например, линия показывает путь между двумя точками. Линия может быть прямой, вертикальной, горизонтальной, диагональной или зигзагообразной. Линия подразумевает движение и предполагает направление. Треугольник (как в примере) показывает направление вверх и с помощью градиента вызывают позитивные эмоции. Но с цветом — это уже другая история..
3. Наложить цвет на фото;
Положив цвет на фотографию вы сможете выделить блок сайта в общей композиции.
4. Использовать рамки;
Вставлять рамки нужно аккуратно. Поскольку рамка оттягивает на себя внимание. Но если попасть в точку, то композиция с использованием рамки только выиграет. Смотрите примеры удачного акцента с помощью рамок.
5. Вплести текст в фото или расположить часть заголовка за фото;
Это вызовет больший интерес к композиции.
6. Кисти с использованием обтравочной маски;
Такое расположение добавит эмоциональный окрас фотографии и даже придаст индивидуальности. Кисть можно настроить как нам нужно — выбрать форму кисти, задать размер, угол наклона и настроить прочие параметры, а еще можно создать свою кисть, тогда у вас получится неповторимый макет.
Через кисти можно донести разные эмоции — будь то творчество, радость, свобода, динамика.
8. Плашки на фотографии или за ней;
Плашки служат контрастным объектом и позволяют усилить внимание на какой-либо части фото.
9. Использование вырезанных объектов из фотографии;
Отдельные объекты делают композицию интересной и привлекают внимание. Можно использовать в случаях, когда нужно выделить какой-то блок. Тогда следует разместить их на этом блоке, а на других не размещать. Человек при скролле сайта задержит внимание на этом блоке.
10. Сочетание нескольких способов.
Иногда лучший эффект можно получить, использую несколько способов в одном макете. Экспериментируйте, здесь в полной мере можно проявить свою фантазию)
Правильно расставленные акценты помогут привлечь внимание пользователя, сделать макет интереснее.
Теперь вы вооружены эффективными инструментами расстановки акцентов! Мотайте на ус и обязательно используйте)
Сохраните статью у себя в закладках, пусть она служит для вас подсказкой.
Плашки и тени
Плашки
Mar 12, 2018 · 3 min read
Плашка в интерфейсе нужна чтобы выделить или объединить объекты. Помогает отделить модуль от соседнего и объединить его собственные части.
Плашка может выделить элемент управления. Например:
Плашка образует собственный формат с собственными пропорциями полей. Вертикальные и горизонтальные поля не должны быть равны друг другу, нижнее поле должно быть больше верхнего.
Тот же принцип действует для расстояний над и под плашкой. Они не должны быть равны.
Не нужно использовать множество плашек. Если с ними переборщить, страница будет выглядеть, как набор не связанных между собой блоков:
Большая цветная плашка может стать слепой зоной, так как воспринимается, как рекламный баннер.
На п л ашку логично ставить наиболее важный модуль или главное действие: кнопку «Отправить» у формы, кнопку «Купить» у товара:
Плашка в форме явно показывает, где заканчивается форма и где расположена главная кнопка.
Плашка всегда увеличивает массу объекта:
Если текстовый блок озаглавлен, заголовок всегда нужно вносить внутрь плашки.
Плашка поможет внести разнообразие в этажи текста:
Стиль оформления плашки зависит от текущих трендов или фирменного стиля. Плашки могут выглядеть как угодно: быть контрастными и объемными, плоскими или градиентными, иметь обводку.
Что еще почитать
Выравнивание объектов — совет Михаила Нозика и Ильи Бирмана
Про плашки от края до края в совете Ильи Бирмана
Тень — это способ передать больше информации об объекте: положение в пространстве, иерархия слоя, важность, объём. Тень бывает падающая и собственная. Но в интерфейсе я бы выделила третью тень — внутреннюю.
С помощью теней можно экспериментировать с состояниями объекта:
Падающая тень
Падающая тень (drop shadow) помогает размещать объект в пространстве. Она создает плоскость под объектом. Например, с помощью тени можно передать различное расстояние от объекта до поверхности:
Падающая тень может создавать слои и уровни:
Этот принцип используется в Google material design. Тень помогает имитировать слои, плавающие в пространстве объекты, а так же используется для приближения выделенных объектов в пространстве.
Собственная тень
Тень на самом объекте помогает имитировать объём:
А еще с помощью тени можно показать грани объекта:
Внутренняя тень
В интерфейсах главным образом нужна, чтобы показать вдавленную плоскость. Например, нажатые кнопки или поля ввода в формах:
Рефлексы
Рефлекс — отраженный свет в тени. Подкрашивать падающую тень в цвет объекта хорошо:
Как красиво разместить текст на картинке
Простые советы, которые помогут вам профессионально оформлять рекламные посты, статьи, макеты и многое другое.
Текст и изображения прекрасно дополняют друг друга, но когда нужно написать что-то прямо поверх картинки, часто возникают трудности: то изображение не видно, то буквы не разобрать. Мы подготовили список приемов, благодаря которым вы сможете делать красивые надписи на любых картинках.
Играйте на контрастах
Первое, и самое главное правило: текст всегда должен быть контрастным по отношению к фону, иначе он не будет читаться. Если у вас темное изображение, используйте светлый текст, и наоборот: на светлой картинке пишите темным. Черный и белый тексты всегда выглядят хорошо, но если вы готовы к экспериментам, можете попробовать и другие оттенки.
Темный текст на светлом фоне выглядит аккуратно.
Более строгий вариант — светлый текст на темном фоне.
Для энергичных проектов можно использовать смелые цветовые сочетания: здесь сиреневый текст контрастирует с желтым велосипедом.
Размывайте изображение
Слегка размытые изображения — отличный фон для текста, особенно в дизайне сайтов. Благодаря этому приему можно сделать надпись на любой картинке, она все равно будет хорошо читаться. Достичь эффекта легкого размытия можно в фотошопе с помощью фильтра Gaussian Blur.
Затемняйте изображение
Еще один популярный прием, который часто используют в веб-дизайне: затемнение фонового изображения. Это не только дает возможность сделать на картинке любую надпись, но еще и позволяет использовать картинки низкого разрешения.
Используйте плашки
Разного рода плашки хорошо смотрятся с текстом, и с ними можно экспериментировать до бесконечности. Они акцентируют внимание на тексте и на них можно разместить довольно много текста. Мы выделили три основных вида плашек, которые чаще всего используют в дизайне.
Когда изображение размыто не полностью, а только частично в области плашки, макет приобретает легкость. Создается эффект стеклянной поверхности.
Цветные плашки могут быть как комплиментарными, так и контрастными по отношению к изображению.
Еще один пример цветной плашки, которая сочетается с одеждой модели.
Узоры и другие фигуры, использованные в качестве плашки для текста, создают романтичное настроение в макете.
Расставьте акценты
Жирные, насыщенные буквы привлекают к себе слишком много внимания, а это не всегда то, что нужно. Поэкспериментируйте с облегченными версиями шрифтов для достижения более деликатного результата.
Встройте текст в изображение
Иногда текст делают частью изображения, достигая при этом эффекта, будто изображение было специально создано для этой надписи. Можно изменить перспективу текста, встраивая его в поверхность, или же обрезать часть надписи, позволяя объектам на рисунке слегка «заслонить» ее.
Текст как будто нанесен на беговую дорожку.
Используйте пустое пространство
Когда на картинке достаточно «воздуха» можно смело использовать это пространство для надписей. Особенно интересно получается, когда объект на изображении смотрит или указывает на надпись. На фотобанках даже есть специальный фильтр, которые помогает найти такие фотографии: просто укажите, где должен находиться объект, а какая часть изображения должна быть пустой. Помните, что в крайнем случае картинку можно «отзеркалить» или кадрировать.
Рука модели указывает на надпись.
Надеемся, эти приемы помогут вам делать яркие и интересные макеты. Подписывайтесь на нас в Facebook или Vkontakte, чтобы получить еще больше полезных советов по работе с изображениями!
Bigtime Club → Блог → Лента
Последние пару месяцев я публиковала в Фейсбуке посты, в которых разбирала ошибки дизайна картинок. Мы решили собрать их и опубликовать в блоге, чтобы не потерять. За это время мы успели поговорить о работе с плашками, единстве стиля и выравнивании текста.
Плашки
Для примера возьмём картинку с крупным текстовым блоком на плашке.
Часто встречаю картинки и слайды в презентациях, когда текст печатают на изображении без плашки. Это хорошо, ведь чем меньше на картинке украшательств, тем лучше. Но иногда без плашки не обойтись, и если не поставить надпись на однотонный фон, вместо красивого дизайна с полезной информацией получим пёстрый винегрет. Текст утонет в деталях и потеряется на фоне картинки.
Сейчас текст стоит без плашки. Первое, что приходит в голову, сделать текст ярче.
Теперь текст читается легче, но буквы бликуют на фоне изображения — смотрится некрасиво. Шрифт пришлось залить цветом, который диссонирует с исходной палитрой.
Теперь поставим текст на плашку. Я выбрала круглую, но и прямоугольная смотрелась бы не плохо. Главное, чтобы плашка не перекрывала на картинке важные объекты, например, лица.
В таком виде текст работает эффективно и не портит дизайн.
Единство стиля
Подобрать картинки, которые хорошо сочетаются между собой и подчёркивают целостность работы, не так просто.
Попробуем разобраться на примере шаблона из фоторедактора «Канва». Я залила в него три изображения.
Все они демонстрируют примеры компактного хранения вещей.
Как исправить:
Первый способ — наложить фильтр.
Если наложить на картинки прозрачный фильтр, он приведёт их к единому цветовому оттенку и сгладит несоответствие. Но как видно на втором слайде, остальные проблемы он не решает.
Перейдём ко второму способу, который состоит из нескольких этапов.
Выравнивание текста
На курсах мы рекомендуем студентам выравнивать текст по левой стороне, потому что так его удобнее читать. В центре хорошо смотрится заголовок, и только в том случае, если элементы под ним распределены симметрично. В противном случае вёрстка выглядит непрофессионально.
Для примера я взяла два слайда из презентации. Разберём их и поработаем над ошибками.
Получился простой лаконичный слайд с качественной фотографией и понятным текстом.
Теперь слайд выглядит гармонично, а информацию удобно изучать.
Подведём итог
1. Выбирайте для дизайна простые геометрические фигуры.
2. Не закрывайте плашками важные элементы картинок: людей или продукты, которые продаёте.
3. Если фотография яркая и со множеством деталей, ставьте тест на плашки.
4. Используйте фильтры, чтобы добиться одинакового цвета фотографий.
5. Выравнивайте объекты на картинах по отношению друг к другу и к границам изображения.
6. Выравнивайте текст по левой стороне.
Если вы хотите научиться верстать красивые картинки для соцсетей приходите на курс по дизайну для соцсетей. В программе 13 видео-инструкций, девять текстовых уроков со скриншотами, семь ресурсов для работы, 25 стоков со шрифтами и картинками и 36 готовых шаблонов для работы.
Чем плашка отличается от растра: ликбез от типографии
Специфические типографские и дизайнерские термины нужны далеко не всем. Если ваша задача – напечатать для своей организации рекламу, к примеру, в виде флаеров, или упаковку для какого-то товара, то углубляться в тему вам вряд ли захочется. На каждую задачу должен найтись свой исполнитель, зачем придумывать себе новые заботы, скажете вы. Но при этом общие сведения – необходимость, если вы, как заказчик, не хотите потерять деньги, отмечают эксперты https://x-press.su/. Одним из тонких моментов в типографских услугах является разница при печати между растром и плашкой.
В чём разница
На первый взгляд может показаться, что изображение в обоих случаях не слишком различается. На самом деле это две разные техники, которые требуют соответственно разного подхода и инструментария. Одну и ту же полиграфию, флаер, рекламный носитель или этикетку на товар можно напечатать по-разному. Итак, что такое плашка и чем она кардинально отличается от растра?
Плашка в полиграфии – это монолитные элементы одного цвета, которые не содержат теней, оттенков или переходов. В плашке на вашем носителе не бывает смеси разных цветов. Соответственно, если что-то из перечисленного в изображении вам требуется, запрашивайте растр. Простые примеры – фотографические изображения, свет и тень, картинки с разными оттенками.
Особенности плашки
Плашка не обязательно должна занимать целую полосу или площадь рекламного носителя, этикетки и так далее. Это может быть отдельный элемент, но обязательно с характеристиками, описанными выше. Краска наносится на носитель ровным слоем, что требует определённых условий, в частности, микроклимата в помещении, специального оборудования и опытного сотрудника. Сложность технологии приводит к тому, что печать плашки в отличие от растра обходится в среднем дороже. И это надо учитывать заранее.
Как избежать дефектов
При печати плашки стоит более внимательно выбирать типографию, поскольку изредка на изображении могут появляться дефекты.