Adobe sketch примеры. Полное руководство по началу работы в Sketch (с бесплатной шпаргалкой)

  • 07.05.2019

Многие видели в инстаграме оригинальные акварельные штрихи на фото. Это могут быть произвольные линии или целые слова. Как сделать мазки на фото? Давайте разберемся.

Перо художника

Для этого нам потребуется скачать бесплатное приложение Adobe Sketch на айфон или адроид. Программа доступна в официальных магазинах AppStore и Google Play. Что делать после того, как приложение закачалось на телефон?

Как сделать на фото мазки краски:

  1. Приложение требует регистрации. Вы можете зарегистрироваться через почту или войти с помощью Facebook или аккаунта Гугл.
  2. После регистрации нужно создать новый проект. Появится запись «Создать новый эскиз» и будет предложено несколько форматов. В зависимости от того, с какого устройства вы сидите, и какая у вас фотография, надо выбрать формат (альбомный, квадратный, книжный и тд).
  3. Далее появится белый холст. Слева от него будут расположены кисти, с помощью которых можно создавать шедевры. А с правой стороны это история всех действий, которые вы будете совершать с проектом.
  4. С правой стороны вы увидите плюсик в круге. Необходимо его нажать и выбрать вкладку «Слой изображения».
  5. Откроется фотопленка телефона, из которой нужно выбрать снимок.
  6. Если ваше изображение немного больше или меньше созданного проекта, его размер можно подкорректировать пальцами.
  7. Как сделать мазки на фото? Нужно выбрать 4 сверху акварельную кисть с красной каемкой.
  8. Если на нее тапнуть, то откроется небольшая менюшка с кружочками. Именно в ней можно откорректировать размер мазка, его контрастность, насыщенность, размер и выбрать любой оттенок по желанию.
  9. Чтобы вам было удобнее рисовать на холсте, нажмите на две стрелочки в правом верхнем углу для полноценного экрана.
  10. Нарисовать мазок с помощью пальца.
  11. Если результат вам не понравился, его можно отменить круглой стрелочкой в левом углу.
  12. Когда результат вас будет полностью устраивать, просто сохраните снимок в фотопленку.
  13. Вы великолепны!

Выделяйся!

Будьте самыми стильными! Используйте супер эффекты.

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

Приложение Adobe Photoshop Sketch можно скачать бесплатно как на iPhone, так и на Android-смартфоны.

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

Итак, начнем.

1. Открываем приложение и видим следующую страницу:

Тут уже видно проекты, которые я создавала ранее. Для создания нового проекта нажимаем на "плюсик" внизу экрана.

2. Выбираем вариант полотна для нашего будущего проекта:

Тут ориентируемся на фото, которое хотим украсить рисунком. Я обычно выбираю "квадрат".

3. Видим перед собой чистый лист для нашего будущего шедевра:

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

Выбираем вариант "слой изображения".

Выбираем "на iPhone", если фото уже есть в галерее и вставляем его, или же делаем новый снимок.

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

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

5. Выбираем кисть, которая нам по душе.

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

Если нажать на "плюсик", вам откроется полный список кистей. Там сможете найти любую на ваш вкус 😊

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

Я выбрала нежно розовый.

6. Ну и теперь, собственно рисуем что душе угодно. Я нарисовала такое вот сердечко.

Как создать собственную кисть на основе фотографии, отснятой на iPhone, iPad или устройство на базе Android, и используйте ее в Adobe Photoshop CC, Illustrator CC и Photoshop Sketch. Легко и просто! Для этого теперь есть Adobe Capture .

Для Adobe этот год выдался довольно богатым на всяческие релизы. Корпорация выпустила довольно много различных дополнительных приложений для мобильных платформ и в добавок анонсировала ряд еще более крутых новшеств, таких как Project Comet , Project Faces , секретное приложение с Monument Mode , а также пообещала в этом и следующем году прикрутить много полезных фич к Adobe Stock . На этот раз героем нашего небольшого обзора станет программа для мобильных устройств под названием Adobe Capture .

Принцип работы

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

