Фотошоп для начинающих: обтравочная маска (clipping mask) .

Прототип и прототипирование

Для начала дадим определение понятию «прототип».

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

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

Преимущества прототипирования:

Повышается гибкость производства.
Повышается конкурентоспособность и качество производства.
Себестоимость продукции сокращается на 100-150%.

Недостатки прототипирования:

Денежные затраты. Нередко приходится делать не один прототип, а несколько. Всё это требует денег на материалы и производство.
Время. Чтобы сделать прототип, в любом случае придётся потратить определённое количество времени.

Прототипирование является первой стадией Product Evolution Canvas (на русский переводится как «канвас эволюции продукта»), и дальше речь пойдет о нем.

Подготовка

Откройте Photoshop и создайте пустой слой. Выберите инструмент Horizontal Type Tool (T) (Горизонтальный текст) и напишите слово LION.

Вот, что у меня получилось:

Как видите я создал документ с белым фотоном и чёрным текстом, хотя цвета здесь не имеют никакого значения.

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

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

Как видите, на панели слоёв теперь находятся три слоя: изображение со львами, текстовый слой и фоновый слой. Это всё, что мне нужно.

Где можно использовать обтравочную маску?

Пример обтравочной маски с текстом. Наложение эффектов стиля слоя на базовый слой, и наложение изображения на слой с текстом как маску.

Пример clipping mask виньетка. Простая виньетка фотография вписанная в фигуру облачка.

Пример использования в рисование. Рассмотрим нарисованный объемный шар при помощи обтравочной маски. На скриншоте ниже можете видеть, как выглядит готовый вариант шара и раскадровку. Слой базы является окружность, все остальное рисуется поверх и заключается в группу clipping mask.

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

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

Как преобразовать текст в векторы в Adobe Illustrator

Этот метод является тем, что называется «деструктивным». Это означает, что текст становится вектором и больше не редактируется. Этот метод особенно полезен, если нужно манипулировать векторами, создающими текст.

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

Теперь, когда текст представляет собой ряд фигур, вы можете применить обтравочную маску, а фоновое изображение заполнит фигуры. Из-за того, что буквы теперь имеют форму, их можно рассматривать как любую векторную форму. Например, если вы выберете объект > Обрезная маска > Изменить содержание вы можете добавить штрих вокруг фигур. Другой вариант — выбрать обтравочную маску в панелях слоя и выбрать эффект > Искажение и преобразование > Pucker and Bloat из меню. Перемещая ползунок, вы искажаете текст и создаете довольно интересную вариацию.

Product Evolution Canvas

Product Evolution Canvas (PEC) – это инструмент для компаний, создающих различные продукты, отлично подходящий для мозговых штурмов. Он состоит из двух компонентов – это:

Временные рамки.
Три этапа эволюции продукта.

Временные рамки – это, как понятно из названия, время. А что такое эволюция продукта? Давайте рассмотрим подробнее.

3 этапа эволюции продукта

Эволюция продукта – это весь процесс от создания прототипа до готового товара.

Он делится на три этапа:

Моделирование минимально-жизнеспособного продукта (прототипа или по-другому MVP).
Создание основного продукта (который перекрывает основные потребности потенциальных клиентов).
Производство полнофункционального продукта (идеальное решение проблемы пользователя).

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

Канвас эволюции продукта помогает ответить на вопросы коллег, клиентов и инвесторов о функционале продукта. Например:

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

Кроме того, Product Evolution Canvas упрощает:

Разработку стратегии улучшения продукта.
Установку дедлайнов.
Генерацию идей.
Презентацию продукта.
Мотивацию команды на работу.

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

Как работать с PEC

Работа с PEC предполагает прохождение трех этапов:

1	На первом этапе спрашивайте себя: «Что делает мой продукт функциональным?»
2	На втором этапе задавайте вопрос: «Как мне улучшить свой продукт, чтобы он соответствовал главным пользовательским сценариям?»
3	На третьем этапе уточняйте: «Какие элементы стоит добавить в продукт, чтобы он полностью раскрыл заложенный в нём потенциал?»

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

Нарисовать канвас на листе формата А4 или магнитной доске. Заполнить его элементами продукта.
Повесить в комнате, в которой работает ваша команда.
Постоянно дополнять.
Использовать в презентациях для пользователей и инвесторов.

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

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

Прототипировать можно:

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

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

Как в Coreldraw сделать прозрачный фон | Сделай все сам

Делать графические изображения при помощи программы Corel Draw – комфортно и увлекательно. Но сохранение файла в растровом формате сопряжено с некоторыми сложностями: изображение получается на белом фоне. При помощи определенных манипуляций дозволено сделать фон прозрачным.

Вам понадобится

Программа Corel Draw, произвольный файл с рисунком.

Инструкция

1. Установите на компьютере программу Corel Draw и запустите ее. Сделайте всякий векторный рисунок при помощи программы.

2. Зайдите в меню File и разыщите пункт Export. Определите формат экспортируемого файла как PNG и нажмите Export.

