с нуля до сеньора / Хабр

Здравствуйте, меня зовут Александр Зеленин, и я веб-разработчик.
Многократно я слышал мнение, что верстка — удел начинающих frontend’еров. Хотя фактически это важнейшая часть любого (почти) веб-проекта. Это то, что пользователи видят в первую очередь. На текущий момент качественная вёрстка (особенно проектирование блоков) в крупном проекте требует большого количества различных навыков.

В данной статье представляю схему развития верстальщика


[большая по клику]
Само собой, это не всеобъемлющая и единственно верная схема. Есть ещё целая гора связанных навыков, релевантных технологий и так далее. Градация является субъективной.

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


Чего мы ожидаем?

В первую очередь необходимо понять, чего мы ожидаем от человека на каждом из уровней. Ваши ожидания могут отличаться.
Junior — знает основные теги, может подправить контент на готовом html сайте, умеет грамотно форматировать текст, без проблем вставит встраиваемый элемент (ролик с ютуба, яндекс карту), ведёт работу через систему контроля версий только для себя (master, 1 контрибьютор).

Может сверстать что-то несложное с нуля, и оно даже не поедет (лично у него). В целом не является самостоятельной единицей и требует руководства свыше.
Middle — более-менее автономная единица (либо полностью автономная для малых и средних проектов). Может хорошо сверстать сайт средних размеров, и он будет корректно отображаться во всех актуальных версиях браузеров. Понимает, как работают шаблонизаторы, и может их использовать (при условии предоставления остального кода). Умеет планировать и документировать свою работу и оценивать сроки. Понимает важность поддержания стиля кода. Понимает, зачем есть грид-системы и css фреймворки. Умеет брать всю необходимую информацию из макетов от дизайнера. Может взаимодействовать с небольшой командой, создавать ветки и пулл-реквесты.
Senior — может спроектировать систему блоков для крупного проекта. Знает, как избежать повторов и проблемных мест при использовании его кода другими разработчиками. Умеет декомпозировать сложные задачи и грамотно формулировать задачи.
Умеет применять минимум одну методологию разработки (например, БЭМ). Может сделать так, чтобы проект открывался максимально быстро. Хорошо понимает несколько популярных шаблонизаторов. Способен написать сборщики и автоматизировать процесс, с этим связанный. Может проводить код ревью и курировать других верстальщиков.
Рассмотрим теперь чуть конкретнее, что включает в себя каждый из блоков на каждом уровне.


Junior

HTML — знание основных тегов, аттрибутов. Понимание, как его писать в принципе.
Типографика — умение отформатировать текст. Текст — основа практически любого проекта. Вставка неразрывных пробелов где надо, выделение жирным, курсивом, abbr и так далее. Можно использовать типограф или схожий сервис, но уметь понимать результат.
Семантика — понимание, что для определённых задач есть определённые теги. Уметь выбрать нужный тег.
Медиа — какие виды медиа можно встраивать в страницу.
Iframe — встраивание сторонних виджетов (видео, аудио, карты и т.п.).
Аудио, Видео — можно отложить изучение, т.к. частично решаются с помощью iframe. Понимать, какие форматы умеет воспроизводить браузер, как оформить плеер и так далее.
Картинки — какие графические форматы и в каком виде воспринимает браузер. Плюсы и минусы использование тех или иных форматов.
Растр — jpg, png, gif. Понимать различие форматов и уметь применять что и где надо.
SVG — можно отложить изучение, т.к. применяется реже, чем хотелось бы. Понимать плюсы, минусы, ограничения и т.п.
Шрифты — можно отложить изучение. На самом деле довольно сложная тема, и в общем случае я бы советовал начинающим использовать системные шрифты. Уметь подгрузить шрифты, оптимизировать отображение, минимизировать лаг отрисовки с кастомными шрифтами.
Табличная вёрстка — опционально. Для желающих верстать качественные email-рассылки в будущем.
CSS 1 — шрифты, цвета, выравнивание, размеры.
CSS 2.1 — управление поведением блоков, позиционирование, полноценное оформление.
Селекторы — простые селекторы на тег, класс, вложенный элемент. Простые псевдоселекторы типа :hover.
Именование — как называть классы, чтобы не было мучительно больно.
Блочная вёрстка — разбить картинку на осознанные блоки, воплотить блоки в HTML, оформить с CSS.
Браузеры — можно отложить изучение. Какие браузеры существуют, в чём их различие.
Инструменты разработчика — можно отложить изучение. Использовать инструменты браузеров, чтобы разбираться в проблемах отображения.
Текстовые редакторы — какие текстовые редакторы для разработчиков есть и зачем. SublimeText и Notepad++ приведены для примера, как хорошо мне знакомые. Уметь настраивать в них базовые вещи, такие как отступы, перенос строки и так далее.
Системы контроля версий — я лично считаю умение их использовать хотя бы индивидуально, лично для себя, очень важным. Понимать, для чего эти системы созданы и какие бывают.
Git — понимать в общих чертах задачу и принципы самой популярной системы контроля версий.
Github / bitbucket — уметь использовать одну из популярных площадок для git.
Checkout / commit / push / pull — базовые операции для личного использования.
Stash — для временного сохранения ненужных в данный момент данных.
10 работ — сделать минимум 10 работ в различном дизайне. Можно тестовых, это не важно. Важно, чтобы полноценных в рамках текущих знаний.


