Уроки sketch – Скетчинг. Техника быстрого рисунка. Самоучитель бесплатно, инструкция

образовательный онлайн-курс «Sketch для веб-дизайна»

Название: «Sketch для веб-дизайна»
Тип: онлайн обучение
Длительность: 8 уроков за 8 недель
Домашние задания: есть
Авторы: Михаил Розов

Комплексные уроки Sketch и Полное руководство пользования векторным редактором для дизайна веб-сайтов

Кому подходит курс «Sketch для веб-дизайна»

Всем, кто желает создавать эффектный дизайн сайтов

• Быстрое освоение базы

  Ознакомление с интерфейсом и функционалом редактора проходит быстро. Так ты сможешь приступить к созданию веб-дизайна в кратчайший срок.

• 

Скетчинг. Техника быстрого рисунка. Самоучитель бесплатно, инструкция

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

Содержание статьи:

Что такое скетчинг

Суть скетча — передать необходимую мысль, без учета маловажных, незначительных деталей. Он может содержать как картинки, так и слова.

Рисунок в технике скетчинга выполняется быстро. Как неожиданно приходит идея или вдохновение, так же спонтанно рождается и скетч. Быстрый рисунок носит непостоянный характер. Его дорисовывают, исправляют, он не является завершенным произведением.

Зачем учиться технике быстрого рисунка

Если есть желание начать рисовать, то скетчинг самая подходящая техника. В этом направлении нет четких правил и рамок, ошибиться невозможно. Главное передать идею.

Скетчинг — это техника быстрого рисунка

Это способ отточить навык и мастерство рисования, и, кроме того:

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

Инструменты и материалы

Блокнот, карандаш, ластик — это минимальный набор вещей для скетчинга, которые под рукой:

• Графитовый карандаш бывает 3 цветов: черный, белый, серый. Карандаши различают по твердости. В России 3 шкалы твердости: М – мягкий, Т – твердый, ТМ – твердомягкий. Европейская шире: В – мягкий, Н – твердый, F – средний тон, НВ – твердомягкий. И в России и в Европе рядом с буквой маркировки стоит цифра, которая обозначает степень твердости.

Чаще всего для скетчинга используют графитовый карандаш

• Ластик бывает твердый, мягкий, твердый с вкраплением песка (для снятия верхнего слоя бумаги), клячка для снятия тона.
• Гелиевые ручки пользуются популярностью для создания скетчей. Это связано с тем, что в такой ручке используется гель или другая жидкость на водной основе. За счет этого процесс письма становится легче. Недостатки ручек — это большой расход чернил и высокая вероятность протекания.
• Белая гелиевая ручка используется для бумаги различных цветов или на других цветах на рисунке. Подойдет и в качестве корректора.
• Линер — чертёжная ручка, которая заправляется тушью. Существует 3 вида: одноразовые, со сменным или с заправляемым картриджем. Для рисунка скетча чаще выбирают одноразовые варианты. С помощью линера делают штрихи различной толщины. К плюсам относится то, что в такой ручке используют водостойкие чернила.

К особому виду линеров относят брашпен. Это ручка с наконечником в виде кисти. Различают 2 основных вида – тонкие, похожи на стержень фломастера и широкие, как кисть. Чернила в брашпенах водостойкие или на водных составах.

Популярные рисунки в стиле скетчинг — с использованием маркеров

• Есть 3 вида маркеров – художественные, декоративные и промышленные. Скетчеры используют художественные. Краски маркера водостойкие и смываемые, перманентные, не смешиваемые и смешиваемые, прозрачные и непроницаемые. Разнообразны и наконечники маркеров – квадратные, круглые, скошенные. В палитре маркеров более 350 цветов.
• Скетчинг с использованием акварели подразумевает водные краски. Бывает твердая, пастообразная и жидкая краска. Для техники быстрого рисунка используют профессиональную акварель. Стандартная палитра содержит 24 цвета.
• Уголь для рисования встречается в 3 вариантах: палочки, карандаши и прессованный уголь.

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

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

Свойства, на которые ориентируются при выборе бумаги для скетчинга, — это плотность, фактура, цвет. Для скетча подойдет бумага с плотностью от 120 – 130 г/м2, для работы с акварелью от 200г/м2. Главное правило – что бы она не была тонкой.