3. Позже нажатия Export появится информационное окно. Выберите в цветовом режиме (Color Mode) – RGB Color (24 bit) и подметьте галочкой «Прозрачный фон» (Transparent background).

4. Нажмите OK. Когда откроете файл в программе Adobe Photoshop – он будет на прозрачном фоне.

5. 2-й вариант – сделать файл с растяжением gif с прозрачным фоном. Для этого переведите изображение из векторного в растровое. Сделать это нужно так: откройте файл в программе Corel Draw.

Экспортируйте картинку теснее приятелем путем – File > Export. В появившемся окне выберите CPT – Corel PHOTO-PAINT Image и назовите файл именем, описывающим то, что там изображено. В нашем случае – «Стрелка».

Поставьте галочку вблизи Selected only.

6. После этого появится еще одно окно. В нем выберите нужный размер изображения и подметьте галочками Anti-aliasing (эта опция смягчает края изображения) и Transparent background (фигура будет на прозрачном фоне).

7. Сейчас предстоит работа с растровым изображением. Запустите растровый редактор Corel PHOTO-PAINT. В программе CoerlDraw кликните на Application Launcher и выберите Corel PHOTO-PAINT.

В этой программе откройте файл «Стрелка» через File > Open. В верхнем меню выберите Image > Paper Size. В окне, которое появится, задайте цвет фона. Класснее предпочесть Magenta. Нажмите OK. Фон определен.

8. Исполните сведение рисунка с фоном. Выберите в верхнем меню пункт Object > Combine > Combine All Objects With Background. Рисунок окажется на фоне, цвет которого вы определили. Сделайте маску.

Обнаружьте в верхнем горизонтальном меню инструмент Magic Wand Mask Tool и настройте его. Сделайте Anti-aliasing не энергичной и поставьте Tolerance на 0. Инструмент Magic Wand Mask Tool создает маску из пикселей картинки, аналогичных по цвету.

Рисунок приобретает слегка красноватый оттенок – это маска.

9. Сбережете рисунок в формате gif. Кликните в верхнем меню File > Export. Выберите место в компьютере, где будет сохранено изображение и установите растяжение gif.

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

Изображение сохранено в формате gif с прозрачным фоном.

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

Вам понадобится

– интернет-сервис Pixlr;
– изображение к статье.

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

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

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

Где продвигать Rx-препараты: 25+ диджитал-площадок

Собрали главные стратегии и площадки для продвижения рецептурных лекарств в интернете.

Спецпроект

Майндмэп

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

Примеры мудборда

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

Стоковые фото

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

Примеры шакалов

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

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

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

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

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

22 инструмента для дизайнера. Личный топ Владислава Тютюникова, Rambler Group

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

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

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

Примеры паттернов

Лицензия — право на использование платного шрифта

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

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

Примеры мокапов

Значимые элементы слишком близко к краю

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

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

Стили слоя (Layer Style).

Стили слоя, добавленные к базовому слою обтравочной маски, также воздействуют на слои, находящиеся внутри нее. Двойным щелчком по миниатюре базового слоя вызовите окно «Стилей слоя» (Layer Style) и попробуйте применить к нему различные параметры

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

Векторные фигуры (прямоугольник со скругленными углами) применены в качестве базового слоя для меню и заголовка сайта, а также промо-области справа. Еще я добавил в «Стилях слоя» параметр «Внутренняя тень»(Inner Shadow) для базовых слоев сайта.
Итак, из всего вышесказанного можно сделать вывод, что серьезная практическая работа в Фотошопневозможна без применения инструмента Обтравочная маска

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

Соберите страницу из блоков

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

Из полей и кнопок соберите форму, из ссылок соберите меню, крупные блоки расставьте по сетке, добавьте отступы. Ваша страница готова, а вы — супергерой!

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

— текст;
— выделение;
— колорпикер (нужно назначить);
() — проставить размеры (нужно назначить);
Пробел — рука двигать макет;
Пробел во время выделения — подвинуть начатое выделение;
, (, ) — менять масштаб;
Зажать пробел, нажать () и тянуть мышкой — менять масштаб;
() — показать или скрыть направляющие.

Все ссылки вместе:

Плагин PerfectPixel для Оперы и для Хрома.
Как назначить клавишу для выбора цвета в Фотошопе.

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

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

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

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

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

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

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

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

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

9 инструментов веб-дизайнера. Личный топ Дениса Ломова, Red Collar

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

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

Примеры леттеринга

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

Чистые цвета

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

Грязные цвета

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

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

Приготовьте блоки

После текста поработайте с цветами, рамками и полями. Чтобы узнать цвет фона или рамки блока, используйте в Фотошопе инструмент «Color Picker». По умолчанию у него нет горячей клавиши, но можно настроить. Не берите пипеткой цвет текста, вы можете попасть в крайний пиксель, у которого цвет чуть слабее из-за сглаживания. Берите цвет из той же панели, откуда взяли начертание и размер:

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

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

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

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

