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

Этот эффект является частью экшена с карандашным наброском, который можно приобрести на Envato Market .

1. Добавляем фото девочек

Создайте новый документ размером 850 на 636 пикселей. Конечно, вы можете выбрать иной размер для PSD-документа, но вам придется пропорционально изменять размеры всего, что есть в этом уроке. В документ поместите изображение девочек.

2. Добавляем порванную бумагу

Шаг 1

Я прикрепил PNG-изображение бумаги, которым вы можете воспользоваться. Но если вы хотите сделать свою текстуру разорванной бумаги, то это достаточно просто. Вы можете взять кусок плотной бумаги или картона и неаккуратно разорвать его, чтобы получить кусочек такой формы, как вы хотите. Затем поместите его на плоскую поверхность, желательно контрастного цвета (например, черного, если бумага белая).

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

Шаг 2

Загрузите снимок на компьютер и откройте его в Photoshop. При помощи инструмента Magic Wand (Волшебная палочка) выделите кусок бумаги и удалите фон.

Шаг 3

Скачайте изображение клочка бумаги и поместите его на новый слой.

Шаг 4

Нажмите Ctrl + T, чтобы вращать клочок бумаги. Поместите его над той областью, которую вы хотите превратить в карандашный набросок.

Шаг 5

Дважды нажмите Ctrl + J, чтобы создать две копии слоя с клочком бумаги. Назовите их « torn paper 1» и «torn paper 2» («порванная бумага 1» и «порванная бумага 2»).

Шаг 6

Добавьте стиль слоя Drop Shadow (Тень) к оригинальному слою с клочком бумаги. Цвет тени - #000000.

Drop Shadow (Тень):

• Непрозрачность: 43%;
• Угол: 120 градусов;
• Смещение: 7 пикселей;
• Размер: 5 пикселей.

3. Создайте четыре копии слоя с девочками

Шаг 1

Нажмите Ctrl + J четыре раза, чтобы создать четыре копии слоя с девочками, назовите их Girls 1 , Girls 2 , Girls 3 и Girls 4 (Девочки 1, 2, 3 и 4).

Шаг 2

Зажмите клавишу Ctrl и выделите все слои с девочками на панели слоев. Поместите их над слоем с клочком бумаги.

4. Воспользуйтесь фильтрами Размытие в движении и Тушь

Шаг 1

Отключите видимость всех слоев-копий кроме слоя Girls 1.

В качестве основного цвета выберите белый, а фонового - черный.

Шаг 2