По фактуре бумага делится на гладкую, зернистую, с тиснением, крафтовую (грубая, прочная, коричневого цвета). Гладкая бумага будет удобна при рисовании крупных цветовых пятен, матовая для мелких деталей. Для акварели и туши гладкая бумага может не подойти, так как материал не задержится на ней.

Для скетчинга важно выбрать подходящую бумагу

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

Жанры скетчинга

Скетчинг (техника быстрого рисунка имеет самостоятельное направление) может быть выполнен в виде быстрой зарисовки и как скетч-рисунок. Рисунок — это работа, которую художник создавал несколько часов, тщательно прорабатывая.

Жанры скетча:

Жанр	Описание
Скетч интерьера	Зарисовка интерьера, дизайна, декора
Fashion-скетчинг	Скетчи, основанные на теме моды и всего что с ней связано
Скетч города	Изображение зданий, сооружений и городских пейзажей
Ландшафтный скетчинг	Рисунки скверов, парков, приусадебных и садовых участков
Ботанический скетчинг	Рисунки всего, что связано с флорой – цветочные композиции, растения, грибы
Продуктовый скетчинг	Рисунки на тему продуктов питания и еды
Travel-скетчинг	Наброски, сделанные в поездке
Скетч-портрет	Изображение человеческого лица
Промышленный скетчинг	Зарисовки техники и бытовых предметов

Приемы скетчинга

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

Карандашный скетч

Скетчинг (техника быстрого рисунка часто выполняется карандашом) является самым легко доступным способом. Требуются только простые приспособления – блокнот и графитовый карандаш.

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

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

Скетч маркером

При рисовании скетчей маркерами используют несколько приемов:

• Рисование с контурами.
• Рисование без контуров.

• Маркер, как дополнение к другому материалу.

Техника трех стадий

Эта техника подходит для новичков в скетчинге.

Включает в себя 3 этапа создания рисунка:

1. Набросок карандашом. На первой стадии создается карандашный набросок, на котором обозначаются контуры и основные элементы будущего рисунка.
2. Заливка цвета. На второй стадии заливаются основные цветовые пятна. Чаще для этого используют акварель, но можно и маркеры.
3. Обработка маркером. На завершающей стадии прорабатываются контуры рисунка, а также мелкие элементы и детали, придающие скетчу законченный вид.

Есть еще другой вариант трехстадийной техники, в которой последовательность пунктов изменена. После наброска карандашом делают обработку маркером, а затем заливку цвета.

Как научиться скетчингу

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

Как научиться рисовать в технике скетчинг:

• Начать можно с раскрашивания, постепенно переходя к сложному срисовыванию, а затем и к созданию своих рисунков. Рисовать будет проще, если делать это поэтапно.
• Для художника необходимы 2 навыка — это контроль своей руки и видение.
• Чтобы тренировать контроль рук, применяют механические упражнения. Их можно выполнять графитовым карандашом.
• Рисование кругов разного размера. Главное, чтобы круги не пересекались. Таким образом заполнить весь лист, стараясь нарисовать как можно больше кругов. Это упражнение помогает расслабиться, набить руку, тренирует зоркость.

Рисование кругов, разных по размеру и при этом не пересекающихся, помогает в процессе обучения скетчингу

• Второе упражнение связано с линиями. Заполнить лист штриховкой. Важно научиться наносить штриховку в разных направлениях, не поворачивая лист бумаги.
• Новичку в рисовании нужно научиться изображать базовый набор простых фигур – линия, треугольник, прямоугольник, овал.
• Чтобы нарисовать сложный предмет, его визуально разбивают на несколько простых фигур. Например, дом — это сложный объект, но мысленно его можно разбить на несколько простых – прямоугольник, треугольник, квадрат.
• При рисовании сложных рисунков используют закон перспективы: чем дальше предмет, тем он меньше по отношению к ближе расположенным. Использование этого закона делает скетчи трехмерными и объемными.
• На сложных скетчах прорисовывают свет и тень. Простая штриховка передает слабую тень, перекрестная создает более затененные участки.
• К сложным скетчам относятся портреты. Для их создания требуется внимательность и усердие. К портретам переходят, когда есть опыт в рисовании.

Советы новичкам

Опытные художники дают советы новичкам в некоторых технических вопросах.

Как не смазать рисунок

