Основы работы верстальщика с фотошопом

483

Тем, кто только осваивает основы разработки html-верстки, будет полезно узнать, как правильно работать в Adobe Photoshop, какие возможности и инструменты есть у данной программы.

Работа с картинками

Зная правила работы с картинками, можно избежать перегрузки сайта и обеспечить высокую скорость загрузки. Самый простой метод работы с изображениями, состоящими из геометрических фигур, — описывание при помощи CSS. Если нет возможности его использовать, достаточно вырезать изображение из макета. Для того, чтобы извлечь картинку из макета, необходимо найти слой и в появившемся меню выбрать пункт создания дубликата слоя, после чего нажать на строку «Новый».

Основы работы верстальщика с фотошопом

Далее нажимаем на клавишу Ctrl и одновременно кликаем по иконке выбранного слоя с изображением. Он будет выделен пунктирной линией.

Основы работы верстальщика с фотошопом

Слева нажимаем на «Рамка» и кликаем по Enter. Последний этап – сохранение изображения. Преимущественно это делают в формате JPEG и PNG-24. В зависимости от версии фотошопа сохранение производится либо комбинацией Файл -> Экспортировать -> Сохранить для Web, либо Файл -> Сохранить для Web.

Сохранение изображений в формате SVG

Для сохранения картинок в данном формате кликаем правой клавишей мышки в любом месте экрана и нажимаем на пункт «Экспортировать как…».

Основы работы верстальщика с фотошопом

В открывшемся меню устанавливаем нужный нам формат (SVG) и выбираем пункт «Экспортировать всё». Обратите внимание, что изображение должно быть в одном экземпляре.

Основы работы верстальщика с фотошопом

Другие инструменты

1. Font-family, font-size, line-height, color.

Для получения информации по этим инструментам нужно 2 раза нажать на слой с текстом. После приведения его в активное состояние можно будет найти данные о первых двух компонентах вверху, а по третьему – в пункте «Символ». Стандартно он находится справа. Можно вызвать окно комбинацией Окно – Символ.

Основы работы верстальщика с фотошопом

2. Margin и padding.

Чтобы получить информацию о размерах объекта (его ширине или высоте), нужно активировать инструмент «Прямоугольная область». Узнать расстояние в пикселях можно, потянув курсор в нижнюю или левую сторону. Чтобы выдержать параметры всего макета, рационально установить расширение PerfectPixel, которое легко скачивается из Гугл Хром.

3. Opacity.

Этот инструмент отвечает за прозрачность элементов в css. Фотошоп предоставляет возможность отображение и непрозрачных элементов. Для этого нажимаем на слой, отвечающий за прозрачность, и прописываем значение opacity: 0.9 в окне «Слои». Значение 0.9 условное. Оно отображает процент прозрачности элемента. В данном случае это 90%. Чтобы задать, к примеру, прозрачность в 40%, прописываем в opacity значение 0.4.

Основы работы верстальщика с фотошопом

Горячие клавиши

Горячие клавиши предназначены для оптимизации и ускорения работы в Фотошопе. Они избавляют от необходимости совершения лишних действий. Так, для масштабирования используются клавиши Ctrl + «-« (для уменьшения), Ctrl + «+» (для увеличения) и Ctrl + «1» (для получения масштаба 100%).

Чтобы продублировать слой, используется комбинация Ctrl + J. Для работы с кистями предназначены клавиши Ctrl + [ (уменьшает её размер) и Ctrl + ] (увеличивает).

Для отмены совершённого действия (возврата к предыдущему шагу) используется комбинация Ctrl + Alt + Z. Чтобы сделать отмену (перейти к следующему шагу), нажмите Ctrl + Shift + Z. Для перехода в меню размера изображения нажмите Ctrl + Alt + I. Это основные горячие клавиши, которые должен выучить каждый начинающий верстальщик.

Ребята, мы вкладываем душу в MoeDobro.com. Спасибо за то, что открываете новые горизонты вместе с нами. Спасибо за вдохновение и поддержку. Присоединяйтесь к нам в FaceBook
Джамал

Founder MoeDobro.com Серийный предприниматель. Спикер.

Leave a Reply