Теперь, выбрав слой Girls 1, нажмите Filter > Sketch > Graphic Pen (Фильтр > Галерея Фильтров > Эскиз >

• Длина штриха: 7;
• Тоновой баланс: 21;
• Направление штриха : по диагонали вправо.

Шаг 3

Нажмите Filter > Blur > Motion Blur (Фильтр > Размытие > Размытие в движении). Смещение: 1 пиксель.

5. Воспользуйтесь фильтрами Тушь и Шум

Шаг 1

Включите видимость слоя Girls 2, режим наложения измените на Multiply (Умножение), непрозрачность на 30%.

Шаг 2

Нажмите Filter > Sketch > Graphic Pen (Фильтр > Галерея Фильтров > Эскиз > Тушь). Настройки фильтра, как на изображении ниже, но если вы воспользовались другим фото, то, возможно, настройки потребуется изменить.

Настройки фильтра на скриншоте:

• Длина штриха: 15;
• Тоновой баланс: 51;
• Направление штриха: по диагонали вправо.

Шаг 3

Нажмите Filter > Noise > Add Noise (Фильтр > Шум > Добавить шум). Эффект: 43%

6. Воспользуйтесь фильтром Ксерокопия

Шаг 1

Включите видимость слоя Girls 3, режим наложения измените на Multiply (Умножение), непрозрачность 100%.

Шаг 2

Нажмите Filter > Sketch > Photocopy (Фильтр > Галерея Фильтров > Эскиз > Ксерокопия).

Настройки фильтра на скриншоте:

• Детализация: 1;
• Затемненность: 50

7. Воспользуйтесь фильтром Акварель

Шаг 1

Включите видимость слоя Girls 4, режим наложения измените на Color (Цветность), непрозрачность 100%.

Шаг 2

Нажмите Filter > Artistic > Watercolor (Фильтр > Галерея Фильтров > Имитация > Акварель). Пока можете скрыть видимость слоя Girls 4.

Настройки фильтра на скриншоте:

• Детализация: 4;
• Глубина теней: 0;
• Текстура: 1

8. Создайте кусочек наброска при помощи Обтравочной маски

Зажмите клавишу Ctrl и выделите слои Girls 1, Girls 2, Girls 3 и Girls 4. Кликните правой кнопкой мыши по выбранным слоям и выберите Create Clipping Mask (Создать обтравочную маску).

9. Создайте рваный край у бумаги

Шаг 1

Включите видимость слоя Torn Paper 1, режим наложения измените на Multiply (Умножение), непрозрачность - на 57%

Шаг 2

Включите видимость слоя Torn Paper 2. Кликните по кнопке добавления слой-маски на панели слоев, чтобы добавить маску к слою Torn Paper 2.

Шаг 3

Создайте новый слой под слоем Torn Paper 2 и залейте его белым цветом.

Шаг 4

Кликните по миниатюре слой-маски слоя Torn Paper 2. Нажмите Image > Apply Image (Изображение > Внешний канал).

Шаг 5

Нажмите Image > Adjustments > Levels (Изображение > Коррекция > Уровни) и измените настройки на такие же, как на скриншоте ниже. Входные значения: 56, 1.81, 67

При помощи кисти вы можете рисовать белым цветом внутри слоя Torn paper 2, если хотите усилить эффект рваного края.

Шаг 6

Удалите слой с белым фоном, чтобы увидеть эффект.

Шаг 7

С нажатой клавишей Ctrl щелкните по слоям Torn paper 1 и Torn paper 2. Затем, кликните правой кнопкой мыши по выбранным слоям и нажмите Create Clipping Mask (Создать обтравочную маску).

10. С легкостью перемещайте эффект наброска

Если вы хотите превратить в набросок другую часть своего рисунка, просто зажмите клавишу Ctrl, а затем щелкните по слоям Torn paper 1, Torn paper 2 и Torn paper.

При помощи инструмента Move (Перемещение) измените положение кусочка бумаги.

Поздравляю! Вот и все!

В этом уроке вы научились создавать эффект наброска на фотографии в Photoshop с вашими снимками всего за несколько шагов.

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

Photoshop никогда не был пригоден для веб-дизайна, но в течение длительного времени у нас попросту не было ничего другого. Сравнивать Sketch и Photoshop - это как сравнивать кислое и длинное. Все зависит от того, для чего вы используете программу. Но сейчас все меняется и Adobe уже начала более осознанно подходить к разработке приложений. Давайте же посмотрим на то, как Adobe отбивается от конкурента...

Экспорт Assets

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

Вот быстрое сравнение двух функций:

Sketch

Выберите слой и нажмите кнопку "Make Exportable" в нижнем правом углу. По желанию, можно определить такие параметры, как size, suffix и format в зависимости от того, как и для какого типа устройств будут использованы изображения. Sketch помнит каждый экспорт. Это называется "Slice". Вы можете получить доступ к этим ним в интерфейсе с «command+shift+e », чтобы повторно запустить один, два или все эти кусочки снова.

Photoshop

Adobe делает это по-другому. Сперва включите функцию, перейдя в меню File - Generate - Image Assets .

Теперь создадим простой квадрат и сохраним документ. Photoshop автоматически экспортирует свои ресурсы в папку в зависимости от того, как вы назовите слой. Давайте начнем со square.png . Вы указали типа файла и Adobe создаст файл PNG. Остальную часть настроек можно оставить по умолчанию.

Можно также указать PNG8/PNG24 (example.png8, example.png24) или даже "example.jpg100%". Это значит, что будет создан файл JPG со 100% качеством, а не качеством в 90%, как установлено по умолчанию. Теперь давайте попробуем "200% example-retina.png, example.png". Всё будет автоматически обновляться при сохранении. На человеческом языке это значит "сделай мне обычный PNG, но в то же время сделай ещё и retina-версию для iPhone ".

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

Artboards

Артборды являются неотъемлемой составляющей Sketch так же, как они всегда были основной Adobe Illustrator. Ещё какое-то время назад в Photoshop не было ничего подобного.

Давайте сравним их.

Sketch

Нажмите кнопку "A" и Инспектор (на правой стороне) будут перечислены все доступные размеры холстов. Нажмите, выберите и наслаждайтесь.

Photoshop

При открытии нового документа вы будете иметь возможность начать с холста стандартных размеров. Кажется, что нет возможности работать параллельно с несколькими монтажными областями. Но если вы щелкните правой кнопкой мыши на "Move Tool" в панели инструментов, то сможете выбрать "Artboard Tool". После этого выберите "Size", а затем нажмите кнопку "Add New Artboard".

В качестве альтернативы, вы можете изменить размер монтажной области, используя параметр Size. Вы также можете изменить ориентацию холста с помощью "Make Portrait" и "Make Landscape". В Adobe пользовательский опыт стал более гибким и привычным для дизайнеров.

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

Выводы

Наверняка Photoshop будет идти по собственному пути развития и не очень оглядываться на то, каким путём идут конкуренты. Однако приятно осознаваться, что Adobe пробила стену непонимания и черпает идеи для инноваций из обратной связи своих пользователей. Наверняка настанет ещё то время, когда Photoshop догонить Sketch по популярности и функционалу, когда речь будет идти о проектировании интерфейсов. Кажется, что Adobe стремится не только конкурировать со Sketch, но и делает что-то "своё", а не тупо копирует функции.

sketch , буквально — эскиз, набросок, зарисовка)
Скетч особенно распространён в бумажном скрапбукинге и кардмейтинге,менее распространён в цифровом...но от этого он не становится менее полезным.
Вот что пишут про скетч на сайте по Скрапбукингу
СКЕТЧИ
Я напишу небольшой урок про то как использовать скетчи в фотошопе.
Для написания урока используется Photoshop CS5.
можно найти множество скетчей...некоторые из них в формате jpeg но есть и в формате psd...
Нам удобнее в psd,конечно!
Я опишу использование обоих форматов,но более подробно о формате psd...
Приступим!