Middle

CSS 3 — градации, тени, сглаживание, фильтры, трансформации.
Продвинутые селекторы — элементы, следующие за опделённым (+), определённый по счёту (nth-child), shadow-dom, before/after и так далее.
Анимации — опционально. transition и animation. Плавные переходы, анимации. Понимать ограничения и минусы.
Сетки — зачем существуют, как выстраивать, какие есть готовые решения. Для примера можно посмотреть Flexbox grid или любой другой, который найдёте.
Фреймворки (CSS) — зачем нужны, как применять. Желательно научиться хорошо использовать минимум один. Очень пригождается для прототипирования. Значительно повышает качество проекта при отсутствии бюджета на дизайн (не уникально, но юзабельно).
CSS препроцессоры — можно отложить изучение. Оптимизация работы, более красивый и читабельный код. Переменные, миксины и т.п. Поработать с одним или несколькими популярными препроцессорами типа SASS, LESS, Stylus.
Media queries — можно отложить изучение. Отображение нужных стилей в зависимости от условий (устройство, размер экрана, плотность пикселей, версия для печати и т.п.).
Стиль кода — понять, для чего есть соглашения по стилям, изучить и начать применять любой (рекомендую от AirBNB).
DRY / KISS / SOLID — можно отложить изучение. Понять важные принципы разработки, ощутимо упрощающие дальнейшее сопровождение проекта.
OOCSS — опционально. Понять, что есть объектно-ориентированный css и для чего он. В том или ином виде используется во многих проектах (хоть и без понимания, что это он). В идеале, научиться проектировать. Может отлично зайти для крупных проектов.
Документация — понять, что и как документировать. Документировать. Можно отложить, но в будущем обязательно изучить разметку markdown.
Планирование — научиться оценивать сроки по картинке и определять последовательность работ.
Декомпозиция — можно отложить изучение. Научиться разбивать задачу на подзадачи. Это сложнее, чем кажется 🙂
Постановка задач — можно отложить изучение. Научиться чётко описывать задачи текстом так, чтобы другие разработчики, в том числе с меньшей квалификацией, достаточно однозначно понимали, что необходимо сделать для их выполнения.
Flexbox — понимание модели, умение применять полноценно.
Вёрстка писем — опционально. В целом навык не лишний. Понимать особенности почтовых систем, сохранить хороший внешний вид и не упасть в спам (если это не спам).
Полифилы — разобраться, как использовать самые актуальные возможности разработки, сохраняя обратную совместимость. Понять минусы и плюсы от такого подхода.
Кроссплатформенная вёрстка — понимать, что нужно делать, чтобы проект хорошо выглядел не только под Windows, Linux и Mac, но и под SmartTV или PS.
Кроссбраузерная вёрстка — понимать разницу рендера браузеров и заставлять их показывать одинаково. Сайт CanIUse очень помогает в этом.
Мобильная вёрстка — можно отложить изучение. Понимать, какие ограничения несут в себе мобильные платформы. Использовать лимитированное пространство грамотно.
Оптимизация — можно отложить изучение. Разобраться в «цене» тех или иных приёмов. Понять, из каких фаз состоит отображение сайта пользователю.
Загрузка — можно отложить изучение. Оптимизации, связанные с размером, кешем, сжатием, объединением ресурсов и т.п.
Отрисовка — можно отложить изучение. Оптимизации, связанные со скоростью рендера после загрузки.
SEO — можно отложить изучение. Хотя бы базовое понимание работы поисковых систем. Умение «помочь» поисковой системе разобраться, куда смотреть и что важно.
Шаблонизаторы — разобраться, каким образом можно переиспользовать код, группировать элементы и компоновать страницы. Очень желательно изучить как серверный рендеринг, так и клиентский. Сюда же входят шаблоны на «чистом» языке (типа простых PHP вставок). Работа «до» (dataflow) шаблонизатора нас не интересует.
PHP — можно отложить изучение. Разобраться в базовом синтаксисе и уметь внести мелкие правки, связанные с оформлением страницы.
CMS — можно отложить изучение. Узнать, какие CMS существуют и для чего они были созданы. Научиться писать шаблоны хотя бы для одной (рекомендую WordPress).
Javascript — можно отложить изучение. Изучить базовый синтаксис, понять, как вешать простейшие обработчики и проводить простую работу с DOM.
jQuery — можно отложить изучение. Научиться экономить кучу времени для решения довольно типовых задач с использованием плагинов для самой популярной js библиотеки (после vanilla.js, конечно).
NodeJS — можно отложить изучение. Разобраться, как запустить простейший сервер, раздавать статику и рендерить на стороне сервера. Можно использовать Express или любой другой фреймворк.
Сборка — опционально. Научиться собирать проект из кучи CSS / HTML файлов в то, что нужно. Рекомендую ознакомиться хотя бы с grunt и gulp, как представителями «разных» лагерей.
IDE — опционально. Изучить, зачем нужны IDE и как их использовать. Перейти на использование какого-либо IDE для экономии времени. Важно: изучение IDE сравнимо с полноценным изучением языка программирования, и вкладывание большого количества времени в это может не оправдаться. Лично я пользуюсь текстовыми редакторами (и только для ооочень крупных проектов включаю IDE).
Branching — научиться управлять ветками в git.
Merge — научиться сливать ветки с разрешением конфликтов.
Fetch / Rebase — разобраться, зачем они, когда их применять, и начать применять по необходимости.
Графические редакторы — разобраться, какие бывают, для чего. Чем векторные отличаются от растровых. Важно понимать редактор хотя бы на уровне «чтения» макета от дизайнера. Выбрать правильный шрифт, размер, цвет и т.п. Чтобы не на глаз, а точно. Рекомендую поработать минимум с 1 растровым (Photoshop) и 1 векторным (Figma).
50 работ — к концу этапа у вас порядка 50 различных работ, демонстрирующих навыки из изученных областей.


