6 декабря, 2017

- Как подобрать шрифтовые пары

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

GOOGLE TYPE
Каждая пара подобрана идеально профессиональными дизайнерами, скачать шрифты можно с сайта Google Fonts

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

TYPE WOLF
Можно найти множество интересных шрифтовых пар, которые украсят любой дизайн. Выбор шрифтовых пар невелик, но зато на сайте можно найти множество подборок с советами по выбору шрифтов, к примеру, там есть подборки с альтернативами таким популярнейшим семействам, как Helvetica или Futura.

А вот шпаргалка от THE ART OF MIXING TYPEFACES

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

Подробнее Свернуть
4 декабря, 2017

- Основа при разработке дизайна сайта

Этот материал — небольшая статистика по дизайнам сайта. Тем кто как и я не так часто занимается web-дизайном, можно смотреть как шпаргалку, рассматривать как базу, от которой можно оттолкнуться. Не помню, где я взяла эту информацию, но думаю, авторы меня простят, если я своими словами в кратце об этом напишу.

Заголовки:
Антиква: Geogia (28%), Baskerville (4%)
Гротеск: Arial(28%), Helvetica (20%), Verdana (4%), Надо учитывать, что Verdana при большом кегле смотрится неопрятно

Основной текст:
Антиква: Geogia (32%), Time New Roman (4%)
Гротеск: Arial(28%), Verdana (20%), Lucida Grande (10%)
Чаще всего используют именно гротески для основного текста.

Цвет:
Избегать чистого контраста (черные быквы на белом фоне). На чисто-белом листе лучше всего использовать серый тон текста (#272727). А вообще тенденции к чисто

Размер кегля:
Заголовок: 18-29 пикселей
Основной текст: 12–14 пикселей, но тенденции к увеличению

Соотношения:
Отношение размера шрифта заголовка к размеру шрифта основного текста 1,96. Таким образом, если вы уже выбрали кегль для основного текста, вам необходимо просто умножить значение на 1,96 (или просто 2), чтобы получить кегль текста заголовка.

Интерлиньяж:
Это известное правило в любой верстке: чем длинее строка, тем больше интерлиньяж

  • Отношение интерлиньяжа к размеру шрифта основного текста = 1,48
  • Отношение длины строки к интерлиньяжу = 27,8
  • Отношение расстояния между абзацами к интерлиньяжу = 0,754
Удивительно, что расстояние между абзацами составляет лишь 75% от интерлиньяжа. Причина этого может быть в том, что интерлиньяж включает в себя расстояние для подстрочных элементов, а так как большинство символов не имеют подстрочных элементов, то создается дополнительное расстояние под строкой.

Итого, простая формула подбора:
Определяем размер шрифта.
1) Умножаем на 1.5 (это интерлиньяж)
2) Умножаем на 27,8 (это оптимальная длина строки)
3) Умножаем на 2 (это заголовок)

Символов в строке:
Наиболее оптимальным считается 55–75, но на практике это 75–85

Отступы:
Левый отступ в среднем 11,7 пикселей, считая от левой границы области.

Подробнее Свернуть
17 апреля, 2017

- Печать в 2 триадные краски

Возникла необходимость напечатать газету в 2-х триадных цветах. Казалось что может быть проще. Но вот с картинками пришлось немного повозиться. Итак, открываем Photoshop

1. Снимаем всю информацию о цвете, делаем изображение монохромным (Image/Mode/Grayscale)
2. Добавляем в изображение необходимые цвета (Image/Mode/Doutone).

В открывшемся меню, можно выбрать необходимые цвета. Если необходимо использовать триадные цвета (СМИК), то выбираем чистые 100% цвета (в моем случае это 100% black и 100% yellow). Обращаю внимание, что при использовании % от триады, Photoshop воспринимает цвет пантоном. В этом же меню, слева от цвета можно подкорректировать кривыми соотношения красок.

image

3. Для того, чтобы цвета сохранились в каналах, следует duotone-изображения превратить в multichannel (Image/Mode/Multichannel). Проверяем: на вкладке Channels данного изображения использованы только 2 канала, к которым в свою очередь можно применять цветокоррекцию.

image

4. Сохраняем иллюстрацию в формате Photoshop DCS (*.EPS). Изображение готово к импортированию. По аналогии можно использовать пантоны, вместо СМИКа, или использовать 3 и более краски. Все зависит от бюджета и дизайнерской задумки.

Подробнее Свернуть
13 апреля, 2017

- Как увеличить расстояние между словами

Существует иногда необходимость в заголовках увеличить кернинг между словами.

Но не так просто найти в программе indesign эту функцию по той, видимо, простой причине, что нет необходимости в частом ипользовании.
Увеличение расстояния между словами «Alt»+«Ctrl»+«\» (Windows) или «Option»+«Command»+«\» (Mac OS).
Уменьшение расстояния между словами «Alt»+«Ctrl»+«Backspace» (Windows) или «Option»+«Command»+«Delete» (Mac OS).

Подробнее Свернуть
19 апреля, 2017

- Состариваем фотографию

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

image

Открываем фотографию.
1. Превращаем ее в сепию: Image/Adjustments/Hue-Saturation. Хотя лично я предпочитаю делать это через корректирующий слой (см. картинку). Настройки тона и насыщенности регулируйте по своем вкусу.

image

2. Добавляем шума: не забываем сделать активным слой с фотографией. Идем Filtres/Noise/Add Noise. Значение Amount выбираейте исходя из размеров Вашей фотографии, не забудьте поставить галку «Monochromatic»

3. Царапины:Вот и подошло время к творчеству. Шариковой ручкой рисуем на листе бумаги царапины (гелевая ставит кляксы). Стараемся регулировать нажим и повороты линий

image

Сканируем. Переводим в номохромное изображение (Ctrl+Shift+U), и инвертируем (Ctrl+I). Переносим инвертированное изображение на нашу фотографию. Делаем режим наложения «Screen». Можно уменьшить прозрачность царапин.
Можно сделать несколько листов царапин. И регулировать их прозрачность по своему усмотрению

image
4. Бумага. Как дополнение. На этом можно и остановиться. Но согласитесь согнутый кусок и мятость придадут большую выразительность. Берем лист бумаги и комкаем его. Сканируем. Как и с царапинами: переводим в номохромное изображение (Ctrl+Shift+U), и инвертируем (Ctrl+I). Ставим на фото, делаем режим наложения «Screen», регулируем прозрачность.
Использовано фото Исаак Романовича (учредитель Общественного Движения «БЕССМЕРТНЫЙ ЛЕНИНГРАД» и художественный руководитель театра «БуФФ»).
image

Подробнее Свернуть