Плашка в дизайне что это
Терминология в полиграфии
Плашка
Плашкой в полиграфии называют область сплошной запечатки.
Например, если лист полностью запечатывается зеленым (100CYAN+100YELLOW), то в таком случае говорят, что в макете зелёная плашка.
Если в макете присутствуют большие плашки, об этом желательно уведомлять типографию еще на ЭТАПЕ ПРОСЧЕТА заказа. Это связано с тем, что «откатать», т.е. отпечатать идеально плашку достаточно сложно. Это во многом зависит от состояния оборудования, мастерства печатника, климата и т.д. В связи с этим, может быть перерасчет на более «новой» печатной машине, что обойдется немного дороже. А иногда даже типографии не берутся за такие сложные работы, изначально зная, что хороший результат врядли получится.
При печати плашек основными проблемами могут стать:
3. Разнотон. Иногда, в особенности на «коротких» тиражах (до 1000 тиражных листов), когда краска не очень хорошо раскатана на валиках, цвет от листа к листу может изменяться. Например, темно-синяя плашка может уходить в фиолетовый, зеленая в бирюзовый оттенок и т.д. Это также регулируется ГОСТом, характеризуется величиной «дельта Е» (ΔЕ) и имеет диапазон до 7 ед.
Проблемы печати плашек
Копирование материалов разрешено только с сохранением ссылки на источник: Типография NoPrint.ru
Если Вам помогла данная статья, будем признательны, если вы нас поддержите:
Плашки и тени
Плашки
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 готовых шаблонов для работы.
10 уходящих трендов веб-дизайна
Какие явления стали общим местом и готовы эволюционировать
Специалисты компании «Бюро Пирогова» специально для Sostav.ru проанализировали сотни отечественных сайтов и выбрали 10 наиболее характерных элементов дизайна, сделав попытку проследить динамику их развития.
Плоский дизайн
Flat по-прежнему в тренде, однако у абсолютно плоской фигуры наблюдается появление схематично обрисованного объема в виде стилизованных теней и градиентов. Если вспомнить, дизайн в стиле flat появился как реакция на надоевшие «реалистичные» изображения с их стремлением точно копировать предметы и явления «настоящего» мира. Жесткий минимализм и отсечение всего лишнего в дизайне стало способом «уйти от реальности».
Но мир движется по спирали. Достигнув пика популярности в конце 2013 года, плоские и простые мультяшные герои постепенно начали надоедать, и сегодня мы наблюдаем «возрождение теней и градиентов», хоть пока и стилизованных.
Добро@Mail.ru 
Международный маркетинговый съезд 
Mobile first
Структура и фунциональные элементы десктопных интерфейсов « подражают » типичной их реализации для мобильных платформ: « выскакивающее » по клику боковое меню, крупный шрифт, кнопки со сглаженными углами, имитирующие сенсорные. Все это делает десктопные интерфейсы похожими на экраны огромных айфонов.
Магазин оптики Pump Your Eyes 
Райффайзен Банк 
Metro-style
Однако « просто плашки » эволюционируют. Будучи крайне ограниченными в объеме вмещаемой на экран информации, сегодня разработчики стараются уместить максимум в одну единицу дизайна. Плашки становятся многослойными, меняются при наведении мыши, в зависимости от ситуации предлагают пользователю разный контент.
kudago.ru 
Внушительная типографика
Большими буквами в вебе принято выражать эмоционально окрашенную речь, часто негативно, и использование капслока не является предпочтительным для коммуникации. Тем не менее, именно этот формат типографики остается мейнстримом в написании заголовков на сайтах.
Белые жирные буквы, выполненные шрифтом без засечек, украшали огромное количество сайтов с середины 2013 до первой половины 2014 года, когда их начали вытеснять более благородные очертания темных оттенков.
История олимпийских игр 
pugovit.su 
Ретро-иллюстрации
Деликатным « олдскульным » шрифтам соответствуют стильные ретро-иллюстрации, словно небрежно нарисованные чернилами от руки. Появившись в противовес выхолощенным плоским фигуркам, такие иллюстрации навевают ретро-настроение в дизайне в целом.
TheMakers 
M2M Private Bank 
Ожившие иконки
Еще объемнее
Традиционная реализация параллакс-скроллинга уступает место более интересным решениям: например, когда на заднем плане двигаются фигуры, падает снег или летит комета.
smartbright.ru 
Атмосферный фон
Дизайнеры идут дальше и делают фотографию фона подвижной, реагирующей на движения мыши или скроллинг. А иногда еще и добавляют анимированные элементы, создавая эффект настоящего видео и «живого » экрана.
Сайт РИФ+КИБ 2014 
Сайт сети баров «Дорогая, я перезвоню» 
Интрига
Тренд удержания внимания пользователя продолжается в мини-интерактивах, ловушках, которые расставлены по сайту, а пользователь то и дело на них натыкается и втягивается. Например, зажигая свет в окнах домов.
status-irkutsk.ru 
Или играя цветами костюма конферансье:
avmc.com.ua 
Яркие акценты
Кстати о цветах. Модные в последнее время психоделические оттенки в оформлении всего сайта сменяются яркими цветовыми акцентами в нужных местах. Они смотрятся еще эффектнее в контрасте с серым или черно-белым фоном.
handyhat.ru 
Сайт Microsoft 
Особая мода на домашних любимцев обязана буржуа как почитателям всего милого и приятного глазу и, конечно, социальным сетям с их безграничными возможностями рассказывать миру о домашних любимцах, среди которых лидируют коты. Апофеозом тренда можно назвать, пожалуй, “кототест” от Сбербанка.
Но сегодня “кототренд” эволюционирует сразу в нескольких направлениях. Еноты, совы и медведи все чаще оживляют веб-пространство. Почему именно эти животные, мы вряд ли сможем ответить. Впрочем, это и не важно.
