что такое исходники в дизайне

Макет сайта: как сделать дизайн и передать исходники верстальщику

Удалить скрытые слои, настроить отступы, экспортировать иконки и приложить шрифты: что нужно сделать дизайнеру, чтобы разработчик не запутался в макет

Чтобы стать опытным дизайнером, нужно сделать несколько больших проектов и понять, как всё устроено изнутри. Если времени на проекты нет, то все нюансы передачи макетов разработчикам и правильном общении с ними можно узнать на нашем курсе.

Зачем приводить всё в порядок

Создание сайта — трудоёмкий процесс, потому что надо не только продумать его логику и разработать стиль, но ещё сверстать и запрограммировать страницу.

Иногда дизайнер рисует хороший макет, а после вёрстки качество заметно падает:

Скорее всего, это происходит потому, что дизайнер плохо подготовил макет для вёрстки.

Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.

Для чего нужен макет

Обычно сайт разрабатывают в несколько этапов. Собирают информацию, рисуют дизайн и пишут текст, а затем верстают и программируют. Сначала дизайнер работает с внешним видом, создаёт макет сайта, затем передаёт исходники разработчику.

Макет сайта — это эскиз, на котором изображена будущая страница. От того, насколько качественно проработан макет, зависит общее восприятие информации на сайте.

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

Разработчик получает от дизайнера макет в графическом формате. Затем с помощью HTML и CSS, языка для разметки страниц и таблицы стилей приводит макет в такой вид, который понимают браузеры.

Правила создания макета

Верстальщик постоянно сверяется с исходными файлами, которые получил от дизайнера. Смотрит отступы и расстояния, копирует текст, задаёт нужные стили.

Важно! Часто дизайнер в спешке отправляет макет разработчику и при этом забывает проверить работу на ошибки. А верстальщик тоже может не заметить проблем и опубликовать это всё на сайте.

Обычные ошибки дизайнера:

Чтобы это происходило реже, необходимо соблюдать основные правила создания макета и взаимодействия с верстальщиком.

1. Договоритесь о формате файлов

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

Photoshop — универсальный редактор, и поэтому его довольно непросто освоить. Чтобы не тратить много времени на изучение функций, можно использовать новое поколение программ, предназначенных специально для веб-дизайна: Adobe XD, Figma, Sketch.

Некоторые дизайнеры рисуют макеты в других редакторах. Кто-то пользуется Adobe Illustrator или Adobe InDesign.

Перед тем как выбрать программу для создания макетов, поговорите с верстальщиком. Удобно ли ему будет пользоваться Photoshop или лучше нарисовать всё в Sketch? Или он пользуется Zeplin, поэтому неважно, в какой программе вы рисуете?

2. Следуйте требованиям интерактивного дизайна

Создавайте макет по правилам. Это упростит работу над внешним видом и облегчит процесс вёрстки.

3. Избавляйтесь от дробных расстояний

Проверьте все элементы макета и посмотрите на расстояния и отступы. Все размеры должны быть выражены целыми чётными числами. Не используйте нечётные числа и дроби.

4. Наведите порядок в слоях и артбордах

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

Чтобы создать порядок в слоях:

Источник

Гид по сленгу дизайнеров: как ставить задачу на одном языке с повелителями Фотошопа и Иллюстратора

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

Случалось ли с вами такое, что дизайнер присылает бриф, а там вместо слов просто рандомные наборы букв? Чтобы вы лишний раз не гуглили, в чём отличие гайдлайна от брендбука, Логомашина решила на простых примерах объяснить значение самых популярных дизайнерских терминов.

Непонятные словечки во время брифинга

Итерация — круг правок. Итерация может включать сколько угодно правок, но они должны быть озвучены одномоментно (перечислены в одном документе). Как правило, количество итераций оговаривается на этапе заключения договора (в Логомашине, например, допустимы две итерации: заказчик после презентации дизайна может дважды предложить перечень правок, которые нужно внести).

