Настройки 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 - отобразятся все текстовые слои макета. Пройдитесь по ним и посмотрите какие шрифты вам нужно будет подключать к проекту.
Удачи! В следующей статье я расскажу как с помощью генератора изображений ускорить процесс подготовки изображений для проекта.