Первый шаг к качественному рисунку – аккуратное обращение с ним.

От прикосновений рукой зарисованный участок может размазаться, а на еще чистом листе останутся жировые следы. Чтобы этого избежать, под руку подкладывают лист бумаги. Для больших работ используют специальные приспособления – мостик или муштабель.

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

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

Как нарисовать локоны

Начинают рисование локонов с построения основы — черепа. Прическу разбивают на несколько основных частей и определяют их конфигурацию. Те волосы, которые располагаются отдельно от черепа, прорисовывают как отдельную деталь. Особенно тщательно прорабатываются локоны, расположенные в лобной доле.

Нарисовать локоны можно несколькими способами:

• Изображаются волнистые линии – контуры будущих локонов.

Рядом, не соприкасаясь, добавляются зеркальные линии, которые соединяются на концах.

• Рисуются прямоугольники, которые расположены по диагональной прямой.

Каждый последующий прямоугольник меньше предыдущего. Затем прямыми линиями соединяются противоположные углы.

• Рисуется усечённый конус.

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

Текстура

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

Вот некоторые примеры создания простых текстур:

• Текстура дерева создается с помощью вертикальных линий разной толщины, которые перемещаются и создают кривую полосу.

• Текстура бетона выполняется несколькими оттенками и каждый следующий темнее предыдущего. Наносится характерными мазками, двигаясь елочкой, в хаотичном порядке, меняя направление каждого мазка.
• Необычный способ создать текстуру камня. Из одной стороны губки для посуды нужно вырвать небольшие кусочки, разных размеров. Так, чтобы вся сторона стала неровной. Затем развести с водой любую удобную краску – акварель, тушь, гуашь. И получившейся губкой, аккуратно наносить узор.

Техника растушевки

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

Техника растушевки подходит для рисунков мягкими материалами, например, сангиной или углем. Растушевка — это растирание штриха по бумаге с помощью специальной палочки, скрученной из бумаги, ластика-клячки. С помощью этой техники придают объем фигуре и реалистичности рисунку в целом.

Для растушевки используют специальные бумажные палочки

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

Штриховка

Классическая штриховка – базовая техника рисования, необходимая любому скетчеру. Ее используют, чтобы показать направление светотени, тоновые соотношения, для придания текстуры и необходимой формы предмету. В скетчинге используют разные виды штриховки.

Правила штриховки:

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

• При каждом следующем слое не доводить штриховку до конца предыдущего ряда, чтобы не образовывался шов.
• Не стоит в одном скетче использовать и штриховку, и растушевку. Это придаст неаккуратность рисунку.

Существует много видов штриховки. Некоторые из них: короткие, параллельные, перекрестные штрихи, штриховка по контуру.

Управление карандашом

Скетчинг – техника быстрого рисунка, которая помогает строить визуальные карты. Чтобы начинающему скетчеру научиться рисовать, не обязательно заставлять себя держать карандаш правильно. Но стоит пробовать новые способы, они могут оказаться удобнее для руки. А если научиться, то есть выработать привычку правильно держать карандаш, то линии будут ровнее и точнее.

Способы держать карандаш:

• Держат карандаш «щепоткой», как для письма. При этом способе работают только пальцы, получаются короткие штрихи. Такой способ подходит для проработки мелких деталей, когда требуется особая точность.
• «За середину». Карандаш берется за середину и зажимается вытянутыми пальцами, располагается почти параллельно бумаге. В этом случае работает кисть, и рука расслаблена. При помощи этого способа наносятся длинные штрихи, задается тон скетча.
• «Под рукой». Карандаш зажат внутри ладони большим пальцем. Рука должна быть расслаблена. Этим способом прорисовываются длинные линии при работе над всем рисунком.

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

Применение разных линий

Линия – это основа скетча. Ими изображают контуры и тон (штриховка). Линии могут быть: прямые, кривые, простые, сложные, длинные, короткие, толстые, тонкие, контурные, вспомогательные.

Правила применения линий в скетчинге:

• В скетчинге линии должны быть живыми. Для этого они проводятся быстро, резко и не обводятся по нескольку раз. Применение разных линий в рисовании, позволяет добиться разных эффектов.
• Чтобы поставить акцент на каком-то объекте, его прорисовывают более широкими линиями.
• Чтобы подчеркнуть вес предмета, более тяжелый изображается толстыми линиями, а легкий тонкими.
• Для подчеркивания света и тени, объекты, находящиеся в тени, обозначаются более толстыми линиями, а освещенные тонкими.
• Если предмет изображен дальше, то он будет прорисован тонкими линиями. А тот, что ближе, – толстыми.