Майндмэп (mind-map) — карта ассоциаций. В дизайне её как правило используют при поиске идей в начале разработки айдентики. При построении майндмэп двигаются от общего к частному (например, если у дизайнера задача — разработать айдентику для города, то он разбивает её на следующие блоки: определение критериев для оценивания финального результата, поиск текущих проблем города, выделение целевых аудиторий, исследование исторических и современных символов. Каждый из этих блоков в свою очередь разбивается ещё на несколько.

Онлайн-образование — новая мишень фродеров

Большинство сайтов в категории заражены фрод-скриптами.

Мудборд (moodboard) — файл, в котором собрано всё, что дизайнер должен иметь в виду при разработке дизайна. Такая папка обычно собирается вместе заказчиком и включает не только понравившиеся примеры дизайна или иллюстрации, но и стилевые фото, цвета и даже музыку.

Стоковые (фотографии или иллюстрации) — неестественные, постановочные изображения из интернета (та самая улыбающаяся в 32 зуба семья или счастливые сотрудники за столом переговоров — вы наверняка хоть раз встречали их в мемах).

Шакал — некачественное изображение плохого разрешения.

Референсы — примеры дизайна, которые заказчик и дизайнер считают подходящими для проекта.

Носитель — объект, на котором существует дизайн: например, визитка, упаковка товара, бланк, билборд. Идеальный заказчик заранее думает, какие носители ему наиболее актуальны и во время брифинга просит дизайнера представить будущий дизайн именно на них.

О чём нужно знать во время выбора цветов и шрифтов

Типографика (не путать с типографией) — оформление текста. Если дизайнер заговорил о типографике, значит речь идёт о необходимости выбрать шрифты и начертания, обговорить пропорции основного текста и заголовков

Антиква — шрифт с засечками.

Примеры антиквенных шрифтов

Гротеск — шрифт без засечек.

Примеры гротескных шрифтов

Акцидентный шрифт — необычный, декоративный шрифт.

Примеры акцидентных шрифтов

Интерлиньяж — расстояние между буквами.

Покернить — найти оптимальное расстояние между буквами.

Леттеринг — любой шрифт, который нарисован с нуля. С помощью леттринга дизайнер создаёт шрифт, которого ещё не существует в природе.

Чистые цвета — цвета без примесей. Это все основные цвета и их оттенки на цветовом круге.

Грязные цвета — все смешанные цвета, например, коричневые и земляные оттенки цветов.

Монохром — одноцветный дизайн или дизайн, в котором используются оттенки только одного цвета.

Примеры монохромного дизайна

Понятия, в которых нужно разбираться перед печатью макетов

Пантон — международная система идентификации цвета. Благодаря пантону вы сможете в любой типографии мира напечатать макеты нужного оттенка. Достаточно сказать «пантон номер 2040» — и что в Москве, что в Париже, что в Пекине это будет один и тот же цвет. И никаких проблем с «ну мы имели в виду нежно-лиловый, а вы напечатали просто лиловый»).

Вёрстка (в графическом дизайне) — расположение элементов на макете.

Вёрстка (в веб-дизайне) — написание кода программистами.

Макет — файл, готовый к печати (может быть как в формате для редактирования, так и в JPG или PDF).

Исходник — файл для редактирования, в котором сохранены все наработки (в векторном или растровом формате).

Линки — встроенные в макет файлы. Например, у вас есть шаблон для Instagram, в который можно по мере необходимости вставлять какие-нибудь фотографии или картинки: в этом случае фото или картинки и будут линками (объектами, которые не нарисованы изначально, а уже встроены в исходный файл).

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

Растр — формат изображения, в котором картинка складывается из пикселей. Если начать увеличивать такое изображение, то вы увидите мозаику. Растровые изображения редачат в Photoshop.

Вектор — формат изображения, в котором картинка состоит из кривых и опорных точек. Векторная графика обычно используется в полиграфии: если вы хотите макет, в котором логотип нужно будет растянуть на весь баннер, то лого надо присылать именно в векторе.

RGB — формат, в котором мы видим цвета на экране монитора.

CMYK — формат, в котором мы видим цвета в реальном мире. В жизни нельзя воспроизвести то количество цветов, которое отображается на мониторе, поэтому при печати картинка всегда будет не такой насыщенной, как вы видели до этого на экране.

Важные термины, в которых надо разбираться даже по окончанию работы с дизайнером

Логобук — документ, в котором прописаны правила работы с логотипом (пропорции, минимальные размеры, использование на разных фонах, дополнительные версии).

Гайдбук — свод правил работы с логотипом и айдентикой (как логобук, только здесь ещё есть инструкции по использованию фирменного стиля — шрифтов, цветов, паттернов).

Брендбук — самый большой документ, в котором есть не только правила по использованию внешних элементов (айдентики, логотипа), но и описана философия бренда, его позиционирование, целевая аудитория.

