Урок 9. «Знакомство с Photoshop» — HTML и CSS

Курс: Веб-программирование, урок 9 из 12
Тема по программе: Знакомство с Adobe Photoshop
Инструменты: текстовый редактор Sublime Text с плагином Emmet и браузер; в модуле 3 — Adobe Photoshop
Формат: подробный конспект в Word со скриншотами; к модулям 2 и 3 — готовые файлы проекта

Это сокращённое описание урока. Полные материалы — в курсе «Веб-программирование». Первый урок курса целиком можно скачать бесплатно в разделе «Бесплатно».

Цель урока

Научиться готовить изображения для вёрстки из PSD-макета.

Что делаем на уроке

Папка проекта, index.html с заголовком Tourism и main.css.
Открываем PSD-макет в Photoshop, вкладка «Слои».
Слой — в смарт-объект, дубликат — в новый документ.
«Изображение → Тримминг» — обрезка пустых краёв.
Сохранение для веба в JPEG в папку img.
Так же вырезаем остальные изображения галереи.
Шрифт из макета — в папку fonts.

Что объяснить детям

PSD — файл Photoshop со слоями. Верстальщик достаёт из него картинки, цвета, шрифты и размеры.
Тримминг обрезает прозрачные или однотонные поля вокруг изображения.

Что в полном комплекте

12 конспектов занятий со скриншотами — по одному на урок
Методика проведения с подробным описанием хода урока
Готовые файлы проекта к модулям 2 и 3 — если группа отстаёт, не нужно собирать проект с нуля

Предыдущий урок — Галерея: анимация и публикация. Следующий — Разметка сайта по макету. Все уроки курса: Что такое веб-разработка · Основные HTML-теги · Знакомство с CSS · Вёрстка страницы блога · Фотогалерея: разметка · Фотогалерея: отступы и стили · Позиционирование: display и flex · Галерея: анимация и публикация · Разметка сайта по макету · Вёрстка экранов на flexbox · Завершение сайта и публикация.