Содержание

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

«Фотошоп для верстальщика» — это одна из тем большого курса «Базовый 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). Это «перемещение», «выделение», «пипетка» и «ввод текста» — те инструменты, которые мы оставили на рабочей области в первом видео.

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

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