Стилеобразующий элемент — любой элемент, который создаёт фирменный стиль. Это могут быть шрифты, цвета, паттерн, особенные фотографии (например, для Coca-Cola стилеобразующим элементом будет фотография улыбающихся людей, которые пьют колу).

Паттерн — повторяющийся графический элемент. Паттерн используют при создании фирменного стиля: оригинальный узор повышает узнаваемость компании и помогает донести до потребителя суть её деятельности.

Лицензия — право на использование платного шрифта. Если вы выбрали для своего дизайна платный шрифт, то важно заранее обговорить, где будет использоваться дизайн, поскольку для разных целей есть разные лицензии. Для использования шрифта в мобильных приложениях нужна одна лицензия, а для использования шрифта в рекламных баннерах для таргета — совсем другая.

Мокап — инструмент, который позволяет презентовать идею максимально реалистично. Это макет какого-то реального объекта, на который дизайнер может наложить свой дизайн. В качестве мокапов может выступать практически что угодно: футболка, упаковка, визитка, билборд, страница сайта.

Источник

Терминология дизайна

Линки

Есть такая программа: «Adobe Illustrator». С большой вероятностью дизайнер работает в ней: в этой программе очень удобно готовить макеты т.к. есть возможность подлинковывать внутрь одного файла другие файлы. Подлинковать — это поместить сторонний файл, другого формата, внутрь программы.

Т.к. физически файл лежит отдельно — веса готового макета в самой программе он не увеличивает и программа быстро работает. Макет хранит только ссылку на нужный файл — линк. Не будет линка = программа не сможет ничего разместить в этом месте макета. Как показать то, что не лежит по указанному адресу?

Поэтому, если вы отдаёте в работу иллюстраторовский (.ai) файл, следите, чтобы в папочке links были приложены все линки, которые используются в макете.

*Макет может вообще не содержать линков, если это простой векторный файл, но лучше всё-таки уточнить.
Особенно удобно, если линк остаётся по слоям, а не сбитым в один слой, в чём выгода — читайте ниже.

Исходник или файл, сбитый (слитый) в один слой

В исходник можно быстро и просто вносить изменения: передвинуть объекты местами, уменьшить или увеличить размер текста, в освободившееся место дописать что-то. В сбитый файл — нет. Потому что исходник хранит всю информацию по слоям (картинка ниже), объекты не связаны между собой, одно можно изменять, не вредя другому. Чтобы сделать такое в сбитом файле, придётся обвести один объект, передвинуть, в появившейся дырке дорисовать «заплатку» из фона. Послойный файл — это коллаж из наложенных, но не склеенных друг с другом объектов. Файл, сбитый в один слой — это, пусть и хороший, но рисунок на цельном листе бумаги.

Файл, сбитый в один слой:

Разрешение

А теперь загадка, о чём здесь речь?

Конечно, о разрешении. Разрешение — это количество маленьких точек при печати на дюйм: dpi («dots per inch — точек на дюйм»). Чем выше разрешение, тем больше можно увеличить картинку, а она будет оставаться в хорошем качестве. Однако не стоит гнаться за неоправданно огромными числами в файлах. К чему вам качество внутри компьютерного файла 3 000 dpi, если принтер в лучшем случае способен выдать картинку в 300 dpi? Это лишь лишний вес файла.

Оптимальное разрешение для полиграфии = 300 dpi,
для наружки = 72 dpi (хотя сами печатники признаются, что и того меньше, эти макеты смотрят на расстоянии, высокое качество здесь не требуется, главное — сделайте перед итоговой печатью цветопробу, типография предоставляет её бесплатно).

Резкость

Понятие «резкость» плотно связано с разрешением. Если очень упрощённо, то резкость отвечает за различимость деталей на изображении. Степень контрастности между соседними точками. Особенно это важно при работе с текстурами ткани. Как раз на воспринимаемую резкость изображения влияют два фактора: разрешение и чёткость.

Фокус/расфокус

Чтобы после обработки получить картинку отличного качества, нужно позаботиться о высоком качестве самого снимка. Ретушь только «вытягивает» и украшает уже данное кадру. Косметика, а не пластическая хирургия. Коммуникации требуют и высокого разрешения (бОльшего количества точек), и высокой чёткости (чёткие границы между этими точками). Однако камера имеет ограничение и может сфокусироваться (сделать резким) только конкретный план (близкий объект, средний, дальний). Если часть изображения в фокусе (на нём хорошая резкость), то часть уходит в расфокус (потеря резкости, размытость), как быть в таком случае? Когда нужен полностью резкий кадр, фотографы создают композитное изображение. Поочерёдно взяв в фокус разные планы, а затем объединив изображение в одну картинку, где взяты самые резкие детали.