Senior

Хоть на схеме и кажется маленькой эта группа, но фактически она самая большая. Т.к. к этому моменту необходимо изучить всё то, что откладывалось.
Адаптивная / Отзывчивая вёрстка — разобраться в высшей ступени и скомбинировать все полученные до этого знания. Проект должен выглядеть хорошо везде и на всём (в рамках разумного).
Постепенная деградация / Прогрессивное улучшение — понять, что это и зачем. Использовать.
Gitflow — уметь объяснить другим разработчикам, как создавать ветки, куда их вливать, как, уметь провести код ревью (вёрстки, само собой, не кода).
БЭМ — опционально. Разобраться в методологии, позволяющей создавать безлимитно крупные проекты так, чтобы при минимальной синхронизации различные команды могли использовать блоки друг друга. Есть и другие методологии, дающие не худший результат. К этому моменту о них вы так или иначе будете знать и сможете, при желании, изучить.
100 работ — иметь суммарно сотню работ, демонстрирующих различные полученные навыки. На самом деле, это всё условно. Можно иметь одну работу (состоящую из различных частей) в портфолио, которая уже покажет, что вам ничего не страшно.


Заключение

Фактически многие из этих тем небольшие. Однако держать кучу различных факторов в голове очень сложно. За 15 лет я общался менее чем с десятью верстальщиками (да и вообще программистами), которых отнёс бы к категории Senior (верстальщиков, программистов хороших было сильно больше).

