За несколько шагов создаем в фотошопе скетч эффект для текста. И появился 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 - эскиз, набросок, зарисовка) - это своеобразная схема, раскладка различных элементов. В скрапбукинге скетчи бывают как для страничек, так и для открыток.

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

Итак, чтобы нарисовать скетч в фотошопе, мы должны иметь примерную его схему на листике бумаги или в голове.

И, неплохо бы иметь базу разнообразных элементов в формате PNG (на прозрачном фоне), фоновых картинок и наборы разнообразных кистей.

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

Интересные кисти тоже можно поискать в интернете, например .
Подробно о работе с кистями и их настройках читаем .

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

А сейчас мы с вами попробуем сделать вот такой скетч.

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

Создаем новый документ заданного размера. Файл (File)/ Новый (New).

Задаем ширину и высоту. (Обращайте внимание на единицы измерения. Чтобы не создать файлик 1000х1000 см)

Разрешение 300 пикселей на дюйм.

2. Разбираемся, из каких элементов будет состоять наш скетч. У нас тут явно есть круги. Значит их и будем делать.

В палитре слои (layers) создаем новый чистый слой, нажав на кнопочку Создать новый слой

Чтобы получился круг, а не овал, во время создания, удерживаем shift.

Закрашиваем выделенную область выбранным цветом. Следим, чтобы при этом у нас был активен новый чистый слой. Тогда мы сможем перемещать кружок и изменять его размеры.
После этого, снимаем выделение - ctrl+D

По такому же принципу, делаем еще один кружок на новом слое. Закрашиваем его белым цветом.

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

В открывшемся окне, настраиваем толщину и цвет контура

3. Остальные элементы на нашем скетче, это либо уже готовые картинки в PNG, либо кисти.

Цветочки/ веточки /пуговки - перетягиваем на документ из просмотрщика или коммандера. Просто берем файл мышкой и затягиваем в документ. При перетягивании картинки станут смарт-объектами. Про особенности работы с ними можно почитать .

Перетягиваем элемент, нажимаем Enter

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

Так поступаем со всеми дополнительными элементами.

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

Если у вас в наборе нет нужной кисточки, скачиваем набор с интернета (файлик с расширением.abr)
Выбираем инструмент Кисть (Brush), на панели свойств кликаем по параметрам кисти, потом на кнопку-шестеренку и в выпавшем списке выбираем Загрузить кисти (Load brushes)

Далее выбираем путь на компьютере к файлу с кистями (туда, куда вы его сохранили).
Нажимаем Ок и кисти появятся у вас в наборе в самом низу.

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

Слои накладываются друг на друга в том порядке, в котором вы их создаете. Но в палитре Слои (Layers) их можно менять местами.

5. У каждого элемента на вашем скетче свой цвет. Можно работать с каждым слоем по отдельности и привести работу к нужной цветовой гамме. А можно сделать документ черно белым.

Самый простой способ, подходящий для документа с несколькими слоями - сделать корректирующий слой.

Кликните по самому верхнему слою в палитре Слои.
Затем снизу в палитре нажмите на кнопку создания корректирующего слоя и выберите Hue/Saturation (Цвет/Насыщенность)

У вас появится еще один слой - корректирующий (при необходимости его можно выключить, как и любой другой слой).
И откроется палитра с настройками слоя. В ней значение Saturation (Насыщенность) ставим "-100"

Вот и все. Наш скетч готов.

Если планируем и дальше вносить изменения в этот документ, со сохраняем файл в формате PSD. Все слои сохранятся. Для интернета сохраняем в формате JPG. Все слои автоматически сольются в один.

Надеюсь МК был вам полезен.
Если что-то непонятно - задавайте вопросы.

В последнее время вопрос инструментария 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. Самым ярким доказательством тому – появление множества арт-бордов и возможность отображения превью на мобильном устройстве. Действительно: конкуренция – двигатель прогрса.

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

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

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

Когда была выпущена 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, но и делает что-то "своё", а не тупо копирует функции.