Часть первая.
Скачиваем скетч на котором будем тренироваться отсюда.
Как скачать с Яндекса?
Распаковываем архив и открываем файл psd в фотошопе.
Видим такую картину:
1.Дважды кликаем по папке и выбираем файл в формате psd

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

3.Приступаем к работе.Я рекомендую начинать с выбора фотографии,так легче потом определиться с цветами фонов и клипарта.
Открываем понравившееся фото...я выбрала бабочку...
Я работаю с 5-ой версии фотошопа и тут есть одна удобная функция,как открытие документов во вкладках,по принципу браузера...

4.Чтобы настроить такое открытие идём в Редактирование-установки-интерфейс и ставим галочку на "открыть документы во вкладках"

5.Теперь перетаскиваем наше фото в документ со скетчем,немного уменьшаем фото(если надо)- редактирование-свободная трансформация,располагаем фото над слоем "фон 4" ,щелчок правой кнопкой по слою с фото и выбираем "создать обтравочную маску"

6.Обратите внимание что у слоя с бабочкой появился значок-стрелочка указывающая вниз,это и есть обозначение обтравочной маски...указывающая на слой к которому она применена.Точно также я перенесла бабочку и на второе окно.

7.Займёмся текстом.Делаем активным слой с текстом(синий стал)и выбираем инструмент текст ,кликаем по слову текст на скетче,стираем слово и пишем своё

8.Ниже показано где выбрать другой шрифт,размер шрифта и его цвет.

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

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