Навскидку – на полноценное изучение и практику только вёрстки с нуля вполне можно затратить год (и более, если уходить в проектирование компонентов).

Надеюсь, тем, кто находится в начале пути, схема подскажет, куда можно ещё двигаться, и что не обязательно сразу (а можно и вообще не двигать в него) бежать в программирование.

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

Если дело пойдёт, приложу в будущем ссылки в комментарии.


Вакансии в мой проект

Сапожник без сапог. Нужен крутой верстальщик с хорошим знанием js
Маркетолог на парт-тайм

upd
Много сообщений о том, что верстальщик без знания фреймворка не нужен. В основном это пишут разработчики в крупных проектах. И, для них, это вполне так. Но есть ещё много студий делающих лендинги, различные шаблоны для вордпресов и других CMS. Это вполне себе хороший рынок и возможность зарабатывать. Есть довольно много совершенно небольших проектов, с гораздо меньшими требованиями, которые верстальщик способен закрыть на отлично.

Вёрстка на HTML & CSS для начинающих — Stepik

Изучи два основополагающих языка для создания сайтов. Язык HTML для разметки и язык CSS для оформления внешнего вида своего сайта.

What you will learn

  • Языку гипертекстовой разметки HTML
  • Языку каскадных таблиц стилей CSS
  • Вёрстке фрагментов современных сайтов
  • Созданию адаптивной сетки на CSS

About this course

В этом видео курсе вы научитесь с нуля основам HTML и CSS которые нужны для создания сайтов и уже сможете выполнять довольно серьезные работы в этой области. Мы будем изучать язык гипертекстовой разметки HTML и язык каскадных таблиц стилей CSS. После обучения по программе этого курса вы сможете создавать современную верстку многих элементов сайтов. Мы рассмотрим способы создания таких элементов как: меню, раздел команды, информационные разделы с карточками и многое другое. А так же посмотрим основные инструменты в редакторе Photoshop, которые могут вам пригодиться при верстке сайтов.

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

Курс состоит из трех глав. 1 глава — изучение языка HTML, 2 глава — изучение языка CSS, 3 глава — практическая часть, где мы будем тренироваться на реальных примерах создавать верстку различных фрагментов сайта. Курс рассчитан на самых начинающих разработчиков.

Все уроки и задания из этого курса полностью включены в курс «Frontend разработчик на HTML, CSS и JavaScript», который содержит в себе шесть разных курсов. Подробнее можно ознакомиться на странице курса.

Whom this course is for

Я рекомендую изучать этот курс:

  • Тем, кто хочет научиться создавать сайты своими силами;
  • Тем, кто хочет изучить современные инструментам разработки сайтов;
  • Тем, кто еще не знает язык HTML и CSS, но хочет выучить;
  • Тем, кто хочет стать крутым мастером и зарабатывать деньги.

Initial requirements

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

После обучения на этом курсе, вы можете двигаться дальше. Я бы рекомендовал начать с языка программирования JavaScript в моем курсе «Супер курс по языку JavaScript».

Meet the Instructors

How you will learn

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

Course content

Certificate

Stepik

What you will get

Price

FAQ

How to pay from the company?

Share this course

https://stepik. org/course/101175/promo

Direct link:
https://stepik.org/101175

Инфографический макет почти всего для начинающих

Вы можете узнать что-то новое в любой момент своей жизни, если захотите стать новичком. Если вы действительно научитесь любить быть новичком, перед вами откроется весь мир. – Барбара Шер

С чего-то надо начинать, а?

Начать нелегко. Будь то создание бизнеса, изучение нового навыка или знакомство с новыми людьми, выход из зоны комфорта… ну, неудобно. Многие из нас не хотят уезжать оттуда. Это знакомо. Это уютно. Мы знаем мысли и чувства, обитающие в этой зоне. Мы знаем, какая жизнь существует там.

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

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

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

Эти шаблоны:

1 – Presenta Board

2 – 2015 Резолюция

Начнем!

Использование Presenta Board для представления данных или информации

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

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

Вот как это сделаем мы, и вы тоже сможете, следуя этим простым шагам.

Сначала запустите Piktochart и войдите в свою учетную запись. Когда вы войдете, используйте панель поиска, чтобы найти Presenta Board, и нажмите «Создать». Как только вы это сделаете, не забудьте назвать его!

