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

«Фотошоп для верстальщика» — это одна из тем большого курса «Базовый Frontend: HTML и CSS». Но в итоге она отпочковалась и превратилась в самостоятельный мини-курс.

Photoshop — громоздкий и сложный инструмент. Но если сосредоточиться только на нужном функционале для верстальщика, его можно освоить за час.

Как настроить фотошоп для верстальщика

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

Посмотрите видео и настройте рабочую область под себя. Уберите всё лишнее и оставьте только то, что пригодится для превращения макета photoshop в страницу html с нормальным css.

Дополнение к видео из комментариев

Ещё в настройках нужно изменить единицы измерения из пунктов в пиксели. Это же важно.

Настройка единиц измерения в Photoshop на Windows:
Edit — Preferences — Units & Rulers на Винде.

Настройка единиц измерения в Photoshop на MacOS:
Photoshop — Preferences — Units & Rulers

Обзор инструментов Фотошопа для верстальщика

Для того, чтобы сверстать HTML-страницу из PSD-макета, нужно всего 4 инструмента: Move tool (V), Rectangular Marquee tool (M), Eyedropper tool (I) и Horizontal Type tool (T). Это «перемещение», «выделение», «пипетка» и «ввод текста» — те инструменты, которые мы оставили на рабочей области в первом видео.

Во втором видео детально рассмотрим, как инструменты работают и как ими эффективней пользоваться, чтобы быстрее превратить макет в свёрстанную страницу.

Фотошоп для верстальщика на практике

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

Рекомендуется не только смотреть теорию, но и выполнять происходящее на экране. С таким подходом вы быстрее освоите фотошоп, да и практика в вёрстке лишней не будет 😉

Ссылка на исходные файлы для практической работы: http://bit.ly/31hAVVk

Выводы

Чтобы эффективно использовать Фотошоп для вёрстки, нужно выполнить четыре действия:

1. Настроить рабочую область максимально удобно под себя.
2. Разобраться, как работают те инструменты, которые будете использовать при вёрстке макета.
3. Использовать горячие клавиши, чтобы повысить скорость работы в Фотошопе.
4. Больше практиковаться, чтобы выполнять действия на автомате.

Если у вас остались вопросы по теме или вы хотите её дополнить собственными наблюдениями, — добро пожаловать в комментарии.