Сайт о телевидении

Сайт о телевидении

» » МК Как рисовать скетчи в фотошопе. Sketch или Photoshop: какой из этих инструментов веб-дизайна подходит именно вам

МК Как рисовать скетчи в фотошопе. Sketch или Photoshop: какой из этих инструментов веб-дизайна подходит именно вам

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

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


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

Скетч (от англ.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. Все слои автоматически сольются в один.

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

– нового приложения для iOS – вместо популярного проекта Adobe. Это самое впечатляющее противостояние в сфере инструментов для веб-дизайна 2016 года.

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

Но, как пел Боб Дилан, времена меняются, и Photoshop придется немного подвинуться, чтобы уступить место кому-то помоложе и посильнее. Новое приложение Sketch от Bohemian Coding кажется более гибким, функционально-насыщенным и простым в использовании. Кажется… это ключевое слово. Практически постоянно ведутся дебаты насчет того, может ли Sketch полностью заменить продукты компании Adobe для веб-дизайнеров.

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

Плюсы и минусы Photoshop

Photoshop – знакомый инструмент для 99% веб-дизайнеров. Вот почему он так популярен. Большинство дизайнеров довольно ленивы и не изменяют своим привычкам, так что процесс изучения нового инструмента точно не принесет им удовольствия. Когда вы привыкаете к какому-либо программному обеспечению, гораздо быстрее выполнять определенные действия в нем, чем изучать новые функции и “быстрые” клавиши.

Photoshop может использоваться как с Windows, так и с iOS , что делает его доступным для многих пользователей. Поскольку Adobe представил свои приложения Photoshop Mix и Photoshop Fix для iPad, у дизайнеров теперь есть возможность редактировать изображения или создавать макеты на ходу.

Однако ценовая политика компании Adobe последнее время снижает ваши шансы на использование Photoshop. Поскольку команда Adobe сменила ценовые предложения на ежемесячные планы подписки (полагаю, вы все знаете о Creative Cloud), многие дизайнеры отказываются от инструментов Photoshop, останавливая свой выбор на более доступном программном обеспечении, или прекращают обновлять свои Photoshop CS6 версии.

Однако, в Photoshop CC все еще есть одна особенность, благодаря которой веб-дизайнеры до сих пор используют программное обеспечение Adobe. Creative Cloud Libraries позволяет обеспечить сохранность всех ваших объектов и без лишних сложностей делиться ими между различными устройствами и продуктами Adobe, такими как Illustrator, InDesign и т.д.

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

Photoshop теперь имеет Артборды – инструмент, с которым уже знакомы те, кто пользовался Illustrator и Sketch. Этот креативный элемент позволяет вам иметь несколько «полотен» в пределах одного документа, что сэкономит время? которое раншье тратилось на открытие различных документов для преобразования объектов и обмена элементами. Аналогичные функции можно обнаружить в смарт- объектах, которые уже присутствуют в Photoshop некоторое время.

И появился Sketch…

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

И это не удивительно, так как Sketch предоставляет некоторые функции, которых нет в Photoshop. Это приложение, которое не потребляет много оперативной памяти и “весит” очень мало. В отличие от Photoshop, приложение Sketch предлагает менее громоздкое меню с большим количеством кнопок на панели инструментов. На первый взгляд их расположение может показаться немного тесным, но как только вы привыкаете к ним – они становятся достаточно удобными в пользовании. правильный выбор.

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

Конечно, многие дизайнеры отмечают, что Sketch не предоставляет широкий набор инструментов, как Photoshop. А еще у Photoshop есть бесплатные экшены , которые являются одними из самых удивительных изобретений, позволяющих сэкономить время для создания различных эффектов. Для расширения функциональности Sketch необходимо установить различные плагины. Однако эти плагины становятся настоящим “сундуком сокровищ”, если вы их установите. Они добавляют приложению удивительные возможности, которые вы не сможете найти в Photoshop. По крайней мере сейчас, ведь, как я уже упоминал выше, Sketch вдохновил Photoshop создать свою собственную версию Артбордов, так что – кто знает…

Несколько основных особенностей Sketch

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

Фокус на векторных изображениях

Sketch отреагировал на одну из самых популярных тенденций веб-дизайна последнего времени и стал полностью ориентированным на векторный дизайн и изображения. Эти легчайшие файлы появились в ответ на важность адаптивного дизайна и растущее использование экранов высокой четкости (да, Sketch идеально походит для применения на дисплеях Retina от Apple).

Создание макетов для различных размеров экрана всегда было трудоемким процессом, который требует большого количества времени. Sketch предлагает несколько инструментов, которые позволяют вам свободно и легко менять размер элементов. Его Mirror Plugin позволяет видеть, не отходя от кассы, как объекты будут выглядеть на экране iPhone или iPad. Никаких больше размытых линий, каждый пиксель учтен.

CSS логика

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

Кроме того вы можете преобразовать созданный элемент в символ, который может использоваться во всем дизайне. Что такое символы? Это следующая особенность Sketch, которую я хотел бы отметить.

Символы и динамические кнопки

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

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

Текстовые стили и управление цветом в Sketch

Sketch позволяет вам легко управлять оформлением и цветовой гаммой в рамках проекта. Для оформления можно создавать различные текстовые стили для встроенных элементов, таких как заголовки или текстовые блоки. Затем эти тексты применяются ко всем элементам того же вида в вашем проекте. Вносить изменения в текстовые стили проще простого. Если вы решили отменить шрифт для заголовка H2 и заменить его более подходящим, измените его один раз, а Sketch сделает все остальное. Изменения будут применены автоматически для всех H2 в вашем проекте.

Настройка цвета работает аналогичным образом. Можно создать цветовую палитру для всего веб-сайта на Moodboard (большое дополнение к Артбордам, что позволяет вам сохранить ваши файлы и элементы по щелчку одним кликом мышки). Цвета, которые вы желаете видеть в ваших дизайнах, будут храниться в Moodboards, и вы с легкостью сможете использовать любой из них для вашего следующего проекта. Кроме того Sketch позволяет получить доступ ко всем вашим файлам в одном Артборде, вы можете легко копировать и вставлять любой элемент стиля, включая его характеристики, цвета и стили для любого другого объекта, выбранного вами.

Что вы можете в одном приложении, но не можете в другом?

Я полагаю, вы уже впечатлены теми возможностями, которые предоставляет Sketch. Но не спешите выбрасывать ваш ПК и покупать Macbook, чтобы начать использовать Sketch. Возможно, вам сначала нужно просто посмотреть на то, что Sketch не может сделать для ваших проектов и что Photoshop может?

  • Редактирование изображений. Поскольку Photoshop был создан для редактирования фотографий, он позволяет идеально редактировать такого рода файлы. Его функционал и инструменты для редактирования изображений также превосходят возможности Sketch, что оставляет за Photoshop место короля в этой области.
  • Управление цветом. В вопросах управления цветом Photoshop выигрывает и эту битву. Он позволяет использовать все доступные цвета в любых вариациях. Sketch пока менее заточен на колористику элементов.
  • Простота в использовании. Photoshop имеет в своем распоряжении множество “горячих” клавиш, чтобы ускорить рабочий процесс. Тем не менее, Sketch не отстает от него благодаря своей универсальной административной панели. Вы можете адаптировать его панель инструментов к вашим потребностям и сделать работу с ним более удобной для себя.
  • Возможности веб-дизайна. С учетом всего, сказанного выше, Sketch является удивительным приложением для создания пользовательского интерфейса. В нем есть все, что может понадобиться дизайнеру пользовательского интерфейса: векторные элементы,изначальная адаптивность элементов, невесомые файлы, сетки и т.д.

Итог

Какой инструмент выбрать? Это главный вопрос, который вы могли задавать себе, читая статью. Честно говоря, решать только вам. Я просто предоставил краткое сравнение и подробные данные об обоих инструментах.

Photoshop тяжелее, сложнее и дороже (если вам нужно использовать Creative Cloud). Sketch достаточно легкий, кажется намного проще в использовании и стоит сейчас всего $99. В любом случае, вам все равно придется сначала научиться им пользоваться. Это не тот инструмент, которые вы можете скачать и начать проектировать с нуля, как профессионал. И не забывайте: вы должны иметь девайс, работающий на iOS для использования Sketch. Эти ограничения немного разочаровывают.

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

Я не знаю, вытеснит ли Sketch в ближайшее время Photoshop, но для дизайна веб-сайтов и пользовательских интерфейсов (не редактирования фотографий и изображений) он является именно тем приложением, к которому стоит присмотреться.

25 лет назад, 19 февраля 1990 года, братья Джон и Томас Нолл запустили небольшую программу, которая соединила компьютер со сканером. Проект назвали Photoshop. На протяжении двух десятилетий он был монополистом на рынке графических программ, а слово «фотошоп» стало нарицательным.

Однако, вероятно, первенство Photoshop пошатнулось. Сейчас многие веб-дизайнеры переходят на Sketch - продукт, созданный специально для UI-специалистов. Шеф-редактор сайт пообщался с разработчиками интерфейсов и выяснил, готова ли индустрия сменить поставщика программного обеспечения.

«Для меня переход с Photoshop на Sketch был крайне болезненным, - рассказывает Артур Касимов, продуктовый дизайнер "Яндекса". - Я, что называется, человек старой закалки. Помню ещё ранние версии Photoshop». За 25 лет Photoshop стал стандартом для индустрии веб-дизайна, несмотря на «вес» (программа занимает больше 1 Гб дискового пространства), невостребованные функции в интерфейсе и чрезвычайно запутанную процедуру покупки, на которую даже жаловался создатель соцсети «ВКонтакте» Павел Дуров.

Adobe также выпускает векторный Illustrator, из-за чего разработчикам интерфейсов часто приходилось постоянно держать открытыми сразу два редактора. «Кто-то выходит из этой ситуации выбором в пользу Illustrator, но в силу сформировавшихся привычек было жалко время на это», - рассказывает UI-специалист Антон Фролов.

«Photoshop cоздавался и развивался, как софт для фотографов. Потом его напичкали всем, что только в голову пришло. От этого редактор стал похож на неповоротливого бегемота», - считает продуктовый дизайнер «Яндекса» Артур Касимов. Сложности возникали и со скоростью работы и с производительностью. Например, макеты, содержащие большое количество слоев, заметно замедляли процессы в Photoshop. Особо ощущались «тормоза» при одновременной работе над несколькими макетами.

Кроме того, для создания стандартных интерфейсных элементов - таких как кнопка Mac OS, выпадающий список в браузере или прямоугольник с закругленными краями - приходилось проделывать иногда с десяток действий. Все это отражалось на скорости работы дизайнера. «Photoshop и Illustrator не заточены под веб-дизайн. Поэтому проектирование интерфейсов и любые попытки сделать что-то внятное иначе как костылями не назовешь», - считает UI-специалист компании MacPaw Дмитрий Новиков.

Впрочем, на рынке появлялись альтернативы Photoshop: GIMP, Krita, Paint.NET и другие. Однако они не могли предоставить даже близко необходимый набор инструментов для проектирования интерфейсов, считают UI-специалисты.

Появление Sketch

Несколько лет назад разработчики компании Bohemian Coding выпустили программу для Mac OS под названием Sketch . Первое отличие, сразу бросавшееся в глаза - приложение являлось альтернативой Photoshop, однако его интерфейс был больше похож на программу из пакета iWork - нативные иконки из Cocoa, минимальное количество инструментов на панели, единственный блок настроек, подстраивающийся под действия пользователя.

В отличие от Photoshop, Sketch не использует собственных средств для отрисовки создаваемого контента - эти функции возложены на встроенные инструменты Mac OS X: QuickTime, Quartz Extreme, Core Image, Core Animation, OpenGL и ColorSync. Благодаря этому даже последняя версия программы занимает всего 42 Мб на диске.

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

«Мы пробовали переходить на Sketch еще в конце 2013. Но это была его вторая версия - очень глючная. Мы убили кучу времени и тогда пришлось вернуться обратно в Photoshop», - рассказал руководитель отдела проектирования и дизайна интерфейсов Mail.Ru Group Юрий Ветров.

Появление отлаженной третьей версии Sketch привело к началу популяризации программы среди специалистов.

Sketch

«Sketch очень оптимизирован - в одном документе могут быть отрисованы десятки экранов приложения, доступные для редактирования без лишних действий, и никакой просадки в производительности, - рассказывает Антон Фролов, - Кроме того, очень продуманный интерфейс, ощущение, что это софт от тех, кто в нем же и нуждается - быстрое отображение отступов, удобная работа с символам и стилями, параметрами элементов, интуитивные шорткаты и так далее».

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

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

В последней версии Sketch появилась еще более глубокая интеграция с нативными средствами Mac OS X: поддержка iCloud, Time Machine, автосохранения, нативный рендер шрифтов, трансляция макетов на мобильное устройство.

«Cамое главное, на мой взгляд - продуманный интерфейс нарезки графики, который парой кликов позволяет указать, в какие папки, с какими именами и размерами нарезать графику. По умолчанию поддерживается нарезка для iOS и Android, но можно добавить и свои форматы», - делится своим опытом Антон Фролов.

Кроме того, часть работы в Sketch можно автоматизировать при помощи плагинов. Например, Measure и InVision, которые позволяют быстро и удобно подготавливать спецификацию для разработчиков. «Со Sketch я стал больше заботиться об автоматизации работы. Многие вещи, которым раньше уделял много времени и внимания, сейчас делаю с помощью плагинов, стараюсь найти более простой и быстрый способ решения задачи», - рассказывает Артур Касимов.

Переход на Sketch

«Преимущество Sketch - низкий порог вхождения, буквально любой может научиться работать в нем за пару дней», - считает UI-специалист компании MacPaw Дмитрий Новиков. - Важно, что здесь вы занимаетесь непосредственно дизайном, а не работой в редакторе - то есть сама программа становится незаметной, и вы можете сосредоточиться на создаваемом продукте».

Переход с Photoshop на Sketch, однако, может оказаться непривычным. «Я настолько привык к Photoshop, что от одной мысли о других графических редакторах мне становилось как-то не по себе, - рассказывает Касимов. - Ситуация осложнялась тем, что мои коллеги-дизайнеры, с которыми я тогда работал, уже перешли на Sketch и всячески его хвалили. Они подкалывали меня, смеялись. Но я продолжал придумывать отмазки (в первую очередь, для самого себя). Сначала я говорил, что перейду, когда сделают "зум" колёсиком мышки, потом уверял себя, что по окончанию проекта с Photoshop будет покончено. Я и сам видел, что скорость работы в Sketch у моих коллег возросла».

Новиков рассказывает, что ему удалось быстро перейти на новый инструмент благодаря радикальному решению - он удалил всё со своего Mac и оставил только Sketch: «Всего неделя и как будто всю жизнь в нем работал».

Одна из трудностей, по мнению продуктового дизайнера «Яндекса» Артура Касимова, заключалась в непривычных «шорткатах» Photoshop - в Sketch они по умолчанию были другими: «Я не сразу догадался вручную подстроить всё под себя. Но когда сделал это, скорость работы заметно возросла».

Также пользователям Photoshop будет непривычен принцип работы с векторными объектами - в Sketch он больше похож на Illustrator: «К этому я привыкал довольно долго. Но сейчас понимаю, что этот принцип лучше. Значительно лучше», - считает Касимов.

Отказ от Photoshop

Sketch - не идеальный продукт, считают многие опрошенные ЦП UI-специалисты. В программе все еще много багов. В интернете есть даже отдельные ресурсы, которые собирают ошибки и мониторят их исправление.

«Не хватает инструментов для командной работы, что очень актуально для студий и компаний с отдельными командами дизайнеров», - жалуется Фролов. Кроме того, в Sketch практически отсутствует работа с растром, что в некоторых задачах пока не позволяет полностью отказаться от продуктов Adobe.

«Я считаю, что не нужно отказываться от хорошего инструмента, - отвечает Дмитрий Новиков на вопрос об отказе от Photoshop. - Sketch не заменяет Photoshop полностью, он отлично подходит для создания сайтов и интерфейсов, но это не значит что я не могу пользоваться продуктом Adobe для подготовки фотографий или 3D-редактором для моделирования и рендера».

Однако учитывая низкую, по сравнению с Photoshop, стоимость приобретения Sketch ($99,99), Adobe может потерять большой кусок постоянных клиентов в лице UI-специалистов, считают дизайнеры.