Помните чёрно-белую дребезжащую картинку по ТВ, когда один из каналов не работает? Теперь представьте, что такая картинка накладывается на рабочее изображение, в тенях начинают проявляться непонятные точки, которые появились не из-за фактуры в кадре и точно лишние. Это и есть шум.

Такое происходит из-за несовершенства техники и недостатка света. Обычно шум негативно влияет на изображение, словно бы невпопад «бьёт» его на мелкие кусочки, однако небольшое количество шума может повысить ощущение резкости (картинка ниже). Такое сознательное добавление шума могут использовать для искусственного повышения резкости, борьбы с «замыленными» текстурами не очень хорошего качества (трава, кирпичи, картон), или при ретуши, когда пришлось убрать средние частоты и появилось слишком большое ощущение гладкости и пластика.

Припуски/поля под обрез/вылеты

Вы видите готовые визитки вот так:

а печатник и дизайнер видят макет так:

Обрезной формат

То, что остаётся после того, как поля срежут. Он же — размер готового изделия.

Источник

Исходники. Отдавать или не отдавать?

Нужно ли отдавать исходники клиенту по завершению работы?
Давайте сегодня попробуем разобраться. Рассмотрим плюсы и минусы выдачи исходников, рассмотрим, что и как стоит подготавливать, как передавать, как регулировать передачу исходников.

Привет! Сегодня у меня к вам вопрос, который породил обсуждение длиной в целый чат в телеграме, читать не перечитать.
Нужно ли отдавать исходники клиенту по завершению работы?
Я, как дизайнер, любящий клиентов и заботящийся о их дальнейшем процветании, всегда выдаю исходники по окончанию работы над проектом. Однако моя позиция оказалась не самой выдающейся. Многие мастера считают, что выдача исходников должна быть заранее оговорена договором и оплачена дополнительно. Перед тем, как начать писать эту статью, я решил поискать решение в интернетах, но единственно верной точки зрения не нашел.
Давайте сегодня попробуем разобраться. Рассмотрим плюсы и минусы выдачи исходников, рассмотрим, что и как стоит подготавливать, как передавать, как регулировать передачу исходников.

Минусы выдачи:
— Страх того, что клиент не вернется
Часто дизайнеры боятся, что раз клиент получил исходники, то он больше к ним не вернется, так как сам будет что-то обновлять и редактировать в их макетах.
— Неисполнение условий договора
Даже в устной форме чаще всего в условиях работы всплывает вопрос о передаче исходников клиенту.
— Страх того, что клиент испортит дизайн
Воспитать в клиенте сдержать желание “добавить зеленый” очень трудно. Это и правда проблема.
— Вы не сможете предъявить авторское право, если ваш менеджер заявит, что это его разработки
Об этом много споров, но правда на вашей стороне.

Только один раз я пожалел, что выдал исходники. Был достаточно большой и продолжительный в разработке проект дизайна гоночных соревнований. Мы работали несколько лет и в последний год нашего сотрудничества у гонок сменился маркетолог. Мы долго не могли прийти к удачному решению, но в итоге что-то я сделал правильно, и работа наладилась. Я так думал. Как оказалось, после передачи исходников маркетолог гонок сама переделала макеты афиш и соцсетей, на свой лад. Получилось, что афиши отличались от рекламы в таргете, от уличных баннеров, от листовок промоутеров. На мой резонный вопрос “зачем?” и “почему не переделали остальное?” она ответила, что ей не хотелось мне ничего объяснять, а на другую полиграфию времени не хватило. Получилось колхозно и все остались недовольны.
В одном из недавних проектов, где я получил заказ на фирменный стиль небольшой фирмы, была ситуация, в которой есть несколько выходов и все правильные. На этапе подбора визуала для соцсетей клиент объявила, что я совсем не понимаю ее видения. Хотя до этого проблем не возникало. При детальном разговоре выяснилось, что я и правда не улавливаю какие-то молекулы, из-за чего целостная картина не строится. Я предложил закончить проект на этом месте, индексировав гонорар по факту сделанного. В этот момент я мог отдать исходники только того, что сделал, не вкладывая логобук и примеры визуализации. Или я мог отдать все наработки, чтобы упростить клиенту и новому дизайнеру жизнь. Я решил, что отдам все что придумано на сегодня, так как готовые визуальные примеры рождают понимание, как должен выглядеть бренд. При небольшой доработке клиент скорее всего получил бы, то что хотел увидеть изначально, и все встало бы на свои места.
Отдав исходники, я расстался с клиентом на хорошей ноте и возможности того, что в новых проектах этой фирмы я приму участие.

