Sketch или Photoshop: какой из этих инструментов веб-дизайна подходит именно вам? Создаем эффект карандашного наброска на фотографии в фотошоп.

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

Шаг 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. Для наглядности я отключила слой с буквами и оставила только штрихи.

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

В последнее время вопрос инструментария UI/UX-специалистов стоит очень остро: какое ПО использовать для разработки интерфейсов? Мы в нашей компании также горячо обсуждаем этот вопрос. И дискуссия часто имеют очень острый характер. Что выбрать для работы? Какой редактор более функционален для той или иной задачи дизайнера? Перечень наших задач достаточно широк, начиная с создания фирменного стиля и заканчивая полным циклом разработки сложных диджитал продуктов. Например, мобильных приложений для управления системами умного дома, полнофункциональных e-commerce систем.
Я не буду первым, кто поднял эти вопросы, но постараюсь дать на них ёмкие ответы. Возможно, моя статья будет интересна начинающим дизайнерам, которые еще не определились окончательно с направлением своей деятельности, или дизайнерам, которые хотят переквалифицироваться из одной специальности в другую.

Последние лет двадцать самым популярным графическим редактором для дизайнеров оставался Adobe Photoshop . Однако, недавно первенство компании Adobe на рынке инструментария для digital дизайнеров пошатнулось, в 2012 году компания Bohemian Coding выпустила Sketch . Sketch – это профессиональный векторный графический редактор, заточенный непосредственно под создание графических интерфейсов: веб, мобильных приложений, десктопных программ и прочих. На данный момент актуальной версией является Sketch 3. За эти 3,5 года компания Bohemian Coding проделала огромную работу по улучшению своего продукта, зафиксило множество багов, наростило функциональность и собственно выростила серъезного конкурента Photoshop. Сразу хочу внести важную ремарку: я не рассматриваю Sketch как непосредственного конкурента Photoshop . Однозначно, назначение этих программ изначально разное, соответственно, то, что для одного будет преимуществом, для другого может быть серъезным недостатком. Поэтому правильно было бы сделать не сравнительный обзор, как это делают многие, а осветить основные преимущества и свойства каждого из редакторов для конкретного кейса.

Назначение

Именно поэтому считаю корректным первым пунктом показать назначение каждой из программ.
Photoshop в основном работает с растровыми изображениями , однако имеет некоторые векторные инструменты. Он незаменим для ретуши фото, обработки изображений. Но функционал предназначенный для работы с векторной графикой в нем достаточно условный. Многие поклонники Adobe возразят мне, но тогда возникает логичный вопрос: зачем в арсенале Adobe есть отдельный векторный редактор Illustrator, если Photoshop умеет все? Именно наличие двух интерфейсов усложняет работу и требует дополнительного времени при решении задач по работе с векторной графикой.
Sketch же изначально заточен на работу с вектором , поскольку разработка интерфейсов подразумевает создание прототипов, фреймворков, иконок, UI-элементов, а зачастую эти элементы должны быть векторными.
Таким образом, чтобы выбрать каким из редакторов пользоваться, нужно понять, какие задачи придется решать с помощью данного инструментария.

Стоимость

Вторым по счету, но не по значимости, параметром для выбора того или иного редактора является стоимость и способ оплаты данного программного обеспечения. Приобрести Photoshop можно исключительно по подписке! Стоимость ежемесячного использования редактора составляет 20$ , и для разных регионов эта цифра может изменяться. Но суть остается та же. В отличии от Adobe компания Bohemian Coding пошла по обратному пути: Sketch продается за 99$ , это единоразовый платеж и все обновления пользователь получает бесплатно. Возможно в дальнейшем финансовая стратегия компании изменится, но пока они завоевывают рынок таким образом. Именно этот фактор, наверняка, сыграет роль в масштабах компании. Хотя и для фрилансеров немалозначимым является финансовое планирование своих ресурсов.

Мультиплатформенность

Еще одним значимым аргументом в выборе инструментария для дизайнеров станет платформа, на которой работает тот или иной софт. В нашей компании дизайнеры работают исключительно на Mac устройствах и большинство front-end разработчиков тоже. Поэтому тот факт, что Sketch существует исключительно для OS X , не стал для нас проблемой. А вот для дизайнеров, в распоряжении которых Windows устройства, это явно не решабельный вопрос. Конечно, можно заморочиться и поставить эмулятор OS X на винде, однако ничего путнего из этого может не получиться, максимум вы загрузите свой процессор и операционную систему обработкой ненужных процессов. В отличии от Sketch, Photoshop имеет отдельные версии для Windows и OS X . Поэтому в вопросе мультиплатформенности неизменным лидером остается Adobe Photoshop. Но, опять-таки, то, что на первый взгляд кажется недостатком, является сильным преимуществом в конкретных условиях. Поскольку Sketch существует только под Mac, в нем весь создаваемый контент отрисовывается с помощью средств маковской оси, используется стандартный графический движок от Apple. Именно этим разработчики добились максимальной продуктивности и быстроты работы.

Быстродействие и объем загрузочного файла

Являясь нативным Cocoa приложением, Sketch по минимуму использует нестандартные интерфейсные элементы, поэтому он имеет маленький объем. Загрузочный файл весит всего около 22 Мб . Он достаточно хорошо оптимизирован, в отличии от Photoshop, объем установочного файла которого составляет около 1 Гб .

Интеграция

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

Обучение

Если вы решили освоить Photoshop или расширить свои знания о данном графическом редакторе, то в вашем распоряжении масса образовательных источников . Существуют обучающие ресурсы как платные, так и бесплатные. Качество материалов также очень сильно разнится: от примитивных статей неавторитетных авторов до идеально структурированных последовательных видеоуроков квалифицированных профессиональных тренеров. В силу того, что Sketch относительно молодой софт, то и количество обучающих ресурсов не сравнимо меньше , чем у Photoshop. И, как правило, это платные материалы. Например, на известном образовательном ресурсе Udemi менее 40 курсов по Sketch. Однако, уже существуют и обзор от практиков Sketch . Надеюсь, со временем количество обучающих метриалов в сети будет увеличиваться прапорционально с ростом популярности графического редактора Sketch.

Конкуренция – двигатель прогресса

Существует масса других параметров и характеристик Photoshop и Sketch, охватить их все достаточно сложно, но вывод однозначен: каждый из рассмотренных мною графических редакторов хорош для решения конкретной задачи. Если рассматривать разработку интерфейсов, то мы в компании для себя сделали однозначный выбор в пользу Sketch. Этому способствовал комплекс факторов, перечисленных в данной статье. Photoshop по прежнему является лидером в работе с растровой графикой, но нельзя игнорировать тот факт, что появление Sketch дало сильный толчок в развитии 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, но и делает что-то "своё", а не тупо копирует функции.

Является лучшей альтернативой 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-китов, телефонных шаблонов и наборов иконок, делитесь ими в комментариях.

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,то есть послойно выделять элементы и заливать их разным цветом на отдельных слоях.
<