Заказать звонок
Заказ обратного звонка

Настройки Photoshop для Front-End разработчиков.


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

1. Редактирование - Настройка цветов (Shift + Ctrl + K).
Самое важная настройка здесь - в пункте RGB должно стоять sRGB.
sRGB является цветовым пространством стандартного монитора и установлено рабочим пространством по умолчанию в большинстве цифровых камер потребительского класса.

Некоторые в выпадающем списке Настройки выбирают пункт Заказная и выставляют свои параметры, некоторые выбирают Web/Интернет для Северной Америки, некоторые Web/Интернет для Европы 2, некоторые выбирают Универсальные настройки для Европы. Отличаются все эти варианты настройками CMYK, Градации серого и Плашка. Но параметр RGB одинаков для всех - это sRGB.

2. Редактирование - Настройки (Ctrl + K) - Единицы измерения и линейки
Единицы измерения выбираем пиксели.

3. Просмотр - Варианты цветопробы - Internet standart RGB (sRGB).
Просмотр - ставим галочку возле Линейки. Правой кнопкой мыши кликаем на линейке и убеждаемся, что выбраны пиксели.
Очень часто, особенно при создании спрайтов я использую быстрые направляющие и отображение границы слоя.
Просмотр - Показать Границу слоя.
Просмотр - Быстрые направляющие.

4. Создание своей рабочей среды.
Закройте все ненужные панели. Необходимые панели для фронтенда - Слои, Символ, Инфо и История.
Окно - Рабочая среда - Новая рабочая среда. Назовите ее по своему усмотрению, например FrontEnd.

5. Сочетание клавиш.
Для быстрой работы необходимо запомнить сочетание клавиш для инструментов и операций, наиболее часто выполняемых в верстке макета.

Tab — Показ/скрытие всех панелей
Shift + Tab - Отображение/скрытие всех панелей, кроме панели инструментов и панели параметров

Выделение и перемещение
Ctrl + D — снять выделение.
Клавиша M - Инструмент прямоугольного и эллиптического выделения
Ctrl (кроме случаев использования инструментов «Рука», «Фрагмент», «Контур», «Форма» или «Перо») - Переключение на инструмент «Перемещение»
Клавиша V - инструмент «Перемещение».

Перемещение на 1 пиксел:
Любая выделенная область + «Стрелка вправо», «Стрелка влево», «Стрелка вверх» или «Стрелка вниз»
или
Инструмент «Перемещение» + «Стрелка вправо», «Стрелка влево», «Стрелка вверх» или «Стрелка вниз»
Перемещение слоя без выделения на 1 пиксел - «Ctrl» + «Стрелка вправо», «Стрелка влево», «Стрелка вверх», «Стрелка вниз»
Во всех вышеперечисленны случаях для перемещения на 10 пикселов зажмите Shift.

Пробел (не в режиме редактирования текста) - инструмент Рука

Сtrl + колесо — скролл по горизонтали.

Масштабирование
Ctrl + 0 — вписать макет в рабочую область.
Ctrl + 1 — установка масштаба 100%.
Alt + колесо мыши — масштабирование в обе стороны от курсора.
Ctrl + Пробел - Увеличение масштаба
Alt + Пробел - Уменьшение масштаба

Обзор всего документа
Удерживайте H + Клик и не отпускайте кнопку мыши. Это быстрый способ подогнать всю картинку под размер окна.
Если увеличен масштаб, оень удобно передвигаться по документу, удерживая клавишу H и зажав левую кнопку мыши — документ масштабируется так, что будет виден целиком, при этом появляется рамочка. Если перетащить рамку мышкой в нужную область и отпустить - окажитесь в этой области с выбранным ранее масшатабом.

Ctrl + T - свободная трансформация. Если в этом режиме кликнуть правой клавишей мыши, доступны все опции трансформации.

История
Ctrl + Z — отмена последнего действия
«Ctrl» + «Shift» + «Z» - Переход по состояниям изображения вперед
«Ctrl» + «Alt» + «Z» - Переход по состояниям изображения назад

Слои
«Ctrl» + «G» - Группирование слоев
«Ctrl» + «Shift» + «G» - Разгруппирование слоев
«Ctrl» + «Alt» + «A» - Выделение всех слоев
Объединение слоев - Выделите слои, которые требуется объединить, затем нажмите «Ctrl» + «E»
Отображение/скрытие слоя, группы слоев или всех слоев/групп слоев - Правой кнопкой мыши щелкните значок просмотра (глаз)
Отображение/скрытие всех остальных видимых слоев - Щелкните значок просмотра, удерживая нажатой клавишу «Alt»

Измерение расстояния и размеров элементов.
1 способ - инструментом «Прямоугольная область» (М) выделяем необходимый блок. Смотрим на панель «Инфо».
2 способ - с помощью инструмента Линейка. Кликнуть и провести линию от начала до конца нужного фрагмента. При этом в панели настроек отобразится измеренное расстояние. Если зажать Shift измеритель перемещается строго горизонтально, строго вертикально или под 45°. Минус данного способа: имзерять ширину и высоту придется по отдельности.

Определение цвета.
Не забудьте в настройках Размер образца поставить Точка.
Инструментом «Пипетка» кликнуть на необходимый элемент.
Выбранный цвет отобразится на панели инструментов в палитре цветов и на панели Символ в графе Цвет.
Чтобы скопировать цвет, не обязательно запускать Палитру цветов, проще нажать правую кнопку мыши и выбрать Копировать шестнадатиричный цвет кода - скопируется только цвет в HEX без решетки ffffff, или копировать как HTML - в этом случае получим запись типа color="#ffffff".

Определение шрифтов.
Чтобы определить все используемые шрифты в макете в начале верстки, воспользуйтесь фильтром в поиске слоев.
Панель Слои - В поле поиска выберите Вид, далее возле поля поиска выбираем T - отобразятся все текстовые слои макета. Пройдитесь по ним и посмотрите какие шрифты вам нужно будет подключать к проекту.

Удачи! В следующей статье я расскажу как с помощью генератора изображений ускорить процесс подготовки изображений для проекта.

Увеличиваем скорость Photoshop в веб-разработке. Стилизация рейтинга товара звездочками на HTML и CSS

Комментарии

Пока нет комментариев

Оставить комментарий
.