Как рисовать силуэты

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

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

Чтобы нарисовать силуэт, необходимо правильно определить пропорции объекта и найти отличительные черты контура. Например, для рисования человеческого силуэта за единицу измерения берут голову. Тело равно 7 таким единицам плюс голова. А портреты обычно изображают в профиль.

Как перевести рисунок с помощью кальки

Для копирования рисунка есть несколько способов: через копировальную бумагу, с помощь лайтбокса, через кальку. Калька – это тонкая, прозрачная бумага.

Этапы перевода изображения через кальку:

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

• На бумагу уложить кальку. Ее закрепить аналогичным способом.
• Обвести изображение карандашом. На этом этапе можно избавиться от деталей, которые не нужны или перенести на другое место. Также стоит тщательно проработать все мелкие детали.
• Снять кальку и перевернуть ее на другую сторону. Мягким графитовым карандашом заштриховать все нарисованные линии. Этого пункта можно избежать, если обводить рисунок мягким, не заточенным карандашом. В этом случае будет меньше грязи на финальном изображении.
• Закрепить бумагу, на которую переводится изображение. На нее аккуратно разместить кальку заштрихованной стороной.
• Острым карандашом снова обвести все изображение. Графит от штриховки переведет рисунок на бумагу.

Симметрия в рисунке

Симметрия — это соответствие одной половины предмета другой, относительно точки или прямой.

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

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

Картинки для начинающих поэтапно

Яблоко:

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

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

Диван:

• Нарисовать прямоугольник.
• Поднять спинку и придать форму подлокотникам.

• Затем изобразить видимую боковую часть и низ дивана.
• Два прямоугольника для подушек сидения.
• Легкими линиями подчеркнуть детали. В завершении можно придать цвет.

Сцена:

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

• Далее прямыми линиями (можно по линейке), нарисовать стены и сцену в виде полукруга.
• Прямыми линиями дорисовать потолок и легкими штрихами обозначить горизонтальную штору.
• Расчертить деревянный пол.

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

Автор: Ковальчук Ольга

Оформление статьи: Натали Подольская

Видео про скетчинг

Скетчинг — техника быстрого рисунка для начинающих:

Серия уроков Sketch (часть1 из 5): Настройка Sketch

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

 

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Серия уроков Sketch (часть 2 из 5): Символы и стили

Серия уроков Sketch (часть 3 из 5): Дизайн десктоп версии

Серия уроков Sketch (часть 4 из 5): Дизайн мобильной версии

Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику

 

Пожалуйста, учтите: Это часть 1 из 5. В течение всей серии я буду учить вас азам работы со Sketch (и некоторых других сопутствующих инструментов, которые я вместе с ним использую). Я покажу весь путь от начала до создания красивых дизайнов для различных устройств и передачи исходников разработчикам.

Звучит неплохо, правда? Тогда начнем…

 

Настройка Sketch

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

 

 

Небольшой снэпшот дизайна, который мы будем создавать в Sketch

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

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

 

Настало время запустить ракету в Sketch

У вас должна быть копия Sketch на вашем Mac. Было бы странно приступить к уроку, не имея ее под рукой. Если все же еще не скачали, загрузите триал-версию.

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

 

Интерфейс Sketch родной, яркий и освежающе простой

 

Панель инструментов вверху окна содержит набор инструментов, которых можно использовать при работе над проектом. Ее можно настроить по своим предпочтениям (отображайте нужные инструменты, а неиспользуемые можно спрятать), кликнув на меню View, и выбрав Customize Toolbar…
Вы можете легко перетаскивать элементы на другое место, чтобы было максимально удобно.

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

Далее идет бесконечный канвас, где и происходит весь процесс дизайна.

И справа расположен Инспектор, где можно настраивать параметры для слоя, над которым вы в данный момент работаете или для используемого инструмента.

 

Бесконечный канвас – одно из ключевых преимущество Sketch

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

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

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

 

Пример бесконечного канваса в действии.

 