Я в таких случаях на глаз вычитаю из измеренного половину расстояния между строк (не межстрочного расстояния, а расстояния между низом одной строки и верхом следующей), и для более точного измерения иду в браузер и накладываю макет на вёрстку.

Наложите макет на вёрстку

Есть плагины для браузера, которые накладывают картинку поверх страницы. Я использую PerfectPixel. Экспортируйте макет из Фотошопа в формат PNG, установите расширение и наложите PNG поверх страницы. Можно менять прозрачность и двигать картинку.

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

Значения можно менять стрелками. Нажали на значение, там 65px. Жмёте вниз — число уменьшается, вверх — увеличивается. С зажатым шифтом шаг изменений не 1, а 10. Когда подобрали правильное значение, пропишите его в ваш CSS.

Методом наложения можно определять вообще всё: шрифт, межстрочное расстояние, отступы, рамки. Можно сверстать весь макет по PNG без Фотошопа. Но зачем, если большую часть параметров можно сразу точно измерить?

Насколько пиксель должен быть перфект

Если дизайнер нарисовал три как будто одинаковых кнопки, две из них высотой 40px и одна 39px, то у него дрогнула рука. Делайте все кнопки одной высоты.

Если расстояние между элементами 51px, можно сделать 50. Большие расстояния я округляю до 5. Большие — это как раз за 50. Средние позволяю себе округлять до чётных. Из 31 сделаю 32. Размеры шрифтов не округляю и вам не советую. Буквы при изменении кегля меняются не пропорционально. Числа меньше 28 тоже стараюсь не округлять: при таких размерах обычно каждый пиксель важен.

Самое главное: сделайте, чтобы каждый блок походил на свой портрет в макете. Когда вы округлили пару-тройку отступов, и поставили макет в левый верхний угол, что-то внизу страницы может не совпасть с макетом. Это не страшно. Главное, чтобы каждый блок попадал в макет с допустимой погрешностью, если макет на него надвинуть.

Эффект текст из текста

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

Первое, что я сделаю, — это скрою слой с изображением львов, кликнув по значку глаза слева от миниатюры нужного слоя. Затем при помощи инструмента Горизонтальный текст (T) вставлю на новый слой абзац случайного текста. Я использую случайный текст, потому что это всего лишь пример. Если бы я делал что-то конкретное, то случайный текст здесь был бы не уместен. Для текста я использовал чёрный цвет. А цвет текста LION я сменил на белый. Вот, что у меня получилось по окончании первого шага:

Расположение слоёв такое же, случайный текст располагается выше текста LION, а фоновый ниже всех.

Слой со львами отключен, поэтому просто проигнорируйте его.

Итак, пришло время второго шага, в котором случайный текст будет отображаться в тексте LION. Я последую инструкции, которую делал ранее. Наведите курсор мыши на линию между слоями со случайным текстом и текстом LION и нажмите Alt. Когда курсор превратится в стрелку, сделайте клик мышью. Вот, что у меня получилось:

За два простых шага можно добиться таких потрясающих эффектов.

Надеюсь, что я понятно объяснил, как работает обтравочная маска в Photoshop

Спасибо за внимание!

Как создать неразрушающую обтравочную маску

Самый быстрый способ использования текста в качестве маски в Illustrator — создать обтравочную маску. Все, что вам нужно сделать, Инструмент выделения выбрано, — нажать сдвиг и щелкните по тексту и изображению Слои или просто нажмите Command / Ctrl-A для выбора двух элементов в Artboard.

При выборе слоев выберите объект > Обрезная маска > Делать, Когда вы отпускаете мышь, текст преобразуется в маску, и изображение просматривается.

Что делает этот «неразрушающий» способ, вы можете использовать текстовый инструмент, чтобы выделить текст и исправить опечатки или ввести новый текст, не нарушая маски. Вы также можете щелкнуть по тексту и переместить его, чтобы искать другой «вид». И наоборот, вы можете выбрать объект на монтажной панели и, выбрав объект > Обрезная маска > Изменить содержание, перемещайте либо изображение, либо текст вокруг.

Непрозрачность (Opacity) и режимы смешивания (Blending Mode) .

Вы можете регулировать уровень непрозрачности базового слоя Обтравочной маски, изменяя значения непрозрачности для всех слоев внутри нее. Если сказать иначе, обтравленные слои принимают не только форму маски, но и подчиняются ее уровню непрозрачности. Это также относится и к режимам смешивания базового слоя. Например, если вы установите режим наложения для базового слоя на Мягкий свет (Soft Light) , то все слои, находящиеся внутри маски также будут иметь данный режим смешивания.
Кроме этого, для каждого обтравленного слоя возможна настройка режима смешивания сугубо индивидуально. Такой способ хорош для создания интересного, детального изображения.
В приведенном ниже примере, базовым слоем является форма сердца. Слой «Мох», расположенный выше, служит для текстуры, установленной на 28% непрозрачности. Верхний слой со спутниковой тарелкой имеет режим смешивания Жесткий свет (Hard Light) , и захватывает текстуру «Мох».