Итогом к этой статье я бы хотел сказать, что окончательное решение, конечно же, за вами. Не ссыте отдавать исходники. Подготовка исходников дисциплинирует держать макеты в порядке и красоте, однако занимает время.
Во избежание неприятностей относительно того, как дальше обернется жизнь ваших макетов, заключайте договор. В случае чего это ваш верный помощник в суде.
Желаю вам успехов!

Источник

Термины графического дизайна для не дизайнера

Айдентика

Стрижка, стиль одежды, мимика, голос делают вас особенным человеком — так же и айдентика выделяет один бренд среди других.

Айдентику часто путают с фирменным стилем, но между ними есть разница.

Айдентика — это образ компании: ее фирменный стиль, корпоративные ценности, сайт, рекламные материалы и многое другое. Фирменный стиль можно поменять, но айдентика чаще всего не меняется на протяжении истории бренда.

Айдентика, формирует отношение к компании, впечатление от нее. Например, Эппл стал узнаваемым и успешным брендом во многом благодаря айдентике: компания создает впечатление, что ее продукты — уникальные, инновационные и статусные.

Фирменный стиль

Фирменный стиль — это графическая часть айдентики: логотип, фирменные цвета, шрифты, визитки, упаковка и другое.Фирменный стиль единообразен — он помогает компании запоминаться и производить впечатление. Если бренд оформлен в едином стиле, то его проще узнать и запомнить.

Часть фирменного стиля, который мы разработали для конференции тестировщиков

Логотип

Логотип — это не просто красивая картинка. Это фирменный знак, с которым клиенты ассоциируют бренд. Логотип не обязан описывать сферу деятельности: Apple не продает яблоки, а Starbucks — русалок, и тем не менее эти бренды известны каждому.

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

В России виды логотипов никак не различают, однако в англоязычных странах разделяют непосредственно сам логотип (logo), его шрифтовую (logotype) и символическую (logomark) части. Шрифтовая часть — стилизованное название компании — может выступать как самостоятельный лого. Например, Кока-кола отлично ассоциируется со своим лого и в символе не нуждается:

Такой же автономией и узнаваемостью может обладать и просто символ:

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

Брендбук

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

Термин «брендбук» относится скорее к области маркетинга. Он описывает концепцию продвижения бренда, его отличительные черты, философию, целевую аудиторию и т.д.

Брендбук — «библия» бренда, в которой расположена полная информация о компании.

Гайдлайн

Гайдлайн — это инструкция по использованию фирменного стиля. Он содержит правила использования логотипа, цветов, шрифтов и т.д. С помощью гайдлайна оформляется рекламная продукция, деловые документы и другие носители.

Например, гайдлайн можно показать разработчикам сайта — это поможет оформить сайт в соответствии с фирменным стилем.

Мокап

Фирменный стиль должен хорошо смотреться на любых носителях — кружках, блокнотах, вывесках.

Чтобы понять, как фирменный стиль будет работать в жизни, дизайнер использует мокап — шаблон, на который «примеряет» готовый логотип и стиль.

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

Примерили упаковку для вок-кафе

Паттерн

Паттерн в дизайне — это узор из повторяющихся элементов. Паттерны, на самом деле, везде: на обложках книг, тканях, сайтах. Фирменный узор — еще один способ сделать компанию узнаваемой. Они часто служат фоновым рисунком на упаковках, баннерах, форме сотрудников и дополняют основной дизайн. Чтобы дизайн не выглядел скучно, используют один паттерн в нескольких цветовых решениях.

Паттерн для кафе Like Waffle

Негативное пространство

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

Этот прием часто используется при создании логотипов. Известный пример — логотип компании FedEx и стрелка между буквами E и X. Один раз увидишь — никогда не развидишь.

Еще пример — логотип для студии интерьеров:

Фавикон

Фавикон — значок сайта, который отображается во вкладке браузера и на панели закладок. Фавикон — важная часть фирменного стиля, он помогает найти сайт среди других закладок.

Чем меньше деталей в фавиконе — тем лучше. Так, его форма не будет теряться в маленьком размере.

