Skip to main content

Редакторы

Photoshop​

Для вёрски сайтов по PSD-макету в программе Photoshop html-верстальщику достаточно двух элементов:

  • Слои (Layers) - для работы со слоями
  • Символы (Character) - для работы с текстом

НАСТРОЙКИ​

Кастомизация​

  • sRGB (для Web)

    Цвет (Shift + Ctrl + K) - Рабочие пространства - RGB - выбираем sRGB (для сохранения файлов растровой графики в этом пространстве)

  • Цветовая схема

    (Ctrl + K) Основные настройки - Настройки интерфейса - Выбираем светлую цветовую схему

  • Пиксели

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

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

  • Восстановление документа как на последнем сохранении F12
  • Экспорт для web (Ctrl + Shift + Alt + S)
  • Показать сетку (Ctrl + ')
  • Создать новый документ (Ctrl + N)
  • Save (Ctrl + S)
  • Close (Ctrl + W)
  • Copy (Ctrl + C)
  • Paste (Ctrl + V)
  • Cut (Ctrl + X)
  • Отмена предыдушего изменения (Ctrl + Z)
  • Отмена изменений, начиная с последнего (Ctrl + Alt + Z)
  • Показать только выбранный слой (Alt + иконка глаза)
  • Новый файл (Ctrl + N)
  • Ширина 1900px
  • Высота 3000 - 4000px
  • Разрешение 72 px\"
  • Линейки - Направляющие Ctrl + R
  • Трансформация объекта Ctrl + T
  • Фигуры U + Shift
  • Перемещение V
  • Точечное выделение A
  • Работа с текстом T
  • Копирование объектов V, Alt зажатый + ЛКМ зажатая
  • Непрозрачность клавиши [1]...[0]
  • Выравнивание нескольких элементов. Выделяем инструментом перемещение и в верхнем меню есть много всяких выравниваний
  • Группировка слоёв. Выделяем несколько слоёв и нажимаем Ctrl + G
  • Разруппировка слоёв. Ctrl + Shift + G
  • Подрезающая маска. Выделить слой, зажать Alt, переместить между слоями
  • Рамка. Можно изменять размеры холста

Actions​

Инструмент для автоматизации процессов в PS

ДОКУМЕНТ​

Создание документа​

  • Открываем Photoshop -> Создать
  • 1920 х 1080 пикселей, 72 пикселя/на дюйм стандарт, 144 - ретина, 300 - для печати
  • Рамка - Может изменять размеры холста
  • Ctrl + T (transform) - можно редактировать размеры слоя (Enter для сохранения)
  • Фигура -> кликаем - 1170px (для разлиновки контентной области)
  • Цветовой профиль -> RGB или sRGB
  • Слои, символ и свойства все, что нужно, остальное можно убрать
  • Tab - посмотреть макет
  • Ctrl + R - Линейка (отмечаем центр)
  • Ctrl + H - Скрывать-показывать направляющие
  • Ctrl + D - Снять выделение
  • Слои можно выбирать не только в меню слоёв, но и ПКМ с инсрументом перемещение
  • Дублировать слой - Ctrl + J или Alt + ЛКМ
  • Чем выше слой - тем он важнее для пользователя
  • Растровые изображения при трансформации меняют разрешение (если мы уменьшим картинку, сохраним, а потом опять увеличим, то она будет плохого качества), чтобы такого не было нужно преобразовывать в смарт-объект
  • Текст (Т) связан с символом
  • Слои можно выделять через Shift и объединять в группы (Ctrl + G)
  • Можно выделить текстовый слой (или группу) и через Shift выделить слой фона, и выбрав инструмент Перемещения(V), осуществлять выравнивание текста по этому фону
  • Ctrl + Shift + Alt + E (создать слой-скриншот всех слоёв)
  • Ctrl + Shift + N (создать новый слой)

Навигация​

  • Панель инструментов (СЛЕВА)
  • Выбранный цвет (СЛЕВА СНИЗУ)
  • Настройки активного инструмента (СВЕРХУ)
  • Доп. панели (СПРАВА)

Ориентация по макету​

  • 100% маштабирование (Ctrl + 1)
  • Показать макет полностью (Ctrl + 0)
  • Ручное маштабирование (Alt + scroll)
  • Прокрутка по горизонтали (Ctrl + scroll)
  • Быстрая прокрутка по вертикали (Shift + scroll)
  • Двигать макет (ЛКМ + зажатый пробел)
  • Показать\убрать направляющие (Ctrl + ;) и (Ctrl + H)
  • Показать\убрать линейки (Ctrl + R)
  • Просмотр - Показать (отображение вспомогательных элементов)

Создание слоя-маски​

  • Создаём слой-картинку
  • Создаём слой-текст
  • Размещаем текст под катинкой
  • Нажимаем на слой-текст, зажимаем Alt и наводим в разрез между слоями

ИЗОБРАЖЕНИЯ​

Кроп изображений​

  • Линуем направляющие
  • Выделяем инструментом Прямоугольная область (М)
  • Копируем в новый слой Ctrl + J
  • Исходный слой можно удалить

Вырезка изображений (обтравка)​

  • Инстремент Перо (P)
  • Выделяем контур до замыкания (можно изгибать линии с помощью клавиши Ctrl)
  • Окно -> Контуры -> Круглый пунктирный значок
  • Копируем в новый слой Ctrl + J
  • Исходный слой можно удалить
  • Можно также использовать Ластик (Е) или Лассо (L) вместо пера

Вырезка из изображений с однотоным фоном​

  • Удаляем однотонный фон: Растируем слой -> Волшебная палочка -> Delete
  • Выделяем контур изображения: Ctrl + кликаем на иконку слоя слева от названия
  • Модифицируем выделение: Выделение -> Модификация -> Сжать -> 1px
  • Удаляем контур обводки с артефактами: Выделение -> Инверсия -> Delete

Простая обработка изображений​

  • O - Осветвитель \ затемнитель (Выставлять лучше настройку экспозиции 30%)
  • Ctrl + U - Цветовой тон \ насыщенность
  • Ctrl + B - Цветовой баланс
  • Фильтры (Фильтр -> Выбор фильтра)
    • Размытие (blur)
    • Шум
    • Усиление резкости

Экспорт изображений​

  1. Выбираем нужный слой или группу слоёв, которые неообходимо экспортировать, с помощью инструмента "Перемещение" (Move tool) с автовыбором или кликаем по слою ЛКМ (с зажатым ```Ctrl - выделяем несколько слоёв)

  2. Дублируем слои в новый файл. ПКМ - Дубликат слоёв... - Документ: новый, Имя: New

  3. Подрезаем изображение. Изображение - Тримминг...

  4. Экспортируем изображение. Ctrl + Alt + Shift + S или Файл - Сохранить для Web...

  5. Выбираем формат, параметры и СОХРАНЯЕМ

Экспорт мелкой графики нарезкой нескольких областей​

  1. Выбираем инструмент "Раскройка"
  2. Выделяем инструментом несколько областей
  3. Выбираем инструмент "Выделение фрагмента" и двойным кликом по названию объекта задаём имена ПОЛЬЗОВАТЕЛЬКИХ ОБЛАСТЕЙ
  4. Задаём имена АВТОМАТИЧЕСКИХ ОБЛАСТЕЙ (серых, станут синими после задания имён)
  5. Ctrl + Alt + Shift + S - ЭКСПОРТИРУЕМ Убрать выделения: ПРОСМОТР - ПОКАЗАТЬ - СНЯТЬ ВЫДЕЛЕНИЯ

Экспорт текстур (1-й способ)​

Для видимых повторяющихся областей

  1. Объединить ВСЕ СЛОИ
  2. Увеличиваем масштаб
  3. Инструмент "Рамка" (см. выше)
  4. Выделяем повторяющийся фрагмент и нажимаем Enter
  5. Можно экспортировать

СЛОИ - ВЫПОЛНИТЬ СВЕДЕНИЕ

Экспорт текстур (2-й способ)​

Eсли нет явного фрагмента повторения

  1. Выбираем слой содержащий текстуру инструментом "Перемещение"
  2. Увеличиваем и обрезаем "Рамкой" размером 50х50 или 100х100 пикселей - Галочка
  3. Экспортируем

ИНСТРУМЕНТЫ и ОПЕРАЦИИ​

Линейка​

ИНСТРУМЕНТ ЛИНЕЙКА C зажатым Shift - точно по гор. или вер. L1 - расстояние в пикселях

Текст (T)​

Не нужно пользоваться встроенным изменением начертания текста в PS (будет искусстенно изменяться), нужно изменять само начертание шрифта

Кисть (B)​

Также мощный инструмент можно пользоваться для декоррирования, выбирая различные формы и наложение фильтров. Для эффектов лучше выбирать минимальную жеткость

Перо (P) - создание фигур​

  • Выбиаем Перо (P), указываем сверху Фигура
  • Создаём узловые точки контура фигуры, соединяем в замкнутую область

Можно создавать разлиные контуры, эффекты волн и различных геометрических фигур. Создать замкнутый контур -> ПКМ -> Выделение области

Создание тени​

  • Создание тени - Эллипс -> Растрировать слой -> Фильтр -> Размытие -> Размытие по Гаусу (настраиваем радиус размытия)
  • Стиль слоя -> Тень (2 вариант)

Как заливать замкнутые области в иконках​

  • Выделяем слой - Выделение контура (А)
  • Кликаем на иконку слоя с зажатым Ctrl, и будет выделен контур фигуры
  • Выделяем контур фигуры
  • Дублируем слой -> Делаем заливку
  • Исходный слой удаляем

Figma​

figma.com - бесплатный графический онлайн-редактор (интеграция с google при логине)

Есть десктопное приложение (скачать).

Старт проекта​

В этом редакторе весь дизайн можно хранить на одном полотне.

New project -> New file (or Import Scetch, Jpeg, Png)

  • Создаём нужные фреймы (F)
  • Создаём колоночную сетку при необходимости (Layout grid)
  • Настраиваем сетку

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

  • Frame (F)
  • Экспорт (Ctrl + Shift + E)
  • Pick color tool (I)
  • Линейки (Shift + R)
  • Клонирование (Alt + ЛКМ)
  • Set Default Styles (Ctrl + Alt + X)
  • Copy Styles (Ctrl + Alt + C)
  • Paste Styles (Ctrl + Alt + V)

Вернуться к каталогу проекта​

Menu ---> Back to Files

Illustrator​

Монтажная область​

  • Инстумент Монтажная область Shift + O;
  • Можно создавать несколько монтажных областей в одном файле (несколько холстов);

Выделение областей​

  • Для выделения слоя или нескольких слоёв нужно нажать на кружок, снятие выделения Ctrl + ЛКМ;
  • Также можно выделять инструментом Выделение (V), сбрасывать - кликнув в свободное место;

Перерисовка в векторе​

  • Создаём документ
  • Вставляем изображение
  • Рисуем
  • Выделяем Ctrl + A -> Файл -> Экспортировать выделенные элементы -> Формат: SVG

Avacode​

avocode.com - удобный веб-инструмент для вёрстки страниц

Есть десктопное приложение (скачать).

Есть триальный бесплатный период (годовое пользование $14).

Можно использовать temp-mail.org для Trial-use Как пользоваться:

  • Залогиниться
  • Создать проект
  • Импортировать дизайн (Sketch, Photoshop, Adobe XD, Illustrator, Figma)
  • Выделить элемент, копировать стили, текст, импортировать графику

С ним лучше всего работать, когда нужно верстать, и есть готовый дизайн

Gimp​

Бесплатный графический редактор в Linux (может открывать psd-файлы).

  • Панель инструментов Ctrl + B
  • Кадрировать изображение Shift + C