Итак, какие возможности вы получите работая с Adobe Capture:

  • Создавать высококачественные кисти в любом стиле — фотореалистичные, натуральные, графические кисти или кисти для живописи. Любой отснятый объект можно превратить в кисть.
  • Источник вдохновения всегда рядом — создавать собственные кисти в любом месте, в любое время, используя фотографии с камеры, из каталога снимков или Adobe Creative Cloud.
  • Интерактивный просмотр посмотреть, как будет выглядеть кисть, прямо в процессе ее создания. Задать для нее дополнительные параметры (нажим, скорость и текстура).
  • Свободу творчества добейтесь нужного вида изображения с помощью масштабирования, обрезки и масок. Мазки кистей могут быть непрерывными или прерывистыми.
  • Creative Cloud Libraries вы можете сохранять кисти в Creative Cloud Libraries, а затем использовать их в приложениях Photoshop, Illustrator и Sketch. Кроме того, вы можете предоставлять доступ коллегам к своим ресурсам в Libraries прямо из приложения, в котором работаете.
  • Легко создавать профессиональные проекты создавайте кисти, произвольно задавая параметры или используя элементы управления точной настройкой, а затем используйте их в Photoshop и Illustrator.
  • Поддержка цифрового пера iPad Творите в Brush с помощью Adobe Ink. Посматривайте эффект настроек чувствительности к нажиму и скорости прямо в процессе создания кисти.
  • Поддержка Creative Cloud Market для iPad и iPhone создавайте кисти на основе шаблонов и изображений, импортированных из Creative Cloud Market.
  • Собственные кисти на мобильных устройствах или на настольном ПК воплощайте свои идеи, создавая кисти профессионального качества, и используйте их в настольных версиях Photoshop и Illustrator. Или импортируйте кисти в Photoshop Sketch, приложение Adobe для рисования на iPad или устройстве на базе Android и создавайте проекты, где бы вы ни находились.
  • Тесная интеграция с Creative Cloud вы можете систематизировать и сохранять кисти в Creative Cloud Libraries, а затем использовать их в приложениях Photoshop, Illustrator и Sketch, а также предоставлять к ним доступ своим коллегам.

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

FAQ

Вопрос: Доступна ли программа на русском языке?
Ответ: Да, программа помимо русского поддерживает также 17 самых распространённых языков.

Вопрос: Как и где я могу скачать Adobe Capture?
Ответ: Adobe Capture CC доступна для бесплатной загрузки в App Store и Google Play .

Вопрос: Нужен ли аккаунт в Creative Cloud чтобы пользоваться Adobe Capture?
Ответ: Да, вам необходимо быть зарегистрированным пользователем Adobe CC с платной подпиской или без неё.

Вопрос: Как создать, редактировать или удалить цветовую схему в Adobe Capture?
Ответ: Откройте приложение и кликните на иконку + внизу экрана. Приложение автоматически выберет 5 цветов из кадра, после чего вы сможете их изменить.

Вопрос: Как создать, редактировать или удалить Shapes в Adobe Capture?
Ответ: Откройте приложение и нажмите на Shapes, после чего на + внизу экрана. С помощью направляющих выделите интересующую вас область кадра. Сделайте фото. Нажмите Keep in Shape или Remove from Shape для управления областью. Нажмите (->) в верхнем правом углу, после чего введите подходящее название и сохраните в своей библиотеке.

Вопрос: Как создать, редактировать или удалить кастомную кисть в Adobe Capture?
Ответ: Откройте приложение и нажмите на Brushes, после чего на + внизу экрана. Сделайте фото или выберите подходящий снимок из галереи мобильного устройства, после чего следуя инструкциям обрежьте фотографию до той области, из которой вы хотите сделать кисть. После проведенных манипуляций введите название кисти и сохраните в свою библиотеку.

Вопрос: Всё что я сделал в Adobe Capture будет доступно для использования во всех программах Adobe?
Ответ: Нет. Вот таблица совместимости:

Вопрос: Как мне использовать контент, созданный с помощью Adobe Capture?
Ответ: Весь созданный вами контент вы можете вставить из Creative Cloud Libraries.

Вопрос: Как я могу поменять настройки приложения?
Ответ: Для этого на главном экране приложения необходимо нажать на гамбургер-меню и перейти во вкладку Settings.

Вопрос: Где я могу дать обратную связь по пользованию продуктом?
Ответ: Запустите приложение и кликните по иконке Capture, после чего на Give Us Feedback.