ErBlog

№30 Сегодня будем рисовать стремянку. Задача оказалась неожиданно сложной, так что соберитесь. Чтобы лестница получилась красивой, надо рисовать ее в проекции. И чтобы не пришлось стирать лишние линии, попробуем сделать это по слоям. Для начала нам нужно шесть точек, опираясь на которые мы будем рисовать. Представьте горизонтальную линию. Поставим точку на небольшом расстоянии над линией. Следующую точку поставим правее первой, а расстояние от линии у нее будет в два раза больше. Мы получили первую пару точек. Нужно ещё две. Вторую пару точек поставим правее первой и на одно "деление" ниже (третья точка будет лежать на линии, а четвертая будет от линии на таком же расстоянии, как и первая). Третья пара точек будет значительно выше первых двух по вертикали и ровно между ними по горизонтали. Должно получиться как на рисунке. Теперь начнем рисовать слои. Для левых точек из каждой пары нарисуем горизонтальную линию. Теперь края нижних линий соединим с верхней. На переднем слое получилась такая треугольная конструкция. Теперь нарисуем ступеньки. Начнем с верхней. Нарисуем горизонтальную линию для второй точки из верхней пары и соединим её края с первой верхней горизонтальной линией. Получилась ступенька. Теперь нарисуем ещё несколько таких же ступенек вдоль каждой из сторон стремянки. Это будет средний слой. Последний шаг — нарисуем заднюю, дальнюю от нас часть стремянки. Для этого нужно просто соединить краешки ступенек линиями и дальше опустить их до верхних точек нижних пар. Вот и получилась довольно красивая и аккуратная лестница. Если хочется сделать проще, то можно ширину ступенькам не добавлять. Это будет на маленькой картинке нормально смотреться.

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

Скетчи можно использовать для разного. Например, для того чтобы заказать торт на день рождения. А сегодня как раз такой день, так что встречайте: LITTLE MAX 1, воин дороги с повышенной маленькостью.

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

№27 Зубная щетка состоит из щетины и ручки. Я начинаю рисовать щетку с щетины, потому что так проще соблюдать пропорции. Вокруг щетины располагается головка щетки, от которой вниз с эргономичным изгибом идёт ручка. Щетинки крепятся к ручке пучками, которые формируют узнаваемый паттерн на чистящей поверхности

№26 Легкие нужны в основном для того, чтобы потреблять кислород из воздуха. Они состоят из примерно одинаковых частей, от которых отходят две трубки - бронхи, и соединяются в одну трахею, по которой воздух попадает в легкие. Если хочется анатомической точности, то в правом легком можно нарисовать выемку для сердца.

№25 Спасательный круг нужен для того, чтобы человек, упавший за борт, не пошел под воду из-за веса мокрой одежды, пока его достают. Сейчас их обычно делают из пенопласта, а раньше делали из пробки. Современные спасательные круги весят 2-3 килограмма, хотя большие могут весить 4 или даже 5. Лучше таким по голове не получать, иначе спасать будет некого. Рисовать его очень просто: снаружи круг, внутри круг, веревка, чтобы удобнее браться, и яркие цвета, чтобы хорошо было видно.

№3 Третья лекция курса «Успеть всё». Про то что такое мотивация, как она помогает, и как быть когда не помогает.

№24 Турбина позволяет повысить мощность двигателя внутреннего сгорания довольно хитрым образом. Крыльчатку вращает выхлопной газ от сгорающего топлива, а она закачивает воздух в двигатель под давлением. Получается, что воздуха в двигатель попадает больше, значит может сгореть больше топлива, так что при том же объёме двигателя можно получить большую мощность. Чтобы нарисовать турбину, нужно представить себе, как она работает. Начните с формы внешней части в виде раковины улитки. Дальше внутри круг с крыльчаткой. Остаётся добавить впуск, выпуск и крепления.

№2 Вторая лекция «Успеть всё». Про то, что всё это не вообще всё, а только то, что действительно стоит успевать.

№23 Виза — это такая хитрая штука, без которой некоторые человекоподобные обезьяны не могут посещать некоторые места. У меня вот один раз был случай, когда я собирался на конференцию в Европу, и у меня всё было готово, кроме визы. А визу мне дали за день до конференции. Это было довольно нервно. Виза представляет собой наклеечку на странице паспорта, поэтому для того, чтобы её нарисовать, сперва нарисуем паспорт. Потом нарисуем саму наклеечку, добавим на неё фотографию, описание, коды и печать. А чтобы вторая страница паспорта не была пустой, добавим на неё печати о въезде и выезде из страны.

№14 Заметки к докладу "The goose and the common".

№13 Заметки к докладу "display: green; applying the web sustainability guidelines". Информационные технологии влияют на окружающую среду больше, чем самолёты. Это доклад с рекомендациями, которым стоит следовать, чтобы уменьшить это влияние.

№12 Заметки к докладу "Refactoring CSS". Доклад о том, как отремонтировать дом и как убедить продакта навести порядок в CSS.

№11 Заметки к докладу "Building a Computer with CSS". Демонстрация работы цепей компьютера с использованием CSS-селекторов для вычислений. Занятный в своем роде поучительный доклад.

№10 Заметки к докладу "Form control styling". Доклад про прекрасное светлое будущее, в котором для того, чтобы изменить внешний вид контролов HTML, не надо будет никаких странных костылей со скрыванием, кривыми селекторами и магией. Нужно будет просто сбросить их состояние до базового, а потом добавить немного стилей.

№9 Заметки к докладу "Smart layouts". Живой пример того, насколько динамично и адаптивно может вести себя лейаут при использовании современных возможностей CSS и HTML. Спойлер: настолько, что можно сказать, что можно назвать его умным.

№8 Заметки к докладу "Scope in CSS". Что надо знать о скоупе в CSS? Любой CSS-селектор и есть скоуп. Но сейчас есть гораздо более интересные возможности по управлению скоупом: скоуп-бублик, определение доступности и прочие чудеса директивы @scope. Правда, лучший способ всё ещё — уникальные имена классов.

№7 Заметки к докладу "Design Token Architecture". Доклад о том, сколько рутинной работы мы делаем раз за разом, вновь и вновь, для того чтобы идентичность компаний отражалась в их сайтах и приложениях. И о том, как уменьшить количество повторяющейся работы, используя дизайн-систему на базе дизайн-токенов.

№6 Заметки к докладу "Multicol and fragmentation". Глубокий доклад о том, какие сложности стоят перед создателями спецификаций. Задачи, которые решались легко для статической печати на бумаге и в книгах, совсем не так легко решаются в динамическом мире веба, особенно когда их решение никому не нужно.

№5 Заметки к докладу "Select it! Styling new HTML UI capabilities".

№4 Заметки к докладу "CSS tried to come for my job". Великолепное демо с кучей примеров реализации перехода страницы из состояния в состояние. С помощью только CSS можно сделать очень динамичный интерфейс.

№3 Заметки к докладу "Is Sass Dead Yet? CSS Mixins & Functions &c." Доклад о том, как миксины и функции метаморфируют, переезжая из SASS в CSS, обрастая новыми особенностями, связанными с каскадом.

№2 Заметки к докладу "A Dao of CSS". Любопытный доклад предлагает взглянуть на CSS через призму китайской философии: не жестко контролировать лейаут, а позволить ему течь свободно, как вода, гибко приспосабливаясь к окружению.

№1 Заметки к докладу "Level up your scroll UX". Доклад о том, что можно сделать с прокруткой, используя только CSS. Карточки, навигация, даже интерфейс Nintendo Switch. А ещё, рецепт Ultimate Scroller.