Справочник DESIGN/HTML/CSS

Мой Справочник | WEB-DESIGN | Photoshop

Photoshop - Я весь из слоев!

Создание документа - Модуль 1

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

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

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

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

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

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

Текст (T)

Кисть (B)

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

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

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

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

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

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



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

НАСТРОЙКА ПРОГРАММЫ "под себя"
Показать\скрыть элемент\перенести МЕНЮ - ОКНО(Windows)
sRGB (для Web) Цвет (Shift + Ctrl + K) - Рабочие пространства - RGB - выбираем sRGB
(для сохранения файлов растровой графики в этом пространстве)
Цветовая схема (Ctrl + K) Основные настройки - Настройки интерфейса - Выбираем светлую цветовую схему
Пиксели (Ctrl + K) Основные настройки - Единицы измерения и линейки - Выбираем пиксели для текста и линеек
Скриншот программы
PS_view

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

Работа с PSD-макетом (ГОРЯЧИЕ КЛАВИШИ)
ОРИЕНТАЦИЯ ПО МАКЕТУ
100% маштабирование (Ctrl + 1)
Показать макет полностью (Ctrl + 0)
Ручное маштабирование (Alt + scroll)
Прокрутка по горизонтали (Ctrl + scroll)
Быстрая прокрутка по вертикали (Shift + scroll)
Двигать макет (ЛКМ + зажатый пробел)
Показать\убать направляющие (Ctrl + ;)\(Ctrl + H)
Показать\убать линейки (Ctrl + R)
Просмотр - Показать (отображение вспомогательных элементов)
ОБЩЕЕ
Восстановление документа как на последнем сохранении 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)
СЛОИ layers_all
Все слои показаны в панели Слои(Layers) layers
Фильтр слоёв layers_filter
РЕЖИМ НАЛОЖЕНИЯ СЛОЁВ и
ОБЩАЯ НЕПРОЗРАЧНОСТЬ выбранного слоя или папки
В PSD-макетах сайтов используются 2 вида наложения:
1. ПРОПУСТИТЬ\Pass Trought (для папок);
2. ОБЫЧНЫЕ\Normal (для слоёв). 		layers_1
ЗАЛИВКА - общая непрозрачность содержимого слоя и
ПАНЕЛЬ БЛОКИРОВКИ СЛОЁВ 		layers_2
Показать\скрыть слой layers_3
Показать только выбранный слой (Alt + иконка глаза)
Блокировать слой layers_4
Блокировать перемещение слоя layers_5
ИНСТРУМЕНТЫ для СЛОЁВ layers_6
+ Окно "Слои\Layers"
Связать слои (будут перемещаться вместе) layers_7
Эффекты layers_8
Маска layers_9
Корректирующий слой\Слой-заливка layers_10
Создать:
ГРУППУ СЛОЁВ
НОВЫЙ СЛОЙ
УДАЛИТЬ СЛОЙ		 layers_11
layers_12
layers_13
ЭФФЕКТЫ
Двойной клик по названию откроет окно эффектов 		layers_14
Окно эффектов layers_15
Работа с ТЕКСТОМ
Копировать CSS
Позиционирование не потребуется
Цвет в rgba
font-family без типа шрифта
Нет вендерных префиксов на эффектах
Много других свойств отсутствует 		ПКМ на текстовый слой -
Копировать CSS
ВРУЧНУЮ text_ps1 ► text_ps2
ИЗМЕРЕНИЕ РАЗМЕРОВ
ИНСТРУМЕНТ ЛИНЕЙКА
C зажатым Shift - точно по гор. или вер.
L1 - расстояние в пикселях 		liner ► liner2
ИЗМЕРЕНИЕ ЦВЕТА
ИНСТРУМЕНТ ПИПЕТКА
 pipet
ЭКСПОРТ ИЗОБРАЖЕНИЙ
1. Выбираем нужный слой или группу слоёв, которые неообходимо экспортировать, с помощью инструмента "Перемещение" (Move tool) с автовыбором или кликаем по слою ЛКМ (с зажатым Ctrl - выделяем несколько слоёв) move_tool
2. Дублируем слои в новый файл ПКМ - Дубликат слоёв... - Документ: новый, Имя: New
3. Подрезаем изображение Изображение - Тримминг...
4. Экспортируем изображение Ctrl + Alt + Shift + S
или Файл - Сохранить для Web...
5. Выбираем формат, параметры и СОХРАНЯЕМ
Экспорт мелкой графики нарезкой нескольких областей
1. Выбираем инструмент "Раскройка"
2. Выделяем инструментом несколько областей
3. Выбираем инструмент "Выделение фрагмента" и двойным кликом по названию объекта задаём имена ПОЛЬЗОВАТЕЛЬКИХ ОБЛАСТЕЙ
4. Задаём имена АВТОМАТИЧЕСКИХ ОБЛАСТЕЙ (серых, станут синими после задания имён)
5. Ctrl + Alt + Shift + S - ЭКСПОРТИРУЕМ
Убрать выделения: ПРОСМОТР - ПОКАЗАТЬ - СНЯТЬ ВЫДЕЛЕНИЯ 		slize-tool
Экспорт текстур (1-й способ)
- для видимых повторяющихся областей
1. Объединить ВСЕ СЛОИ
2. Увеличиваем масштаб
3. Инструмент "Рамка" (см. выше)
4. Выделяем повторяющийся фрагмент и нажимаем Enter
5. Можно экспортировать 		СЛОИ - ВЫПОЛНИТЬ СВЕДЕНИЕ
Экспорт текстур (2-й способ)
- если нет явного фрагмента повторения
1. Выбираем слой содержащий текстуру инструментом "Перемещение"
2. Увеличиваем и обрезаем "Рамкой" размером 50х50 или 100х100 пикселей - Галочка
3. Экспортируем
ОПЕРАЦИИ (Action)
Инструмент для автоматизации процессов в PS
 action
Горячие клавиши
Новый файл (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, переместить между слоями
Рамка Можно изменять размеры холста

Разработчик: Евгений Леухин
EvgenyLeukhin@yandex.ru

© 2016 - 2021