Вы бы могли, в теории, скажем, создать проект 60 артбордов, и все они поместятся на одном канвасе : )

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

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

Еще одна настройка Sketch, делающая Sketch таким потрясающем, это плагины, создаваемые огромным сообществом разработчиков.

 

 

Ни один дизайнер не имеет права обходиться без Sketch Toolbox
Теперь вы можете устанавливать плагины вручную или с помощью приложения Sketch Toolbox, позволяющего быстро находить нужные расширения.

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

Установите Sketch Toolbox, и через это приложение установите два плагина, которые я перечислил выше.

 

Настройка Sketch: иконки

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

Это небольшой набор, идеально подходящий под наши будущие задачи. В нем не запутаешься, но есть все, что нам нужно.

Прошли те дни, когда приходилось лопатить множество папок на компьютере в поисках нужной иконки. Это уже не круто.

 

 

О IconJar, не передать словами, как я люблю тебя!

На смену этим архаизмам пришел IconJar. Он собирает все ваши коллекции иконок в одном приложении и позволяет легко перетаскивать нужную иконку непосредственно в документ Sketch. Кайф!

 

Отличный инструмент для бесплатных стоковых фото

 

Бесплатных стоковых фото много не бывает, правда?

 

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

Вместо пролистывания множества сайтов с бесплатными стоковыми фото в поиске нужных, я просто использую это приложение. Здесь вы можете просматривать сайты вроде Unsplash, Magdeleine, Jay Mantri и множества других в одном месте.

 

Настройка Sketch: шрифты (Google Fonts)

 

Бесплатные семейства шрифтов. О да!

 

Есть отличные шрифтовые сервисы вроде Typekit, для них нужна подписка. Но для этого урока мы воспользуемся шрифтами из Google Fonts

Они бесплатны и очень разнообразны (некоторые правда, не особо красивые).
Мы скачаем 3 семейства шрифтов из Google Fonts.

 

 

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

 

Настройка Sketch: горячие клавиши

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

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

 

Вставить

• Новый артборд (A)
• Прямоугольник (R)
• Прямоугольник с закругленными углами(U)
• Овал (O)
• Линия (L)
• Текст (T)

 

Ввод текста

• Жирный Cmd + B
• Курсив Cmd + I
• Подчеркнутый Cmd + U

 

Вид холста

• Увеличить масштаб Cmd (+) +
• Уменьшить масштаб Cmd (+) –
• Фактический размер Cmd (+) 0
• Центр канваса Cmd (+) 1
• Включить/выключить сетку Ctrl + G
• Включить/выключить линейки Ctrl + R
• Включить/выключить гайды слоя Ctrl + L
• Подвинуть канвас Space + Drag

 

Окно

• Показать/спрятать список слоев Alt + Cmd + 1
• Показать/спрятать инспекторAlt + Cmd + 2
• Показать/спрятать список слоев и инспектор Alt + Cmd + 3
• Режим презентации Cmd + .

 

Редактирование слоев

• Показать расстояние к другим слоям Alt
• Показать расстоение к другим слоям внутри группы Alt + Cmd
• Дублировать Alt + Drag
• Селектор цвета Ctrl + C

 

Организация слоев, групп и артбордов

• Передвинуть вперед Alt + Cmd + ↑
• Передвинуть назад Alt + Cmd + ↓
• Переименовать слой/артборд/группу Cmd + R
• Сгруппировать слои Cmd + G
• Разгруппировать слои Shift + Cmd + G

 

Настройка Sketch: сетка для pixel-perfect макетов

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

Если вы разработчик, возможно, вы итак пользуетесь сеточной системой. Например, фреймворк Bootstrap со встроенной сеткой. Или может, у вас есть какое-то собственное решение.

 

 

Простая, легковесная сеточная система

Лично я во многих случаях использовал легковесную сетку под названием Gridiculous, и она отлично справлялась со своей задачей.

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

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

На панели инструментов в Sketch кликните на иконку View и выберите Layout Settings в выпадающем списке, затем введите следующие значения настроек:

 

Настройки макета для используемой нами сетки

 

Мне нравится сетка красного цвета с непрозрачностью 50%. Она хорошо выделяется на фоне артборда с разнообразным наполнением.

И помните, что горячая клавиша Ctrl + L может выключить или включить сетку. В этом уроке вы часто будете использовать это сочетание кнопок.

 