Следующий очень важный шаг — изменение заголовка. Это то, что привлекает внимание читателя и побуждает его потреблять ваш контент. Просто дважды щелкните заголовок, который есть прямо сейчас, и замените существующий заголовок своим собственным заголовком. Она должна быть короткой, лаконичной и резюмировать суть вашей инфографики!

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

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

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

Продолжаем. Теперь, когда с графическим разделом покончено, нам нужно сосредоточиться на последней части головоломки «контент»: иконок . В Piktochart есть библиотека с тысячами предварительно загруженных иконок. Чтобы изменить их в шаблоне, просто удалите их и используйте значок загрузки слева, чтобы заменить его другим, который вам нравится!

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

Кроме того, если вам не очень нравятся цвета фона, вы также можете изменить их! Это очень просто.

Использование разрешения 2015 года для преобразования списков в красивую инфографику

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

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

Это результат трансформации!

Во-первых, нам нужно выбрать шаблон разрешения 2015 года.

Для начала изменим блок заголовка. Сюда входят заголовок, подзаголовок и цветные значки под ним.

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

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

Второй шаг — добавление цвета в дизайн с помощью некоторых значков. Во-первых, используйте мышь, чтобы выбрать все значки, которые у нас есть, и удалить их. Они не связаны с темой, поэтому не должны быть частью дизайна. Затем вы можете использовать встроенную библиотеку значков Piktochart для поиска значков. В данном случае я искал «еда» и «мясо». я выбрал 9значки, бросил их на свой блок и начал играть с ними — я изменил размер, повернул и переместил их, чтобы сформировать простую, но красивую композицию.

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

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

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

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

Начните творить прямо к зарегистрируйте бесплатную учетную запись Piktochart, чтобы получить неограниченный доступ к творческим и профессиональным шаблонам!

Этот пост является частью сентябрьской серии макетов. Не стесняйтесь проверить это!

Шаблоны, которые пробуждают ваше воображение.

Зарегистрируйтесь бесплатно. Обновите позже.

Создание визуального образа

Начало работы с макетом и текстом

Обзор

Chevron Right

Business

Chevron Right

Entrepreneurship

Предложено

В этом управляемом проекте вы:

Создайте новый документ Adobe InDesign.

Продемонстрировать способность изменять шрифт и функции форматирования.

Продемонстрировать возможность изменения компонентов макета.

1,5 часа

Новичок

Загрузка не требуется

Видео с разделенным экраном

Английский

Только рабочий стол

Этот пошаговый проект: Adobe InDesign для начинающих: Начало работы с Layout & Текст предназначен для людей, которые хотят работать или уже работают в области графического дизайна или для тех, кто заинтересован в создании страниц для книг, журналов, блогов и всех видов цифровых и печатных СМИ.

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

Получите бесплатную подписку на Adobe Creative Cloud.

Учащиеся, успешно прошедшие этот проект Adobe Guided, получат бесплатную месячную подписку на Adobe Creative Cloud.

Навыки, которые вы приобретете

  • Продемонстрируйте умение выбирать шрифт

  • Форматирование текста в документе Adobe InDesign.

  • Adobe Indesign

  • и начните с функций дизайна и форматирования.

  • Продемонстрировать способность изменять компоненты макета.

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

  1. Создайте новый документ Adobe InDesign.

  2. Продемонстрируйте возможность выбора шрифта и начните с функций дизайна и форматирования.

  3. Применяйте цвета к тексту и фигурам самостоятельно.

  4. Потренируйтесь открывать новый документ и выбирать макет и шрифт.

  5. Форматирование текста в документе Adobe InDesign.

  6. Завершите и сохраните меню, которое вы создали для ресторана в Adobe InDesign.

  7. Создать меню для ресторана.

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

Преподаватель на разделенном экране показывает вам пошаговые инструкции

Николь Алвело

8,104 Учащиеся 9000 6

18 Курсы

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

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

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

Вы можете загрузить и сохранить любой из созданных вами файлов из управляемого проекта. Для этого вы можете использовать функцию «Файловый браузер» во время доступа к своему облачному рабочему столу.

Финансовая помощь не предоставляется для управляемых проектов.

Аудит недоступен для управляемых проектов.