11.Таким же образом поступаем со всеми остальными слоями с фонами.Можете просто залить каким то цветом или же открыть готовый фон и опять применить обтравочную маску.
12.Скетч как правило можно вращать.Повернём наш на 90 градусов по часовой стрелке.Для этого идём в изображение-вращение изображения- 90 градусов по часовой.Осталось только повернуть текст(инструментом свободное трансформирование.

Часть вторая.

Скетчи в формате jpeg можно использовать как визуальную подсказку к правильному и гармоничному расположению элементов,в начале урока я давала ссылку на них.Также можно отрисовать скетч и сохранить его в формате psd,то есть послойно выделять элементы и заливать их разным цветом на отдельных слоях.
<

Эта работа тоже сделана по этому скетчу

Вот в принципе и всё!Удачи вам!

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

Шаг 1.
Для начала давайте заготовим подходящую текстуру. Создаем новый документ, заливаем его 50% серым. Делаем дубликат слоя и меняем режим наложения на «Экран» (Screen), снижаем прозрачность слоя до 20%.

Шаг 2.
Наложим фильтр «Шум» (Noise) на этот слой с параметрами, как на рисунке ниже.

Шаг 3.
Создаем дубликат слоя с шумом, меняем режим наложения на «Умножение» (Multiply) и нажимаем Ctrl+I для инвертирования. Потом сдвигаем слой на 1 пиксель вниз. Теперь можно объединить все три слоя.

Шаг 4.
Чтобы сделать фон потемнее, я сделала дубликат получившегося слоя и снова поменяла режим наложения слоя на «Умножение» (Multiply).

Шаг 5.
Берем любой шрифт и пишем слово. В этом примере я использовала шрифт Tahoma, размеров 200 пикс, расстояние между буквами 50. Растрируем шрифт.

Шаг 6.
Удерживая Ctrl, щелкаем по слою с текстом, чтобы выделить его. Потом в меню выбираем «Окно» > «Контуры». Потом жмем на иконку внизу палитры «Сделать из выделенной области рабочий контур». Слой с текстом можно отключить.

Должно получиться так.

Шаг 7.
Выбираем инструмент «Кисть» (Brush). В дефолтовой комплектации фотошопа я нашла кисти «Thik Heavy Brushes» и выбрала оттуда последнюю кисть.

Шаг 8.
Нажимаем F5 и вызываем палитру настройки кистей. В закладке «Форма отпечатки кисти» ставим значения как на рисунке ниже.

Шаг 9.
В закладке «Двойная кисть» ставим значения как на рисунке ниже.

Шаг 10.
Создаем новый слой. И в палитре «Контуры» нажимаем иконку «Выполнить обводку контура кистью». Удаляем рабочий контур, чтобы не мешался. Потом можно к тексту применить фильтр «Резкость» (эффект 100%, радиус 1 пикс). Чтобы текст выглядел поярче, я сделала дубликат слоя. Получился такой результат.

Шаг 11.
Теперь выберем инструмент «Карандаш», размер 1 пикс, цвет белый и подрисуем короткие линии на углах букв. После применим фильтр «Размытие по Гауссу» (радиус 0,5 пикс) и фильтр «Шум» со значениями, как в Шаге 2. Для наглядности я отключила слой с буквами и оставила только штрихи.

Финал
В итоге получился такой вот результат.

Является лучшей альтернативой Photoshop, которая полностью заточена под дизайн интерфейсов. Хочу отметить, что ресурсы для Sketch сейчас не особо впечатляют, и моя миссия – исправить это.

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

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

Как же перейти с Photoshop на Sketch?

Скачайте бесплатную триал-версию

5) Импортируйте файл SVG в Sketch и отредактируйте, как вам нужно.

Миграция: мои паттерны

Если вы не чисто флет-дизайнер, вы, должно быть, повсеместно используете текстуры. Ваш клиент может их запросить. В Sketch есть настройки шума, но если вам нужно больше, вам понадобятся текстуры Photoshop в виде индивидуальных графических паттернов, импортированных в библиотеку паттернов Sketch. К сожалению, нет готового инструмента для миграции. Но, если вам нужны исходники для старта, я предлагаю попробовать Subtle Patterns

А как быть с моими PSD-файлами?

Вот тут у вас есть шанс начать с нуля. Как дизайнер, вы должны избегать оглядок назад на свою старую работу. Так как Sketch на 100% векторный, нет возможности импортировать PSD-файлы с полным сохранением стилей. Из моего личного опыта с Fireworks, и там процесс был далек от совершенства: многие стили были поломаны. Даже типографика не выглядела должным образом.

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

Sketch – еще новичок, но даже очень именитые дизайнеры уже начали делиться своими Sketch-файлами, обмениваться приемами и советами. Честно говоря, кастомизировать файл Sketch куда легче, чем PSD.

Выводы

Если вы не посвятили около 3 месяцев своего времени (в режиме полной занятости) Sketch, как это сделал я, вы все равно будете опираться на Photoshop и мыслить принципами этого приложения, редактируя старые PSD-файлы, используя Photoshop для редактирования фото, рисования и прочих графических работ. Но все равно полезно иметь альтернативу для создания дизайнов пользовательских интерфейсов. Инструмент, сочетающий в себе лучшие черты Photoshop, Illustrator и Omnigraffle. Инструмент, составляющий отличную конкуренцию Adobe.

Если у вас есть полезные файлы Sketch вроде UI-китов, телефонных шаблонов и наборов иконок, делитесь ими в комментариях.