Артборды на сцену!

Настройка Sketch артбордов. Окей, давайте создадим артборд для дизайна, который мы назовем ‘Brooklyn’. Почему ‘Brooklyn’? Я большой поклонник олдскульного хип-хопа. Множество великих реперов – выходцы из Бруклина. В этом и причина : )

 

Обзор доступных размеров артборда

 

Нажмите клавишу A, и в инспекторе появятся доступные размеры. Мы выберем Desktop HD для вставки артборда на холст.

Артборд будет слишком коротким по высоте для этого урока, так что кликните на имени артборда в списке слоев, в нашем случае, это Desktop HD. И в панели инспектора увеличьте высоту до 7000px.
Теперь у нас достаточны высоты для творчества.

 

 

Увеличьте высоту артборда в панели инспектора

 

Надеюсь, вам понравились быстрые артборды Sketch?

Круто. У нас есть пустой артборд, не много пока что. Но мы исправимся, обещаю.

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

Скоро увидимся! Спасибо за чтение моей статьи.

 

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Серия уроков Sketch (часть 2 из 5): Символы и стили

Серия уроков Sketch (часть 3 из 5): Дизайн десктоп версии

Серия уроков Sketch (часть 4 из 5): Дизайн мобильной версии

Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику

Полное руководство по началу работы в Sketch

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

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

И, наконец, я поделюсь качественными ресурсами по Sketch, включая бесплатную шпаргалку на 99 пунктов, с которой очень удобно учиться работе в приложении. Звучит неплохо?

.   .   .

1. Почему Sketch?

Некоторое время после релиза в 2010 году Sketch расценивался как легковесный инструмент для редактирования графики, с помощью которого дизайнеры UI и UX могли быстренько прототипировать дизайн приложений.

Но за последние годы Sketch значительно развился – и его возможности сейчас выходят далеко за рамки создания макетов экранов. Как молодой продукт, созданный специально под нужды сегодняшнего дня, в нем нет всего этого ненужного мусора, как в наборе продуктов Adobe Creative Cloud.

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

Что такое Sketch?

Sketch – одна программа из группы под названием “векторные графические редакторы”. Другие представители этой категории – Adobe Illustrator, CorelDRAW и OpenOffice Draw.

Векторный редактор отличается от пиксельных (растровых) редакторов. В пиксельном графическом редакторе (например, Adobe Photoshop, GIMP или Microsoft Paint), когда вы рисуете фигуру, сохраняется масса данных о каждом пикселе, что со стороны выглядит как круг:

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

В Sketch, только если вы не вставите пиксельную графику, например, фото, все слои векторные. Каждый объект состоит из опорных точек и кривых, которые можно просмотреть и отредактировать, кликнув дважды на фигуре. Но мы к этому еще вернемся!

Все хорошее – компактно

Sketch за последние 12 месяцев возмужал, стал гораздо более стабильным продуктом. Для приложения весом менее 50 мегабайт Sketch располагает более чем обширными возможностями, и сейчас есть четкое ощущение, что его стоимость гораздо более чем оправдана (полная стоимость $99, для студентов – $49). Для сравнения, Adobe Illustrator CC сейчас занимает более 1000 МБ на моем жестком диске.

Более того, постоянная программа Bohemian Coding по улучшению ПО означает, что, когда появляются баги, их довольно быстро фиксят.

Официальный соперник Sketch, Adobe Illustrator, существует на рынке с 1987 года (!) и остается стандартом в индустрии традиционных дизайн-студий. Но для дизайнеров новой генерации Sketch дает огромную возможность изучить основы и достичь отличных результатов.

Учиться дизайну в Sketch быстро, окупаемо, и весело!

2. Начало работы в Sketch

Сначала скачайте Sketch

Если вы совсем новичок, посетите страничку Getting Started на официальном сайте Sketch. Sketch будет работать на любом Mac-е с OS X El Capitan (10.11) или выше, и вы можете скачать бесплатную 30-дневную триал-версию.

Постарайтесь не заблудиться в интерфейсе

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

Вот более детальное объяснение функционала каждого раздела:

