Формат скетч что это
Все не так плохо. 10 альтернатив покупке Mac’а — самых эффективных, самых действенных и законных (почти во всех странах):
1. Icons8 Lunacy
Инструкция: просто открывалка для Винды. Без всяких костылей. Качать тут.
2. Avocode / Zeplin
А также Teamviewer или Zoom.
Инструкция: придется завести друзей-дизайнеров с Mac’ом в каждой часовой зоне. И дальневосточный гектар лучше тогда не брать — этому способу нужен хороший интернет.
3. Насилие
Инструкция: выслеживайте хипстеров. У них часто Mac’и, а сами они, как правило, слабые и не дают сдачи.
4. Секс
Инструкция: постепенно занижайте свои стандарты. Ваша цель — некрасивые и богатые.
5. Терпение
Инструкция: если долго сидеть в Старбаксе, возможно кто-то попросит присмотреть за Mac’ом, когда пойдет в туалет.
Ваша целевая аудитория — любые девушки. Чем больше сумка, тем больше у вас времени.
6. Еще больше терпения
Инструкция: попросите разработчиков Sketch’а добавить поддержку Windows.
Кстати, у них очень удобный F.A.Q:
7. Сайты знакомств
Инструкция: на фотографиях игнорируйте лица. Ищите Mac’и.
8. Хакинтош
Инструкция: живите в странах с нежным законодательством в области софта.
В принципе, тут нам почти повезло.
9. Работа
Инструкция: прежде чем украсть Mac у своего работодателя, изучите пособия по безработице в стране. Рекомендуем Норвегию.
10. Деньги
Инструкция: если уж совсем прижмет, продайте пару бриллиантов или старых картин. На Маc должно хватить.
Две вещи мы можем сказать наверняка:
Photoshop, Sketch инструментарий UI/UX-дизайнеров: что выбрать для разработки интерфейсов?
В последнее время вопрос инструментария 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.
Формат SKETCH
В компьютерной среде имеется множество форматов файлов. Что бы они в себе ни содержали. И некоторые из них способны поставить в ступор начинающих пользователей. Но Sketch вполне может ввести в замешательство и продвинутого юзера. И это не шутки. Формат этот используется только профессионалами и имеет очень узкую направленность.
Что за формат такой?
Sketch – это расширение файла, использующегося программой с точно таким же названием. Она была разработана компанией Bohemian Coding и является продуктом для профессиональных дизайнеров. В этом файле содержится вся информация о текущем проекте: рисунок, его слои, правки и многое другое. Файл с таким расширением появляется в том случае, если в Sketch нажали на кнопку «Сохранить».
Преимущества Sketch
Чем так хорош Sketch? Почему разработчики решили использовать именно его для сохраненных проектов? Дело в том, что Sketch – проприетарный формат. Он целиком и полностью отражает философию программы и MacOS в целом. Полная закрытость. Также у него есть некоторые особенности, делающие его наиболее предпочтительным для дизайнеров.
Неограниченное количество слоев. Данный формат поддерживает многослойную структуру изображения (на манер всем известного PSD). Отличие от PSD заключается только в том, что там количество слоев ограничено. А в Sketch их можно сохранить столько, сколько нужно для текущего проекта.
Высокое качество изображения. Часто дизайнеры работают с несжатыми картинками. И данный формат позволяет не сжимать изображения при сохранении. То есть, если открыть Sketch одноименной программой, то все будет выглядеть именно так, как должно. А не так, как решил механизм сжатия.
Мультистраничность. Если речь идет о каком-то документе, то в одном файле Sketch можно сохранить неограниченное количество страниц. И все они будут точно в таком же порядке, какой был при работе над проектом. Для дизайнеров это очень важно.
Конфиденциальность. Ни один пользователь Windows не сможет открыть данный файл. А если добавить к этому возможность зашифровать его содержимое и защитить паролем, то попытка просмотреть Sketch даже на MacOS обречена на провал. Ни один известный формат не имеет такой крутой защиты.
Нет никаких искажений. Для дизайнера важно продолжать работу над проектом именно в том виде, в котором он был сохранен. И этот формат дает такую возможность. Если в изображениях с более популярными расширениями что-то неуловимо меняется, то в Sketch все остается точно таким же, как и было.
В общем, в этом формате можно сохранить какое угодно количество графической информации и вся она останется в первозданном виде после загрузки проекта в программе Sketch. Поэтому сей формат и был выбран в качестве основного.
Чем открыть?
Ответ на этот вопрос ищут многие. Но, к сожалению, открыть этот тип файла можно только той программой, которой он используется. То есть, самой Sketch от Bohemian Coding. Все бы ничего, но версия этого замечательного продукта существует только под MacOS. Под Windows программу портировать в обозримом будущем никто не собирается. Так что увидеть содержимое файла можно только в том случае, если у вас имеется MacBook или iMac. Хотя обыкновенный «хакинтош» (MacOS, установленная на классический ПК) тоже способен запустить программу Sketch.
Вероятно, такое игнорирование пользователей Windows связано с тем, что сия операционная система полна «дыр». Защита ее никуда не годится. А Bohemian Coding пекутся об авторских правах дизайнеров. Не стоит забывать и о том, что продукты от Apple просто созданы для работы с графикой. В то время, как лэптопы и ПК на Windows часто просто не могут дать качественную цветопередачу или правильно отобразить некоторые нюансы. Скорее всего, это и отталкивает разработчиков от детища Microsoft.
Как посмотреть содержимое файла Sketch?
Экспорт в другие форматы
Можно ли как-то просмотреть содержимое файла Sketch, если экспортировать его в другой (более популярный) формат? Можно. Но на данный момент нет конвертера, который сможет адекватно осуществить такую процедуру. Экспортировать этот формат можно в более привычные, TIFF, SVG, PNG и так далее. Все они отлично открываются стандартными просмотрщиками под Windows. Но есть один нюанс: для того, чтобы осуществить экспорт нужна программа Sketch. И MacOS тоже.
Заключение
Итак, Sketch – это формат, в котором заключен некий дизайнерский проект в первозданном виде. Открыть его не сможет никакая программа, кроме продукта от Bohemian Coding. Как-то конвертировать файл, экспортировать в другой формат или подвергнуть другим подобным процедурам нельзя. Ничем хорошим это не закончится. А если файл еще и защищен паролем, то лучше вообще бросить попытки его открыть. Все равно не получится. Экспортировать его в какой-нибудь более популярный формат можно только из программы Sketch. Но для этого нужен компьютер с установленной на нем операционной системой от Apple (MacOS). Без этого нечего даже и пытаться просмотреть проект.
Полное руководство по началу работы в Sketch с бесплатной шпаргалкой
Неважно, полный ли вы новичок, дизайнер на обучении, опытный профи, который переключается на новый продукт, — это статья для вас.
Во-первых, мы немного познакомимся со Sketch — что это такое, чем он завоевал свою популярность, как получить бесплатную триал-версию и установить приложение на Mac. Во-вторых, изучим интерфейс Sketch, я поясню основы и покажу некоторые фишки и приемы. В-третьих, мы коснемся более продвинутых функций приложения (кривые Безье, блендинг особенно впечатляют).
И, наконец, я поделюсь качественными ресурсами по Sketch, включая бесплатную шпаргалку на 99 пунктов, с которой очень удобно учиться работе в приложении. Звучит неплохо?
1. Почему Sketch
Некоторое время после релиза в 2010 году Sketch расценивался как легковесный инструмент для редактирования графики, с помощью которого дизайнеры UI и UX могли быстренько прототипировать дизайн приложений.
Сейчас Sketch гордо продается как визуальным, мобильным, иконочным, веб и продуктовым дизайнерам, и я думаю, это всего лишь вопрос времени, пока его разработчики, Bohemian Coding, с уверенностью не начнут ориентировать свой продукт и на иллюстраторов и художников.
Что такое Sketch?
Sketch — одна программа из группы под названием “векторные графические редакторы”. Другие представители этой категории — Adobe Illustrator, CorelDRAW и OpenOffice Draw.
Векторный редактор отличается от пиксельных (растровых) редакторов. В пиксельном графическом редакторе (например, Adobe Photoshop, GIMP или Microsoft Paint), когда вы рисуете фигуру, сохраняется масса данных о каждом пикселе, что со стороны выглядит как круг:
Но в векторном редакторе вроде Sketch сохраняется только математическая основа самой фигуры. На практике это означает, что вы можете масштабировать вектор, сколько угодно и никогда не увидите никакой потери в качестве изображения. Дизайнеры и иллюстраторы обычно отдают предпочтение исключительно векторам, потому что их всегда можно конвертировать в пиксели. Куда сложнее пойти обратным путем.
В Sketch, только если вы не вставите пиксельную графику, например, фото, все слои векторные. Каждый объект состоит из опорных точек и кривых, которые можно просмотреть и отредактировать, кликнув дважды на фигуре. Но мы к этому еще вернемся!
Все хорошее — компактно
Более того, постоянная программа Bohemian Coding по улучшению ПО означает, что, когда появляются баги, их довольно быстро фиксят.
Официальный соперник Sketch, Adobe Illustrator, существует на рынке с 1987 года (!) и остается стандартом в индустрии традиционных дизайн-студий. Но для дизайнеров новой генерации Sketch дает огромную возможность изучить основы и достичь отличных результатов.
Учиться дизайну в Sketch быстро, окупаемо, и весело!
2. Начало работы в Sketch
Сначала скачайте Sketch
Если вы совсем новичок, посетите страничку Getting Started на официальном сайте Sketch. Sketch будет работать на любом Mac-е с OS X El Capitan (10.11) или выше, и вы можете скачать бесплатную 30-дневную триал-версию.
Постарайтесь не заблудиться в интерфейсе
Когда работаете в Sketch, большую часть времени вам придется смотреть на вот такой экран. Это скриншот с надписями на основных разделах интерфейса и пояснением, что они делают.
Далее, ознакомьтесь с некоторыми важными командами
a. Создание артбордов
Когда вы открываете Sketch первый раз, у вас будет пустой канвас. Первым делом, вам наверняка захочется создать артборд, что позволит держать дизайны в порядке. Вы можете создавать столько артбордов, сколько хотите, на одной странице.
Чтобы создать новый артборд, нажмите “Insert” на панели инструментов, затем выделите “Artboard”, кликните на прямоугольник и перетяните мышкой на холст. Или же можете просто нажать “A” на клавиатуре, а затем кликнуть и потянуть.
b. Рисование фигур
С помощью кнопки “Insert” в панели инструментов вы можете получить доступ к большему набору разных фигур типа звезды, многоугольника, треугольника и т.д. Вот тут я рисую звезду:
с. Выравнивание и распределение объектов
Когда я только начал работать в Sketch, я влюбился в их кнопки выравнивания и распределения, которые живут вверху панели Инспектора. Вот что они делают:
Распределить по горизонтали
Уравнивает горизонтальные отступы между выделением из 3 или более объектов.
Распределить по вертикали
Уравнивает вертикальные отступы между выделением из 3 или более объектов.
Выравнивание по левому краю
Выравнивает левые края 2 или более выделенных объектов.
Выравнивание по горизонтали
Выравнивает горизонтальные центры выделения из 2 или более объектов.
Выравнивание по правому краю
Выравнивает правые края 2 или более выделенных объектов.
Выравнивание по верху
Выравнивает верхние края 2 или более выделенных объектов.
Выравнивание по вертикали
Выравнивает вертикальные центры выделения 2 или более объектов.
Выравнивание по низу
Выравнивает нижние края 2 или более выделенных объектов
Эти команды выполняют две критически важные функции. Во-первых, они помогают вам работать эффективно, так как вы можете быстро создать кучу объектов и затем выровнять и распределить их равномерно всего за пару кликов. Теперь никаких отчаянных перетаскиваний объектов точно в нужных пиксель! И, во-вторых, они помогают очистить композицию в конце дизайн-процесса, так как вы точно знаете, что все элементы точно позиционированы и распределены, все на своих местах.
Вот пример, как я использую выравнивание по левому краю (кнопка “Align left”):
d. Дублирование слоев и артбордов
В Sketch очень легко дублировать слои и артборды. Кликните правой кнопкой мышкой на любом объекте, выберите опцию “Duplicate”, чтобы создать копию поверх оригинала. Как вариант, просто выделите объект и нажмите команду + D, или просто удерживайте alt, а затем перетяните объект, который хотите скопировать. Вот я дублирую свою звезду:
Дублирование артбордов также важно в налаживании продуктивного дизайн-процесса. Дублируя артборд после каждого важного изменения, вы всегда можете легко вернуться на более раннюю версию без необходимости пользоваться опцией “Undo” сотни раз:
e. Еще несколько подсказок по главным опциям в Sketch
Эта серия советов по Sketch поможет освоить программу и улучшить свою продуктивность:
И, наконец проработайте эти уроки по Sketch. Они на русском языке
Если вам нужны еще уроки и советы по началу работы в Sketch, вы найдете их в разделе “Дополнительные ресурсы” в конце этого поста.
3. Более продвинутые приемы работы в Sketch
Как только вы справитесь с основами, настанет время перейти к более продвинутым возможностям, доступным Sketch-пользователям!
Освоение кривых Безье
Питер Новел написал шикарную статью о работе с кривыми Безье. Он описывает важные принципы работы с этим видом объектов, поясняет разницу между разными элементами управления, дает практические советы по работе с этим векторным инструментом в Sketch. Ознакомьтесь!
Sketch позволяет создавать собственные “символы”. Это означает, что вы можете сохранить слой или группу слоев как символ, и затем вставлять его в документ, как если бы это была простая фигура.
Особенными символы делает то, что вы можете кликнуть дважды на “сущности” символа, отредактировать “главный” символ, и все сущности этого символа в документе будут автоматически обновлены. На этой GIF-ке я создаю символ в форме листочка, вставляю еще две его сущности, и затем меняю непрозрачность родительского символа. Посмотрите, как остальные меняются:
Продвинутые опции ресайза
Когда работаете с сгруппированными объектами, может понадобиться, чтобы объекты в группе вели себя по-разному при ресайзе. Для каждого объекта внутри группы Sketch позволяет выбрать свой метод ресайза.
Детальнее о режимах блендинга
Использование Sketch для печатного дизайна!
Для тех, кто быстрее и более продуктивно работает в Sketch, имеет смысл подготавливать и печатные документы в этой программе вместо какого-то специализированного пакета вроде Adobe InDesign. В этой потрясающей статье Питер Новелл поясняет, как использовать Illustrator для подготовки PDF, который был создан в Sketch для печати.
Испытайте свои навыки в этих мини-проектах
Скачайте шпаргалку из 99 горячих клавиш для Sketch!
Если эта статья показалась вам полезной, почему бы не скачать эту шпаргалку? Сохраните эту PDF-ку на компьютере для быстрых справок, или ее можно распечатать и прикрепить на стене у монитора.
Как вам Sketch? Как ваши успехи в работе с этой программой? Делитесь в комментариях!