
Фотошоп для верстальщика. Бесплатный мини-курс.
Три коротких видео, которые помогут разобраться в основных принципах работы с фотошопом для вёрстки.
«Фотошоп для верстальщика» — это одна из тем большого курса «Базовый 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
Выводы
Чтобы эффективно использовать Фотошоп для вёрстки, нужно выполнить четыре действия:
- Настроить рабочую область максимально удобно под себя.
- Разобраться, как работают те инструменты, которые будете использовать при вёрстке макета.
- Использовать горячие клавиши, чтобы повысить скорость работы в Фотошопе.
- Больше практиковаться, чтобы выполнять действия на автомате.
Если у вас остались вопросы по теме или вы хотите её дополнить собственными наблюдениями, — добро пожаловать в комментарии.