• Панель инструментов: предоставляет доступ к часто используемым командам. Большую часть команд можно использовать через горячие клавиши, что быстрее. (У нас есть подробная шпаргалка по горячим клавишам в Sketch – вы можете скачать ее внизу поста).
• Список слоев: эта панель показывает список всего, что было нарисовано в Sketch. Все элементы в Sketch представлены как слои – так что фигура вроде круга значится в этом списке как отдельный слой, и его положение показывает, какой слой находится спереди или позади круга. Вы также можете задать для каждого слоя название.
• Инспектор: Инспектор отображает подробную информацию о выделенном слое, и позволяет делать точные настройки. Например, вы можете вручную задать X/Y-координаты точки, или изменить пиксельную ширину фигуры. Инспектор также позволяет вам настраивать непрозрачность, заливку и границы, выравнивать слой, задавать тени, размытие и параметры экспорта.
• Артборд: Sketch организует вашу работу с помощью страниц и артбордов. Артборды позволяют создавать различные композиции на одной странице. Это может быть особенно полезным для налаживания эффективного рабочего процесса. Например, вам бы хотелось записывать каждую итерацию при разработке лого, или необходимо создать макеты экранов для разных устройств на одном холсте. Каждый документ Sketch может содержать различные страницы (страница – это, по сути, чистый новый холст), и каждая страница может содержать множество артбордов. Думайте об артборде как о фрейме, который вы можете вставить в любое место дизайна.

Далее, ознакомьтесь с некоторыми важными командами

a. Создание артбордов

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

Чтобы создать новый артборд, нажмите “Insert” на панели инструментов, затем выделите “Artboard”, кликните на прямоугольник и перетяните мышкой на холст. Или же можете просто нажать “A” на клавиатуре, а затем кликнуть и потянуть.

b. Рисование фигур

Проще всего начать рисовать фигуры посредством горячих клавиш. (Не забудьте, впереди вас ждет шпаргалка из 100+ горячих клавиш!)

• O = овал
• R = прямоугольник
• U = прямоугольник с закругленными углами
• L = линия

С помощью кнопки “Insert” в панели инструментов вы можете получить доступ к большему набору разных фигур типа звезды, многоугольника, треугольника и т.д. Вот тут я рисую звезду:

с. Выравнивание и распределение объектов

Когда я только начал работать в Sketch, я влюбился в их кнопки выравнивания и распределения, которые живут вверху панели Инспектора. Вот что они делают:

Распределить по горизонтали
Уравнивает горизонтальные отступы между выделением из 3 или более объектов.

Распределить по вертикали
Уравнивает вертикальные отступы между выделением из 3 или более объектов.

Выравнивание по левому краю
Выравнивает левые края 2 или более выделенных объектов.

Выравнивание по горизонтали
Выравнивает горизонтальные центры выделения из 2 или более объектов.

Выравнивание по правому краю
Выравнивает правые края 2 или более выделенных объектов.

Выравнивание по верху
Выравнивает верхние края 2 или более выделенных объектов.

Выравнивание по вертикали
Выравнивает вертикальные центры выделения 2 или более объектов.

Выравнивание по низу
Выравнивает нижние края 2 или более выделенных объектов

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

Вот пример, как я использую выравнивание по левому краю (кнопка “Align left”):

d. Дублирование слоев и артбордов

В Sketch очень легко дублировать слои и артборды. Кликните правой кнопкой мышкой на любом объекте, выберите опцию “Duplicate”, чтобы создать копию поверх оригинала. Как вариант, просто выделите объект и нажмите команду + D, или просто удерживайте alt, а затем перетяните объект, который хотите скопировать. Вот я дублирую свою звезду:

Дублирование артбордов также важно в налаживании продуктивного дизайн-процесса. Дублируя артборд после каждого важного изменения, вы всегда можете легко вернуться на более раннюю версию без необходимости пользоваться опцией “Undo” сотни раз:

e. Еще несколько подсказок по главным опциям в Sketch

Эта серия советов по Sketch поможет освоить программу и улучшить свою продуктивность:

Часть 1 – Начало работы в Sketch

• Ресайз фигур с помощью горячих клавиш
• Дублирование элементов
• Смарт-выделение
• Группировка и разгруппировка элементов
• Прямое выделение в группах
• Настройка 100% масштаба
• Показать все артборды
• Перенос объектов на передний или задний план
• Переименование

Часть 2 – Редактирование и экспорт в Sketch