Фавикон для видеоблога Геннадия Орлова

Шрифт

Шрифт — это набор букв, цифр, знаков препинания и других символов. Он определяет начертание знаков (например полужирный и курсив), их насыщенность, ширину и другие параметры.

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

Если подбираете шрифт для своего проекта, попробуйте поискать в нашей статье: «11 бесплатных шрифтов с кириллицей».

Гарнитура

Шрифты объединяются в гарнитуры. Проще объяснить значение этого термина при помощи его английского аналога — font family — семейство шрифтов.

Гарнитура включает в себя несколько шрифтов, объединенных одними стилистическими особенностями, например наличием засечек.

Times New Roman, Gotham, Helvetica — это гарнитуры, т.е. наборы шрифтов, а не сами шрифты.

Леттеринг

Даже если вы тысячу раз напечатаете букву «А» одним и тем же шрифтом, она все равно будет выглядеть одинаково, потому что шрифты предназначены для многократного использования.

Леттеринг — дело другое: это ручная работа, в отличие от гарнитурных шрифтов. Рукописный стиль часто используют при создании логотипов, но он подходит не всем.

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

Леттеринг для кофе-бара

Каллиграфия

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

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

Кёрнинг

Кёрнинг — это изменение расстояния между двумя буквами. Если вы укажете одинаковые настройки кёрнинга между всеми буквами, текст будет нечитабелен, так как из-за индивидуальной формы букв будет казаться, что между ними разное расстояние:

В большинстве шрифтов используется автоматический кёрнинг, который решает эту проблему, но лучше настраивать его вручную.

Кёрнинг удачен только тогда, когда читатель его не замечает; если допустить ошибку в расположении букв, то даже самый интересный текст будет сложно воспринять.

Трекинг

Трекинг определяет расстояние между буквами в целом слове, фразе или предложении.

Если трекинг большой, в тексте появляется много «воздуха», если, наоборот, слишком маленький, то буквы стоят слишком плотно друг к другу — такой текст читать неудобно.

Интерлиньяж

Интерлиньяж — это расстояние между строками текста. Обычно интерлиньяж делают примерно в полтора раза больше размера самих букв — это помогает достичь баланса между текстом и «воздухом».

Растровые изображения (растр)

Представьте набор для вышивания крестиком. Схема вышивки — это сетка из цветных квадратов. На самом деле из такой сетки с квадратиками (пикселями) состоят многие изображения — они-то и называются растровыми.

Попробуйте увеличить фотографию или цифровой рисунок, и вы сразу увидите много квадратных ячеек. Самая известная программа, которая работает с растровыми изображениями, — Фотошоп.

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

Главный минус таких изображений — их невозможно уменьшить или увеличить без потери качества. При увеличении становятся видны пиксели, а при уменьшении часть из них теряется.

Векторные изображения (вектор)

Векторные изображения состоят из точек и линий, а не из пикселей, как растровые. По сути, каждое векторное изображение — это сочетание геометрических объектов: кривых, многоугольников, кругов и т.д.

С вектором работает, например, Адоб Иллюстратор. Векторное изображение можно увеличить и уменьшить до любого размера без потери качества. Поэтому логотипы всегда делают в векторе: их легко масштабировать и для маленькой визитки, и для огромного рекламного щита.

Однако добиться фотографической точности с помощью векторной графики почти невозможно — потребуется очень большое количество точек и кривых.

Цветовые модели: RGB, CMYK, Pantone Аббревиатура RGB расшифровывается как Red, Green, Blue (красный, зеленый, синий). В RGB из этой триады формируются оттенки цветов на экране монитора. Все изображения, которые вы просматриваете через компьютер, смартфон, телевизор, отображаются в этой цветовой модели.

Цветовая модель CMYK используется в типографии. Принтер, печатая изображение, использует и смешивает краски четырех цветов: голубого (Cyan), пурпурного (Magenta), желтого (Yellow) и черного (ключевого цвета, Key color). Многие цвета RGB не могут отобразиться в CMYK — при печати они тускнеют, и оттенки получаются совсем не те, которые ожидали.

Чтобы цвета на печатной продукции передавались без искажений, придумали цветовую модель Pantone. Для каждого оттенка Pantone указано точное процентное содержание цветов CMYK. Бумажные каталоги Pantone есть в каждой типографии. Выбрав необходимый цвет из каталога, можно быть уверенным в том, что при печати получится точно такой же цвет.

Как итог

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

Источник