• Измерение расстояния между элементами
• Настройка непрозрачности с помощью числовой клавиатуры
• Изменение радиуса каждого угла отдельно
• Настройка нестандартных горячих клавиш
• Использование математических операций внутри полей ввода
• Составные фигуры
• Команда для поворотного копирования
• Слайсы
• Экспортируемые элементы и артборды
• Экспорт исходников для экранов retina

Часть 3 – Композиция, свет и тени

• Позиционирование объектов “за гранью”
• Комбинирование света и тени для задания глубины
• Имитация складчатой поверхности
• Создание резких теней
• Расстояние между объектом и его тенью
• Множественные источники света
• Линия горизонта
• Наложение объектов

И, наконец… проработайте эти уроки по Sketch. Они на русском языке

Серия уроков от Marc Andrew

Создание мобильных приложений в Sketch от Marc Andrew

Если вам нужны еще уроки и советы по началу работы в Sketch, вы найдете их в разделе “Дополнительные ресурсы” в конце этого поста.

3. Более продвинутые приемы работы в Sketch

Как только вы справитесь с основами, настанет время перейти к более продвинутым возможностям, доступным Sketch-пользователям!

Освоение кривых Безье

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

Питер Новел написал шикарную статью о работе с кривыми Безье. Он описывает важные принципы работы с этим видом объектов, поясняет разницу между разными элементами управления, дает практические советы по работе с этим векторным инструментом в Sketch. Ознакомьтесь!

Создание символов

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

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

Продвинутые опции ресайза

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

Вот возможные опции:

• Stretch (растянуть): объект будет отресайзен пропорционально общим размерам группы. Это метод по умолчанию, обычно именно такого эффекта вы и ждете от ресайза.
• Pin to corner (прикрепить к углу): размер объекта будет изменен, но его положение не изменится (по отношению к ближайшему углу)
• Resize object (ресайз объекта): размер объекта будет изменен на то же пиксельное значение, на которое ресайзится группа. Если группа становится на 50px шире, то и объект станет на 50px шире.
• Float in place: объект не будет отресайзен при ресайзе группы, но он изменит свое положение пропорционально общим габаритам группы.

Здесь вы найдете больше информации о ресайзе групп и символов

Детальнее о режимах блендинга

Режим блендинга (смешивания) определяет, как цвета одного слоя взаимодействуют со слоями под ним. Сейчас Sketch предлагает 15 разных режимов смешивания. Если вы – пользователь Photoshop, возможно, вы уже знакомы с некоторыми из них. В этой отлично иллюстрированной статье Маурицию Уехара описан каждый режим, а также приемы по созданию потрясающих эффектов с их помощью.

Использование Sketch для печатного дизайна!

Для тех, кто быстрее и более продуктивно работает в Sketch, имеет смысл подготавливать и печатные документы в этой программе вместо какого-то специализированного пакета вроде Adobe InDesign. В этой потрясающей статье Питер Новелл поясняет, как использовать Illustrator для подготовки PDF, который был создан в Sketch для печати.

Испытайте свои навыки в этих мини-проектах

Вы дочитали аж до этого места, так почему бы не опробовать ваши новые навыки, пытаясь воспроизвести парочку мини-проектов в Sketch? Начните с простого – воссоздания иконки Google Docs. Затем попробуйте нечто более сложное.

Создание иконок в Sketch

Создание иллюстраций в Sketch

4. Дополнительные ресурсы

Обязательно для изучения

Скачайте шпаргалку из 99 горячих клавиш для Sketch!

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

Как вам Sketch? Как ваши успехи в работе с этой программой? Делитесь в комментариях!

Уроки Скетчап для начинающих

Урок для начинающих: видео уроки на русском

Посмотрите как пользоваться данным софтом:

Обучение создания проекта дома

Проектирование каркасного дома:

Как создать динамический компонент

Как узнать объем

Интерьер

Как копировать

Анимация

Техника выделения

3d модели вархаус (warehouse)

Там вы можете скачать различные модели:
деревья, холодильник, офисную мебель, окна, двери, модели машин.

Привязки

Как сделать шар

Как задать размер

Как поменять единицы измерения

Моделирование мебели: стеллаж

Как добавить материалы

Как задать размер

Как сделать фаску

Как отзеркалить

Работа со слоями

Как сделать развертку

Как сделать разрез

Как перемещаться

Как установить плагины

Где хранятся компоненты